如何在铯中创建虚线箭头
How to create a dashed arrow in Cesium
铯有实心箭头（PolylineArrow) and dashed lines (PolylineDash）。我想将两者结合起来制作一个 PolylineDashArrow（带虚线填充的箭头，或带箭头的虚线）。
听起来这应该可以使用 Cesium 的 Fabric. Though I think I need to add a GLSL like the ones for arrow and dash。 （Fabric 页面没有说明如何添加自定义 GLSL 以用于源代码）
这看起来应该很容易做到，但我找不到任何其他人尝试这样做的信息。
所以，它应该是直截了当的。但是有一个小问题，您不希望破折号打断箭头本身。箭头一定要实心，不然看起来不对。
我 运行 遇到的最大问题是破折号 material 不只是将破折号之间的间隙标记为 t运行sparent，它实际上将它们标记为丢弃。好消息是这是用一个布尔值（不是原始的 discard 关键字）完成的，它可以被欺骗再次变为 false，以防止这些间隙中断箭头。
所以我不得不作弊以禁用 dashMaterial 的丢弃，但我成功了。
这是我最终得到的结果：Sandcastle demo of dashed arrow。
该演示的代码如下所示：
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'
}
}
});
emackey . Alot more manual since it is merging the Arrow and Dash GLSL instead of using the simple Fabric mixing (And adding a line in the arrowhead logic to lock in the color used). This allows use of the dash multi-color effect. Here is the sandcastle demo 的变体，以及下面使用的代码。 （请注意，这仍然只是一个 material 原语，不能用作实体中的 MaterialProperty）
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
})
});
here 是使用实体的另一个版本。
铯有实心箭头（PolylineArrow) and dashed lines (PolylineDash）。我想将两者结合起来制作一个 PolylineDashArrow（带虚线填充的箭头，或带箭头的虚线）。
听起来这应该可以使用 Cesium 的 Fabric. Though I think I need to add a GLSL like the ones for arrow and dash。 （Fabric 页面没有说明如何添加自定义 GLSL 以用于源代码）
这看起来应该很容易做到，但我找不到任何其他人尝试这样做的信息。
所以，它应该是直截了当的。但是有一个小问题，您不希望破折号打断箭头本身。箭头一定要实心，不然看起来不对。
我 运行 遇到的最大问题是破折号 material 不只是将破折号之间的间隙标记为 t运行sparent，它实际上将它们标记为丢弃。好消息是这是用一个布尔值（不是原始的 discard 关键字）完成的，它可以被欺骗再次变为 false，以防止这些间隙中断箭头。
所以我不得不作弊以禁用 dashMaterial 的丢弃，但我成功了。
这是我最终得到的结果：Sandcastle demo of dashed arrow。
该演示的代码如下所示：
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'
}
}
});
emackey
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
})
});
here 是使用实体的另一个版本。