Cesium原生JS特效实战：粒子系统、水面材质与后处理管线

简介：一套基于Cesium原生JS的特效资源，适合WebGIS、三维智慧城市等场景的开发者与学习者，用于快速实现火焰、烟雾、喷泉、水系、辉光、建筑光影、车辆轨迹运动、天空盒、军事标绘、流动线/箭头、动态墙、雷达扩散点、标注点及建筑物显示动画和分层分户等常见视觉效果。资源包共21个文件，整体约211.07MB，主要类型包括b3dm三维模型、cmpt批量模型、json场景配置、clt纹理数据及一个CesiumBuild.zip构建包，模型与配置相对分离，结构便于按模块检索和替换。目前已有315人学习下载，对于想深入理解Cesium特效实现原理的人有一定参考价值。解压后可通过场景文件对照模型组织方式，快速定位各效果的JS调用与参数配置，节省从零搭建和调试特效的时间，适合作为二次开发或课程设计的辅助素材。

1. Cesium原生js特效：粒子、水面与后处理的组合拳

Cesium是WebGL地球引擎，在原生js环境下做特效开发比套框架更能触达底层——ParticleSystem控制粒子轨迹，Material控制水面与动态纹理，PostProcessStage控制辉光与最终画面合成。火焰、烟雾、喷泉、水系、辉光、建筑光影，这六个看起来毫无关联的效果，拆开之后只剩下两条主线：粒子系统管前三者，后处理管线管后三者，中间的桥梁是模型矩阵与光照时间轴。适合读这篇文章的人是那些已经把Cesium地图或3dtiles场景跑通、但发现静态地球太平淡的开发者。无需引入任何前端框架，一个viewer实例加浏览器控制台就能逐段验证。先给一个容易忽视的结论：Cesium特效的卡顿大多不在GPU绘制，而在粒子系统的发射频率失控和透明图元排序错误，这两点贯穿全文。

2. 粒子系统落地：火焰、烟雾与喷泉的原生js实现

2.1 ParticleSystem的构成与参数模型

Cesium.ParticleSystem是Cesium特效系统中出镜率最高的API。一个完整的粒子系统由四个协同组件构成：

发射器（emitter）决定粒子在初始帧出现的位置与速度方向。Cesium内置了CircleEmitter（圆盘）、ConeEmitter（锥形）、SphereEmitter（球形）、BoxEmitter（盒形）四种发射器。火焰用圆盘，喷泉用锥形，烟雾用圆盘但参数逻辑和火焰相反。

生命周期参数决定粒子从出生到消亡的视觉变化。startColor与endColor之间按时间插值生成颜色，startScale与endScale控制尺寸缩放。particleLife是单个粒子的存活秒数，emissionRate是每秒发射的粒子数量。运动参数决定粒子飞行的物理表现，minimumSpeed与maximumSpeed控制初速度范围，forces数组可以在每个粒子的每次更新中施加自定义加速度——这是模拟喷泉重力的关键入口。

下面给出核心参数对照表，后续各特效会围绕它做调整：

动手写代码前，需要先把粒子系统的modelMatrix放在正确的位置。模型矩阵把粒子系统的局部坐标系平移到世界坐标。常见做法是直接用Cesium.Transforms.eastNorthUpToFixedFrame把经纬度转成东北天坐标矩阵：

const position = Cesium.Cartesian3.fromDegrees(116.3913, 39.9075, 60); const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);

这一步很关键。粒子系统默认在原点附近发射，不挂modelMatrix时粒子会出现在地球中心。所有粒子特效的第一步都应该是先确定位置矩阵，再调效果参数。

2.2 火焰：高亮纹理与随机速度叠加

火焰的视觉核心是"明亮内焰+暗红外焰"的双色过渡和上下抖动。Cesium粒子系统不支持多级颜色渐变，startColor到endColor的线性插值已经足够表现火焰的梯度感。

