最近在做一个三维地理信息可视化项目需要在地球表面模拟动态的流体效果比如洪水演进、污染物扩散或者炫酷的海洋特效。在Cesium的官方示例和社区资源里翻了个遍发现现成的、高性能的流体模拟方案并不多要么效果简单要么性能堪忧。经过一番探索终于整合出一套基于Cesium原生PrimitiveAPI与DrawCommand并融合了Shadertoy上经典流体模拟算法的完整实现方案。这套方案不仅效果惊艳而且完全开源可以直接集成到你的Cesium项目中。本文将手把手带你从零实现一个Cesium流体模拟效果。无论你是想为你的数字孪生项目添加动态水文模拟还是单纯想学习如何在Cesium中利用WebGL进行高性能自定义渲染这篇文章都能提供一条清晰的路径。我们将深入Primitive和DrawCommand的底层机制解析流体模拟的片段着色器Fragment Shader原理并最终呈现一个可交互、可配置的流体仿真实例。1. 核心概念与背景为什么要在Cesium中做流体模拟在三维GIS和数字孪生领域静态的地形和模型已经无法满足日益增长的可视化需求。动态的、物理真实的自然现象模拟如水流、烟雾、火焰、云层能极大增强场景的真实感和分析能力。Cesium作为领先的地理空间可视化引擎其强大的时空数据管理和渲染能力为这类模拟提供了绝佳的舞台。然而Cesium本身专注于地理空间的精确渲染并未内置复杂的物理模拟功能。实现流体模拟本质上是在Cesium的渲染管线中“插入”我们自己的计算与绘制逻辑。这涉及到几个核心概念WebGL与Cesium渲染管线Cesium底层基于WebGL。所有你看到的地球、模型、矢量数据最终都通过一系列WebGL绘制命令DrawCommand完成。理解这套管线是进行自定义渲染的前提。Primitive API这是Cesium提供给高级用户的自定义渲染接口。相比更上层的EntityAPIPrimitive提供了对几何体Geometry、外观Appearance和渲染状态RenderState的底层控制性能更高灵活性更强是实现自定义特效的关键。DrawCommand这是Cesium渲染引擎的核心调度单元。一个DrawCommand封装了一次WebGL绘制调用所需的所有信息着色器程序ShaderProgram、顶点数组VertexArray、统一变量Uniforms等。通过构建自定义的DrawCommand我们可以完全掌控渲染过程。Shadertoy与GPGPUShadertoy是一个著名的在线片段着色器分享平台上面有大量高质量的流体模拟、噪声生成等图形学算法。这些算法通常利用片段着色器进行并行计算其思想可以归为广义的GPGPU通用图形处理器计算。我们将借鉴这些算法在Cesium的着色器中实现流体的运动计算。本方案的核心思路利用Cesium的Primitive创建一个覆盖特定区域的矩形或任意形状几何体。为这个几何体编写自定义的着色器Shader在着色器中特别是片段着色器里实现流体力学方程如Navier-Stokes方程的简化求解。通过渲染到纹理Render-to-Texture技术将上一帧的计算结果作为下一帧的输入从而实现流体的动态演化。2. 环境准备与项目搭建在开始编写代码前我们需要确保有一个可以运行的Cesium开发环境。2.1 基础环境要求操作系统Windows 10/11, macOS 或 Linux (开发环境无限制)。浏览器支持WebGL 2.0的现代浏览器强烈推荐Chrome或Edge的最新版。你可以在浏览器中输入chrome://gpu或edge://gpu来确认WebGL 2.0支持状态。Node.js用于构建和运行本地开发服务器。建议安装LTS版本如18.x, 20.x。代码编辑器Visual Studio Code, WebStorm等。2.2 创建Cesium项目我们将使用Vite作为构建工具它能快速搭建现代Web项目并集成Cesium。初始化项目 打开终端执行以下命令npm create vitelatest cesium-fluid-simulation -- --template vanilla cd cesium-fluid-simulation npm install安装Cesiumnpm install cesium安装Vite插件用于处理Cesium的静态资源npm install vitejs/plugin-legacy vite-plugin-cesium --save-devvite-plugin-cesium能自动配置Cesium所需的别名和拷贝Workers等资源。配置vite.config.js 在项目根目录创建或修改vite.config.js文件import { defineConfig } from vite import cesium from vite-plugin-cesium export default defineConfig({ plugins: [cesium()] })修改index.html 确保你的index.html中有一个用于承载Cesium Viewer的div容器并引入了主JavaScript文件。!DOCTYPE html html langen head meta charsetUTF-8 / link relicon typeimage/svgxml href/vite.svg / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titleCesium Fluid Simulation/title !-- 引入Cesium Widgets的CSS -- link relstylesheet href./node_modules/cesium/Build/Cesium/Widgets/widgets.css / style html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } /style /head body div idcesiumContainer/div script typemodule src/src/main.js/script /body /html创建主入口文件src/main.jsimport * as Cesium from cesium; import ./style.css // 设置Cesium静态资源路径Vite插件已处理此步通常可选 // window.CESIUM_BASE_URL ./node_modules/cesium/Build/Cesium/; // 初始化Cesium Viewer const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: Cesium.createWorldTerrain(), baseLayerPicker: false, animation: false, timeline: false, fullscreenButton: false, geocoder: false, homeButton: false, sceneModePicker: false, navigationHelpButton: false, infoBox: false, selectionIndicator: false, }); // 设置初始视角可选 viewer.camera.setView({ destination: Cesium.Cartesian3.fromDegrees(116.4, 39.9, 1500000), // 北京上空 orientation: { heading: 0.0, pitch: -90, // 垂直向下看 roll: 0.0 } }); // 后续的流体模拟代码将在这里添加 console.log(Cesium Viewer initialized.);运行项目npm run dev在浏览器中打开控制台给出的本地地址如http://localhost:5173你应该能看到Cesium地球。至此基础环境搭建完成。接下来我们将进入核心部分创建自定义的流体模拟Primitive。3. 深入原理Primitive, DrawCommand 与着色器在编写代码前理解这三个核心组件的协作方式至关重要。3.1 Cesium Primitive 架构一个Cesium.Primitive主要由两部分构成Geometry定义几何形状如矩形、球体、多边形的顶点数据位置、纹理坐标、法线等。Appearance定义渲染外观其核心是着色器程序ShaderProgram包含了顶点着色器Vertex Shader和片段着色器Fragment Shader。对于流体模拟我们通常使用一个简单的矩形Geometry覆盖目标区域。所有的“魔法”都发生在Appearance的着色器中。3.2 自定义 DrawCommand当使用Primitive时Cesium内部会为我们生成DrawCommand。但对于更极致的控制例如多阶段渲染、后处理我们可以直接创建和提交DrawCommand。本文方案主要使用Primitive因为它更易于管理生命周期和与Cesium场景图集成。但理解DrawCommand有助于调试和未来扩展。3.3 着色器与流体模拟流体模拟的核心算法将在片段着色器中实现。我们采用经典的“速度-压力”场方法并用片段着色器进行求解。基本步骤是初始化创建两个纹理Texture分别用于存储速度场Velocity和密度场Density。平流Advection模拟流体微元随着速度场移动的过程。新位置密度 采样(旧纹理, 当前位置 - 速度 * 时间步长)。扩散Diffusion模拟粘度导致的动量扩散。通常用迭代法如Jacobi迭代求解泊松方程这一步计算量较大。施加力Force Application根据用户交互如鼠标点击或外部力如重力、风更新速度场。投影Projection确保速度场是无散的Divergence-Free即保持质量守恒。这同样需要求解一个泊松方程。渲染最后根据密度场可能加上颜色映射渲染到屏幕。由于WebGL片段着色器不能直接写回正在读写的纹理我们需要使用**乒乓缓冲Ping-Pong Buffer**技术准备两组纹理当前帧读取A、写入B下一帧则读取B、写入A。4. 完整实战实现Cesium流体模拟Primitive我们将把上述原理转化为代码。主要步骤包括创建渲染纹理、编写着色器、构建Primitive、实现动画更新循环。4.1 创建流体模拟管理器类首先创建一个类来管理整个流体模拟的状态和资源。在src目录下创建FluidSimulation.js。// src/FluidSimulation.js import * as Cesium from cesium; export class FluidSimulation { constructor(viewer, options {}) { this.viewer viewer; this.scene viewer.scene; this._frameNumber 0; // 配置参数 this.resolution options.resolution || 512; // 模拟纹理的分辨率 this.simulationRectangle options.simulationRectangle || Cesium.Rectangle.fromDegrees(-1, -1, 1, 1); // 模拟区域经纬度范围 this.dissipation options.dissipation || 0.99; // 密度消散系数 this.velocityDissipation options.velocityDissipation || 0.99; // 速度消散系数 this.pressureIterations options.pressureIterations || 20; // 压力投影迭代次数 // 内部状态 this._velocityTextures [null, null]; // 乒乓缓冲的速度纹理 this._densityTextures [null, null]; // 乒乓缓冲的密度纹理 this._pressureTextures [null, null]; // 乒乓缓冲的压力纹理用于投影 this._divergenceTexture null; // 散度纹理 this._isInitialized false; // 渲染目标Framebuffer this._framebuffer null; // 自定义Primitive this._fluidPrimitive null; // 鼠标交互相关 this._lastMousePosition new Cesium.Cartesian2(); this._currentMousePosition new Cesium.Cartesian2(); this._isMouseDown false; this._forceRadius options.forceRadius || 0.05; // 施加力的半径归一化坐标 this.init(); } async init() { await this._createTextures(); await this._createShaders(); await this._createPrimitive(); this._setupInteraction(); this._isInitialized true; // 注册到场景的preUpdate事件进行每帧更新 this.scene.preUpdate.addEventListener(this._update.bind(this)); } // ... 后续方法将在这里实现 }4.2 创建渲染纹理我们需要创建多个浮点纹理gl.FLOAT来存储模拟数据。在_createTextures方法中实现。// 在 FluidSimulation 类中添加方法 async _createTextures() { const context this.scene.context; const resolution this.resolution; const textureOptions { width: resolution, height: resolution, pixelFormat: Cesium.PixelFormat.RGBA, pixelDatatype: Cesium.PixelDatatype.FLOAT, // 使用浮点纹理保证精度 }; // 创建速度、密度、压力、散度纹理 for (let i 0; i 2; i) { this._velocityTextures[i] new Cesium.Texture({ context: context, ...textureOptions }); this._densityTextures[i] new Cesium.Texture({ context: context, ...textureOptions }); this._pressureTextures[i] new Cesium.Texture({ context: context, ...textureOptions }); } this._divergenceTexture new Cesium.Texture({ context: context, ...textureOptions }); // 初始化纹理为黑色零值 const clearCommand new Cesium.ClearCommand({ color: new Cesium.Color(0.0, 0.0, 0.0, 0.0), framebuffer: this._getFramebufferForTexture(this._velocityTextures[0]) }); clearCommand.execute(context); // ... 同样方式清除其他初始纹理 }4.3 编写着色器代码这是最核心的部分。我们需要多个着色器程序分别对应平流、扩散、施加力、计算散度、求解压力等步骤。我们将这些着色器代码以字符串形式嵌入在JavaScript中。这里以平流着色器和渲染着色器为例。平流着色器 (advection.vert/frag): 平流步骤负责将场速度或密度沿着速度方向移动。// 在 FluidSimulation 类中定义着色器源码 _getAdvectionShaderSource() { const vertSource attribute vec3 position; attribute vec2 textureCoordinates; varying vec2 v_textureCoordinates; void main() { v_textureCoordinates textureCoordinates; gl_Position vec4(position, 1.0); } ; const fragSource precision highp float; uniform sampler2D u_texture; // 要平流的场速度或密度 uniform sampler2D u_velocityTexture; // 速度场 uniform vec2 u_resolution; uniform float u_dt; // 时间步长 uniform float u_dissipation; // 消散系数 varying vec2 v_textureCoordinates; void main() { vec2 uv v_textureCoordinates; // 根据当前速度回溯上一个位置 vec2 velocity texture2D(u_velocityTexture, uv).rg * u_resolution; vec2 prevUV uv - (u_dt * velocity) / u_resolution; // 从上一个位置采样 vec4 value texture2D(u_texture, prevUV); // 应用消散 value * u_dissipation; gl_FragColor value; } ; return { vertSource, fragSource }; }渲染着色器 (render.vert/frag): 这个着色器用于将最终的密度场渲染到Cesium地球表面的矩形上。_getRenderShaderSource() { const vertSource attribute vec3 position3DHigh; attribute vec3 position3DLow; attribute vec2 st; attribute float batchId; varying vec2 v_textureCoordinates; void main() { v_textureCoordinates st; vec4 p czm_computePosition(); gl_Position czm_modelViewProjectionRelativeToEye * p; } ; const fragSource precision highp float; uniform sampler2D u_densityTexture; varying vec2 v_textureCoordinates; uniform vec3 u_color; // 流体颜色 void main() { vec2 uv v_textureCoordinates; float density texture2D(u_densityTexture, uv).r; // 简单的颜色映射密度值越高颜色越深/越亮 vec3 color u_color * density; // 添加一些透明度让流体看起来更自然 float alpha smoothstep(0.0, 0.5, density); gl_FragColor vec4(color, alpha); } ; return { vertSource, fragSource }; }你需要继续实现_getDiffusionShaderSource,_getForceShaderSource,_getDivergenceShaderSource,_getPressureShaderSource等方法。其结构与平流着色器类似但实现不同的物理方程。4.4 创建自定义Primitive现在我们使用上面编写的渲染着色器来创建最终显示流体的Primitive。async _createPrimitive() { const rectangle this.simulationRectangle; // 1. 创建矩形几何体 const geometry new Cesium.RectangleGeometry({ rectangle: rectangle, vertexFormat: Cesium.VertexFormat.POSITION_AND_ST, // 需要纹理坐标 height: 0 // 贴在地面上 }); const geometryInstance new Cesium.GeometryInstance({ geometry: geometry, id: fluidSurface }); // 2. 创建自定义外观使用我们的渲染着色器 const renderShaderSource this._getRenderShaderSource(); const renderShaderProgram new Cesium.ShaderProgram({ context: this.scene.context, vertexShaderSource: renderShaderSource.vertSource, fragmentShaderSource: renderShaderSource.fragSource, attributeLocations: { position3DHigh: 0, position3DLow: 1, st: 2, batchId: 3 } }); const uniformMap { u_densityTexture: () this._densityTextures[0], // 读取当前密度纹理 u_color: () new Cesium.Color(0.1, 0.3, 1.0) // 蓝色流体 }; const appearance new Cesium.Appearance({ translucent: true, closed: false, renderState: { depthTest: { enabled: true }, depthMask: false, // 允许深度测试但不写入深度避免遮挡地形 blending: Cesium.BlendingState.ALPHA_BLEND } }); // 覆盖外观的着色器程序 appearance._material null; appearance._shaderProgram renderShaderProgram; appearance._uniformMap uniformMap; // 3. 创建并添加Primitive到场景 this._fluidPrimitive new Cesium.Primitive({ geometryInstances: geometryInstance, appearance: appearance, asynchronous: false, releaseGeometryInstances: false }); this.scene.primitives.add(this._fluidPrimitive); }4.5 实现模拟更新循环在_update方法中我们需要按顺序执行多个模拟步骤平流、扩散、施加力、投影并交换乒乓缓冲。_update(frameState) { if (!this._isInitialized) return; const context frameState.context; const dt 1.0 / 60.0; // 假设60帧实际应根据帧时间计算 // 步骤1: 平流速度场 this._advect(this._velocityTextures[0], this._velocityTextures[1], this._velocityTextures[0], this.velocityDissipation, dt); this._swapTextures(this._velocityTextures); // 步骤2: 平流密度场 this._advect(this._densityTextures[0], this._velocityTextures[0], this._densityTextures[1], this.dissipation, dt); this._swapTextures(this._densityTextures); // 步骤3: 施加外力如鼠标交互 if (this._isMouseDown) { this._applyForce(this._velocityTextures[0], this._currentMousePosition, dt); } // 步骤4: 速度扩散粘度 for (let i 0; i 4; i) { this._diffuse(this._velocityTextures[0], this._velocityTextures[1], 0.1, dt); // 0.1是粘度系数 this._swapTextures(this._velocityTextures); } // 步骤5: 压力投影确保速度场无散 this._computeDivergence(this._velocityTextures[0], this._divergenceTexture); this._clearTexture(this._pressureTextures[0]); for (let i 0; i this.pressureIterations; i) { this._solvePressure(this._pressureTextures[0], this._divergenceTexture, this._pressureTextures[1]); this._swapTextures(this._pressureTextures); } this._subtractGradient(this._velocityTextures[0], this._pressureTextures[0], this._velocityTextures[1]); this._swapTextures(this._velocityTextures); this._frameNumber; }你需要实现_advect,_diffuse,_applyForce,_computeDivergence,_solvePressure,_subtractGradient,_swapTextures等方法。这些方法的核心是使用对应的着色器程序将源纹理渲染到目标纹理即渲染到纹理。4.6 添加鼠标交互为了让模拟更直观我们添加鼠标交互来施加力。_setupInteraction() { const canvas this.scene.canvas; const that this; const getNormalizedMousePosition (event) { const rect canvas.getBoundingClientRect(); const x event.clientX - rect.left; const y event.clientY - rect.top; // 转换为纹理UV坐标 (0到1) return new Cesium.Cartesian2(x / canvas.width, 1.0 - y / canvas.height); // 注意Y轴翻转 }; canvas.addEventListener(mousedown, (event) { that._isMouseDown true; that._lastMousePosition getNormalizedMousePosition(event); that._currentMousePosition Cesium.Cartesian2.clone(that._lastMousePosition); }); canvas.addEventListener(mousemove, (event) { if (!that._isMouseDown) return; that._currentMousePosition getNormalizedMousePosition(event); // 计算鼠标移动方向作为力 // 这部分逻辑在_applyForce中实现 }); canvas.addEventListener(mouseup, () { that._isMouseDown false; }); canvas.addEventListener(mouseleave, () { that._isMouseDown false; }); }4.7 在主文件中使用最后在src/main.js中初始化我们的流体模拟。// src/main.js (在viewer初始化后) import { FluidSimulation } from ./FluidSimulation.js; // ... viewer初始化代码 ... const fluidSim new FluidSimulation(viewer, { resolution: 256, // 分辨率越高效果越精细性能要求越高 simulationRectangle: Cesium.Rectangle.fromDegrees(-0.5, -0.5, 0.5, 0.5), // 模拟一小块区域 dissipation: 0.998, velocityDissipation: 0.995, pressureIterations: 20 }); // 为了看到效果可以添加一些初始扰动 setTimeout(() { // 模拟在中心点施加一个向上的力 // 这里需要暴露一个public方法例如 fluidSim.addForce(centerUV, forceVector) // 为了简化我们先不实现依靠鼠标交互 }, 1000);现在运行项目(npm run dev)在地球上指定的矩形区域内你应该能看到一个蓝色的矩形。当你用鼠标在该区域点击并拖动时应该能触发模拟并看到流体的运动效果前提是所有着色器步骤已正确实现。5. 常见问题与性能优化在实际实现和运行中你可能会遇到以下问题5.1 常见问题排查问题现象可能原因解决思路屏幕一片黑没有流体显示1. 着色器编译错误。2. 纹理没有正确初始化或绑定。3. Primitive的几何体范围不对或深度测试问题。1. 打开浏览器开发者工具查看Console和WebGL错误。2. 检查_createTextures中纹理创建是否成功gl.checkFramebufferStatus。3. 尝试将appearance的depthMask设为falseblending启用。先用一个纯色测试渲染着色器。流体有显示但不动或行为怪异1. 模拟步骤顺序错误。2. 着色器中的物理公式如时间步长、消散系数参数不当。3. 乒乓缓冲交换逻辑错误。1. 确保_update中的步骤顺序正确平流 - 施加力 - 扩散 - 投影。2. 调整dt、dissipation等参数。从Shadertoy参考代码中核对公式。3. 在每一步渲染后用console.log确认读写纹理是否正确交换。性能非常差页面卡顿1. 模拟分辨率(resolution)设置过高。2. 压力/扩散迭代次数(pressureIterations)过多。3. 每帧执行的模拟步骤太多。1. 从较低分辨率如128x128开始调试。2. 减少迭代次数10-20次通常足够。3. 考虑是否每帧都需要执行所有步骤可以尝试降低模拟频率。鼠标交互没有反应1. 鼠标坐标到UV坐标转换错误。2._applyForce着色器中的力计算或纹理写入有问题。3. 事件监听未正确绑定到Cesium的canvas上。1. 打印_currentMousePosition确认其在[0,1]范围内。2. 在_applyForce着色器中先尝试绘制一个固定颜色的圆到速度纹理看是否生效。3. 确认canvas变量获取的是this.scene.canvas。流体边缘有锯齿或闪烁1. 纹理采样时在边界处越界。2. 没有使用clampToEdge的纹理包装方式。1. 在着色器中对UV坐标进行钳制uv clamp(uv, 0.0, 1.0);。2. 在创建纹理时设置wrapS和wrapT为Cesium.TextureWrap.CLAMP_TO_EDGE。5.2 性能优化建议降低分辨率这是最有效的优化手段。256x256的纹理在大多数情况下已经能提供不错的效果。减少迭代次数压力求解和扩散的Jacobi迭代非常消耗性能。尝试找到视觉效果和性能的平衡点如10-15次。使用半浮点纹理如果浏览器支持OES_texture_half_float扩展可以将PixelDatatype改为HALF_FLOAT减少显存带宽和占用。降频模拟不是每一帧都必须要更新模拟。可以尝试每两帧更新一次物理模拟中间帧只进行渲染。优化着色器避免在着色器中使用分支和循环特别是非恒定循环减少复杂数学函数如sin,pow的使用。利用WebGL 2.0确保使用WebGL 2.0上下文它提供更多纹理格式和着色器能力。6. 进阶扩展与工程实践实现基础版本后你可以考虑以下方向进行扩展使其更强大、更实用多物质模拟扩展密度场为RGBA四个通道分别模拟不同物质如水、油、染料并定义它们之间的相互作用。与地形交互将地形高度图作为模拟的边界条件实现流体沿地形流动的效果。这需要将地形高度数据传入着色器。性能监控集成Cesium的PerformanceDisplay来实时查看帧率并动态调整模拟精度。配置化将流体参数粘度、力强度、颜色暴露为GUI控件方便实时调节。可以使用dat.GUI或lil-gui库。粒子系统结合用流体速度场驱动一个粒子系统可以更直观地显示流线效果更炫酷。保存与回放将每一帧的模拟状态纹理数据保存下来实现模拟结果的回放和分享。工程实践提醒资源释放在FluidSimulation类中添加destroy方法确保在移除Primitive或关闭页面时正确释放纹理、着色器程序和帧缓冲对象防止内存泄漏。错误处理着色器编译和链接可能失败务必用gl.getShaderInfoLog和gl.getProgramInfoLog获取错误信息并妥善处理。降级方案检查WebGL 2.0和浮点纹理支持。在不支持的浏览器中应优雅降级例如显示静态效果或提示。7. 总结通过本文我们完成了一个在Cesium中集成高性能流体模拟的完整方案。我们从Cesium的底层渲染机制Primitive和DrawCommand讲起深入剖析了利用片段着色器进行GPGPU风格流体计算的核心原理并一步步实现了从纹理管理、着色器编写、模拟循环到交互集成的所有代码。关键收获掌握了Cesium高级渲染API你不再局限于Entity能够利用Primitive和自定义着色器创造任何想象中的可视化效果。理解了基于物理的模拟思路将复杂的Navier-Stokes方程拆解为平流、扩散、投影等可并行计算的步骤并用渲染管线实现。构建了可复用的工程框架本文提供的FluidSimulation类结构清晰你可以轻松地修改参数、替换着色器算法或将其整合到更大的数字孪生应用中。流体模拟只是一个起点。这套基于Primitive和自定义着色器的模式同样可以用于实现体渲染如体积云、爆炸烟雾、动态水面、热力图扩散等众多高级特效。希望这篇文章能成为你探索Cesium可视化深水区的有力跳板。动手将代码跑起来调整参数观察变化是理解这一切的最佳方式。如果在实现过程中遇到问题回顾“常见问题排查”部分并善用浏览器开发者工具中的WebGL调试功能大部分难题都能迎刃而解。