Cesium自定义Shader实战：雷达扫描与飞线动画性能优化

之前在做 Cesium 项目时被一个很实际的问题卡了很久同样的雷达扫描、飞线效果我拿CallbackProperty一帧一帧去改位置结果浏览器 CPU 直接拉满帧率掉到个位数。而别人做的特效不仅顺滑而且放大缩小、旋转视角都不卡。后来才意识到真正的差距不在业务代码而在于对 WebGL Shader 和 Cesium 渲染管线的理解深度。这篇文章会从底层原理出发拆解地图扫描和飞线动画两个经典特效完整覆盖自定义 Material、Shader 语法、时间动画、常见性能坑点和排查思路。适合已经写过几个 Cesium Demo、想往渲染层面深入的同学也适合刚接触 Cesium 自定义材质、想搞懂“为什么这么写”的新手。1. Cesium 特效与 WebGL Shader先搞清楚它们的关系1.1 Cesium 的渲染架构很多初学者会把 Cesium 当作一个“JS 地图库”但其实它本质上是一个WebGL 渲染引擎。你在页面上看到的每一个实体、每一块几何体、每一条线最终都会被转换成 GPU 可以理解的顶点数据和绘制指令。Cesium 的 API 层级大致是这样的Viewer最上层的封装负责初始化地球、控件、数据源管理。Entity面向开发者的对象抽象比如点、线、面、模型。Primitive更底层的渲染对象管的是几何数据、外观、绘制命令。GeometryAppearance描述“画什么形状”和“用什么颜色画”。Material外观中的核心部分决定像素最终显示出来的颜色、透明度、发光效果。也就是说你用viewer.entities.add()创建了一个polygon或polylineCesium 内部也会把它转换为Primitive再交给 GPU 渲染。区别只是Entity帮你省去了很多底层参数。1.2 Shader 决定了特效的质量上限Shader 是运行在 GPU 上的小程序Cesium 渲染效果的好坏很大程度上由它决定。举个例子用CallbackProperty做飞线每一帧都要把新的坐标传回 CPU再由 CPU 提交给 GPU数据量大时自然卡顿。用自定义 Shader 做飞线只需要在 GPU 上根据当前帧号计算亮点位置CPU 不参与逐帧计算流畅度完全不同。一句话总结能用 GPU 算的就不要让 CPU 每帧去跑。Cesium 内置了不少材质比如Color、Image、PolylineArrow等。但业务中真正有个性的特效比如雷达扫描、动态光照、wall 流动材质、飞线动画都需要自己写 Shader。1.3 常见 Cesium 特效的实现路径特效类型常见实现方式性能表现雷达扫描Entity 自定义 Material较好动画在 GPU 完成飞线动画贝塞尔路径 Shader 材质较好避免逐帧位置更新动态光照Primitive 自定义 Shader较好适合大面积模型wall 流动材质wall 几何体 纹理偏移 Shader较好可视域分析自定义 Primitive 或后处理依赖数据量2. 环境准备与版本说明2.1 开发环境操作系统Windows / macOS / Linux 均可。浏览器推荐 Chrome 或 Edge需要开启硬件加速。IDEVS Code 即可配合 Live Server 插件启动静态服务。Node.js不是必须但如果你用 npm 方式安装 Cesium需要 Node 环境。2.2 引入 Cesium本文示例采用 CDN 方式方便直接复制运行。版本可以根据实际项目调整代码核心思路不依赖特定版本。!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleCesium Shader 特效实战/title script srchttps://cdn.jsdelivr.net/npm/cesium1.113.0/Build/Cesium/Cesium.js/script link hrefhttps://cdn.jsdelivr.net/npm/cesium1.113.0/Build/Cesium/Widgets/widgets.css relstylesheet style html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /style /head body div idcesiumContainer/div script // 你的代码 /script /body /html这里要提醒一下Cesium 默认会请求 Cesium ion 的影像服务所以需要配置一个 Access Token。你可以去 Cesium ion 官网注册并获取然后替换掉下面的占位符。Cesium.Ion.defaultAccessToken your_cesium_ion_token; const viewer new Cesium.Viewer(cesiumContainer);2.3 检查浏览器 WebGL 状态Cesium 是重度 WebGL 应用如果浏览器不支持或者禁用了 GPU会出现黑屏、报错等问题。Chrome 浏览器访问chrome://gpu查看 WebGL 相关状态WebGL 是否可用。是否走了软件渲染。显卡驱动是否正常。如果显示“WebGL 已被禁用”或“硬件加速不可用”需要先去浏览器设置里打开“硬件加速”再检查显卡驱动。3. WebGL Shader 底层原理拆解3.1 GPU 渲染管线中 Shader 的职责一次 WebGL 绘制大致经历这样一个流程CPU 准备顶点数据比如坐标、颜色、纹理坐标。顶点数据传入顶点着色器Vertex Shader。GPU 进行图元装配和光栅化。每个像素交给片元着色器Fragment Shader计算颜色。经过深度测试、混合等操作最终写入屏幕。Cesium 的特效绝大多数都发生在片元着色器阶段因为片元着色器决定了屏幕上每个像素最终长什么样。3.2 Vertex Shader 与 Fragment Shader 的最小示例先看一个最简单的顶点着色器// Vertex Shader attribute vec3 position; uniform mat4 modelViewMatrix; uniform mat4 projectionMatrix; void main() { gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0); }再看一个最简单的片元着色器// Fragment Shader precision mediump float; uniform vec4 u_color; void main() { gl_FragColor u_color; }gl_Position是顶点的最终裁剪坐标位置。gl_FragColor是像素输出的颜色。attribute是每个顶点不同的数据。uniform是一段绘制中所有顶点/像素都相同的全局数据。理解了这个基础再回来看 Cesium 的自定义材质就会清晰很多。3.3 Cesium 自定义 Material 的机制Cesium 自定义材质的本质是让开发者实现一个czm_getMaterial函数这个函数最终会被拼接到 Cesium 的片元着色器中。基础模板如下czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material czm_getDefaultMaterial(materialInput); // 在这里修改 material.diffuse、material.alpha 等字段 return material; }czm_material结构体常见字段material.diffuse漫反射颜色也就是物体本色。material.alpha透明度。material.specular高光强度。material.emission自发光颜色。czm_materialInput里比较常用的字段materialInput.st纹理坐标范围通常是 0 到 1。materialInput.positionWC片元在世界空间中的坐标。materialInput.positionToEyeEC片元指向相机眼睛的向量。对于飞线我们主要用st.s表示“沿着线的比例”对于雷达扫描我们主要用st计算“与中心点的距离和角度”。3.4 用 mod 函数实现周期循环动画动画本质上就是“状态随时间变化”。GLSL 中常用mod函数来做周期性动画。mod(x, y)返回x对y的余数。例如float a mod(10.0, 3.0); // 结果是 1.0在特效中更常用的是fract它等价于取小数部分float t fract(u_time); // t 会从 0 不断增长然后直接回到 0形成循环在 Cesium 自定义材质里可以直接使用内置 uniformczm_frameNumber它表示当前渲染帧号。如果按 60 帧每秒估算秒数可以这样算float time mod(float(czm_frameNumber) / 60.0, 10.0);这样time会每 10 秒循环一次。3.5 Cesium 内置 uniform 与命名注意事项在 Cesium 的材质 Shader 中czm_前缀的变量都是 Cesium 注入的内置变量不需要自己声明。常用到的还有czm_viewport、czm_viewer等。自定义 uniform 时建议统一加u_前缀避免和 Cesium 内置变量冲突。4. 实战一地图雷达扫描效果4.1 雷达扫描效果拆解一个经典的雷达扫描效果通常包含三个视觉元素中心向外扩散的扫描环。一圈旋转的扫描射线。射线后方的扇形渐变区域。这些效果如果放在 Shader 中实现只需要在片元着色器里计算每个像素与中心点的距离和角度再结合时间进行动态判断。4.2 注册 RadarScan 自定义材质先注册一个RadarScan材质类型。注册之后Cesium 就能在 Entity 的 material 属性中识别它。Cesium.Material._materialCache.addMaterial(RadarScan, { fabric: { type: RadarScan, uniforms: { u_color: new Cesium.Color(0.0, 1.0, 0.5, 1.0), u_ratio: 1.0 }, source: czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material czm_getDefaultMaterial(materialInput); vec2 st materialInput.st; vec2 uv st - vec2(0.5); // 如果扫描区域不是正方形通过 u_ratio 修正横向拉伸 uv.x * u_ratio; // 到中心的距离 float dist length(uv); // 当前时间每 10 秒循环一次 float time mod(float(czm_frameNumber) / 60.0, 10.0); // 扩散半径从中心向外扩散 float radius time / 10.0 * 0.45; // 角度 float angle atan(uv.y, uv.x); // 扫描射线角度 float sweepAngle time / 10.0 * 2.0 * 3.14159265359; float angleDiff abs(angle - sweepAngle); angleDiff min(angleDiff, 2.0 * 3.14159265359 - angleDiff); // 扩散环 float ringWidth 0.02; float ring 1.0 - smoothstep(0.0, ringWidth, abs(dist - radius)); // 旋转射线 float sweep 1.0 - smoothstep(0.0, 0.2, angleDiff); // 扇形渐变 float sector 1.0 - smoothstep(0.2, 0.6, angleDiff); // 组合并让边缘逐渐变透明 float alpha ring sweep * 0.8 sector * 0.12; alpha * 1.0 - smoothstep(0.4, 0.5, dist); material.diffuse u_color.rgb; material.alpha alpha; material.emission u_color.rgb * alpha * 0.5; return material; } } });这里解释几个关键点smoothstep(a, b, x)会在 x 从 a 到 b 的过程中返回 0 到 1 的平滑过渡值。atan用来计算角度正好可以实现“旋转射线”的效果。smoothstep搭配abs(dist - radius)可以做一个有厚度的圆环。4.3 创建雷达扫描区域自定义材质注册完成后就可以用一个矩形区域来承载它。为了让自定义 Shader 走正常的渲染管线建议给polygon设置height: 0避免被当作 GroundPrimitive 而出现材质不生效的情况。const west 120.0; const south 30.0; const east 121.0; const north 31.0; const lonDiff east - west; const latDiff north - south; const ratio lonDiff / latDiff; viewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ west, south, east, south, east, north, west, north ]), height: 0, material: new Cesium.MaterialProperty({ fabric: { type: RadarScan, uniforms: { u_color: Cesium.Color.fromCssColorString(#00ffaa), u_ratio: ratio } } }) } });4.4 运行与效果验证启动静态服务打开页面你应该能看到一个矩形区域内出现从中心不断向外扩散的光环。一条围绕中心旋转的扫描射线。射线后方有一段扇形尾迹。调节u_color可以改变颜色调节source中的time / 10.0可以改变循环速度。如果发现圆形被拉伸成椭圆检查u_ratio是否传入正确的经纬度比例。5. 实战二飞线动画效果5.1 飞线动画的实现思路飞线效果常见于城市级大屏比如从某个地点飞向另一个地点。核心思路是用贝塞尔曲线生成一条中间拱起的路径。在路径上绘制一条 polyline。用 Shader 让一个高亮点随时间从起点移动到终点。高亮点移动的计算完全在 GPU 完成CPU 只需要在创建时生成一次路径点。