const fire = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image: './textures/fire.png', imageSize: new Cesium.Cartesian2(24, 24), emissionRate: 45, lifetime: 5.0, particleLife: 2.0, startColor: Cesium.Color.YELLOW.withAlpha(0.9), endColor: Cesium.Color.RED.withAlpha(0.0), startScale: 0.8, endScale: 0.0, minimumSpeed: 1.2, maximumSpeed: 2.8, emitter: new Cesium.CircleEmitter(0.35), modelMatrix: fireMx, sizeInMeters: false }));

火焰纹理可以先用一张径向渐变的圆形辉光贴图，中心白、边缘透明。如果手头没有贴图，直接在Canvas上绘制一张：

function createGlowTexture() { const canvas = document.createElement('canvas'); canvas.width = canvas.height = 64; const ctx = canvas.getContext('2d'); const grad = ctx.createRadialGradient(32, 32, 0, 32, 32, 32); grad.addColorStop(0, 'rgba(255,255,255,1)'); grad.addColorStop(0.4, 'rgba(255,180,80,0.8)'); grad.addColorStop(1, 'rgba(255,80,0,0)'); ctx.fillStyle = grad; ctx.fillRect(0, 0, 64, 64); return canvas; }

火焰的关键在于不要用规则的速度。minimumSpeed与maximumSpeed的区间越大，火焰看起来越"活"。如果全部粒子以相同速度上升，火焰会像一条僵硬的光柱，这是新手最容易踩的坑。endScale: 0.0让粒子在消亡时尺寸收敛到零，视觉上产生火焰熄灭的隐退感。sizeInMeters: false表示粒子的尺寸以屏幕像素为单位，不会因相机拉远而变小；对于火焰这种近景效果，像素模式更适合。

2.3 烟雾：膨胀扩散与低透明度衰减

烟雾恰好是火焰的反向操作：火焰是尺寸收缩、透明度渐隐，烟雾则是尺寸膨胀、透明度从低到更低。

const smoke = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image: './textures/smoke.png', imageSize: new Cesium.Cartesian2(64, 64), emissionRate: 8, lifetime: 8.0, particleLife: 5.0, startColor: Cesium.Color.GRAY.withAlpha(0.35), endColor: Cesium.Color.DARKGRAY.withAlpha(0.0), startScale: 0.5, endScale: 2.5, minimumSpeed: 0.4, maximumSpeed: 1.2, emitter: new Cesium.CircleEmitter(0.8), modelMatrix: smokeMx }));

烟雾参数里最容易出错的是startScale与endScale的搭配。烟雾在真实世界中是体积膨胀的，粒子越大越淡，所以endScale一定要大于startScale，且在粒子的后半段生命期内完成主要膨胀。

烟雾的粒子数量不要多。8到10个每秒发射率配合5秒的particleLife，场景中同时存活的烟雾粒子大约只有40到50个，已经足够形成一团有体积感的烟。把emissionRate调到30以上，烟雾会迅速变成一片灰色块，原因是粒子的透明度叠加过密，画面失去层次感。如果想让烟雾有自然扰动，可以在forces数组里加一个水平方向的随机力：

forces: [ function(p, dt) { if (p.age > 1.5) { p.velocity.x += (Math.random() - 0.5) * 0.5 * dt; p.velocity.y += (Math.random() - 0.5) * 0.5 * dt; } } ]

这段代码的含义是：粒子存活超过1.5秒后，每帧在x和y方向施加一个随机加速度。效果是烟雾在上升后期逐渐散开，而不是保持一个固定圆柱体形状。

2.4 喷泉：锥形发射与重力加速度的对抗

喷泉是三个粒子特效中唯一需要物理抗衡的效果。粒子要快速向上，然后被重力拽回。ConeEmitter允许指定锥形角，让粒子沿锥面斜向上飞，但仅靠发射方向还不能产生抛物线——必须借助forces数组施加重力。

