Glsl 如何在铯中创建虚线箭头

铯有实心箭头（）和虚线（）。我想将两者结合起来制作一个多段线DashArrow（带虚线填充的箭头，或带箭头的虚线）

听起来这应该是可能的使用铯的。虽然我认为我需要添加一个GLSL，比如和。（Fabric页面没有说明如何添加用于源的自定义GLSL）

---

这看起来应该很容易做到，但我找不到任何其他人试图做到这一点的信息。

所以，这应该是直截了当的。但有一个小问题，你不希望破折号打断箭头本身。箭头应该始终是实心的，否则看起来会出错

我遇到的最大问题是，破折号材质不仅将破折号之间的间隙标记为透明，实际上还将其标记为丢弃。好消息是，这是通过一个布尔值（而不是原始的

discard

关键字）完成的，该布尔值可以再次变为false，以防止这些间隙中断箭头

所以我不得不做一些欺骗来禁用dashMaterial的丢弃，但是我让它工作了

以下是我最终得到的结果：

该演示的代码如下所示：

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

// Create sample polyline primitive.
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
    positions : Cesium.PolylinePipeline.generateCartesianArc({
        positions : Cesium.Cartesian3.fromDegreesArray([-110.0, 42.0,
                                                        -85.0, 36.0,
                                                        -100.0, 25.0,
                                                        -77.0, 12.0])
    }),
    width : 15.0
});

// Assign a new fabric material blend of arrow and dashes.
polyline.material = new Cesium.Material({
    fabric : {
        materials : {
            // The arrowMaterial provides the color and overall shape.
            arrowMaterial : {
                type : 'PolylineArrow',
                uniforms : {
                    color : Cesium.Color.YELLOW
                }
            },
            // The dashMaterial will punch holes in the arrowMaterial.
            // Uniforms could be added to control the dash parameters.
            dashMaterial : {
                type : 'PolylineDash',
            },
            // "headMaterial" is copy-paste of the arrow head size code, written to alpha.
            // It is used to mask out the dashes, to keep them from destroying the arrow head.
            // A small tail is included behind the arrow head, to keep it from becoming a triangle.
            headMaterial : {
                source :
                'czm_material czm_getMaterial(czm_materialInput materialInput) { \n' +
                '    czm_material material = czm_getDefaultMaterial(materialInput); \n' +
                '    vec2 st = materialInput.st; \n' +
                '#ifdef GL_OES_standard_derivatives \n' +
                // Original multiplier "10.0" changed to "15.0" to add short tail to head.
                '    float base = 1.0 - abs(fwidth(st.s)) * 15.0 * czm_pixelRatio; \n' +
                '#else \n' +
                '    float base = 0.975; // 2.5% of the line will be the arrow head \n' +
                '#endif \n' +
                '    material.alpha = 1.0 - smoothstep(base - 0.0001, base, st.s); \n' +
                '    return material; \n' +
                '} \n'
            }
        },
        // Finally, the "alpha" contains a cheat, where we undo czm_discard from the dashMaterial.
        components : {
            diffuse : 'arrowMaterial.diffuse',
            alpha : 'arrowMaterial.alpha * (1.0 - (headMaterial.alpha * (1.0 - dashMaterial.alpha))); czm_discard = false'
        }
    }
});

艾马克的变种。更多的手动操作，因为它合并了箭头和破折号GLSL，而不是使用简单的织物混合（并在箭头逻辑中添加一条线以锁定使用的颜色）。这允许使用虚线多色效果。这是sandcastle和下面使用的代码。（请注意，这仍然只是材质基本体，不能用作实体中的材质属性）

