老规矩:直接放效果图,符合就往下看,不符合出门右转。
- cesium官方暂时未提供贴地的圆,添加外轮廓线。
思路能不能写glsl更改材质,让图形显示外轮廓线。设置一个阈值距离圆心距离定值内显示一种颜色,超过这个阈值显示另一种颜色。
资料来资源Shadertoy BETA网站,网友提供的代码。
czm_material czm_getMaterial(czm_materialInput materialInput){
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
material.diffuse = color.rgb;
float dis = distance(st, vec2(0.5, 0.5));
if(dis>d) {
material.alpha = 1.0;
}else {
material.alpha = color.a;
}
return material;
}
函数解析
distance 获取两个点之间的距离.
为什么求(0.5,0.5)的距离了,因为坐标系左上角(0,0),所以中心点为(0.5,0.5)
示例代码
viewer.scene.groundPrimitives.add(new GroundPrimitive({
geometryInstances: new GeometryInstance({
geometry: new CircleGeometry({
center: p,
radius: r,
extrudedHeight: HeightReference.CLAMP_TO_GROUND
}),
}),
appearance: new Appearance({
material: new Material({
fabric: {
type: 'stroke',
uniforms: {
color: Color.fromCssColorString("rgba(0,0,255,0.2)"),
d: 0.49
},
source: `czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
material.diffuse = color.rgb;
float dis = distance(st, vec2(0.5, 0.5));
if(dis>d) {
material.alpha = 1.0;
}else {
material.alpha = color.a;
}
return material;
}`,
},
})
})
}));