const fountain = viewer.scene.primitives.add(new Cesium.ParticleSystem({ image: './textures/waterDroplet.png', imageSize: new Cesium.Cartesian2(8, 8), emissionRate: 150, lifetime: 5.0, particleLife: 3.0, startColor: Cesium.Color.WHITE.withAlpha(0.8), endColor: Cesium.Color.CYAN.withAlpha(0.0), startScale: 0.4, endScale: 0.05, minimumSpeed: 6, maximumSpeed: 10, emitter: new Cesium.ConeEmitter(Cesium.Math.toRadians(20)), modelMatrix: fountainMx, forces: [ function(p, dt) { p.velocity.z -= 12 * dt; } ] }));

这里的重力加速度取值是12而不是9.8，原因是粒子系统的速度单位与模拟步长的时间因子叠加后，直接套物理常数会让水花下落过慢。12这个值是在Cesium默认时间步长下经过调参得到的近似值。ConeEmitter的角度参数是半锥角，20度表示粒子在以发射点为顶点、半张角20度的锥面上随机方向射出。角度越小水柱越集中，角度大于30度时水花会像一个倒扣的伞面，适合做中心水柱加外围水雾的叠加。

喷泉还需要考虑水花落地后的消失。endColor的alpha设为0后，粒子在水柱末端透明消失，不会出现落地后水珠穿入地面的情况。如果地形起伏大，建议开启viewer.scene.globe.depthTestAgainstTerrain = true，让粒子遇到地形时被深度缓冲遮挡。

2.5 粒子数量与纹理尺寸的调优边界

一次把火焰、烟雾、喷泉全部放进场景时，需要注意总量控制。按上面三组参数计算粒子并发数：火焰最多90个、烟雾约50个、喷泉约450个，合计不到600个粒子。Cesium对单个粒子系统的粒子并发数没有硬性限制，但超过2000个后，CPU端的发射位置计算和GPU端的半透明排序会明显拉低帧率。

纹理尺寸也要克制。火焰与烟雾用64或128像素的贴图足够，喷泉水滴用16像素以下的小尺寸贴图。高分辨率纹理在粒子快速移动时会引入大量透明像素填充，浏览器合成开销成倍上升。如果多个粒子系统共享同一张贴图，Cesium会自动复用纹理单元，不必为每个系统单独加载一份图片文件。

3. 水系效果：从水面包裹到贴图动画与顶点扰动

3.1 Cesium内置Water材质的关键参数

水系在Cesium地图上最常见的需求是把一个矩形或圆形区域变成流动的水面。Cesium.Material内置了Water类型，适用于Polygon、Rectangle、Circle等图形材质的动态水面。

const waterPolygon = viewer.entities.add({ polygon: { hierarchy: Cesium.Cartesian3.fromDegreesArray([ 116.38, 39.90, 116.39, 39.90, 116.39, 39.91, 116.38, 39.91 ]), material: new Cesium.Material({ fabric: { type: 'Water', uniforms: { normalMap: './textures/waterNormals.jpg', frequency: 800.0, animationSpeed: 0.04, amplitude: 1000.0, specularIntensity: 0.8 } } }) } });

normalMap给水面提供法线扰动信息，是水波纹视觉的真实来源。frequency控制波纹在空间上的密度，数值越小波纹越宽；animationSpeed控制波纹流动的速度，0.04约等于每帧偏移4%的纹理坐标；amplitude控制波纹起伏幅度，数值越大水面的凹凸感越强。specularIntensity是高光反射强度，代表阳光在水面的镜面反射亮度。

一个常见误区是frequency越大波纹越细，但法线贴图的采样效果与贴图分辨率强相关。如果法线贴图只有256像素，frequency超过1500时会出明显闪烁或摩尔纹。amplitude的单位是像素乘以某个比例因子，不是绝对高度，所以不要把它理解成米或厘米。

3.2 无法线贴图时的纹理偏移动画

没有现成的法线贴图时，可以用普通水面纹理加UV偏移伪造流动感。做法是在Fabric的Image类型材质中给repeat设定重复次数，再通过时钟驱动imageOffset：

