cesium垂直发光飞线

### 创建 Cesium 垂直发光飞线效果 为了在 Cesium 中创建垂直发光飞线效果，可以采用 WebGL 的着色器功能来生成动态的动画纹理，并通过 `PolylineMaterialAppearance` 方法将其应用于线条几何体。 #### 准备工作 首先定义片段着色器源码用于生成流动光线效果： ```glsl czm_material czm_getMaterial(czm_materialInput materialInput){ czm_material material = czm_getDefaultMaterial(materialInput); float time = mod(czm_frameNumber * speed, 100.0) / 100.0; vec2 st = materialInput.st; // 计算距离中心的距离并应用渐变 float distFromCenter = distance(st, vec2(0.5)); float gradientEffect = smoothstep(percent - gradient, percent + gradient, fract(distFromCenter * 10.0 - time)); material.alpha = color.a; material.diffuse = (color.rgb * gradientEffect).rgb; return material; } ``` 此代码段实现了基于时间变化的颜色渐变效果[^2]。 #### 构建 Primitive 实例 接下来构建 `Primitive` 对象实例化多条随机分布的直线作为飞行路径。每条线的位置数据由函数 `generateRandomLines()` 提供，具体参数可根据实际需求调整。 ```javascript const primitive = new Cesium.Primitive({ geometryInstances: generateRandomLines([104.065, 30.659], 100), appearance: new Cesium.PolylineMaterialAppearance({ material: new Cesium.Material({ fabric: { type: 'FlowLine', uniforms: { color: Cesium.Color.ORANGERED.withAlpha(0.8), // 设置颜色 speed: 0.5, percent: 0.7, gradient: 0.02 }, source: fragmentShaderSource } }) }), allowPicking: false }); viewer.scene.primitives.add(primitive); // 添加到场景中显示 ``` 上述 JavaScript 代码展示了如何配置 `Primitive` 和自定义材质属性以呈现具有特定视觉特性的发光飞线[^3]。