1. 从零理解Cesium雷达扫描效果
第一次看到Cesium实现的雷达扫描效果时，那种从顶点垂直向下扩散的波纹确实让人眼前一亮。这种效果在地理信息系统中特别实用，比如可以用来模拟气象雷达的探测范围，或者展示某个区域的监控覆盖情况。与传统的平面雷达图不同，这种立体效果能更直观地呈现空间关系。
实现这个效果的核心在于两点：几何体构建和材质渲染。几何体决定了雷达波的形状和位置，而材质渲染则负责让这个几何体"活"起来。在Cesium中，我们通常会选择Primitive API来实现这种自定义效果，因为它比Entity API更底层，性能更好，也更能满足我们的定制需求。
这里有个小技巧分享：为什么选择圆柱体(CylinderGeometry)而不是圆锥体？虽然最终效果看起来像个圆锥，但从实现角度来说，圆柱体有两个优势：一是顶部半径可以设为0来模拟圆锥尖，二是圆柱体的纹理坐标计算更规整，便于后续的波纹效果实现。这个选择让我想起小时候用纸卷成圆锥形望远镜的经历 - 看似简单，实则暗藏玄机。
2. 构建雷达波几何体
2.1 初始化场景与相机
在开始编码前，我们需要先搭建好舞台。假设我们的雷达位于东经110度、北纬26度的位置，高度40000米。这个高度不是随便选的 - 它既要足够高以显示完整的扫描效果，又不能太高导致细节看不清。
let length = 40000; let centerOnEllipsoid = Cesium.Cartesian3.fromDegrees(110, 26, length * 0.5); viewer.camera.flyToBoundingSphere(new Cesium.BoundingSphere(centerOnEllipsoid, length));这段代码做了三件事：
- 定义了雷达的高度(length)
- 创建了一个位于雷达中心点的笛卡尔坐标
- 让相机飞到能完整看到雷达效果的位置
我特别喜欢flyToBoundingSphere这个方法，它让视角过渡非常自然，就像无人机飞向目标点一样。在实际项目中，你可以根据需要调整飞行时间和路径。
2.2 创建圆柱几何体
接下来是构建雷达波的主体 - 圆柱几何体：
let geometry = new Cesium.CylinderGeometry({ length: length, topRadius: 0.0, // 顶部半径为0，形成尖锥效果 bottomRadius: length * 0.3, // 底部半径是高度的30% vertexFormat: Cesium.MaterialAppearance.MaterialSupport.TEXTURED.vertexFormat });这里有几个关键参数需要注意：
topRadius设为0，这样圆柱就变成了圆锥bottomRadius设为高度的30%，这个比例经过多次测试，视觉效果最佳vertexFormat必须设置为支持纹理的格式，否则后续的材质效果无法实现
我曾经尝试过不同的底部半径比例，发现小于20%会让波纹太密集，大于40%又显得太稀疏。30%是个不错的平衡点。
2.3 计算模型矩阵
为了让雷达波正确地"站立"在地球表面，我们需要计算一个模型矩阵：
let modelMatrix = Cesium.Matrix4.multiplyByTranslation( Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(110, 26)), new Cesium.Cartesian3(0.0, 0.0, length * 0.5), new Cesium.Matrix4() );这段代码做了两件事：
- 使用
eastNorthUpToFixedFrame创建一个以雷达位置为中心的局部坐标系 - 将这个坐标系沿Z轴平移半个雷达高度的距离，确保雷达波的底部正好接触地面
这个步骤特别重要，如果矩阵计算错误，雷达波可能会倒在地上或者飘在空中。我第一次实现时就犯了这个错误，结果雷达波横着出现在场景中，活像个躺倒的电线杆。
3. GLSL材质实现波纹效果
3.1 理解材质的基本结构
GLSL(OpenGL Shading Language)是实现各种炫酷效果的关键。在Cesium中，我们可以通过Material的fabric属性来自定义GLSL材质。先来看一个基础结构：
material: new Cesium.Material({ fabric: { uniforms: { color: new Cesium.Color.fromCssColorString("rgba(238, 85, 34, 1)"), rep: 15, offset: 0, thickness: 0.8 }, source: `...GLSL代码...` } })这里定义了4个uniform变量：
color：波纹的颜色，使用RGBA格式rep：波纹重复的次数，值越大波纹越密集offset：波纹的偏移量，用于实现动画效果thickness：波纹的粗细程度，0-1之间的小数
3.2 剖析GLSL着色器代码
现在来看核心的GLSL代码：
czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material = czm_getDefaultMaterial(materialInput); vec2 st = materialInput.st; // 计算当前点到中心的距离 float dis = distance(st, vec2(0.5)); // 使用取模运算创建重复的波纹 float m = mod(dis + offset, 1.0/rep); // 使用步进函数控制波纹显示 float a = step(1.0/rep*(1.0-thickness), m); material.diffuse = color.rgb; material.alpha = a * color.a * dis * 1.2; return material; }这段代码的工作原理可以类比往池塘里扔石头：
distance计算相当于测量水面上某点到石头落点的距离mod函数就像水波的周期性扩散step函数决定了哪些区域显示波纹（类似水波的波峰）
特别要注意的是materialInput.st，它表示当前片元的纹理坐标，范围是[0,1]。这个坐标系的(0.5,0.5)点就是圆锥的顶点位置。
3.3 调试GLSL的小技巧
调试GLSL代码可能会让人抓狂，因为没有console.log可用。我常用的调试方法是：
- 把中间变量赋给最终颜色，比如
material.diffuse = vec3(dis)可以可视化距离 - 使用
smoothstep代替step可以让边缘更柔和 - 适当调整
dis * 1.2这个系数可以控制波纹的衰减速度
有一次我忘记乘以color.a，结果波纹完全不透明，整个圆锥变成了实心柱体。这种小错误往往最难发现，所以建议每次只修改一个参数，逐步调试。
4. 实现动态扫描效果
4.1 使用preUpdate事件驱动动画
静态的波纹还不够酷，我们需要让它动起来。Cesium提供了preUpdate事件，在每一帧渲染前都会触发，非常适合用来做动画：
viewer.scene.preUpdate.addEventListener(function() { let offset = radar.appearance.material.uniforms.offset; offset -= 0.001; // 控制波纹移动速度 if (offset > 1.0) { offset = 0.0; // 循环动画 } radar.appearance.material.uniforms.offset = offset; });这个逻辑很简单：每一帧稍微改变offset的值，波纹就会移动。当offset超过1时重置为0，实现循环动画。
4.2 优化动画性能
虽然这个效果看起来不复杂，但在大规模场景中仍需注意性能：
- 避免在preUpdate中做复杂计算
- 动画速度(0.001)不宜过快，否则在低端设备上可能卡顿
- 可以考虑使用
requestAnimationFrame的deltaTime来保证动画速度一致
我曾经在一个项目中同时渲染了50个雷达扫描效果，导致帧率骤降。后来发现是因为每个雷达都有自己的preUpdate监听器。解决方案是使用一个全局的监听器来更新所有雷达的uniform。
4.3 进阶效果扩展
基础效果实现后，还可以尝试更多变种：
- 添加渐变颜色：修改GLSL代码，让颜色随距离变化
- 实现扇形扫描：修改距离计算方式，加入角度判断
- 添加脉冲效果：使用sin函数让波纹强度周期性变化
比如要实现颜色渐变，可以这样修改：
material.diffuse = mix(color.rgb, vec3(1.0), dis * 2.0);这行代码会让波纹从中心到边缘逐渐变白，效果更加立体。