const fakeWater = new Cesium.Material({ fabric: { type: 'Image', uniforms: { image: './textures/waterTile.png', repeat: new Cesium.Cartesian2(4, 4), color: Cesium.Color.WHITE.withAlpha(0.85) } } }); viewer.clock.onTick.addEventListener(function(clock) { const offset = (clock.currentTime.secondsOfDay * 0.05) % 1.0; fakeWater.uniforms.imageOffset = new Cesium.Cartesian2(offset, 0); });

这个技巧的本质是通过每个时钟tick更新imageOffset，让贴图沿x轴循环滚动。配合一个透明度alpha值为0.85左右的水面多边形，能模拟出河水的流向。缺点在于缺乏法线扰动导致水面太平，只能用于远景水带或应急演示。

如果想让流向斜着走，把imageOffset的y分量也按比例更新：

fakeWater.uniforms.imageOffset = new Cesium.Cartesian2(offset, offset * 0.3);

这会产生东南向的斜水流。注意repeat和imageOffset是配合使用的，repeat决定一个周期内贴图平铺几次，imageOffset决定平移速度。

3.3 3dtiles模型内的水体与透明排序

如果水面是3dtiles模型的一部分（比如倾斜摄影里的池塘），材质控制权不在Cesium Material，而在glTF/glb的PBR纹理上。此时不要试图用前端材质覆盖模型，正确做法是让模型自带半透明水面纹理，并在Cesium里关闭该图层的深度测试。

更细的控制需要对3dtiles做分类：把水面三角形单独设为某个batchId，再用Cesium3DTileStyle的条件表达式去匹配：

const waterTileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: './data/waterWithBuilding/tileset.json' }) ); waterTileset.style = new Cesium.Cesium3DTileStyle({ color: { conditions: [ ["${batchId} === 5", "color('rgba(80, 160, 240, 0.65)')"], ["true", "color('white')"] ] } });

batchId在数据生产阶段由建模软件或倾斜摄影工具指定，前端无法动态生成，但可以在拿到数据后用tileset.tileProperties检查每个batchId对应的对象名。这一步需要在浏览器的Developer Tools里打断点逐tile探测。条件式里"true"是兜底规则，任何未匹配的图元都按白色渲染，避免整个模型被漏染成透明。

透明度一旦低于0.6，3dtiles的水面与建筑之间会出现严重的颜色串扰，原因是混合顺序错乱。这种情况下把waterTileset.style的深度检测关掉不现实，更稳妥的是在水面下方铺一层不透明的地形纹理，让半透明水面只负责叠加颜色变化。

3.4 河流曲面的LOD与性能取舍

大范围水面的性能问题主要出在几何体的三角剖分上。Rectangle或Polygon的细分数由granularity参数控制，默认Cesium.Math.RADIANS_PER_DEGREE约为1度，在近景时会看到明显的多边形边界。把granularity调到Cesium.Math.toRadians(0.05)可获得平滑的水面边界，但会增加顶点数量。

一个折中方案是只在相机距离水面较近时动态提高细分数。监听scene.camera.changed事件，用camera.positionCartographic.height判断视距并更新polygon.granularity。远景用粗网格、近景用细网格，既保证视觉又控制顶点数：

const waterEntity = viewer.entities.add({ polygon: { ... } }); viewer.scene.camera.changed.addEventListener(function() { const height = viewer.camera.positionCartographic.height; const granularity = height < 2000 ? Cesium.Math.toRadians(0.02) : Cesium.Math.toRadians(0.5); waterEntity.polygon.granularity = granularity; });

这个方案有个副作用：granularity变化会触发entity的geometry重建，快速缩放相机时会连续重建多次。加一个简单的节流阀即可，比如500毫秒内只更新一次。

4. 辉光与建筑光影：后处理管线与光照参数调优

4.1 Bloom后处理：开箱即用与自定义的边界

