在三维地理信息可视化领域CesiumJS 以其强大的三维地球渲染能力而闻名。然而其核心定位是地理空间数据的展示对于高度动态、基于物理的流体模拟这类特效原生支持相对有限。将 Shadertoy 上那些令人惊艳的流体模拟效果集成到 Cesium 场景中是一个结合了 WebGL 底层渲染与 Cesium 高层框架的进阶挑战。这要求开发者不仅要理解流体模拟的数学原理如纳维-斯托克斯方程或其简化形式更要深入 Cesium 的渲染管线特别是其PrimitiveAPI 和DrawCommand机制才能绕过框架限制直接向 GPU 下达绘制指令。本文面向已经熟悉 Cesium 基础开发并希望在其三维地球上实现自定义动态可视化效果如烟雾、水流、火焰等流体的开发者。我们将从零开始剖析如何利用 Cesium 的Primitive创建一个自定义的DrawCommand将一段来自 Shadertoy 风格的 GLSL 着色器代码实现流体模拟嵌入到 Cesium 场景中。整个过程将涉及 Cesium 渲染架构理解、WebGL 状态管理、着色器编写与调试最终实现一个可交互、可配置的流体模拟图层。1. 理解 Cesium 渲染管线与自定义绘制的入口在 Cesium 中所有渲染最终都通过 WebGL 进行。为了管理复杂的场景状态如相机、地形、图层顺序Cesium 构建了一套完整的渲染指令队列系统。我们自定义的流体效果需要将自己“注册”到这个系统中。1.1 Cesium 的 Primitive 与 DrawCommandPrimitive是 Cesium 中表示可渲染对象的高级抽象。一个Primitive可以包含一个或多个PrimitiveInstance它们共享相同的几何体和外观Appearance。然而对于完全自定义的、特别是基于片段着色器Fragment Shader驱动的特效使用标准的Geometry和Appearance可能不够灵活。这时我们需要深入到Primitive的内部机制Primitive在每一帧的update方法中会创建或更新一系列DrawCommand。DrawCommand是 Cesium 对 WebGL 绘制调用gl.drawArrays或gl.drawElements的封装它包含了执行一次绘制所需的所有信息顶点数组对象VAO、着色器程序ShaderProgram、统一变量Uniforms、WebGL 状态如混合、深度测试等。我们的目标就是创建一个自定义的Primitive在其update方法中根据当前帧的状态构造并提交一个承载着我们流体着色器的DrawCommand。1.2 为何选择 Shadertoy 风格的着色器Shadertoy 网站上的许多特效都采用“全屏片段着色器”技术。它通常只渲染一个覆盖屏幕的四边形或两个三角形所有视觉效果的计算都在片段着色器中完成通过传入时间、分辨率、鼠标位置等统一变量来驱动动画。这种模式非常适合移植到 Cesium 中作为一个后处理效果或覆盖在特定区域的图层。将 Shadertoy 代码移植到 Cesium 需要注意几点坐标系转换Shadertoy 使用归一化的屏幕坐标fragCoord.xy / iResolution.xy而 Cesium 中我们需要将地理坐标或世界坐标转换到裁剪空间和屏幕空间。纹理输入Shadertoy 的iChannel0...3对应纹理采样。在 Cesium 中我们可以将 Cesium 的视图纹理如深度图、颜色图作为输入或者使用自己生成的噪声纹理。时间同步使用 Cesium 的JulianDate和simulationTime来驱动动画保证与 Cesium 场景时间同步。2. 环境准备与项目结构在开始编码前需要确保开发环境就绪。我们将创建一个简单的 Web 项目来集成 Cesium 和我们的自定义流体 Primitive。2.1 基础环境配置首先通过 npm 或直接引入 CDN 方式获取 Cesium。本文以 CDN 为例便于快速开始。!DOCTYPE html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCesium Fluid Simulation with Custom Primitive/title script srchttps://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js/script link hrefhttps://cesium.com/downloads/cesiumjs/releases/1.107/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 src./main.js/script /body /html2.2 项目文件结构一个清晰的结构有助于管理代码。建议按如下方式组织your-project/ ├── index.html # 主页面引入Cesium和脚本 ├── main.js # 应用主入口初始化Cesium Viewer ├── FluidPrimitive.js # 自定义流体Primitive类 ├── shaders/ # GLSL着色器代码目录 │ ├── fluid.vert # 顶点着色器 │ └── fluid.frag # 片段着色器核心流体模拟逻辑 └── assets/ # 可选存放噪声纹理等资源3. 实现自定义 FluidPrimitive 类这是整个项目的核心。我们将创建一个继承自Cesium.Primitive的类或实现其接口负责管理着色器程序、几何体并在每帧生成DrawCommand。3.1 类骨架与构造函数在FluidPrimitive.js中我们首先定义类并接收一些配置参数如流体覆盖的矩形地理范围、模拟速度等。// FluidPrimitive.js class FluidPrimitive { /** * 创建一个覆盖指定地理范围的流体模拟图层。 * param {Object} options 配置选项 * param {Cesium.Rectangle} options.rectangle - 流体覆盖的地理矩形区域WGS84经纬度。 * param {Number} [options.speed1.0] - 模拟速度乘数。 * param {Cesium.Color} [options.baseColorCesium.Color.BLUE.withAlpha(0.7)] - 流体基础颜色。 */ constructor(options) { this._rectangle options.rectangle; this._speed Cesium.defaultValue(options.speed, 1.0); this._baseColor Cesium.defaultValue(options.baseColor, Cesium.Color.BLUE.withAlpha(0.7)); // 内部状态 this._primitive undefined; // 将关联的Cesium.Primitive对象 this._command undefined; // 每帧的DrawCommand this._vertexArray undefined; this._shaderProgram undefined; this._uniformMap {}; // 用于销毁的资源列表 this._resources []; // 标记为需要更新 this._dirty true; } // ... 其他方法 }3.2 着色器代码编写这是流体效果的灵魂。我们先创建一个简单的、基于噪声和时间的动态波纹效果作为起点。这比完整的纳维-斯托克斯求解器简单但足以演示流程。顶点着色器 (shaders/fluid.vert): 它的主要任务是将地理坐标经纬度转换到 WebGL 的裁剪空间。我们可以利用 Cesium 内置的czm_modelViewProjection矩阵。// shaders/fluid.vert attribute vec3 position3DHigh; attribute vec3 position3DLow; attribute vec2 st; // 纹理坐标用于在矩形内插值 varying vec2 v_textureCoordinates; void main() { // 将高精度位置编码为vec4供czm_translateRelativeToEye使用 vec4 p czm_translateRelativeToEye(position3DHigh, position3DLow); // 应用模型-视图-投影变换 gl_Position czm_modelViewProjection * p; // 传递纹理坐标到片段着色器 v_textureCoordinates st; }片段着色器 (shaders/fluid.frag): 这里实现一个简单的、基于噪声的流动效果。我们使用经典的分形噪声fractal noise来模拟流体的动态细节。// shaders/fluid.frag uniform sampler2D u_noiseTexture; // 噪声纹理 uniform float u_time; // 累计时间秒 uniform vec4 u_baseColor; // 基础颜色RGBA uniform vec2 u_resolution; // 绘制区域分辨率像素 uniform float u_speed; // 速度乘数 varying vec2 v_textureCoordinates; // 简单的伪随机函数用于生成噪声 float hash(vec2 p) { p fract(p * vec2(123.34, 456.21)); p dot(p, p 45.32); return fract(p.x * p.y); } // 2D 值噪声 float noise(vec2 p) { vec2 i floor(p); vec2 f fract(p); // 双线性插值 float a hash(i); float b hash(i vec2(1.0, 0.0)); float c hash(i vec2(0.0, 1.0)); float d hash(i vec2(1.0, 1.0)); vec2 u f * f * (3.0 - 2.0 * f); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } // 分形布朗运动FBM生成更自然的噪声 float fbm(vec2 p) { float value 0.0; float amplitude 0.5; float frequency 1.0; for (int i 0; i 4; i) { value amplitude * noise(p * frequency); amplitude * 0.5; frequency * 2.0; } return value; } void main() { vec2 uv v_textureCoordinates; // 引入时间流动和速度控制 float time u_time * u_speed; // 使用FBM生成动态噪声作为流体密度/高度场 vec2 flow vec2(0.2, 0.5) * time; // 流动方向 float density fbm(uv * 3.0 flow); // 添加第二层细节尺度不同流动方向稍异 vec2 detailFlow vec2(-0.1, 0.3) * time * 0.7; float detail fbm(uv * 8.0 detailFlow) * 0.3; density detail; // 将密度值映射到颜色。可以设计更复杂的映射。 vec3 color u_baseColor.rgb; // 密度高的地方颜色更亮/更饱和 color mix(color * 0.8, color * 1.2, density); // 根据密度调整透明度 float alpha u_baseColor.a * (0.5 0.5 * density); gl_FragColor vec4(color, alpha); }3.3 初始化几何体与着色器程序在FluidPrimitive类中我们需要一个方法来创建覆盖指定矩形区域的几何体一个简单的四边形并编译链接我们的着色器。// FluidPrimitive.js 中新增方法 _createGeometry(geometry) { const rectangle this._rectangle; // 使用Cesium的GeometryInstance创建矩形几何体 const instance new Cesium.GeometryInstance({ geometry : new Cesium.RectangleGeometry({ rectangle : rectangle, vertexFormat : Cesium.VertexFormat.POSITION_AND_ST, // 包含位置和纹理坐标 height: 0 // 可以设置一个高度如果希望流体悬空 }), id : fluidGeometryInstance }); // 创建或更新Primitive if (!this._primitive) { this._primitive new Cesium.Primitive({ geometryInstances : instance, appearance : new Cesium.Appearance({ // 注意这里使用一个虚拟的Appearance实际绘制由我们的DrawCommand接管 // 但Primitive需要它来通过Cesium的默认渲染流程 material : Cesium.Material.fromType(Color, { color : Cesium.Color.WHITE }), translucent : true }), asynchronous : false // 同步创建便于控制 }); // 标记为自定义避免Cesium用默认方式渲染它 this._primitive._customCommand true; } // 获取底层VertexArray用于我们的DrawCommand const frameState /* 如何获取frameState这通常在update方法中 */; // 注意直接获取Primitive内部的VertexArray比较复杂。更常见的做法是 // 我们自己创建几何体和VertexArray完全绕过Cesium的Primitive几何体管理。 // 为了简化下文将采用另一种更直接的自定义绘制路径。 } // 因此我们调整策略不依赖Cesium.Primitive的几何体而是自己创建和管理一个简单的四边形几何体。 _initResources(frameState) { const context frameState.context; // 1. 创建着色器程序 const vertexShaderSource ...; // 从文件加载或内联字符串 const fragmentShaderSource ...; this._shaderProgram context.shaderCache.createDerivedShaderProgram( fluidShader, { vertexShaderSource: vertexShaderSource, fragmentShaderSource: fragmentShaderSource, attributeLocations: { // 定义属性在着色器中的位置索引 position3DHigh: 0, position3DLow: 1, st: 2 } } ); this._resources.push(this._shaderProgram); // 2. 创建顶点数组 (VAO) // 为矩形四个角定义顶点数据高精度位置 纹理坐标 const positions Cesium.RectangleGeometry.computeRectangle( this._rectangle, Cesium.Ellipsoid.WGS84, false // 不挤压 ).attributes.position.values; // 计算纹理坐标 (0,0) 到 (1,1) const st new Float32Array([0,0, 1,0, 1,1, 0,1]); // 定义索引两个三角形 const indices new Uint16Array([0,1,2, 0,2,3]); const vertexArray new Cesium.VertexArray({ context: context, attributes: [{ index: 0, // position3DHigh vertexBuffer: context.createVertexBuffer(positions, Cesium.BufferUsage.STATIC_DRAW), componentsPerAttribute: 3, componentDatatype: Cesium.ComponentDatatype.FLOAT }, { index: 2, // st vertexBuffer: context.createVertexBuffer(st, Cesium.BufferUsage.STATIC_DRAW), componentsPerAttribute: 2, componentDatatype: Cesium.ComponentDatatype.FLOAT }], indexBuffer: context.createIndexBuffer(indices, Cesium.BufferUsage.STATIC_DRAW, Cesium.IndexDatatype.UNSIGNED_SHORT) }); this._vertexArray vertexArray; this._resources.push(vertexArray); // 3. 加载噪声纹理可选可以从外部图片加载或程序生成 // 这里创建一个简单的程序化噪声纹理作为示例 const noiseSize 256; const noiseData new Uint8Array(noiseSize * noiseSize * 4); for(let i0; inoiseSize*noiseSize; i) { const value Math.floor(Math.random() * 256); noiseData[i*4] value; noiseData[i*41] value; noiseData[i*42] value; noiseData[i*43] 255; } const noiseTexture new Cesium.Texture({ context: context, width: noiseSize, height: noiseSize, source: { arrayBufferView: noiseData, width: noiseSize, height: noiseSize } }); this._uniformMap.u_noiseTexture function() { return noiseTexture; }; this._resources.push(noiseTexture); // 4. 初始化其他Uniforms this._uniformMap.u_time function() { return frameState.time.totalSeconds; }; this._uniformMap.u_baseColor function() { return this._baseColor; }.bind(this); this._uniformMap.u_resolution function() { // 获取当前绘制的视口分辨率近似 return new Cesium.Cartesian2(context.drawingBufferWidth, context.drawingBufferHeight); }; this._uniformMap.u_speed function() { return this._speed; }.bind(this); }3.4 实现 update 方法并生成 DrawCommandupdate方法是Primitive接口的核心它在每一帧被调用负责更新状态并返回一个DrawCommand数组。// FluidPrimitive.js update(frameState) { // 如果是第一帧或资源未初始化则初始化 if (!this._shaderProgram) { this._initResources(frameState); } // 如果着色器程序无效则跳过 if (!Cesium.defined(this._shaderProgram) || this._shaderProgram.isDestroyed()) { return; } // 更新随时间变化的Uniforms this._uniformMap.u_time function() { return frameState.time.totalSeconds; }; // 创建或更新DrawCommand if (!this._command) { this._command new Cesium.DrawCommand({ vertexArray: this._vertexArray, shaderProgram: this._shaderProgram, uniformMap: this._uniformMap, renderState: Cesium.RenderState.fromCache({ depthTest: { enabled: true, func: Cesium.DepthFunction.LESS_OR_EQUAL // 流体应在地形和模型之后绘制 }, depthMask: false, // 不写入深度允许后续物体覆盖根据需求调整 blending: Cesium.BlendingState.ALPHA_BLEND, // 启用透明混合 // 可以设置其他WebGL状态cull, scissorTest等 }), pass: Cesium.Pass.TRANSLUCENT, // 在透明通道中绘制 owner: this // 用于调试识别 }); } else { // 更新现有Command的UniformMap this._command.uniformMap this._uniformMap; } // 将DrawCommand添加到帧状态的命令列表中 frameState.commandList.push(this._command); // 标记为已更新Cesium的PrimitiveCollection会处理它 // 实际上我们通常不直接返回而是让Primitive的update方法返回true // 并将command添加到frameState.commandList。 // 更标准的做法是让我们的FluidPrimitive被添加到一个CustomPrimitiveCollection或直接实现Primitive接口。 }3.5 实现 destroy 方法必须妥善管理 WebGL 资源防止内存泄漏。// FluidPrimitive.js destroy() { // 销毁所有创建的WebGL资源 this._resources.forEach(resource { if (resource !resource.isDestroyed) { resource.destroy(); } }); this._resources.length 0; // 清除引用 this._vertexArray undefined; this._shaderProgram undefined; this._command undefined; this._uniformMap {}; return Cesium.destroyObject(this); // 设置isDestroyed标志 } isDestroyed() { return false; // 简化实现实际应根据资源状态判断 }4. 集成到 Cesium Viewer 并运行验证现在我们需要将FluidPrimitive实例添加到 Cesium 的场景中。4.1 主程序入口 (main.js)// main.js Cesium.Ion.defaultAccessToken 你的Ion Token; // 如果需要Cesium地形/影像服务 const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: Cesium.createWorldTerrain(), baseLayerPicker: false, animation: false, timeline: false, fullscreenButton: false, geocoder: false }); // 定义流体覆盖的区域例如覆盖中国东海部分区域 const rectangle Cesium.Rectangle.fromDegrees(120.0, 25.0, 130.0, 35.0); // 创建流体Primitive实例 const fluidPrimitive new FluidPrimitive({ rectangle: rectangle, speed: 0.5, baseColor: new Cesium.Color(0.1, 0.3, 0.8, 0.6) // 半透明的蓝色 }); // 关键如何将自定义Primitive添加到场景 // 方法一使用PrimitiveCollection最简单 const primitives viewer.scene.primitives; // 我们需要一个包装器因为我们的FluidPrimitive不是真正的Cesium.Primitive // 因此我们修改FluidPrimitive使其具有一个update方法并且能被PrimitiveCollection识别。 // 或者我们创建一个代理对象。 // 方法二推荐创建一个实现Cesium.Primitive接口的包装类。 class FluidPrimitiveWrapper { constructor(fluidPrimitive) { this._fluidPrimitive fluidPrimitive; this.show true; } update(frameState) { if (!this.show) { return; } // 调用内部FluidPrimitive的update方法它会将DrawCommand添加到frameState this._fluidPrimitive.update(frameState); } destroy() { this._fluidPrimitive.destroy(); return Cesium.destroyObject(this); } isDestroyed() { return this._fluidPrimitive.isDestroyed(); } } const fluidWrapper new FluidPrimitiveWrapper(fluidPrimitive); viewer.scene.primitives.add(fluidWrapper); // 添加一些交互控制可选 const handler new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(function(movement) { const cartesian viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid); if (cartesian) { const cartographic Cesium.Cartographic.fromCartesian(cartesian); console.log(点击位置: 经度 ${Cesium.Math.toDegrees(cartographic.longitude)}, 纬度 ${Cesium.Math.toDegrees(cartographic.latitude)}); // 可以在这里更新流体的uniform例如添加一个扰动源 } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 相机飞到该区域 viewer.camera.setView({ destination: Cesium.Rectangle.fromDegrees(115, 20, 135, 40) });4.2 运行与验证启动一个本地 HTTP 服务器例如使用npx serve或python -m http.server在浏览器中打开index.html。你应该能看到在指定的矩形区域上有一层动态流动的、半透明的蓝色流体效果覆盖在地球表面。验证要点视觉效果矩形区域内应有动态的、波浪状的颜色变化且动画应随时间平滑进行。交互缩放、平移地球时流体图层应正确跟随地理坐标固定在指定矩形区域上方。性能打开浏览器的开发者工具在“性能”或“渲染”标签页中确保帧率FPS保持流畅通常 30 FPS。流体模拟是 GPU 密集型操作复杂的着色器可能影响性能。控制台检查浏览器控制台是否有 WebGL 编译错误、Uniform 未找到等错误信息。5. 关键参数、配置与高级优化5.1 核心 Uniform 参数详解在片段着色器中我们定义了多个uniform变量来控制流体外观。理解它们对调试和效果调整至关重要。Uniform 变量名类型描述典型值/作用u_timefloat从场景开始累计的秒数。驱动所有基于时间的动画。frameState.time.totalSecondsu_speedfloat全局速度乘数。控制流体演化的快慢。0.5(慢速) 到3.0(快速)u_baseColorvec4流体的基础颜色和透明度 (RGBA)。vec4(0.1, 0.3, 0.8, 0.6)u_resolutionvec2绘制区域的像素尺寸。可用于实现与分辨率无关的效果。vec2(viewportWidth, viewportHeight)u_noiseTexturesampler2D用于生成随机性的噪声纹理。可以使用程序噪声代替。一张 256x256 的灰度噪声图u_mouse(可选)vec2归一化的鼠标位置。可用于实现交互式扰动。vec2(mouseX/viewportWidth, 1.0 - mouseY/viewportHeight)5.2 从简单噪声到物理模拟上述示例使用了分形噪声FBM来模拟流体外观这属于“视觉欺骗”而非物理模拟。要实现更真实的流体如烟雾扩散、水流需要实现更复杂的着色器。核心思路是基于物理的模拟在片段着色器中实现简化的纳维-斯托克斯方程求解。这通常需要多个渲染通道Pass和乒乓缓冲区Ping-Pong Buffer来迭代求解速度场和密度场。在 Cesium 中实现多通道渲染较为复杂可能需要使用Framebuffer和多个DrawCommand。纹理反馈将上一帧的渲染结果作为下一帧的输入实现持续的演化。这要求我们将流体状态速度、密度渲染到纹理中并在下一帧采样这些纹理。边界与外力在着色器中根据地理位置uv坐标或外部输入如鼠标添加力场或边界条件。一个进阶的片段着色器框架可能如下// 伪代码展示多通道思路 uniform sampler2D u_velocityTexture; // 上一帧速度场 uniform sampler2D u_densityTexture; // 上一帧密度场 uniform float u_dt; // 时间步长 void main() { vec2 uv v_textureCoordinates; // 1. 平流 (Advection): 根据速度场移动密度和速度自身 vec2 vel texture2D(u_velocityTexture, uv).xy; vec2 prevPos uv - vel * u_dt; float density texture2D(u_densityTexture, prevPos).r; // 2. 扩散 (Diffusion): 使用卷积核模糊速度场简化处理 // 3. 施加外力 (Force): 根据鼠标位置或预设力场更新速度 // 4. 投影 (Projection): 确保速度场是无散的简化时可省略 // 输出新的速度场和密度场到不同的渲染目标 gl_FragColor vec4(newVelocity, density, 1.0); }在 Cesium 中实现这套流程需要创建多个Texture对象作为渲染目标并安排多个DrawCommand按顺序执行这涉及到更底层的Framebuffer管理。5.3 性能优化建议流体模拟是 GPU 密集型操作尤其是在覆盖大面积或使用复杂着色器时。控制绘制区域精确设置rectangle只覆盖需要的区域。避免覆盖整个屏幕。降低分辨率如果效果允许可以以较低的分辨率渲染流体纹理然后上采样。这可以通过在离屏的Framebuffer中使用较小的纹理实现。简化着色器减少循环迭代次数、使用低精度的浮点数mediump、合并计算步骤。利用 LOD根据相机距离动态调整流体模拟的细节级别LOD。远处可以使用更简单的噪声或停止模拟。避免每帧创建资源DrawCommand、VertexArray、ShaderProgram等应在初始化时创建并在update中复用。只更新需要变化的uniform。谨慎使用透明混合blending是昂贵的操作。如果流体完全不透明可以关闭混合并正确设置深度测试。6. 常见问题排查在集成自定义 WebGL 绘制到 Cesium 的过程中会遇到各种问题。以下是一些典型问题及其排查路径。6.1 问题屏幕上看不到任何流体效果排查步骤可能原因检查与解决1. 检查控制台错误WebGL 编译错误、链接错误、Uniform 未找到等。打开浏览器开发者工具 Console 面板。红色错误信息会直接指出问题所在如ERROR: 0:10: u_time : undeclared identifier。2. 验证 Primitive 是否被添加FluidPrimitiveWrapper未被正确添加到primitives集合或show属性为false。在update方法开始处添加console.log(update called)。确保它被调用。检查viewer.scene.primitives.length。3. 检查绘制区域rectangle设置错误区域在当前视锥体外或被地形遮挡。暂时将rectangle设置为一个非常显眼的位置如Cesium.Rectangle.fromDegrees(-10, -10, 10, 10)并确保相机看向那里。关闭地形 (viewer.terrainProvider undefined)。4. 检查深度测试深度测试设置不当流体被地球或其它物体遮挡。在DrawCommand的renderState中尝试设置depthTest: {enabled: false}。如果此时出现说明是深度问题。调整depthTest.func或确保流体的几何体高度 (height) 高于地形。5. 检查着色器输出片段着色器可能输出全透明或黑色。在片段着色器末尾硬编码一个测试颜色gl_FragColor vec4(1.0, 0.0, 0.0, 1.0);。如果出现红色方块说明着色器管线是通的问题在着色器逻辑本身。6.2 问题流体效果闪烁、撕裂或位置错乱现象可能原因解决方案闪烁 (Flickering)深度测试 Z-fighting或每帧计算的u_time等 uniform 值不稳定。对于 Z-fighting轻微调整几何体高度 (height: 0.1)。对于时间确保u_time来自frameState.time.totalSeconds它是稳定的浮点数。撕裂 (Tearing)动画更新与屏幕刷新不同步。WebGL 本身不解决撕裂这通常由浏览器垂直同步控制。确保没有在requestAnimationFrame外强制更新。Cesium 的渲染循环已处理。位置错乱顶点着色器中的坐标转换错误或rectangle与几何体不匹配。检查顶点着色器中的czm_modelViewProjection计算。确保用于创建VertexArray的顶点数据与rectangle对应。使用Cesium.RectangleGeometry辅助计算顶点。6.3 问题性能低下帧率骤降检查点优化方向着色器复杂度使用浏览器开发者工具的Performance或Shader Editor分析片段着色器执行时间。简化循环和复杂函数如sin,pow。绘制调用次数确保只有一个DrawCommand。如果有多层流体考虑合并到一个着色器中。纹理尺寸检查u_noiseTexture等纹理的尺寸是否过大。256x256 通常足够。透明过度绘制如果流体大面积半透明会导致大量混合计算。考虑是否真的需要透明或减少透明度。几何体顶点数用于覆盖矩形的四边形只有 4 个顶点通常不是瓶颈。7. 扩展方向与最佳实践掌握了基础的自定义流体绘制后可以考虑以下方向进行深化和工程化。7.1 扩展方向集成真实物理模拟将基于 GPU 的流体求解器如 Stable Fluids 算法完整移植到 Cesium 中。这需要管理多个渲染通道和纹理缓冲区。与 Cesium 实体交互让流体效果与 Cesium 的Entity如模型、广告牌互动。例如船舶模型划过水面产生尾迹。这需要将实体的世界坐标传递到着色器作为力场源。作为后处理效果将流体效果作为全屏后处理滤镜应用而不是绑定到特定地理区域。这需要访问 Cesium 渲染的颜色和深度纹理。支持 3D 体积渲染将 2D 流体扩展到 3D 体积云、烟雾等效果。这需要用到射线步进Ray Marching技术并在着色器中处理与地形、模型的遮挡。动态数据驱动将流体的颜色、速度等参数与实时数据如海洋温度、风速绑定实现科学可视化。7.2 工程最佳实践模块化着色器代码将噪声函数、物理模拟步骤等封装成 GLSL 头文件.glsl通过字符串拼接或#pragma指令引入提高代码复用性。统一变量管理创建一个UniformManager类来集中管理所有着色器的uniform变量自动处理类型转换和值更新。资源生命周期管理严格遵循“谁创建谁销毁”的原则。在destroy方法中释放所有 WebGL 资源并将引用置为undefined。错误处理与降级在着色器编译失败时提供降级方案例如回退到一个简单的颜色填充并在控制台输出友好错误信息。配置化将流体的所有可调参数颜色、速度、噪声尺度等暴露为类的属性并支持动态更新。更新时标记_dirty标志在下一帧更新对应的uniform。性能监控集成简单的性能检测记录每帧中流体绘制的耗时并在性能超过阈值时动态降低质量如关闭次要的噪声层。通过将 Shadertoy 风格的创意编码与 Cesium 强大的地理空间渲染能力结合我们可以在三维数字地球上创造出极具表现力的动态可视化效果。这个过程的核心在于理解并驾驭 Cesium 的DrawCommand渲染机制。从简单的噪声动画开始逐步引入物理模拟、交互和数据驱动能够构建出既美观又具有实用价值的专业级三维地理应用。 CesiumJS中集成Shadertoy流体模拟：自定义Primitive与DrawCommand实战
在三维地理信息可视化领域CesiumJS 以其强大的三维地球渲染能力而闻名。然而其核心定位是地理空间数据的展示对于高度动态、基于物理的流体模拟这类特效原生支持相对有限。将 Shadertoy 上那些令人惊艳的流体模拟效果集成到 Cesium 场景中是一个结合了 WebGL 底层渲染与 Cesium 高层框架的进阶挑战。这要求开发者不仅要理解流体模拟的数学原理如纳维-斯托克斯方程或其简化形式更要深入 Cesium 的渲染管线特别是其PrimitiveAPI 和DrawCommand机制才能绕过框架限制直接向 GPU 下达绘制指令。本文面向已经熟悉 Cesium 基础开发并希望在其三维地球上实现自定义动态可视化效果如烟雾、水流、火焰等流体的开发者。我们将从零开始剖析如何利用 Cesium 的Primitive创建一个自定义的DrawCommand将一段来自 Shadertoy 风格的 GLSL 着色器代码实现流体模拟嵌入到 Cesium 场景中。整个过程将涉及 Cesium 渲染架构理解、WebGL 状态管理、着色器编写与调试最终实现一个可交互、可配置的流体模拟图层。1. 理解 Cesium 渲染管线与自定义绘制的入口在 Cesium 中所有渲染最终都通过 WebGL 进行。为了管理复杂的场景状态如相机、地形、图层顺序Cesium 构建了一套完整的渲染指令队列系统。我们自定义的流体效果需要将自己“注册”到这个系统中。1.1 Cesium 的 Primitive 与 DrawCommandPrimitive是 Cesium 中表示可渲染对象的高级抽象。一个Primitive可以包含一个或多个PrimitiveInstance它们共享相同的几何体和外观Appearance。然而对于完全自定义的、特别是基于片段着色器Fragment Shader驱动的特效使用标准的Geometry和Appearance可能不够灵活。这时我们需要深入到Primitive的内部机制Primitive在每一帧的update方法中会创建或更新一系列DrawCommand。DrawCommand是 Cesium 对 WebGL 绘制调用gl.drawArrays或gl.drawElements的封装它包含了执行一次绘制所需的所有信息顶点数组对象VAO、着色器程序ShaderProgram、统一变量Uniforms、WebGL 状态如混合、深度测试等。我们的目标就是创建一个自定义的Primitive在其update方法中根据当前帧的状态构造并提交一个承载着我们流体着色器的DrawCommand。1.2 为何选择 Shadertoy 风格的着色器Shadertoy 网站上的许多特效都采用“全屏片段着色器”技术。它通常只渲染一个覆盖屏幕的四边形或两个三角形所有视觉效果的计算都在片段着色器中完成通过传入时间、分辨率、鼠标位置等统一变量来驱动动画。这种模式非常适合移植到 Cesium 中作为一个后处理效果或覆盖在特定区域的图层。将 Shadertoy 代码移植到 Cesium 需要注意几点坐标系转换Shadertoy 使用归一化的屏幕坐标fragCoord.xy / iResolution.xy而 Cesium 中我们需要将地理坐标或世界坐标转换到裁剪空间和屏幕空间。纹理输入Shadertoy 的iChannel0...3对应纹理采样。在 Cesium 中我们可以将 Cesium 的视图纹理如深度图、颜色图作为输入或者使用自己生成的噪声纹理。时间同步使用 Cesium 的JulianDate和simulationTime来驱动动画保证与 Cesium 场景时间同步。2. 环境准备与项目结构在开始编码前需要确保开发环境就绪。我们将创建一个简单的 Web 项目来集成 Cesium 和我们的自定义流体 Primitive。2.1 基础环境配置首先通过 npm 或直接引入 CDN 方式获取 Cesium。本文以 CDN 为例便于快速开始。!DOCTYPE html html langen head meta charsetutf-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleCesium Fluid Simulation with Custom Primitive/title script srchttps://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js/script link hrefhttps://cesium.com/downloads/cesiumjs/releases/1.107/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 src./main.js/script /body /html2.2 项目文件结构一个清晰的结构有助于管理代码。建议按如下方式组织your-project/ ├── index.html # 主页面引入Cesium和脚本 ├── main.js # 应用主入口初始化Cesium Viewer ├── FluidPrimitive.js # 自定义流体Primitive类 ├── shaders/ # GLSL着色器代码目录 │ ├── fluid.vert # 顶点着色器 │ └── fluid.frag # 片段着色器核心流体模拟逻辑 └── assets/ # 可选存放噪声纹理等资源3. 实现自定义 FluidPrimitive 类这是整个项目的核心。我们将创建一个继承自Cesium.Primitive的类或实现其接口负责管理着色器程序、几何体并在每帧生成DrawCommand。3.1 类骨架与构造函数在FluidPrimitive.js中我们首先定义类并接收一些配置参数如流体覆盖的矩形地理范围、模拟速度等。// FluidPrimitive.js class FluidPrimitive { /** * 创建一个覆盖指定地理范围的流体模拟图层。 * param {Object} options 配置选项 * param {Cesium.Rectangle} options.rectangle - 流体覆盖的地理矩形区域WGS84经纬度。 * param {Number} [options.speed1.0] - 模拟速度乘数。 * param {Cesium.Color} [options.baseColorCesium.Color.BLUE.withAlpha(0.7)] - 流体基础颜色。 */ constructor(options) { this._rectangle options.rectangle; this._speed Cesium.defaultValue(options.speed, 1.0); this._baseColor Cesium.defaultValue(options.baseColor, Cesium.Color.BLUE.withAlpha(0.7)); // 内部状态 this._primitive undefined; // 将关联的Cesium.Primitive对象 this._command undefined; // 每帧的DrawCommand this._vertexArray undefined; this._shaderProgram undefined; this._uniformMap {}; // 用于销毁的资源列表 this._resources []; // 标记为需要更新 this._dirty true; } // ... 其他方法 }3.2 着色器代码编写这是流体效果的灵魂。我们先创建一个简单的、基于噪声和时间的动态波纹效果作为起点。这比完整的纳维-斯托克斯求解器简单但足以演示流程。顶点着色器 (shaders/fluid.vert): 它的主要任务是将地理坐标经纬度转换到 WebGL 的裁剪空间。我们可以利用 Cesium 内置的czm_modelViewProjection矩阵。// shaders/fluid.vert attribute vec3 position3DHigh; attribute vec3 position3DLow; attribute vec2 st; // 纹理坐标用于在矩形内插值 varying vec2 v_textureCoordinates; void main() { // 将高精度位置编码为vec4供czm_translateRelativeToEye使用 vec4 p czm_translateRelativeToEye(position3DHigh, position3DLow); // 应用模型-视图-投影变换 gl_Position czm_modelViewProjection * p; // 传递纹理坐标到片段着色器 v_textureCoordinates st; }片段着色器 (shaders/fluid.frag): 这里实现一个简单的、基于噪声的流动效果。我们使用经典的分形噪声fractal noise来模拟流体的动态细节。// shaders/fluid.frag uniform sampler2D u_noiseTexture; // 噪声纹理 uniform float u_time; // 累计时间秒 uniform vec4 u_baseColor; // 基础颜色RGBA uniform vec2 u_resolution; // 绘制区域分辨率像素 uniform float u_speed; // 速度乘数 varying vec2 v_textureCoordinates; // 简单的伪随机函数用于生成噪声 float hash(vec2 p) { p fract(p * vec2(123.34, 456.21)); p dot(p, p 45.32); return fract(p.x * p.y); } // 2D 值噪声 float noise(vec2 p) { vec2 i floor(p); vec2 f fract(p); // 双线性插值 float a hash(i); float b hash(i vec2(1.0, 0.0)); float c hash(i vec2(0.0, 1.0)); float d hash(i vec2(1.0, 1.0)); vec2 u f * f * (3.0 - 2.0 * f); return mix(mix(a, b, u.x), mix(c, d, u.x), u.y); } // 分形布朗运动FBM生成更自然的噪声 float fbm(vec2 p) { float value 0.0; float amplitude 0.5; float frequency 1.0; for (int i 0; i 4; i) { value amplitude * noise(p * frequency); amplitude * 0.5; frequency * 2.0; } return value; } void main() { vec2 uv v_textureCoordinates; // 引入时间流动和速度控制 float time u_time * u_speed; // 使用FBM生成动态噪声作为流体密度/高度场 vec2 flow vec2(0.2, 0.5) * time; // 流动方向 float density fbm(uv * 3.0 flow); // 添加第二层细节尺度不同流动方向稍异 vec2 detailFlow vec2(-0.1, 0.3) * time * 0.7; float detail fbm(uv * 8.0 detailFlow) * 0.3; density detail; // 将密度值映射到颜色。可以设计更复杂的映射。 vec3 color u_baseColor.rgb; // 密度高的地方颜色更亮/更饱和 color mix(color * 0.8, color * 1.2, density); // 根据密度调整透明度 float alpha u_baseColor.a * (0.5 0.5 * density); gl_FragColor vec4(color, alpha); }3.3 初始化几何体与着色器程序在FluidPrimitive类中我们需要一个方法来创建覆盖指定矩形区域的几何体一个简单的四边形并编译链接我们的着色器。// FluidPrimitive.js 中新增方法 _createGeometry(geometry) { const rectangle this._rectangle; // 使用Cesium的GeometryInstance创建矩形几何体 const instance new Cesium.GeometryInstance({ geometry : new Cesium.RectangleGeometry({ rectangle : rectangle, vertexFormat : Cesium.VertexFormat.POSITION_AND_ST, // 包含位置和纹理坐标 height: 0 // 可以设置一个高度如果希望流体悬空 }), id : fluidGeometryInstance }); // 创建或更新Primitive if (!this._primitive) { this._primitive new Cesium.Primitive({ geometryInstances : instance, appearance : new Cesium.Appearance({ // 注意这里使用一个虚拟的Appearance实际绘制由我们的DrawCommand接管 // 但Primitive需要它来通过Cesium的默认渲染流程 material : Cesium.Material.fromType(Color, { color : Cesium.Color.WHITE }), translucent : true }), asynchronous : false // 同步创建便于控制 }); // 标记为自定义避免Cesium用默认方式渲染它 this._primitive._customCommand true; } // 获取底层VertexArray用于我们的DrawCommand const frameState /* 如何获取frameState这通常在update方法中 */; // 注意直接获取Primitive内部的VertexArray比较复杂。更常见的做法是 // 我们自己创建几何体和VertexArray完全绕过Cesium的Primitive几何体管理。 // 为了简化下文将采用另一种更直接的自定义绘制路径。 } // 因此我们调整策略不依赖Cesium.Primitive的几何体而是自己创建和管理一个简单的四边形几何体。 _initResources(frameState) { const context frameState.context; // 1. 创建着色器程序 const vertexShaderSource ...; // 从文件加载或内联字符串 const fragmentShaderSource ...; this._shaderProgram context.shaderCache.createDerivedShaderProgram( fluidShader, { vertexShaderSource: vertexShaderSource, fragmentShaderSource: fragmentShaderSource, attributeLocations: { // 定义属性在着色器中的位置索引 position3DHigh: 0, position3DLow: 1, st: 2 } } ); this._resources.push(this._shaderProgram); // 2. 创建顶点数组 (VAO) // 为矩形四个角定义顶点数据高精度位置 纹理坐标 const positions Cesium.RectangleGeometry.computeRectangle( this._rectangle, Cesium.Ellipsoid.WGS84, false // 不挤压 ).attributes.position.values; // 计算纹理坐标 (0,0) 到 (1,1) const st new Float32Array([0,0, 1,0, 1,1, 0,1]); // 定义索引两个三角形 const indices new Uint16Array([0,1,2, 0,2,3]); const vertexArray new Cesium.VertexArray({ context: context, attributes: [{ index: 0, // position3DHigh vertexBuffer: context.createVertexBuffer(positions, Cesium.BufferUsage.STATIC_DRAW), componentsPerAttribute: 3, componentDatatype: Cesium.ComponentDatatype.FLOAT }, { index: 2, // st vertexBuffer: context.createVertexBuffer(st, Cesium.BufferUsage.STATIC_DRAW), componentsPerAttribute: 2, componentDatatype: Cesium.ComponentDatatype.FLOAT }], indexBuffer: context.createIndexBuffer(indices, Cesium.BufferUsage.STATIC_DRAW, Cesium.IndexDatatype.UNSIGNED_SHORT) }); this._vertexArray vertexArray; this._resources.push(vertexArray); // 3. 加载噪声纹理可选可以从外部图片加载或程序生成 // 这里创建一个简单的程序化噪声纹理作为示例 const noiseSize 256; const noiseData new Uint8Array(noiseSize * noiseSize * 4); for(let i0; inoiseSize*noiseSize; i) { const value Math.floor(Math.random() * 256); noiseData[i*4] value; noiseData[i*41] value; noiseData[i*42] value; noiseData[i*43] 255; } const noiseTexture new Cesium.Texture({ context: context, width: noiseSize, height: noiseSize, source: { arrayBufferView: noiseData, width: noiseSize, height: noiseSize } }); this._uniformMap.u_noiseTexture function() { return noiseTexture; }; this._resources.push(noiseTexture); // 4. 初始化其他Uniforms this._uniformMap.u_time function() { return frameState.time.totalSeconds; }; this._uniformMap.u_baseColor function() { return this._baseColor; }.bind(this); this._uniformMap.u_resolution function() { // 获取当前绘制的视口分辨率近似 return new Cesium.Cartesian2(context.drawingBufferWidth, context.drawingBufferHeight); }; this._uniformMap.u_speed function() { return this._speed; }.bind(this); }3.4 实现 update 方法并生成 DrawCommandupdate方法是Primitive接口的核心它在每一帧被调用负责更新状态并返回一个DrawCommand数组。// FluidPrimitive.js update(frameState) { // 如果是第一帧或资源未初始化则初始化 if (!this._shaderProgram) { this._initResources(frameState); } // 如果着色器程序无效则跳过 if (!Cesium.defined(this._shaderProgram) || this._shaderProgram.isDestroyed()) { return; } // 更新随时间变化的Uniforms this._uniformMap.u_time function() { return frameState.time.totalSeconds; }; // 创建或更新DrawCommand if (!this._command) { this._command new Cesium.DrawCommand({ vertexArray: this._vertexArray, shaderProgram: this._shaderProgram, uniformMap: this._uniformMap, renderState: Cesium.RenderState.fromCache({ depthTest: { enabled: true, func: Cesium.DepthFunction.LESS_OR_EQUAL // 流体应在地形和模型之后绘制 }, depthMask: false, // 不写入深度允许后续物体覆盖根据需求调整 blending: Cesium.BlendingState.ALPHA_BLEND, // 启用透明混合 // 可以设置其他WebGL状态cull, scissorTest等 }), pass: Cesium.Pass.TRANSLUCENT, // 在透明通道中绘制 owner: this // 用于调试识别 }); } else { // 更新现有Command的UniformMap this._command.uniformMap this._uniformMap; } // 将DrawCommand添加到帧状态的命令列表中 frameState.commandList.push(this._command); // 标记为已更新Cesium的PrimitiveCollection会处理它 // 实际上我们通常不直接返回而是让Primitive的update方法返回true // 并将command添加到frameState.commandList。 // 更标准的做法是让我们的FluidPrimitive被添加到一个CustomPrimitiveCollection或直接实现Primitive接口。 }3.5 实现 destroy 方法必须妥善管理 WebGL 资源防止内存泄漏。// FluidPrimitive.js destroy() { // 销毁所有创建的WebGL资源 this._resources.forEach(resource { if (resource !resource.isDestroyed) { resource.destroy(); } }); this._resources.length 0; // 清除引用 this._vertexArray undefined; this._shaderProgram undefined; this._command undefined; this._uniformMap {}; return Cesium.destroyObject(this); // 设置isDestroyed标志 } isDestroyed() { return false; // 简化实现实际应根据资源状态判断 }4. 集成到 Cesium Viewer 并运行验证现在我们需要将FluidPrimitive实例添加到 Cesium 的场景中。4.1 主程序入口 (main.js)// main.js Cesium.Ion.defaultAccessToken 你的Ion Token; // 如果需要Cesium地形/影像服务 const viewer new Cesium.Viewer(cesiumContainer, { terrainProvider: Cesium.createWorldTerrain(), baseLayerPicker: false, animation: false, timeline: false, fullscreenButton: false, geocoder: false }); // 定义流体覆盖的区域例如覆盖中国东海部分区域 const rectangle Cesium.Rectangle.fromDegrees(120.0, 25.0, 130.0, 35.0); // 创建流体Primitive实例 const fluidPrimitive new FluidPrimitive({ rectangle: rectangle, speed: 0.5, baseColor: new Cesium.Color(0.1, 0.3, 0.8, 0.6) // 半透明的蓝色 }); // 关键如何将自定义Primitive添加到场景 // 方法一使用PrimitiveCollection最简单 const primitives viewer.scene.primitives; // 我们需要一个包装器因为我们的FluidPrimitive不是真正的Cesium.Primitive // 因此我们修改FluidPrimitive使其具有一个update方法并且能被PrimitiveCollection识别。 // 或者我们创建一个代理对象。 // 方法二推荐创建一个实现Cesium.Primitive接口的包装类。 class FluidPrimitiveWrapper { constructor(fluidPrimitive) { this._fluidPrimitive fluidPrimitive; this.show true; } update(frameState) { if (!this.show) { return; } // 调用内部FluidPrimitive的update方法它会将DrawCommand添加到frameState this._fluidPrimitive.update(frameState); } destroy() { this._fluidPrimitive.destroy(); return Cesium.destroyObject(this); } isDestroyed() { return this._fluidPrimitive.isDestroyed(); } } const fluidWrapper new FluidPrimitiveWrapper(fluidPrimitive); viewer.scene.primitives.add(fluidWrapper); // 添加一些交互控制可选 const handler new Cesium.ScreenSpaceEventHandler(viewer.canvas); handler.setInputAction(function(movement) { const cartesian viewer.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid); if (cartesian) { const cartographic Cesium.Cartographic.fromCartesian(cartesian); console.log(点击位置: 经度 ${Cesium.Math.toDegrees(cartographic.longitude)}, 纬度 ${Cesium.Math.toDegrees(cartographic.latitude)}); // 可以在这里更新流体的uniform例如添加一个扰动源 } }, Cesium.ScreenSpaceEventType.LEFT_CLICK); // 相机飞到该区域 viewer.camera.setView({ destination: Cesium.Rectangle.fromDegrees(115, 20, 135, 40) });4.2 运行与验证启动一个本地 HTTP 服务器例如使用npx serve或python -m http.server在浏览器中打开index.html。你应该能看到在指定的矩形区域上有一层动态流动的、半透明的蓝色流体效果覆盖在地球表面。验证要点视觉效果矩形区域内应有动态的、波浪状的颜色变化且动画应随时间平滑进行。交互缩放、平移地球时流体图层应正确跟随地理坐标固定在指定矩形区域上方。性能打开浏览器的开发者工具在“性能”或“渲染”标签页中确保帧率FPS保持流畅通常 30 FPS。流体模拟是 GPU 密集型操作复杂的着色器可能影响性能。控制台检查浏览器控制台是否有 WebGL 编译错误、Uniform 未找到等错误信息。5. 关键参数、配置与高级优化5.1 核心 Uniform 参数详解在片段着色器中我们定义了多个uniform变量来控制流体外观。理解它们对调试和效果调整至关重要。Uniform 变量名类型描述典型值/作用u_timefloat从场景开始累计的秒数。驱动所有基于时间的动画。frameState.time.totalSecondsu_speedfloat全局速度乘数。控制流体演化的快慢。0.5(慢速) 到3.0(快速)u_baseColorvec4流体的基础颜色和透明度 (RGBA)。vec4(0.1, 0.3, 0.8, 0.6)u_resolutionvec2绘制区域的像素尺寸。可用于实现与分辨率无关的效果。vec2(viewportWidth, viewportHeight)u_noiseTexturesampler2D用于生成随机性的噪声纹理。可以使用程序噪声代替。一张 256x256 的灰度噪声图u_mouse(可选)vec2归一化的鼠标位置。可用于实现交互式扰动。vec2(mouseX/viewportWidth, 1.0 - mouseY/viewportHeight)5.2 从简单噪声到物理模拟上述示例使用了分形噪声FBM来模拟流体外观这属于“视觉欺骗”而非物理模拟。要实现更真实的流体如烟雾扩散、水流需要实现更复杂的着色器。核心思路是基于物理的模拟在片段着色器中实现简化的纳维-斯托克斯方程求解。这通常需要多个渲染通道Pass和乒乓缓冲区Ping-Pong Buffer来迭代求解速度场和密度场。在 Cesium 中实现多通道渲染较为复杂可能需要使用Framebuffer和多个DrawCommand。纹理反馈将上一帧的渲染结果作为下一帧的输入实现持续的演化。这要求我们将流体状态速度、密度渲染到纹理中并在下一帧采样这些纹理。边界与外力在着色器中根据地理位置uv坐标或外部输入如鼠标添加力场或边界条件。一个进阶的片段着色器框架可能如下// 伪代码展示多通道思路 uniform sampler2D u_velocityTexture; // 上一帧速度场 uniform sampler2D u_densityTexture; // 上一帧密度场 uniform float u_dt; // 时间步长 void main() { vec2 uv v_textureCoordinates; // 1. 平流 (Advection): 根据速度场移动密度和速度自身 vec2 vel texture2D(u_velocityTexture, uv).xy; vec2 prevPos uv - vel * u_dt; float density texture2D(u_densityTexture, prevPos).r; // 2. 扩散 (Diffusion): 使用卷积核模糊速度场简化处理 // 3. 施加外力 (Force): 根据鼠标位置或预设力场更新速度 // 4. 投影 (Projection): 确保速度场是无散的简化时可省略 // 输出新的速度场和密度场到不同的渲染目标 gl_FragColor vec4(newVelocity, density, 1.0); }在 Cesium 中实现这套流程需要创建多个Texture对象作为渲染目标并安排多个DrawCommand按顺序执行这涉及到更底层的Framebuffer管理。5.3 性能优化建议流体模拟是 GPU 密集型操作尤其是在覆盖大面积或使用复杂着色器时。控制绘制区域精确设置rectangle只覆盖需要的区域。避免覆盖整个屏幕。降低分辨率如果效果允许可以以较低的分辨率渲染流体纹理然后上采样。这可以通过在离屏的Framebuffer中使用较小的纹理实现。简化着色器减少循环迭代次数、使用低精度的浮点数mediump、合并计算步骤。利用 LOD根据相机距离动态调整流体模拟的细节级别LOD。远处可以使用更简单的噪声或停止模拟。避免每帧创建资源DrawCommand、VertexArray、ShaderProgram等应在初始化时创建并在update中复用。只更新需要变化的uniform。谨慎使用透明混合blending是昂贵的操作。如果流体完全不透明可以关闭混合并正确设置深度测试。6. 常见问题排查在集成自定义 WebGL 绘制到 Cesium 的过程中会遇到各种问题。以下是一些典型问题及其排查路径。6.1 问题屏幕上看不到任何流体效果排查步骤可能原因检查与解决1. 检查控制台错误WebGL 编译错误、链接错误、Uniform 未找到等。打开浏览器开发者工具 Console 面板。红色错误信息会直接指出问题所在如ERROR: 0:10: u_time : undeclared identifier。2. 验证 Primitive 是否被添加FluidPrimitiveWrapper未被正确添加到primitives集合或show属性为false。在update方法开始处添加console.log(update called)。确保它被调用。检查viewer.scene.primitives.length。3. 检查绘制区域rectangle设置错误区域在当前视锥体外或被地形遮挡。暂时将rectangle设置为一个非常显眼的位置如Cesium.Rectangle.fromDegrees(-10, -10, 10, 10)并确保相机看向那里。关闭地形 (viewer.terrainProvider undefined)。4. 检查深度测试深度测试设置不当流体被地球或其它物体遮挡。在DrawCommand的renderState中尝试设置depthTest: {enabled: false}。如果此时出现说明是深度问题。调整depthTest.func或确保流体的几何体高度 (height) 高于地形。5. 检查着色器输出片段着色器可能输出全透明或黑色。在片段着色器末尾硬编码一个测试颜色gl_FragColor vec4(1.0, 0.0, 0.0, 1.0);。如果出现红色方块说明着色器管线是通的问题在着色器逻辑本身。6.2 问题流体效果闪烁、撕裂或位置错乱现象可能原因解决方案闪烁 (Flickering)深度测试 Z-fighting或每帧计算的u_time等 uniform 值不稳定。对于 Z-fighting轻微调整几何体高度 (height: 0.1)。对于时间确保u_time来自frameState.time.totalSeconds它是稳定的浮点数。撕裂 (Tearing)动画更新与屏幕刷新不同步。WebGL 本身不解决撕裂这通常由浏览器垂直同步控制。确保没有在requestAnimationFrame外强制更新。Cesium 的渲染循环已处理。位置错乱顶点着色器中的坐标转换错误或rectangle与几何体不匹配。检查顶点着色器中的czm_modelViewProjection计算。确保用于创建VertexArray的顶点数据与rectangle对应。使用Cesium.RectangleGeometry辅助计算顶点。6.3 问题性能低下帧率骤降检查点优化方向着色器复杂度使用浏览器开发者工具的Performance或Shader Editor分析片段着色器执行时间。简化循环和复杂函数如sin,pow。绘制调用次数确保只有一个DrawCommand。如果有多层流体考虑合并到一个着色器中。纹理尺寸检查u_noiseTexture等纹理的尺寸是否过大。256x256 通常足够。透明过度绘制如果流体大面积半透明会导致大量混合计算。考虑是否真的需要透明或减少透明度。几何体顶点数用于覆盖矩形的四边形只有 4 个顶点通常不是瓶颈。7. 扩展方向与最佳实践掌握了基础的自定义流体绘制后可以考虑以下方向进行深化和工程化。7.1 扩展方向集成真实物理模拟将基于 GPU 的流体求解器如 Stable Fluids 算法完整移植到 Cesium 中。这需要管理多个渲染通道和纹理缓冲区。与 Cesium 实体交互让流体效果与 Cesium 的Entity如模型、广告牌互动。例如船舶模型划过水面产生尾迹。这需要将实体的世界坐标传递到着色器作为力场源。作为后处理效果将流体效果作为全屏后处理滤镜应用而不是绑定到特定地理区域。这需要访问 Cesium 渲染的颜色和深度纹理。支持 3D 体积渲染将 2D 流体扩展到 3D 体积云、烟雾等效果。这需要用到射线步进Ray Marching技术并在着色器中处理与地形、模型的遮挡。动态数据驱动将流体的颜色、速度等参数与实时数据如海洋温度、风速绑定实现科学可视化。7.2 工程最佳实践模块化着色器代码将噪声函数、物理模拟步骤等封装成 GLSL 头文件.glsl通过字符串拼接或#pragma指令引入提高代码复用性。统一变量管理创建一个UniformManager类来集中管理所有着色器的uniform变量自动处理类型转换和值更新。资源生命周期管理严格遵循“谁创建谁销毁”的原则。在destroy方法中释放所有 WebGL 资源并将引用置为undefined。错误处理与降级在着色器编译失败时提供降级方案例如回退到一个简单的颜色填充并在控制台输出友好错误信息。配置化将流体的所有可调参数颜色、速度、噪声尺度等暴露为类的属性并支持动态更新。更新时标记_dirty标志在下一帧更新对应的uniform。性能监控集成简单的性能检测记录每帧中流体绘制的耗时并在性能超过阈值时动态降低质量如关闭次要的噪声层。通过将 Shadertoy 风格的创意编码与 Cesium 强大的地理空间渲染能力结合我们可以在三维数字地球上创造出极具表现力的动态可视化效果。这个过程的核心在于理解并驾驭 Cesium 的DrawCommand渲染机制。从简单的噪声动画开始逐步引入物理模拟、交互和数据驱动能够构建出既美观又具有实用价值的专业级三维地理应用。