CesiumJS【Basic】- #046 绘制流动线（Primitive方式）

### Cesium 中使用 Primitive 绘制流动线效果实现方法 要在 Cesium 中使用 `Primitive` 绘制具有流动效果的线条，可以通过自定义材质并结合时间参数来模拟动态变化的效果。以下是详细的说明和代码示例。 #### 原理概述 为了实现流动线效果，通常会利用纹理贴图（Texture）或者基于顶点的颜色渐变来创建视觉上的运动感。具体来说，可以借助 `Cesium.Fabric` 自定义材质，并通过调整材质中的时间变量控制颜色的变化位置[^2]。这种技术的核心在于更新每帧渲染时的时间戳，从而让颜色沿路径移动。 --- #### 代码实现 以下是一个完整的例子，展示如何使用 `Primitive` 和自定义材质绘制一条带有流动效果的线： ```typescript import * as Cesium from "cesium"; // 初始化 Viewer const viewer = new Cesium.Viewer("cesiumContainer", { terrainProvider: Cesium.createWorldTerrain(), }); // 定义线条的起点和终点 const start = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883); const end = Cesium.Cartesian3.fromDegrees(-80.50, 35.14); // 创建几何实例 const geometryInstance = new Cesium.GeometryInstance({ geometry: new Cesium.PolylineGeometry({ positions: [start, end], width: 5, }), }); // 自定义材质函数 const customMaterial = new Cesium.Material({ fabric: { type: "FlowLine", uniforms: { color: new Cesium.Color(0.0, 1.0, 1.0, 1.0), // 颜色 (青色) speed: 0.005, // 流动速度 }, source: ` czm_material czm_getMaterial(czm_materialInput materialInput){ czm_material material = czm_getDefaultMaterial(materialInput); float time =czm_frameNumber * ${customMaterial.uniforms.speed}; // 动态时间 vec2 st = materialInput.st; float dist = distance(st.x, fract(time)); // 计算距离 if(dist < 0.05){ // 控制流动宽度 material.alpha = 1.0; }else{ material.alpha = 0.0; } material.diffuse = color.rgb; return material; } `, }, }); // 添加 Primitive 到场景中 const polylinePrimitive = new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: new Cesium.PolylineMaterialAppearance({ flat: true, material: customMaterial, }), }); viewer.scene.primitives.add(polylinePrimitive); // 设置相机视角 viewer.camera.flyTo({ destination: Cesium.Cartesian3.fromDegrees( (-75.59777 - 80.5) / 2, (40.03883 + 35.14) / 2, 500000 ), }); ``` --- #### 关键点解析 1. **自定义材质 (`Fabric`)** 上述代码中，我们通过 `Cesium.Material` 的 `fabric` 属性定义了一个名为 `"FlowLine"` 的新材质类型。该材质接受两个参数：`color` 表示线条颜色；`speed` 是流速因子，用于控制动画的速度[^2]。 2. **动态时间计算** 材质脚本内的 `time` 变量由全局帧数乘以指定速度得到。这使得每次重绘时都能获得不同的偏移值，进而形成流动效果。 3. **透明度处理** 在 GLSL 片段着色器部分，当像素到当前时间对应的虚拟波峰的距离小于设定阈值时赋予其完全不透明状态，反之则设为全透明。这样就实现了类似光带滑过的现象。 4. **性能优化建议** 如果需要同时显示大量此类流动线，则应考虑批量化管理以及减少不必要的重复计算操作，比如共享同一套 Shader 或者提前缓存某些固定数据结构等措施[^1]。 --- #### 注意事项 - 确保引入了最新版本的 Cesium 库文件。 - 对于复杂项目可能还需要额外配置 WebGL 渲染环境等相关依赖项。 - 考虑不同浏览器兼容性和硬件加速支持情况下的表现差异。 ---