辉光的标准实现是viewer.scene.postProcessStages.bloom，Cesium自带的后处理效果只需要设置enabled和几个uniforms：

const bloom = viewer.scene.postProcessStages.bloom; bloom.enabled = true; bloom.uniforms.contrast = 128; bloom.uniforms.brightness = -0.3; bloom.uniforms.delta = 0.8; bloom.uniforms.sigma = 4; bloom.uniforms.stepSize = 1;

contrast控制辉光的整体强度，值越高明亮区域越容易向周围像素溢出。brightness用于调节参与辉光的亮度阈值，负值表示从暗部提取辉光，正值表示只让高亮物体发光。sigma决定辉光的扩散半径，数值越大光晕范围越广。这四个参数是Cesium Bloom的核心旋钮，别的值基本不需要动。

Bloom对所有高亮物体生效，无法只针对某个建筑发光。如果想让特定建筑或粒子产生辉光，需要把该物体的颜色调近白色，再用亮度阈值隔离；或者走自定义后处理通道：

const glowStage = viewer.scene.postProcessStages.add({ fragmentShader: ` uniform sampler2D colorTexture; varying vec2 v_textureCoordinates; void main() { vec4 color = texture2D(colorTexture, v_textureCoordinates); float luminance = dot(color.rgb, vec3(0.2126, 0.7152, 0.0722)); float mask = smoothstep(0.8, 1.0, luminance); gl_FragColor = color + vec4(mask) * 0.6; } `, uniforms: {} }); glowStage.enabled = true;

这段着色器对亮度大于0.8的像素叠加一层白色光晕。注意postProcessStages.add返回的Stage必须显式设为enabled: true。自定义后处理的代价是每帧多一次全屏纹理采样，移动端掉帧明显，所以glowStage不要和Bloom同时开启，二选一。

4.2 建筑光影：全局光照开关与ShadowMode

建筑光影在Cesium里有两层含义。第一层是太阳光照射在3dtiles建筑上的明暗变化，第二层是建筑投射到地面或相邻建筑上的阴影。前者只需要开启光照，后者需要ShadowMap。

viewer.scene.globe.enableLighting = true; viewer.scene.globe.dynamicAtmosphereLighting = true; const tileset = viewer.scene.primitives.add( new Cesium.Cesium3DTileset({ url: './data/buildings/tileset.json' }) ); tileset.shadows = Cesium.ShadowMode.ENABLED; tileset.maximumScreenSpaceError = 8;

enableLighting让地表法线参与太阳光照计算，dynamicAtmosphereLighting开启大气散射对地面光照的实时补偿，避免阴影区域过黑。tileset.shadows设为ENABLED表示该模型既参与投影也接收阴影，可选的RECEIVE_ONLY表示只接收阴影，CAST_ONLY表示只投射阴影。

建筑光影中最容易被忽略的参数是maximumScreenSpaceError。它控制3dtiles的LOD切换精度，值越大模型越粗糙但加载越快。当ShadowMode开启后，阴影的渲染依赖模型的几何细节，maximumScreenSpaceError超过16时，阴影边缘会出现明显的锯齿与错位。如果建筑模型没有法线贴图，光影是渲染不出立体感的。确认办法是在渲染面板中查看tileset的drawcall数量，没有法线的模型drawcall会异常高。

4.3 动态时间光照与单体化高亮的联动

光照随时间变化是动态光照需求的核心，Cesium原生就支持。设置viewer.clock的起始时间与结束时间，太阳位置会自动按天文算法更新：

const start = Cesium.JulianDate.fromDate(new Date('2024-06-21T04:00:00Z')); const stop = Cesium.JulianDate.fromDate(new Date('2024-06-21T20:00:00Z')); viewer.clock.startTime = start.clone(); viewer.clock.stopTime = stop.clone(); viewer.clock.currentTime = start.clone(); viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; viewer.clock.multiplier = 6000;

