当前位置：首页 > news >正文

Cesium 贴地圆并显示外轮廓线 outline

news 2025/5/6 0:02:36

老规矩：直接放效果图，符合就往下看，不符合出门右转。

在这里插入图片描述

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;}`,},})})}));