var-viewer=新的铯查看器（“铯容器”）；
var scene=viewer.scene；
var PolylineDashArrowSource='0\
#ifdef GL_OES_标准_衍生品\n\
#扩展GL\U OES\U标准\U衍生工具：启用\n\
#endif\n\
\n\
vec4颜色均匀\n\
均匀vec4色差\n\
均匀浮动长度\n\
均匀浮动模式\n\
\n\
可变浮动v_多段线角度\n\
可变浮动v_宽度\n\
\n\
常量浮点掩码长度=16.0\n\
\n\
mat2旋转（浮动半径）{\n\
浮点数c=cos（rad）；\n\
浮点数s=sin（rad）；\n\
返回mat2（\n\
c、 s，\n\
-s、 c\n\
)；\n\
}\n\
\n\
浮点getPointOnLine（vec2 p0、vec2 p1、浮点x）\n\
{\n\
浮动斜率=（p0.y-p1.y）/（p0.x-p1.x）；\n\
返回斜率*（x-p0.x）+p0.y；\n\
}\n\
\n\
czm_材料czm_获取材料（czm_材料输入材料输入）\n\
{\n\
czm_材料材料=czm_获取默认材料（材料输入）；\n\
\n\
vec2 pos=旋转（v_多段线角度）*gl_FragCoord.xy；\n\
\n\
//获取破折号内从0到1的相对位置\n\
float dashPosition=fract（位置x/（dashLength*czm\u像素比率））；\n\
//找出掩码索引。\n\
float maskIndex=地板（dashPosition*maskLength）；\n\
//测试位掩码。\n\
float maskTest=floor（dashPattern/pow（2.0，maskIndex））；\n\
vec4 fragColor=（mod（maskTest，2.0）<1.0）？gapColor:color；\n\
\n\
vec2 st=materialInput.st；\n\
\n\
#ifdef GL_OES_标准_衍生品\n\
浮动基准=1.0-绝对值（fwidth（st.s））*10.0*czm_像素比率；\n\
#其他\n\
float base=0.975；//线的2.5%将是箭头\n\
#endif\n\
\n\
vec2中心=vec2（1.0,0.5）；\n\
float ptOnUpperLine=getPointOnLine（vec2（base，1.0），center，st.s）；\n\
float ptOnLowerLine=getPointOnLine（vec2（基准，0.0），中心，圣·斯）；\n\
\n\
浮动半宽度=0.15；\n\
浮点数s=阶跃（0.5-半宽，st.t）；\n\
s*=1.0-阶跃（0.5+半宽，st.t）；\n\
s*=1.0-阶跃（基阶，st.s）；\n\
\n\
float t t=阶跃（基准，物料输入标准）；\n\
t*=1.0-阶跃（ptOnUpperLine，st.t）；\n\
t*=阶跃（ptOnLowerLine，st.t）；\n\
\n\
//查找距离最近的分隔符（两种颜色之间的区域）的距离\n\
浮动区；\n\
如果（st.s<基础）\n\
{\n\
如果（fragColor.a<0.005）{//匹配0/255和1/255\n\
丢弃；\n\
}\n\
浮点数d1=abs（st.t-（0.5-半宽））；\n\
浮动d2=绝对值（标准t-（0.5+半宽））；\n\
距离=最小值（d1，d2）；\n\
}\n\
其他\n\
{\n\
fragColor=颜色；\n\
浮点d1=czm_无穷大；\n\
如果（st.t<0.5-半宽和&st.t>0.5+半宽）\n\
{\n\
d1=abs（不锈钢底座）；\n\
}\n\
浮点数d2=abs（st.t-ptOnUpperLine）；\n\
浮动d3=绝对值（st.t-ptOnLowerLine）；\n\
dist=min（min（d1，d2，d3）；\n\
}\n\
\n\
vec4 outsideColor=vec4（0.0）；\n\
vec4 currentColor=mix（outsideColor，fragColor，clamp（s+t，0.0，1.0））；\n\
vec4 outColor=czm_antialas（outsideColor，fragColor，currentColor，dist）；\n\
\n\
outColor=czm_gammaCorrect（outColor）；\n\
material.diffuse=outColor.rgb；\n\
material.alpha=outColor.a；\n\
退回物料；\n\
}';
var PolylineDashArrowType='PolylineDashArrow'；
铯材料[PolylineDashArrowType]=PolylineDashArrowType；
铯.材料._材料缓存.添加材料（多段线dasharrow类型{
严格：是的，
面料：{
类型：PolylineDashArrowType，
制服：{
颜色：铯。颜色。白色，
gapColor:Ce.颜色.透明，
短划线长度：16.0，
dashPattern:255.0
},
来源：PolylineDashArrowSource
},
半透明的：真的
});
var polylines=scene.primitives.add（new Cesium.PolylineCollection（））；
var polyline1=polylines.add({
位置：铯。碳原子3。从摄氏度阵列（[-110.0,42.0，
-85.0, 36.0,
-100.0, 25.0,
-77.0, 12.0]),
宽度：16，
材料：铯。材料。fromType（PolylineDashArrowType{
颜色：铯，颜色，红色，
gapColor:铯.颜色.透明
})
});
var polyline2=polylines.add({
位置：铯。汽车
var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var PolylineDashArrowSource = '\
#ifdef GL_OES_standard_derivatives\n\
#extension GL_OES_standard_derivatives : enable\n\
#endif\n\
\n\
uniform vec4 color;\n\
uniform vec4 gapColor;\n\
uniform float dashLength;\n\
uniform float dashPattern;\n\
\n\
varying float v_polylineAngle;\n\
varying float v_width;\n\
\n\
const float maskLength = 16.0;\n\
\n\
mat2 rotate(float rad) {\n\
    float c = cos(rad);\n\
    float s = sin(rad);\n\
    return mat2(\n\
        c, s,\n\
        -s, c\n\
    );\n\
}\n\
\n\
float getPointOnLine(vec2 p0, vec2 p1, float x)\n\
{\n\
    float slope = (p0.y - p1.y) / (p0.x - p1.x);\n\
    return slope * (x - p0.x) + p0.y;\n\
}\n\
\n\
czm_material czm_getMaterial(czm_materialInput materialInput)\n\
{\n\
    czm_material material = czm_getDefaultMaterial(materialInput);\n\
\n\
    vec2 pos = rotate(v_polylineAngle) * gl_FragCoord.xy;\n\
\n\
    // Get the relative position within the dash from 0 to 1\n\
    float dashPosition = fract(pos.x / (dashLength * czm_pixelRatio));\n\
    // Figure out the mask index.\n\
    float maskIndex = floor(dashPosition * maskLength);\n\
    // Test the bit mask.\n\
    float maskTest = floor(dashPattern / pow(2.0, maskIndex));\n\
    vec4 fragColor = (mod(maskTest, 2.0) < 1.0) ? gapColor : color;\n\
\n\
    vec2 st = materialInput.st;\n\
\n\
#ifdef GL_OES_standard_derivatives\n\
    float base = 1.0 - abs(fwidth(st.s)) * 10.0 * czm_pixelRatio;\n\
#else\n\
    float base = 0.975; // 2.5% of the line will be the arrow head\n\
#endif\n\
\n\
    vec2 center = vec2(1.0, 0.5);\n\
    float ptOnUpperLine = getPointOnLine(vec2(base, 1.0), center, st.s);\n\
    float ptOnLowerLine = getPointOnLine(vec2(base, 0.0), center, st.s);\n\
\n\
    float halfWidth = 0.15;\n\
    float s = step(0.5 - halfWidth, st.t);\n\
    s *= 1.0 - step(0.5 + halfWidth, st.t);\n\
    s *= 1.0 - step(base, st.s);\n\
\n\
    float t = step(base, materialInput.st.s);\n\
    t *= 1.0 - step(ptOnUpperLine, st.t);\n\
    t *= step(ptOnLowerLine, st.t);\n\
\n\
    // Find the distance from the closest separator (region between two colors)\n\
    float dist;\n\
    if (st.s < base)\n\
    {\n\
        if (fragColor.a < 0.005) {   // matches 0/255 and 1/255\n\
            discard;\n\
        }\n\
        float d1 = abs(st.t - (0.5 - halfWidth));\n\
        float d2 = abs(st.t - (0.5 + halfWidth));\n\
        dist = min(d1, d2);\n\
    }\n\
    else\n\
    {\n\
        fragColor = color;\n\
        float d1 = czm_infinity;\n\
        if (st.t < 0.5 - halfWidth && st.t > 0.5 + halfWidth)\n\
        {\n\
            d1 = abs(st.s - base);\n\
        }\n\
        float d2 = abs(st.t - ptOnUpperLine);\n\
        float d3 = abs(st.t - ptOnLowerLine);\n\
        dist = min(min(d1, d2), d3);\n\
    }\n\
\n\
    vec4 outsideColor = vec4(0.0);\n\
    vec4 currentColor = mix(outsideColor, fragColor, clamp(s + t, 0.0, 1.0));\n\
    vec4 outColor = czm_antialias(outsideColor, fragColor, currentColor, dist);\n\
\n\
    outColor = czm_gammaCorrect(outColor);\n\
    material.diffuse = outColor.rgb;\n\
    material.alpha = outColor.a;\n\
    return material;\n\
}';

var PolylineDashArrowType = 'PolylineDashArrow';
Cesium.Material[PolylineDashArrowType] = PolylineDashArrowType;
Cesium.Material._materialCache.addMaterial(PolylineDashArrowType, {
    strict: true,
    fabric : {
        type : PolylineDashArrowType,
        uniforms: {
            color : Cesium.Color.WHITE,
            gapColor : Cesium.Color.TRANSPARENT,
            dashLength : 16.0,
            dashPattern : 255.0
        },
        source : PolylineDashArrowSource
    },
    translucent : true
});

var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline1 = polylines.add({
    positions : Cesium.Cartesian3.fromDegreesArray([-110.0, 42.0,
                                                    -85.0, 36.0,
                                                    -100.0, 25.0,
                                                    -77.0, 12.0]),
    width : 16,
    material : Cesium.Material.fromType(PolylineDashArrowType, {
        color: Cesium.Color.RED,
        gapColor: Cesium.Color.TRANSPARENT
    })
});

var polyline2 = polylines.add({
    positions : Cesium.Cartesian3.fromDegreesArray([-130.0, 42.0,
                                                    -105.0, 36.0,
                                                    -120.0, 25.0,
                                                    -97.0, 12.0]),
    width : 16,
    material : Cesium.Material.fromType(PolylineDashArrowType, {
        color: Cesium.Color.RED,
        gapColor: Cesium.Color.YELLOW
    })
});