multiplier: 6000表示时间流速为真实时间的6000倍，一天的实际演示时间约14秒。随着currentTime推进，太阳高度角与方位角实时变化，建筑影子方向随之转动。

把单体化高亮与动态光照结合起来，是数字孪生项目里常见的交互形式。单体化的意思是能从3dtiles中提取单个建筑并赋予独立颜色。做法是用Cesium3DTileFeature的color属性：

viewer.screenSpaceEventHandler.setInputAction(function(movement) { const picked = viewer.scene.pick(movement.position); if (Cesium.defined(picked) && picked instanceof Cesium.Cesium3DTileFeature) { picked.color = Cesium.Color.YELLOW.withAlpha(0.8); } }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

pick返回的对象本身就是Cesium3DTileFeature实例，直接改color即可让该建筑高亮。这里要注意，这种改法是临时的，如果希望高亮持续，需要把feature的color存入数组，并在每帧render事件中重新赋值。更推荐的方式是使用Cesium3DTileStyle按属性条件设定颜色，把选中的建筑ID写入全局变量，在style的路由中动态判断：

let selectedId = 0; tileset.style = new Cesium.Cesium3DTileStyle({ color: { conditions: [ ["${batchId} === " + selectedId, "color('yellow')"], ["true", "color('white')"] ] } });

这种方式的性能远优于逐帧改feature颜色，因为style的条件判定发生在更新阶段的批量遍历中，不需要为每个feature单独提交drawcall。

5. 特效合流：粒子-后处理-光源的联动与性能验证

5.1 半透明排序的坑与实际解法

粒子、水面、后处理同时出现时，最典型的故障是粒子穿入建筑物或水面闪烁。第一道防线是开启viewer.scene.globe.depthTestAgainstTerrain = true，让粒子与地表深度正确相交。第二道防线是控制粒子系统的modelMatrix高度，给喷泉或烟雾挂一个高于地面的偏移量，避免粒子与建筑底面共面。半透明图元之间的排序问题没有通用解，建议在关键相机角度下人工检查，然后通过调整particleLife或endScale让粒子在接近建筑前就消亡。

5.2 性能调试与控制台三板斧

Cesium提供了三个调试入口，不用装外部工具就能定位绝大多数特效性能问题：

viewer.scene.debugShowFramesPerSecond = true; viewer.extend(Cesium.viewerCesiumInspectorMixin);

第一行在画布角落显示实时帧率，第二行打开Inspector面板，切到Performance标签可以看到每个primitive的drawcall与三角形数量。配合Chrome的Performance录制工具，可以精确找出是粒子系统还是Water材质导致的掉帧。移动端上尤其要看Texture栏，粒子贴图和解压后的水面法线贴图会占用大量GPU显存，超256px的贴图应当压缩。

5.3 requestRenderMode下的按需渲染细节

如果场景是静态的，只是偶尔播放特效动画，可以开启按需渲染来降低CPU占用：

viewer.scene.requestRenderMode = true; viewer.scene.maximumRenderTimeChange = 0.5;

开启后Cesium只在场景变化时重绘。粒子系统内部会自动请求渲染，所以火焰、喷泉不会停住；但自定义后处理或手动更新的纹理偏移不会自动触发，需要手动调用viewer.scene.requestRender()。一个通用技巧是在scene.postRender事件里检查是否有激活的后处理Stage，只要有就请求下一帧，否则挂起渲染：

viewer.scene.postRender.addEventListener(function() { if (glowStage.enabled || bloom.enabled) { viewer.scene.requestRender(); } });

这样静态相机下不耗帧，特效播放时又能保证每帧都刷新。另一个实用小技巧是把viewer.clock.multiplier调低到100左右再观察粒子轨迹，粒子系统的速度受时间步长影响较大，低速下调试喷泉水柱的形状比全速播放直观得多。调好后再把multiplier拉回正常值，避免粒子在高速时间步长下出现跳跃。

本文还有配套的精品资源，点击获取