1. 从一团云到动态云区的技术跃迁第一次在Cesium里用Perlin噪声做出那团棉花糖般的云时我兴奋地截了十几张图发朋友圈。但很快发现一个问题——这团云放在城市上空像块棉花放在山脉间又像团雾气怎么看都不像自然界的云层。真正的云应该有绵延数百公里的蓬松感有随风流动的形态变化还有厚度不均带来的光影层次。这里面的核心矛盾在于基础Perlin噪声生成的一团云本质上是个均匀的噪波球。就像用相同大小的肥皂泡堆出来的云朵玩具虽然单个泡泡的质感不错但整体缺乏自然云层的分形结构和多尺度细节。后来在《地平线》游戏的体积云技术文档里找到了答案——需要引入Worley噪声作为骨架再用Perlin噪声填充血肉。2. 噪声算法的交响乐Perlin-Worley混合策略2.1 为什么单独使用Perlin噪声不够Perlin噪声的优势在于能生成连续的、自然过渡的随机图案。在Three.js的webgl2_volume_cloud示例中我们看到通过调节以下参数可以控制云的密度分布float d getData(p halfdim); d smoothstep(0.25 - 0.05, 0.25 0.05, d) * 0.1;但这种均匀噪波就像把面粉撒进水里只能形成模糊的雾状效果。实际云层需要清晰的边界轮廓积云的块状结构细腻的内部纹路卷云的丝状结构多层次的密度变化层云的渐变效果2.2 Worley噪声的细胞结构妙用Worley噪声又称Voronoi噪声通过空间划分产生细胞状图案。我将二维算法改造成三维版本时关键是要保持细胞边界的锐利度float getWorleyNoise(vec3 pos) { vec3 p pos * 4.0; // 放大坐标增加细节 vec3 i floor(p); vec3 f fract(p); float F1 1.0; // 27邻域搜索确保细胞边界完整 for(int j-1; j1; j) { for(int k-1; k1; k) { for(int l-1; l1; l) { vec3 neighbor vec3(float(j),float(k),float(l)); vec3 point random(i neighbor); float d length(point neighbor - f); F1 min(F1, d); } } } return 1.0 - F1; // 反转使边界变亮 }这个算法生成的细胞结构就像天空中的云块骨架。通过调节坐标缩放系数示例中的4.0可以控制云块的平均尺寸。2.3 分形布朗运动FBM的叠加艺术单一尺度的噪声仍然不够自然。我采用RGBA四通道分别存储不同频率的Worley噪声R通道基础频率大尺度云团分布G通道2倍频率中等云块细节B通道4倍频率细小云丝结构A通道Perlin噪声填充内部纹理在Shader中进行混合时使用指数衰减权重float fbm (texture.g * 0.625) (texture.b * 0.25) (texture.a * 0.125); float cloud texture.r - fbm; cloud remap(cloud, -1.0, 1.0, 0.0, 1.0); // 重映射到0-1范围这种混合方式模拟了自然界中云层多尺度嵌套的特性。实测发现0.625:0.25:0.125的权重比能产生最自然的层次感。3. 体数据存储的优化之道3.1 从3D纹理到RGBA通道的进化最初按照Bro_Of_Nagi的方案使用单通道Alpha存储密度信息时发现几个瓶颈无法传递多频噪声数据动态调整噪声混合比例需要重新生成纹理光照计算缺乏材质变化信息改用RGBA四通道后体数据生成变为const data new Uint8Array(size * size * size * 4); for(let z0; zsize; z) { for(let y0; ysize; y) { for(let x0; xsize; x) { const dx x / size, dy y / size, dz z / size; // R通道基础Perlin噪声 data[i] perlinNoise(dx*10, dy*10, dz*10) * 128 128; // G通道低频Worley data[i1] worleyNoise(dx*2, dy*2, dz*2) * 255; // B通道中频Worley data[i2] worleyNoise(dx*4, dy*4, dz*4) * 255; // A通道高频Worley data[i3] worleyNoise(dx*8, dy*8, dz*8) * 255; i 4; } } }这种存储方式带来三个优势实时调整混合比例无需重新生成纹理各频段噪声可单独进行后期处理额外通道可用于存储光照相关参数3.2 动态LOD策略解决性能瓶颈当云区范围超过10km时发现帧率明显下降。通过分析发现两个性能热点射线步进采样次数过多大范围云区导致无效采样增加改进方案是实施动态LODfloat getLODLevel(vec3 worldPos) { float dist length(worldPos - cameraPos); if(dist 5000.0) return 1.0; // 全精度 if(dist 10000.0) return 2.0; // 步长加倍 return 4.0; // 极远距离低精度 } void rayMarching() { float lod getLODLevel(worldPos); for(float t0.0; tmaxDist; tstepSize*lod) { // 根据LOD级别调整采样频率 vec3 samplePos rayOrigin rayDir * t; if(lod 1.0) { // 低精度区域跳过细节计算 float density getSimplifiedCloud(samplePos); } else { // 全精度计算 float density getFullDetailCloud(samplePos); } } }配合视锥体裁剪在保持视觉效果的前提下万米级云区的渲染性能提升3倍以上。4. 动态云区的实现技巧4.1 基于噪声的形态动画要让云层自然流动需要给噪声采样点加上时间变量。但直接修改UV会导致整体变形我采用分层扰动策略vec3 animateNoise(vec3 pos, float time) { // 大尺度缓慢漂移 vec3 windDir vec3(0.5, 0.0, 0.2); float largeScale time * 0.1; // 中尺度形态变化 float midScale time * 0.3; // 小尺度湍流 float smallScale time * 1.0; return pos windDir*largeScale curlNoise(pos*2.0)*midScale randomVec3(pos*10.0)*smallScale; }其中curlNoise生成无散度噪声场模拟真实气流效果。不同尺度的运动速度遵循1/f法则大尺度运动慢小尺度变化快。4.2 光照模型的优化初期直接使用Three.js示例中的散射公式时云层看起来像发光的棉花糖。参考大气散射模型改进后float phase(float cosTheta) { // 混合前向和后向散射 float g1 0.8; // 主散射方向性 float g2 -0.3; // 次散射反向增强 float blend 0.5; // 混合比例 return mix(henyeyGreenstein(cosTheta, g1), henyeyGreenstein(cosTheta, g2), blend); } vec3 calculateLighting(vec3 pos, vec3 viewDir) { float opticalDepth 0.0; vec3 lightDir normalize(sunPosition - pos); float cosTheta dot(viewDir, lightDir); // 光线步进计算阴影 float shadow 1.0; for(float s0.0; sshadowSteps; sshadowStepSize) { vec3 samplePos pos lightDir * s; shadow * exp(-densityAt(samplePos) * shadowStepSize); } return sunColor * phase(cosTheta) * shadow; }这个模型特别强调双峰相位函数模拟云的多重散射基于密度的体积阴影考虑光线穿透性的光学深度计算5. 实战中的避坑指南在青海省地理信息项目里部署这套方案时遇到过几个典型问题纹理内存爆炸128^3的RGBA纹理需要128MB显存。通过以下方式优化使用BC3压缩纹理内存减少75%动态加载可视区域纹理16位浮点替代32位存储移动端兼容性问题部分安卓设备对3D纹理支持不完善。回退方案const isMobile /Android|iPhone/i.test(navigator.userAgent); if(isMobile) { // 使用2D纹理切片模拟3D纹理 texture new Texture2DArray(...); } else { // 优先使用原生3D纹理 texture new Texture3D(...); }昼夜过渡不自然直接切换光照参数会导致云层跳变。解决方案是uniform float dayNightProgress; // 0-1渐变参数 vec3 getFinalColor() { vec3 dayColor calculateDayLighting(); vec3 nightColor calculateMoonLighting(); return mix(nightColor, dayColor, smoothstep(0.3, 0.7, dayNightProgress)); }现在这套系统已经稳定运行在多个智慧城市项目中最远的视距达到50公里。有个意外收获是通过调整噪声参数还能模拟沙尘暴、火山灰等特殊天气现象。有次客户突然要求展示台风天气我们只花了半小时调整Worley噪声的细胞结构就实现了逼真的螺旋云系效果。