时间戳

首页 > 解决方案 > 如何在铯中创建虚线箭头

glsl - 如何在铯中创建虚线箭头

问题描述

Cesium 有实线箭头 ( PolylineArrow ) 和虚线 ( PolylineDash )。我想将两者结合起来制作一个 PolylineDashArrow（带有短划线填充的箭头，或带有箭头的虚线）。

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

这似乎应该很容易做到，但我找不到任何其他人试图这样做的信息。

标签： glslcesium

解决方案

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

我遇到的最大问题是破折号材料不仅将破折号之间的间隙标记为透明，它实际上将它们标记为丢弃。好消息是这是使用布尔值（不是原始discard关键字）完成的，该值可以被欺骗再次变为假，以防止这些间隙中断箭头。

所以我不得不作弊来禁用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'
        }
    }
});

推荐阅读