企业官网建设流程全解析

在 Cesium 里做“地形粒子动态碰撞与喷涌”这个需求，最常遇到的情况不是不会写粒子，而是粒子写出来了，却不碰地形；或者碰了地形，帧率直接掉到个位数。标题里的 Cesium、GPGPU、地形粒子、动态碰撞、60FPS 放在一起，是一套完整工程目标，不是贴几张 billboard、加一个烟雾材质就能应付的效果。

先给结论：这个方案里，GPGPU 主要不是用来做炫光渲染，而是用来并行更新大量粒子的物理状态。判断它能不能落地的关键有两个，一是能不能把 Cesium 的地形高度快速变成 GPU 可采样的数据，二是能不能把每帧更新的纹理上传、粒子计算、粒子绘制都控制在帧预算内。这篇文章会从需求拆解、技术选型、地形数据链路、粒子模拟实现、性能优化和排错顺序完整过一遍。

如果你已经写过一段时间的 Cesium，能读 Cesium 文档，想把粒子真正压到地形上跑，这篇文章适合你。如果你刚开始接触 Cesium，先别急着上来就做百万粒子碰撞，建议先把这篇文章里的数据链路和前置条件看完。

1. 先不要把“粒子特效”当成入口，把“地形碰撞”当成入口

1.1 把需求拆成四层，每一层的边界都不一样

这个标题不是一个“粒子好看不好看”的渲染问题，而是把下面这些能力重新组合起来的问题。

第一层是地形。Cesium 里默认有地球椭球、DEM 地形瓦片、3D Tiles，不同层级的地形精度也不一样。粒子要碰撞的必须是当前屏幕里看到的真实地形，而不是一个写死的平面。

第二层是粒子。粒子需要有位置、速度、生命周期、发射方向、颜色、大小。但真正重要的不是把粒子画出来，而是粒子状态能不能被 GPU 批量更新。

第三层是动态碰撞。粒子从喷涌点出来以后，会有初速度，随后受重力影响下落，碰到地形以后可能要反弹、滑动或停在表面。这个“碰”不是简单的屏幕坐标相交，而是粒子本身在三维空间里的运动轨迹和地表高度相交。

第四层是渲染表现。粒子计算完了，还要通过 Cesium 渲染出来，并且要和相机裁剪、地形遮挡、场景光照协调。如果只是独立用 Canvas 画一层粒子，不处理 Cesium 场景关系，就会出现粒子飘在空中、穿透山体、视锥裁剪异常等一大堆问题。

很多人把这个项目理解成“写一个好看的喷泉 Demo”，所以第一版会去调粒子数量、粒子大小、颜色渐变、纹理贴图。真正难的点根本不在这些表现层的东西上，而在粒子怎么知道脚下是不是有真实山地，以及粒子更新计算能不能在 GPU 端持续完成。

1.2 “大范围”为什么是难点

在 Cesium 里做局部小场景的粒子碰撞，比如在一个固定小区块里模拟水流或飞溅，方案会简单很多。你可以预先烘焙一小块地形高度，把粒子活动范围限制在这块区域里，甚至可以提前算好地表法线，碰撞检测就不需要实时采样整个地形。

一旦加上“大范围”三个字，问题性质就变了。

Cesium 的地形是动态加载的。视点移动时，地形瓦片会切换，精细级别会不断变化，同一个地理位置的表面高度在不同加载状态下可能不完全一样。此时如果粒子还在惯性下落，很可能会出现一种现象：粒子明明碰到前一帧的地表高度，但因为地形瓦片继续细化，下一帧地表高度变了，粒子就穿到了地下，或者悬在半空。

大范围还意味着粒子不能一直使用同一个局部坐标原点和同一张高度图。如果模拟范围只有 100 米，一张 1024×1024 的高度纹理已经非常精细了。如果范围扩到几十公里甚至跨区县，还要所有区域并行跑粒子碰撞，就需要做空间分区、LOD 层级和动态高度纹理更新。

所以这个项目的实际设计顺序应该是：先限制模拟范围，再设计地形高度数据接入，然后才是粒子碰撞和渲染性能优化。

2. 为什么是“Cesium+GPGPU”，普通方案撑不起这个需求

2.1 先对比三种常见实现方案

第一种：直接把标记点或粒子的 heightReference 设为 CLAMP_TO_GROUND。这个方案适合展示固定点位，比如车辆、地标、管点。它只能把对象“粘”在地表，不做碰撞，不做反弹，也无法表达一个粒子从空中落到地面的过程。做动态喷涌不合适。

第二种：用 sampleTerrainMostDetailed 批量获取地形高度。Cesium 确实提供了这样的接口，可以异步查询多个经纬度点上的地面高度。但这种方式适合路径规划、建筑落位这类低频查询。几万粒子每帧都查一次，CPU 请求量完全扛不住，而且高程数据本身还是异步返回，没法当作实时碰撞输入。

第三种：把地形高度烘焙成 GPU 可采样的纹理，让粒子状态在 GPU 里更新。粒子并行计算时，每个粒子只要按自己的位置去采样一张高度纹理，就能判断当前是否碰到地形。几千个粒子和一个粒子，理论上都是并行读取，不会因为粒子数量增加而线性拉长 CPU 时间。

第三种方案就是标题里提到的 Cesium+GPGPU 方向。

2.2 GPGPU 不是指某个固定 API，而是一种数据流架构

在 WebGL2 环境下，没有独立计算着色