態(tài)水面實(shí)現(xiàn)：從法線貼圖到著色器編程的完整指南)
1. 從靜態(tài)到動(dòng)態(tài)為什么我們需要流動(dòng)的水面在三維地理信息可視化領(lǐng)域CesiumJS 以其強(qiáng)大的三維地球渲染能力成為了眾多開發(fā)者構(gòu)建數(shù)字孿生、智慧城市和虛擬仿真應(yīng)用的首選引擎。然而一個(gè)長期存在的挑戰(zhàn)是如何讓場景中的水體“活”起來默認(rèn)的 Cesium 水體無論是Cesium.Water材質(zhì)還是簡單的藍(lán)色平面往往呈現(xiàn)一種靜態(tài)、呆板的觀感缺乏真實(shí)水體應(yīng)有的動(dòng)態(tài)波紋、光影流動(dòng)和表面細(xì)節(jié)。這種靜態(tài)感在模擬河流、湖泊、海洋甚至人工水渠時(shí)會(huì)極大地削弱場景的真實(shí)感和沉浸感。最近在社區(qū)和搜索引擎中“Cesium 動(dòng)態(tài)流動(dòng)水面”成為了一個(gè)高頻熱詞這背后反映的正是開發(fā)者們對(duì)提升場景逼真度的迫切需求。無論是模擬一條蜿蜒的河流還是展現(xiàn)港口碼頭的海浪亦或是為智慧水利項(xiàng)目創(chuàng)建動(dòng)態(tài)的水流態(tài)勢一個(gè)能夠?qū)崟r(shí)流動(dòng)、反射環(huán)境光、具備波紋細(xì)節(jié)的水面是項(xiàng)目從“能用”到“好用”甚至“驚艷”的關(guān)鍵一步。實(shí)現(xiàn)動(dòng)態(tài)流動(dòng)水面其核心價(jià)值遠(yuǎn)不止于視覺美化。在防洪防汛模擬中動(dòng)態(tài)的水流方向可以直觀展示洪水演進(jìn)路徑在船舶航行仿真中水面的波紋與浪花能增強(qiáng)運(yùn)動(dòng)感知在環(huán)境監(jiān)測應(yīng)用中不同流速、顏色的水體動(dòng)態(tài)變化可以更有效地傳達(dá)污染擴(kuò)散等信息。因此掌握這項(xiàng)技術(shù)不僅僅是學(xué)習(xí)一個(gè)“特效”更是解鎖一系列高級(jí)三維地理應(yīng)用場景的鑰匙。2. 核心原理拆解動(dòng)態(tài)水面的“魔法”是如何煉成的在開始寫代碼之前我們必須理解 Cesium 中實(shí)現(xiàn)動(dòng)態(tài)水面效果的底層邏輯。這并非某種單一的“黑科技”而是多種圖形學(xué)技術(shù)的巧妙結(jié)合。理解了這些你才能靈活調(diào)整參數(shù)甚至創(chuàng)造屬于自己的水面風(fēng)格。2.1 基石Cesium 的材質(zhì)系統(tǒng)與 Primitive APICesium 渲染一切非地形、非模型的幾何體如水面、廣告牌、多邊形主要依賴于Primitive和GeometryInstance。對(duì)于自定義水面我們通常使用Primitive配合GeometryInstance來創(chuàng)建一個(gè)覆蓋特定區(qū)域的平面幾何體。這個(gè)幾何體的外觀則由Material材質(zhì)來定義。材質(zhì)本質(zhì)上是一段運(yùn)行在 GPU 上的著色器程序Shader。Cesium 提供了一些內(nèi)置材質(zhì)如ColorMaterialProperty,ImageMaterialProperty但對(duì)于復(fù)雜效果我們需要使用Material類的fabric屬性來自定義著色器。fabric是一個(gè)強(qiáng)大的 JSON 對(duì)象它允許我們定義材質(zhì)所需的紋理Texture、統(tǒng)一變量Uniforms以及最重要的——著色器源碼Source。動(dòng)態(tài)效果的關(guān)鍵就在于這些uniforms統(tǒng)一變量。它們是 CPU 端JavaScript傳遞給 GPU 端Shader的變量在單次繪制調(diào)用中保持不變但可以在不同幀之間更新。通過每幀修改這些uniforms例如讓一個(gè)代表時(shí)間的變量持續(xù)增加我們就能在著色器中驅(qū)動(dòng)紋理坐標(biāo)的偏移、顏色的變化從而產(chǎn)生“動(dòng)態(tài)”的視覺感受。2.2 靈魂技法法線貼圖與 UV 動(dòng)畫這是實(shí)現(xiàn)水面波紋細(xì)節(jié)和流動(dòng)感的核心技術(shù)。法線貼圖Normal Map一張?zhí)厥獾募y理它不存儲(chǔ)顏色信息而是存儲(chǔ)每個(gè)像素點(diǎn)的法線向量X, Y, Z。法線決定了光線照射到該像素時(shí)的反射方向從而模擬出凹凸不平的細(xì)節(jié)。對(duì)于水面我們使用一張包含細(xì)小波紋圖案的法線貼圖。即使水面幾何體本身是一個(gè)絕對(duì)平坦的平面貼上法線貼圖后在光照下就會(huì)呈現(xiàn)出豐富的波紋細(xì)節(jié)計(jì)算開銷卻遠(yuǎn)低于使用真實(shí)幾何體去建模這些波紋。UV 動(dòng)畫紋理坐標(biāo)U, V決定了紋理圖片如何映射到幾何體表面。UV動(dòng)畫就是讓這些坐標(biāo)隨著時(shí)間變化。例如我們讓法線貼圖的 U 坐標(biāo)每幀增加一個(gè)很小的值那么貼圖就會(huì)沿著水平方向“滑動(dòng)”映射到水面上的波紋也就看起來在朝一個(gè)方向流動(dòng)。通過組合多張法線貼圖以不同速度、不同方向進(jìn)行 UV 動(dòng)畫可以創(chuàng)造出非常復(fù)雜、自然的水面流動(dòng)效果避免出現(xiàn)單調(diào)的重復(fù)圖案。2.3 點(diǎn)睛之筆鏡面反射、菲涅爾效應(yīng)與顏色混合一個(gè)逼真的水面還需要以下效果鏡面反射Specular水面像鏡子一樣反射環(huán)境光在 Cesium 中通常是天空盒skyBox和場景中的其他物體。在著色器中我們通過計(jì)算視線向量與法線向量的反射向量來采樣天空盒紋理模擬反射。動(dòng)態(tài)的法線來自法線貼圖會(huì)讓反射的圖像產(chǎn)生扭曲這正是水波蕩漾的感覺。菲涅爾效應(yīng)Fresnel Effect這是一個(gè)物理現(xiàn)象觀察者視線與水面法線的夾角越小即平視水面反射越強(qiáng)夾角越大即俯視水面折射或透見水底越強(qiáng)。在著色器中我們通過計(jì)算dot(viewVector, normal)來模擬這一效應(yīng)并用它來混合反射顏色和水的底色Base Color使得水面在邊緣處反射強(qiáng)烈中心區(qū)域則能透出一些水體的顏色如藍(lán)綠色。顏色混合最終的水面顏色通常是多層效果的混合水底色 反射色 * 菲涅爾系數(shù) 高光色。我們還可以加入一張深度圖或根據(jù)相機(jī)高度來混合岸邊淺水區(qū)的顏色如淺綠色、泥沙色讓水體與岸邊的過渡更加自然。3. 實(shí)戰(zhàn)構(gòu)建一步步創(chuàng)建你的動(dòng)態(tài)水面材質(zhì)理論已經(jīng)足夠現(xiàn)在讓我們動(dòng)手從零開始構(gòu)建一個(gè)適用于河流或湖泊的動(dòng)態(tài)水面材質(zhì)。我們將創(chuàng)建一個(gè)Cesium.Material對(duì)象并將其應(yīng)用到一個(gè)PolygonGeometry上。3.1 第一步準(zhǔn)備核心紋理——法線貼圖你需要一張高質(zhì)量的法線貼圖?？梢栽谝恍┟赓M(fèi)的紋理網(wǎng)站如 textures.com, polyhaven.com搜索 “water normal map”。通常我們會(huì)準(zhǔn)備兩張不同尺度和細(xì)節(jié)的法線貼圖例如一張大波紋一張小漣漪混合使用以增加細(xì)節(jié)層次。假設(shè)我們將這兩張圖下載并放置在項(xiàng)目的assets/textures/目錄下命名為water_normal_01.jpg和water_normal_02.jpg。在 Cesium 中我們需要?jiǎng)?chuàng)建紋理對(duì)象。// 假設(shè) viewer 已創(chuàng)建 var viewer new Cesium.Viewer(cesiumContainer); // 創(chuàng)建紋理統(tǒng)一變量 var normalMap1 new Cesium.TextureUniform({ url: ./assets/textures/water_normal_01.jpg }); var normalMap2 new Cesium.TextureUniform({ url: ./assets/textures/water_normal_02.jpg });注意紋理圖片的尺寸最好是2的冪次方如 256x256, 512x512并且確保圖片本身沒有透明通道除非你需要否則可能會(huì)引發(fā)意外的混合。對(duì)于法線貼圖通常使用 PNG 或 JPEG 格式即可。3.2 第二步編寫自定義材質(zhì)的 Fabric 配置這是最核心的一步。我們將創(chuàng)建一個(gè)名為DynamicWaterMaterial的自定義材質(zhì)。// 定義動(dòng)態(tài)水面材質(zhì)的 Fabric 配置 var dynamicWaterFabric { type: DynamicWater, uniforms: { // 兩張法線貼圖 normalMap1: normalMap1, normalMap2: normalMap2, // 水流速度與方向 (vec2: [xSpeed, ySpeed]) flowDirection1: new Cesium.Cartesian2(0.1, 0.0), // 第一層法線流動(dòng)方向 flowDirection2: new Cesium.Cartesian2(0.03, 0.02), // 第二層法線流動(dòng)方向速度慢一些方向略有不同 // 時(shí)間變量由Cesium自動(dòng)每幀更新 time: 0.0, // 基礎(chǔ)水色 (RGBA) baseColor: new Cesium.Color(0.0, 0.3, 0.6, 0.8), // 反射強(qiáng)度系數(shù) reflectionStrength: 0.5, // 菲涅爾效應(yīng)強(qiáng)度系數(shù) fresnelPower: 3.0, // 波紋凹凸強(qiáng)度 normalScale: new Cesium.Cartesian2(0.5, 0.5) }, source: // 著色器源碼 (GLSL ES 1.0即Cesium使用的版本) czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material czm_getDefaultMaterial(materialInput); // 獲取紋理坐標(biāo)和法線 vec2 st materialInput.st; // 模型本身的UV坐標(biāo) vec3 normal materialInput.normalEC; // 眼坐標(biāo)下的幾何法線 // 計(jì)算隨時(shí)間變化的UV偏移 vec2 flow1 st - u_flowDirection1 * u_time; vec2 flow2 st - u_flowDirection2 * u_time; // 采樣兩張法線貼圖并將顏色值從[0,1]映射到法線向量的[-1,1]范圍 vec3 normalTex1 texture2D(u_normalMap1, flow1).rgb * 2.0 - 1.0; vec3 normalTex2 texture2D(u_normalMap2, flow2).rgb * 2.0 - 1.0; // 混合兩張法線貼圖并應(yīng)用強(qiáng)度縮放 vec3 blendedNormal normalize(normalTex1 normalTex2); blendedNormal.xy * u_normalScale; blendedNormal normalize(blendedNormal); // 將切線空間法線轉(zhuǎn)換到眼坐標(biāo)系簡化處理假設(shè)水面是平的使用幾何法線作為上向量 // 這里是一個(gè)簡化版本。更精確的做法需要傳入切線和副切線向量。 vec3 newNormalEC normalize(materialInput.normalEC blendedNormal.x * czm_tangent blendedNormal.y * czm_bitangent); // 計(jì)算視線向量從表面點(diǎn)到相機(jī) vec3 positionToEyeEC -materialInput.positionToEyeEC; vec3 viewVector normalize(positionToEyeEC); // 計(jì)算反射向量并采樣天空盒環(huán)境貼圖模擬反射 vec3 reflectionVector reflect(-viewVector, newNormalEC); vec4 reflectionColor czm_sampleCube(czm_environmentMap, reflectionVector); // 計(jì)算菲涅爾系數(shù) float fresnel pow(1.0 - max(dot(viewVector, newNormalEC), 0.0), u_fresnelPower); fresnel clamp(fresnel, 0.0, 1.0); // 混合顏色基礎(chǔ)色 反射色 * (菲涅爾系數(shù) * 反射強(qiáng)度) vec4 waterBaseColor vec4(u_baseColor.rgb, u_baseColor.a); vec4 finalColor mix(waterBaseColor, reflectionColor, fresnel * u_reflectionStrength); // 可以在此處添加基于深度或高度的顏色漸變模擬岸邊淺水效果 // 例如float depthFactor clamp(materialInput.height / 10.0, 0.0, 1.0); // finalColor.rgb mix(vec3(0.2, 0.5, 0.2), finalColor.rgb, depthFactor); material.diffuse finalColor.rgb; material.alpha finalColor.a; // 使用擾動(dòng)后的法線影響光照計(jì)算 material.normal newNormalEC; return material; } };代碼關(guān)鍵點(diǎn)解析Uniforms我們定義了控制水面外觀的所有“旋鈕”。flowDirection控制流動(dòng)方向和速度time是驅(qū)動(dòng)動(dòng)畫的核心。雙法線混合使用兩張法線貼圖并以不同速度流動(dòng)能有效打破重復(fù)感產(chǎn)生更自然的湍流效果。法線變換blendedNormal.xy * u_normalScale;這行代碼用于控制波紋的凹凸強(qiáng)度。值越大波紋看起來越陡峭、劇烈。反射采樣czm_sampleCube(czm_environmentMap, ...)是 Cesium 提供的函數(shù)用于采樣當(dāng)前場景的天空盒環(huán)境貼圖這是實(shí)現(xiàn)環(huán)境反射的關(guān)鍵。菲涅爾計(jì)算pow(1.0 - max(dot(...), 0.0), u_fresnelPower)是經(jīng)典的菲涅爾近似公式。fresnelPower值越大反射與透射的過渡區(qū)域越窄。3.3 第三步創(chuàng)建材質(zhì)、幾何體并添加到場景現(xiàn)在我們將材質(zhì)實(shí)例化并將其應(yīng)用到一個(gè)代表水面的多邊形上。// 1. 注冊并創(chuàng)建自定義材質(zhì) Cesium.Material._materialCache.addMaterial(DynamicWater, { fabric: dynamicWaterFabric }); var waterMaterial new Cesium.Material({ fabric: { type: DynamicWater, uniforms: { normalMap1: ./assets/textures/water_normal_01.jpg, normalMap2: ./assets/textures/water_normal_02.jpg, flowDirection1: new Cesium.Cartesian2(0.08, 0.0), // 主要沿X軸流動(dòng) flowDirection2: new Cesium.Cartesian2(0.02, 0.01), baseColor: new Cesium.Color(0.1, 0.4, 0.7, 0.85), reflectionStrength: 0.6, fresnelPower: 4.0, normalScale: new Cesium.Cartesian2(0.8, 0.8) } } }); // 2. 定義一個(gè)多邊形區(qū)域例如一條河流 var riverPositions Cesium.Cartesian3.fromDegreesArray([ 116.3, 39.9, 116.4, 39.92, 116.5, 39.91, 116.6, 39.93, 116.7, 39.9 ]); // 3. 創(chuàng)建多邊形幾何體實(shí)例 var riverGeometry new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(riverPositions), height: 0, // 水面高度 extrudedHeight: -10, // 如果需要水體側(cè)面如河岸可以設(shè)置擠壓高度。純水面通常設(shè)為undefined。 vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL // 必須包含法線 }); // 4. 創(chuàng)建圖元并應(yīng)用材質(zhì) var riverPrimitive new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: riverGeometry, id: myRiver // 可選ID便于后續(xù)拾取或管理 }), appearance: new Cesium.MaterialAppearance({ material: waterMaterial, translucent: true, // 水面通常是半透明的 closed: true // 幾何體是否閉合 }), asynchronous: false // 同步加載簡單示例用 }); // 5. 添加到場景 viewer.scene.primitives.add(riverPrimitive); // 6. 關(guān)鍵一步更新time uniform以實(shí)現(xiàn)動(dòng)畫 viewer.scene.preRender.addEventListener(function(scene, time) { var waterMaterial riverPrimitive.appearance.material; if (waterMaterial waterMaterial.uniforms) { // 獲取自場景開始以來的秒數(shù)乘以一個(gè)系數(shù)控制全局速度 waterMaterial.uniforms.time Cesium.getTimestamp() * 0.001 * 0.05; // 0.05為速度系數(shù) } });實(shí)操心得與避坑指南vertexFormat至關(guān)重要?jiǎng)?chuàng)建PolygonGeometry時(shí)必須指定vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL。因?yàn)槲覀兊闹餍枰ň€信息來計(jì)算光照和反射。如果只傳POSITION法線相關(guān)計(jì)算會(huì)出錯(cuò)水面可能變黑或顯示異常。時(shí)間更新循環(huán)動(dòng)畫的靈魂在于preRender事件監(jiān)聽器中不斷更新timeuniform。Cesium.getTimestamp() * 0.001將毫秒轉(zhuǎn)換為秒。乘以一個(gè)系數(shù)如0.05可以方便地調(diào)節(jié)整個(gè)水面動(dòng)畫的快慢。性能考量每幀更新 uniform 并重繪水面對(duì)性能有影響。如果場景中有多個(gè)獨(dú)立的水體可以考慮將它們合并到同一個(gè)Primitive的多個(gè)GeometryInstance中共享材質(zhì)和著色器減少繪制調(diào)用。深度測試與排序水面是半透明的需要正確排序才能與其他透明物體如云、粒子正確混合。確保translucent: true并且 Cesium 會(huì)自動(dòng)處理大部分排序問題。但在復(fù)雜場景中如果出現(xiàn)水面閃爍或遮擋錯(cuò)誤可能需要調(diào)整depthTest相關(guān)屬性。4. 進(jìn)階優(yōu)化與效果調(diào)參讓你的水面更真實(shí)基礎(chǔ)流動(dòng)效果實(shí)現(xiàn)后我們可以通過調(diào)整參數(shù)和增加一些技巧來大幅提升真實(shí)感。4.1 流動(dòng)方向與速度的藝術(shù)flowDirection不是隨便設(shè)置的。對(duì)于河流你應(yīng)該根據(jù)河流的走向來設(shè)定主要流動(dòng)方向?？梢酝ㄟ^計(jì)算多邊形中心點(diǎn)的流向或者使用一個(gè)統(tǒng)一的全局方向。// 示例根據(jù)多邊形坐標(biāo)估算一個(gè)平均流向簡化 function calculateFlowDirection(positions) { var totalVec new Cesium.Cartesian3(); for (var i 0; i positions.length - 1; i) { var vec Cesium.Cartesian3.subtract(positions[i1], positions[i], new Cesium.Cartesian3()); Cesium.Cartesian3.add(totalVec, vec, totalVec); } Cesium.Cartesian3.normalize(totalVec, totalVec); // 將3D流向轉(zhuǎn)換為2D紋理流動(dòng)方向忽略高度差 return new Cesium.Cartesian2(totalVec.x, totalVec.y); } // 應(yīng)用估算的流向 waterMaterial.uniforms.flowDirection1 calculateFlowDirection(riverPositions); waterMaterial.uniforms.flowDirection2 Cesium.Cartesian2.multiplyByScalar(calculateFlowDirection(riverPositions), 0.3, new Cesium.Cartesian2()); // 第二層速度更慢速度系數(shù)第一層法線flowDirection1代表中大型波紋速度可以快一些如向量模長0.1。第二層法線flowDirection2代表細(xì)小漣漪速度應(yīng)慢一些如0.03方向也可以略有偏差模擬風(fēng)或復(fù)雜水流的影響。4.2 實(shí)現(xiàn)岸邊淺水區(qū)與深度漸變真實(shí)的水體岸邊顏色更淺可能透出水底泥沙。我們可以通過頂點(diǎn)高度或額外的一張深度圖來實(shí)現(xiàn)。方法一基于頂點(diǎn)高度簡單在著色器中materialInput.height或materialInput.positionWC.z可以獲取世界坐標(biāo)下的高度。我們可以假設(shè)一個(gè)水面基準(zhǔn)高度然后計(jì)算當(dāng)前點(diǎn)與水面的相對(duì)深度。// 在著色器source中uniforms里添加 u_waterSurfaceHeight 和 u_shallowColor float depth u_waterSurfaceHeight - materialInput.positionWC.z; // 簡化計(jì)算假設(shè)水面平整 depth clamp(depth, 0.0, 10.0); // 限制深度范圍 float depthFactor depth / 10.0; // 歸一化 vec3 shallowColor u_shallowColor.rgb; vec3 deepColor finalColor.rgb; finalColor.rgb mix(shallowColor, deepColor, depthFactor);方法二使用深度紋理更精確但復(fù)雜Cesium 1.xx 版本后支持深度紋理。你可以渲染一張代表水面到水底地形的深度圖然后在著色器中采樣根據(jù)深度值混合顏色。這需要用到czm_depth相關(guān)函數(shù)和幀緩沖區(qū)紋理FBO實(shí)現(xiàn)復(fù)雜度較高但效果最好能完美貼合復(fù)雜地形岸線。4.3 添加高光與泡沫效果高光Specular Highlight在計(jì)算反射后可以額外計(jì)算一個(gè)基于光線方向和高光強(qiáng)度的鏡面高光點(diǎn)讓水面在特定角度下“波光粼粼”。// 假設(shè)主要光源方向如太陽光方向可以從Cesium內(nèi)置變量czm_sunDirectionEC獲取 vec3 lightDir normalize(czm_sunDirectionEC); vec3 halfVector normalize(lightDir viewVector); float specular pow(max(dot(newNormalEC, halfVector), 0.0), 64.0); // 64是高光指數(shù) vec3 specularColor specular * vec3(1.0, 1.0, 0.9) * 0.5; // 淡黃色高光 finalColor.rgb specularColor;泡沫紋理可以準(zhǔn)備一張泡沫噪聲圖根據(jù)水流速度flowDirection的大小或水面坡度法線變化率來動(dòng)態(tài)混合到最終顏色上模擬急流、浪花或岸邊的泡沫。這通常需要額外的紋理采樣和混合計(jì)算。4.4 性能調(diào)優(yōu)LOD與實(shí)例化當(dāng)水面覆蓋區(qū)域極大如海洋時(shí)全精度渲染每個(gè)像素的復(fù)雜著色器是昂貴的。細(xì)節(jié)層次LOD可以為水面創(chuàng)建多個(gè)幾何體層級(jí)。當(dāng)相機(jī)遠(yuǎn)離時(shí)使用更粗糙的多邊形和更簡單的著色器例如只保留一層法線動(dòng)畫和基礎(chǔ)顏色。這可以通過創(chuàng)建多個(gè)不同精度的Primitive并在scene.preRender中根據(jù)相機(jī)距離切換來實(shí)現(xiàn)。實(shí)例化Instancing如果你的場景中有大量形狀相同但位置不同的水面如多個(gè)規(guī)則的水池務(wù)必使用GeometryInstance的instances屬性進(jìn)行實(shí)例化渲染這能極大減少 GPU 的繪制調(diào)用開銷。5. 常見問題排查與調(diào)試技巧即使按照步驟操作你也可能會(huì)遇到水面不顯示、全黑、閃爍或不流動(dòng)的問題。以下是常見的排查清單。5.1 水面完全不顯示或全黑檢查控制臺(tái)錯(cuò)誤打開瀏覽器開發(fā)者工具F12查看 Console 是否有 WebGL 編譯錯(cuò)誤或紋理加載失敗提示。著色器語法錯(cuò)誤是最常見的原因。驗(yàn)證幾何體位置和高度確保你的多邊形坐標(biāo)正確且height設(shè)置合理。如果水面被地形或其它物體壓在下面自然看不到?？梢詴簳r(shí)關(guān)閉地形viewer.terrainProvider new Cesium.EllipsoidTerrainProvider();進(jìn)行測試。檢查材質(zhì)透明度確認(rèn)appearance的translucent屬性為true。如果為false半透明的baseColor.alpha可能無效。簡化著色器測試將復(fù)雜的著色器源碼替換為一個(gè)最簡單的版本只輸出固定顏色如material.diffuse vec3(0.0, 0.0, 1.0);。如果能顯示藍(lán)色說明幾何體和基本材質(zhì)流程沒問題問題出在著色器邏輯上。再逐步添加法線、反射等計(jì)算定位出錯(cuò)步驟。檢查法線貼圖路徑和格式確保紋理URL正確且服務(wù)器允許跨域CORS。紋理加載失敗會(huì)導(dǎo)致采樣結(jié)果為黑色或白色影響最終顏色。可以在uniforms中暫時(shí)將法線貼圖替換為一個(gè)純色紋理進(jìn)行測試。5.2 水面有顏色但不流動(dòng)確認(rèn)timeuniform 在更新在preRender事件監(jiān)聽器中打印waterMaterial.uniforms.time的值看它是否每幀都在遞增。檢查flowDirection值是否過小如果flowDirection的 x 和 y 值太小如 0.001乘以time后紋理坐標(biāo)偏移量可能在一段時(shí)間內(nèi)都小于一個(gè)像素肉眼難以察覺。嘗試將其增大到 0.05 或 0.1 看看。驗(yàn)證 UV 動(dòng)畫計(jì)算在著色器中可以暫時(shí)將最終顏色輸出為flow1.x或fract(flow1.x)取小數(shù)部分如果能看到規(guī)律的顏色條紋說明 UV 在變化問題可能出在法線貼圖采樣或法線變換上。5.3 水面閃爍Z-fighting或與地形穿插深度沖突Z-fighting當(dāng)水面幾何體與地形表面高度完全相同時(shí)GPU 深度測試會(huì)出現(xiàn)精度錯(cuò)誤導(dǎo)致交替顯示。解決方法是將水面高度略微抬高一點(diǎn)點(diǎn)如height: 0.01。地形穿插如果地形崎嶇平坦的水面多邊形會(huì)與地形交叉。這時(shí)需要更復(fù)雜的“水覆蓋”算法或者使用ClippingPlane裁剪掉穿幫部分。對(duì)于簡單場景確保水面高度高于地形最高點(diǎn)即可。調(diào)整渲染順序嘗試設(shè)置圖元的depthTestEnabled和depthFail屬性。有時(shí)關(guān)閉深度寫入但開啟深度測試可以解決一些透明物體的排序問題但這需要根據(jù)具體場景試驗(yàn)。5.4 反射失真或缺失環(huán)境貼圖問題Cesium 的czm_environmentMap默認(rèn)使用天空盒。確保你的場景設(shè)置了天空盒viewer.scene.skyBox或者開啟了基于物理的大氣渲染viewer.scene.globe.enableLighting true否則反射的內(nèi)容可能是空的。法線計(jì)算錯(cuò)誤反射向量嚴(yán)重依賴于法線。如果法線貼圖采樣或切線空間轉(zhuǎn)換出錯(cuò)法線方向錯(cuò)誤會(huì)導(dǎo)致反射圖像扭曲到奇怪的方向。檢查法線貼圖是否是“切線空間”法線貼圖并確認(rèn)czm_tangent和czm_bitangent是否在頂點(diǎn)數(shù)據(jù)中存在這依賴于VertexFormat。簡化調(diào)試將反射計(jì)算部分注釋掉直接輸出法線顏色material.diffuse blendedNormal * 0.5 0.5;觀察法線貼圖是否正確顯示為彩色凹凸圖案。我個(gè)人在多個(gè)項(xiàng)目中實(shí)踐這套流程后發(fā)現(xiàn)最大的挑戰(zhàn)往往不是著色器本身而是與 Cesium 龐大場景的集成與性能平衡。從一張靜態(tài)的藍(lán)色多邊形到一個(gè)能隨河道方向流動(dòng)、在陽光下波光粼粼、在岸邊顏色漸變的智能水面每一步調(diào)整都讓場景的敘事能力更強(qiáng)。記住參數(shù)沒有絕對(duì)的最優(yōu)值最好的效果是在你的具體場景中通過反復(fù)微調(diào)flowDirection、normalScale、fresnelPower這些“旋鈕”來達(dá)到的。不妨多花些時(shí)間觀察不同時(shí)間Cesium 的日照角度和不同視角下你水面的表現(xiàn)那才是檢驗(yàn)效果的唯一標(biāo)準(zhǔn)。 CesiumJS動(dòng)態(tài)水面實(shí)現(xiàn)：從法線貼圖到著色器編程的完整指南
1. 從靜態(tài)到動(dòng)態(tài)為什么我們需要流動(dòng)的水面在三維地理信息可視化領(lǐng)域CesiumJS 以其強(qiáng)大的三維地球渲染能力成為了眾多開發(fā)者構(gòu)建數(shù)字孿生、智慧城市和虛擬仿真應(yīng)用的首選引擎。然而一個(gè)長期存在的挑戰(zhàn)是如何讓場景中的水體“活”起來默認(rèn)的 Cesium 水體無論是Cesium.Water材質(zhì)還是簡單的藍(lán)色平面往往呈現(xiàn)一種靜態(tài)、呆板的觀感缺乏真實(shí)水體應(yīng)有的動(dòng)態(tài)波紋、光影流動(dòng)和表面細(xì)節(jié)。這種靜態(tài)感在模擬河流、湖泊、海洋甚至人工水渠時(shí)會(huì)極大地削弱場景的真實(shí)感和沉浸感。最近在社區(qū)和搜索引擎中“Cesium 動(dòng)態(tài)流動(dòng)水面”成為了一個(gè)高頻熱詞這背后反映的正是開發(fā)者們對(duì)提升場景逼真度的迫切需求。無論是模擬一條蜿蜒的河流還是展現(xiàn)港口碼頭的海浪亦或是為智慧水利項(xiàng)目創(chuàng)建動(dòng)態(tài)的水流態(tài)勢一個(gè)能夠?qū)崟r(shí)流動(dòng)、反射環(huán)境光、具備波紋細(xì)節(jié)的水面是項(xiàng)目從“能用”到“好用”甚至“驚艷”的關(guān)鍵一步。實(shí)現(xiàn)動(dòng)態(tài)流動(dòng)水面其核心價(jià)值遠(yuǎn)不止于視覺美化。在防洪防汛模擬中動(dòng)態(tài)的水流方向可以直觀展示洪水演進(jìn)路徑在船舶航行仿真中水面的波紋與浪花能增強(qiáng)運(yùn)動(dòng)感知在環(huán)境監(jiān)測應(yīng)用中不同流速、顏色的水體動(dòng)態(tài)變化可以更有效地傳達(dá)污染擴(kuò)散等信息。因此掌握這項(xiàng)技術(shù)不僅僅是學(xué)習(xí)一個(gè)“特效”更是解鎖一系列高級(jí)三維地理應(yīng)用場景的鑰匙。2. 核心原理拆解動(dòng)態(tài)水面的“魔法”是如何煉成的在開始寫代碼之前我們必須理解 Cesium 中實(shí)現(xiàn)動(dòng)態(tài)水面效果的底層邏輯。這并非某種單一的“黑科技”而是多種圖形學(xué)技術(shù)的巧妙結(jié)合。理解了這些你才能靈活調(diào)整參數(shù)甚至創(chuàng)造屬于自己的水面風(fēng)格。2.1 基石Cesium 的材質(zhì)系統(tǒng)與 Primitive APICesium 渲染一切非地形、非模型的幾何體如水面、廣告牌、多邊形主要依賴于Primitive和GeometryInstance。對(duì)于自定義水面我們通常使用Primitive配合GeometryInstance來創(chuàng)建一個(gè)覆蓋特定區(qū)域的平面幾何體。這個(gè)幾何體的外觀則由Material材質(zhì)來定義。材質(zhì)本質(zhì)上是一段運(yùn)行在 GPU 上的著色器程序Shader。Cesium 提供了一些內(nèi)置材質(zhì)如ColorMaterialProperty,ImageMaterialProperty但對(duì)于復(fù)雜效果我們需要使用Material類的fabric屬性來自定義著色器。fabric是一個(gè)強(qiáng)大的 JSON 對(duì)象它允許我們定義材質(zhì)所需的紋理Texture、統(tǒng)一變量Uniforms以及最重要的——著色器源碼Source。動(dòng)態(tài)效果的關(guān)鍵就在于這些uniforms統(tǒng)一變量。它們是 CPU 端JavaScript傳遞給 GPU 端Shader的變量在單次繪制調(diào)用中保持不變但可以在不同幀之間更新。通過每幀修改這些uniforms例如讓一個(gè)代表時(shí)間的變量持續(xù)增加我們就能在著色器中驅(qū)動(dòng)紋理坐標(biāo)的偏移、顏色的變化從而產(chǎn)生“動(dòng)態(tài)”的視覺感受。2.2 靈魂技法法線貼圖與 UV 動(dòng)畫這是實(shí)現(xiàn)水面波紋細(xì)節(jié)和流動(dòng)感的核心技術(shù)。法線貼圖Normal Map一張?zhí)厥獾募y理它不存儲(chǔ)顏色信息而是存儲(chǔ)每個(gè)像素點(diǎn)的法線向量X, Y, Z。法線決定了光線照射到該像素時(shí)的反射方向從而模擬出凹凸不平的細(xì)節(jié)。對(duì)于水面我們使用一張包含細(xì)小波紋圖案的法線貼圖。即使水面幾何體本身是一個(gè)絕對(duì)平坦的平面貼上法線貼圖后在光照下就會(huì)呈現(xiàn)出豐富的波紋細(xì)節(jié)計(jì)算開銷卻遠(yuǎn)低于使用真實(shí)幾何體去建模這些波紋。UV 動(dòng)畫紋理坐標(biāo)U, V決定了紋理圖片如何映射到幾何體表面。UV動(dòng)畫就是讓這些坐標(biāo)隨著時(shí)間變化。例如我們讓法線貼圖的 U 坐標(biāo)每幀增加一個(gè)很小的值那么貼圖就會(huì)沿著水平方向“滑動(dòng)”映射到水面上的波紋也就看起來在朝一個(gè)方向流動(dòng)。通過組合多張法線貼圖以不同速度、不同方向進(jìn)行 UV 動(dòng)畫可以創(chuàng)造出非常復(fù)雜、自然的水面流動(dòng)效果避免出現(xiàn)單調(diào)的重復(fù)圖案。2.3 點(diǎn)睛之筆鏡面反射、菲涅爾效應(yīng)與顏色混合一個(gè)逼真的水面還需要以下效果鏡面反射Specular水面像鏡子一樣反射環(huán)境光在 Cesium 中通常是天空盒skyBox和場景中的其他物體。在著色器中我們通過計(jì)算視線向量與法線向量的反射向量來采樣天空盒紋理模擬反射。動(dòng)態(tài)的法線來自法線貼圖會(huì)讓反射的圖像產(chǎn)生扭曲這正是水波蕩漾的感覺。菲涅爾效應(yīng)Fresnel Effect這是一個(gè)物理現(xiàn)象觀察者視線與水面法線的夾角越小即平視水面反射越強(qiáng)夾角越大即俯視水面折射或透見水底越強(qiáng)。在著色器中我們通過計(jì)算dot(viewVector, normal)來模擬這一效應(yīng)并用它來混合反射顏色和水的底色Base Color使得水面在邊緣處反射強(qiáng)烈中心區(qū)域則能透出一些水體的顏色如藍(lán)綠色。顏色混合最終的水面顏色通常是多層效果的混合水底色 反射色 * 菲涅爾系數(shù) 高光色。我們還可以加入一張深度圖或根據(jù)相機(jī)高度來混合岸邊淺水區(qū)的顏色如淺綠色、泥沙色讓水體與岸邊的過渡更加自然。3. 實(shí)戰(zhàn)構(gòu)建一步步創(chuàng)建你的動(dòng)態(tài)水面材質(zhì)理論已經(jīng)足夠現(xiàn)在讓我們動(dòng)手從零開始構(gòu)建一個(gè)適用于河流或湖泊的動(dòng)態(tài)水面材質(zhì)。我們將創(chuàng)建一個(gè)Cesium.Material對(duì)象并將其應(yīng)用到一個(gè)PolygonGeometry上。3.1 第一步準(zhǔn)備核心紋理——法線貼圖你需要一張高質(zhì)量的法線貼圖?？梢栽谝恍┟赓M(fèi)的紋理網(wǎng)站如 textures.com, polyhaven.com搜索 “water normal map”。通常我們會(huì)準(zhǔn)備兩張不同尺度和細(xì)節(jié)的法線貼圖例如一張大波紋一張小漣漪混合使用以增加細(xì)節(jié)層次。假設(shè)我們將這兩張圖下載并放置在項(xiàng)目的assets/textures/目錄下命名為water_normal_01.jpg和water_normal_02.jpg。在 Cesium 中我們需要?jiǎng)?chuàng)建紋理對(duì)象。// 假設(shè) viewer 已創(chuàng)建 var viewer new Cesium.Viewer(cesiumContainer); // 創(chuàng)建紋理統(tǒng)一變量 var normalMap1 new Cesium.TextureUniform({ url: ./assets/textures/water_normal_01.jpg }); var normalMap2 new Cesium.TextureUniform({ url: ./assets/textures/water_normal_02.jpg });注意紋理圖片的尺寸最好是2的冪次方如 256x256, 512x512并且確保圖片本身沒有透明通道除非你需要否則可能會(huì)引發(fā)意外的混合。對(duì)于法線貼圖通常使用 PNG 或 JPEG 格式即可。3.2 第二步編寫自定義材質(zhì)的 Fabric 配置這是最核心的一步。我們將創(chuàng)建一個(gè)名為DynamicWaterMaterial的自定義材質(zhì)。// 定義動(dòng)態(tài)水面材質(zhì)的 Fabric 配置 var dynamicWaterFabric { type: DynamicWater, uniforms: { // 兩張法線貼圖 normalMap1: normalMap1, normalMap2: normalMap2, // 水流速度與方向 (vec2: [xSpeed, ySpeed]) flowDirection1: new Cesium.Cartesian2(0.1, 0.0), // 第一層法線流動(dòng)方向 flowDirection2: new Cesium.Cartesian2(0.03, 0.02), // 第二層法線流動(dòng)方向速度慢一些方向略有不同 // 時(shí)間變量由Cesium自動(dòng)每幀更新 time: 0.0, // 基礎(chǔ)水色 (RGBA) baseColor: new Cesium.Color(0.0, 0.3, 0.6, 0.8), // 反射強(qiáng)度系數(shù) reflectionStrength: 0.5, // 菲涅爾效應(yīng)強(qiáng)度系數(shù) fresnelPower: 3.0, // 波紋凹凸強(qiáng)度 normalScale: new Cesium.Cartesian2(0.5, 0.5) }, source: // 著色器源碼 (GLSL ES 1.0即Cesium使用的版本) czm_material czm_getMaterial(czm_materialInput materialInput) { czm_material material czm_getDefaultMaterial(materialInput); // 獲取紋理坐標(biāo)和法線 vec2 st materialInput.st; // 模型本身的UV坐標(biāo) vec3 normal materialInput.normalEC; // 眼坐標(biāo)下的幾何法線 // 計(jì)算隨時(shí)間變化的UV偏移 vec2 flow1 st - u_flowDirection1 * u_time; vec2 flow2 st - u_flowDirection2 * u_time; // 采樣兩張法線貼圖并將顏色值從[0,1]映射到法線向量的[-1,1]范圍 vec3 normalTex1 texture2D(u_normalMap1, flow1).rgb * 2.0 - 1.0; vec3 normalTex2 texture2D(u_normalMap2, flow2).rgb * 2.0 - 1.0; // 混合兩張法線貼圖并應(yīng)用強(qiáng)度縮放 vec3 blendedNormal normalize(normalTex1 normalTex2); blendedNormal.xy * u_normalScale; blendedNormal normalize(blendedNormal); // 將切線空間法線轉(zhuǎn)換到眼坐標(biāo)系簡化處理假設(shè)水面是平的使用幾何法線作為上向量 // 這里是一個(gè)簡化版本。更精確的做法需要傳入切線和副切線向量。 vec3 newNormalEC normalize(materialInput.normalEC blendedNormal.x * czm_tangent blendedNormal.y * czm_bitangent); // 計(jì)算視線向量從表面點(diǎn)到相機(jī) vec3 positionToEyeEC -materialInput.positionToEyeEC; vec3 viewVector normalize(positionToEyeEC); // 計(jì)算反射向量并采樣天空盒環(huán)境貼圖模擬反射 vec3 reflectionVector reflect(-viewVector, newNormalEC); vec4 reflectionColor czm_sampleCube(czm_environmentMap, reflectionVector); // 計(jì)算菲涅爾系數(shù) float fresnel pow(1.0 - max(dot(viewVector, newNormalEC), 0.0), u_fresnelPower); fresnel clamp(fresnel, 0.0, 1.0); // 混合顏色基礎(chǔ)色 反射色 * (菲涅爾系數(shù) * 反射強(qiáng)度) vec4 waterBaseColor vec4(u_baseColor.rgb, u_baseColor.a); vec4 finalColor mix(waterBaseColor, reflectionColor, fresnel * u_reflectionStrength); // 可以在此處添加基于深度或高度的顏色漸變模擬岸邊淺水效果 // 例如float depthFactor clamp(materialInput.height / 10.0, 0.0, 1.0); // finalColor.rgb mix(vec3(0.2, 0.5, 0.2), finalColor.rgb, depthFactor); material.diffuse finalColor.rgb; material.alpha finalColor.a; // 使用擾動(dòng)后的法線影響光照計(jì)算 material.normal newNormalEC; return material; } };代碼關(guān)鍵點(diǎn)解析Uniforms我們定義了控制水面外觀的所有“旋鈕”。flowDirection控制流動(dòng)方向和速度time是驅(qū)動(dòng)動(dòng)畫的核心。雙法線混合使用兩張法線貼圖并以不同速度流動(dòng)能有效打破重復(fù)感產(chǎn)生更自然的湍流效果。法線變換blendedNormal.xy * u_normalScale;這行代碼用于控制波紋的凹凸強(qiáng)度。值越大波紋看起來越陡峭、劇烈。反射采樣czm_sampleCube(czm_environmentMap, ...)是 Cesium 提供的函數(shù)用于采樣當(dāng)前場景的天空盒環(huán)境貼圖這是實(shí)現(xiàn)環(huán)境反射的關(guān)鍵。菲涅爾計(jì)算pow(1.0 - max(dot(...), 0.0), u_fresnelPower)是經(jīng)典的菲涅爾近似公式。fresnelPower值越大反射與透射的過渡區(qū)域越窄。3.3 第三步創(chuàng)建材質(zhì)、幾何體并添加到場景現(xiàn)在我們將材質(zhì)實(shí)例化并將其應(yīng)用到一個(gè)代表水面的多邊形上。// 1. 注冊并創(chuàng)建自定義材質(zhì) Cesium.Material._materialCache.addMaterial(DynamicWater, { fabric: dynamicWaterFabric }); var waterMaterial new Cesium.Material({ fabric: { type: DynamicWater, uniforms: { normalMap1: ./assets/textures/water_normal_01.jpg, normalMap2: ./assets/textures/water_normal_02.jpg, flowDirection1: new Cesium.Cartesian2(0.08, 0.0), // 主要沿X軸流動(dòng) flowDirection2: new Cesium.Cartesian2(0.02, 0.01), baseColor: new Cesium.Color(0.1, 0.4, 0.7, 0.85), reflectionStrength: 0.6, fresnelPower: 4.0, normalScale: new Cesium.Cartesian2(0.8, 0.8) } } }); // 2. 定義一個(gè)多邊形區(qū)域例如一條河流 var riverPositions Cesium.Cartesian3.fromDegreesArray([ 116.3, 39.9, 116.4, 39.92, 116.5, 39.91, 116.6, 39.93, 116.7, 39.9 ]); // 3. 創(chuàng)建多邊形幾何體實(shí)例 var riverGeometry new Cesium.PolygonGeometry({ polygonHierarchy: new Cesium.PolygonHierarchy(riverPositions), height: 0, // 水面高度 extrudedHeight: -10, // 如果需要水體側(cè)面如河岸可以設(shè)置擠壓高度。純水面通常設(shè)為undefined。 vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL // 必須包含法線 }); // 4. 創(chuàng)建圖元并應(yīng)用材質(zhì) var riverPrimitive new Cesium.Primitive({ geometryInstances: new Cesium.GeometryInstance({ geometry: riverGeometry, id: myRiver // 可選ID便于后續(xù)拾取或管理 }), appearance: new Cesium.MaterialAppearance({ material: waterMaterial, translucent: true, // 水面通常是半透明的 closed: true // 幾何體是否閉合 }), asynchronous: false // 同步加載簡單示例用 }); // 5. 添加到場景 viewer.scene.primitives.add(riverPrimitive); // 6. 關(guān)鍵一步更新time uniform以實(shí)現(xiàn)動(dòng)畫 viewer.scene.preRender.addEventListener(function(scene, time) { var waterMaterial riverPrimitive.appearance.material; if (waterMaterial waterMaterial.uniforms) { // 獲取自場景開始以來的秒數(shù)乘以一個(gè)系數(shù)控制全局速度 waterMaterial.uniforms.time Cesium.getTimestamp() * 0.001 * 0.05; // 0.05為速度系數(shù) } });實(shí)操心得與避坑指南vertexFormat至關(guān)重要?jiǎng)?chuàng)建PolygonGeometry時(shí)必須指定vertexFormat: Cesium.VertexFormat.POSITION_AND_NORMAL。因?yàn)槲覀兊闹餍枰ň€信息來計(jì)算光照和反射。如果只傳POSITION法線相關(guān)計(jì)算會(huì)出錯(cuò)水面可能變黑或顯示異常。時(shí)間更新循環(huán)動(dòng)畫的靈魂在于preRender事件監(jiān)聽器中不斷更新timeuniform。Cesium.getTimestamp() * 0.001將毫秒轉(zhuǎn)換為秒。乘以一個(gè)系數(shù)如0.05可以方便地調(diào)節(jié)整個(gè)水面動(dòng)畫的快慢。性能考量每幀更新 uniform 并重繪水面對(duì)性能有影響。如果場景中有多個(gè)獨(dú)立的水體可以考慮將它們合并到同一個(gè)Primitive的多個(gè)GeometryInstance中共享材質(zhì)和著色器減少繪制調(diào)用。深度測試與排序水面是半透明的需要正確排序才能與其他透明物體如云、粒子正確混合。確保translucent: true并且 Cesium 會(huì)自動(dòng)處理大部分排序問題。但在復(fù)雜場景中如果出現(xiàn)水面閃爍或遮擋錯(cuò)誤可能需要調(diào)整depthTest相關(guān)屬性。4. 進(jìn)階優(yōu)化與效果調(diào)參讓你的水面更真實(shí)基礎(chǔ)流動(dòng)效果實(shí)現(xiàn)后我們可以通過調(diào)整參數(shù)和增加一些技巧來大幅提升真實(shí)感。4.1 流動(dòng)方向與速度的藝術(shù)flowDirection不是隨便設(shè)置的。對(duì)于河流你應(yīng)該根據(jù)河流的走向來設(shè)定主要流動(dòng)方向?？梢酝ㄟ^計(jì)算多邊形中心點(diǎn)的流向或者使用一個(gè)統(tǒng)一的全局方向。// 示例根據(jù)多邊形坐標(biāo)估算一個(gè)平均流向簡化 function calculateFlowDirection(positions) { var totalVec new Cesium.Cartesian3(); for (var i 0; i positions.length - 1; i) { var vec Cesium.Cartesian3.subtract(positions[i1], positions[i], new Cesium.Cartesian3()); Cesium.Cartesian3.add(totalVec, vec, totalVec); } Cesium.Cartesian3.normalize(totalVec, totalVec); // 將3D流向轉(zhuǎn)換為2D紋理流動(dòng)方向忽略高度差 return new Cesium.Cartesian2(totalVec.x, totalVec.y); } // 應(yīng)用估算的流向 waterMaterial.uniforms.flowDirection1 calculateFlowDirection(riverPositions); waterMaterial.uniforms.flowDirection2 Cesium.Cartesian2.multiplyByScalar(calculateFlowDirection(riverPositions), 0.3, new Cesium.Cartesian2()); // 第二層速度更慢速度系數(shù)第一層法線flowDirection1代表中大型波紋速度可以快一些如向量模長0.1。第二層法線flowDirection2代表細(xì)小漣漪速度應(yīng)慢一些如0.03方向也可以略有偏差模擬風(fēng)或復(fù)雜水流的影響。4.2 實(shí)現(xiàn)岸邊淺水區(qū)與深度漸變真實(shí)的水體岸邊顏色更淺可能透出水底泥沙。我們可以通過頂點(diǎn)高度或額外的一張深度圖來實(shí)現(xiàn)。方法一基于頂點(diǎn)高度簡單在著色器中materialInput.height或materialInput.positionWC.z可以獲取世界坐標(biāo)下的高度。我們可以假設(shè)一個(gè)水面基準(zhǔn)高度然后計(jì)算當(dāng)前點(diǎn)與水面的相對(duì)深度。// 在著色器source中uniforms里添加 u_waterSurfaceHeight 和 u_shallowColor float depth u_waterSurfaceHeight - materialInput.positionWC.z; // 簡化計(jì)算假設(shè)水面平整 depth clamp(depth, 0.0, 10.0); // 限制深度范圍 float depthFactor depth / 10.0; // 歸一化 vec3 shallowColor u_shallowColor.rgb; vec3 deepColor finalColor.rgb; finalColor.rgb mix(shallowColor, deepColor, depthFactor);方法二使用深度紋理更精確但復(fù)雜Cesium 1.xx 版本后支持深度紋理。你可以渲染一張代表水面到水底地形的深度圖然后在著色器中采樣根據(jù)深度值混合顏色。這需要用到czm_depth相關(guān)函數(shù)和幀緩沖區(qū)紋理FBO實(shí)現(xiàn)復(fù)雜度較高但效果最好能完美貼合復(fù)雜地形岸線。4.3 添加高光與泡沫效果高光Specular Highlight在計(jì)算反射后可以額外計(jì)算一個(gè)基于光線方向和高光強(qiáng)度的鏡面高光點(diǎn)讓水面在特定角度下“波光粼粼”。// 假設(shè)主要光源方向如太陽光方向可以從Cesium內(nèi)置變量czm_sunDirectionEC獲取 vec3 lightDir normalize(czm_sunDirectionEC); vec3 halfVector normalize(lightDir viewVector); float specular pow(max(dot(newNormalEC, halfVector), 0.0), 64.0); // 64是高光指數(shù) vec3 specularColor specular * vec3(1.0, 1.0, 0.9) * 0.5; // 淡黃色高光 finalColor.rgb specularColor;泡沫紋理可以準(zhǔn)備一張泡沫噪聲圖根據(jù)水流速度flowDirection的大小或水面坡度法線變化率來動(dòng)態(tài)混合到最終顏色上模擬急流、浪花或岸邊的泡沫。這通常需要額外的紋理采樣和混合計(jì)算。4.4 性能調(diào)優(yōu)LOD與實(shí)例化當(dāng)水面覆蓋區(qū)域極大如海洋時(shí)全精度渲染每個(gè)像素的復(fù)雜著色器是昂貴的。細(xì)節(jié)層次LOD可以為水面創(chuàng)建多個(gè)幾何體層級(jí)。當(dāng)相機(jī)遠(yuǎn)離時(shí)使用更粗糙的多邊形和更簡單的著色器例如只保留一層法線動(dòng)畫和基礎(chǔ)顏色。這可以通過創(chuàng)建多個(gè)不同精度的Primitive并在scene.preRender中根據(jù)相機(jī)距離切換來實(shí)現(xiàn)。實(shí)例化Instancing如果你的場景中有大量形狀相同但位置不同的水面如多個(gè)規(guī)則的水池務(wù)必使用GeometryInstance的instances屬性進(jìn)行實(shí)例化渲染這能極大減少 GPU 的繪制調(diào)用開銷。5. 常見問題排查與調(diào)試技巧即使按照步驟操作你也可能會(huì)遇到水面不顯示、全黑、閃爍或不流動(dòng)的問題。以下是常見的排查清單。5.1 水面完全不顯示或全黑檢查控制臺(tái)錯(cuò)誤打開瀏覽器開發(fā)者工具F12查看 Console 是否有 WebGL 編譯錯(cuò)誤或紋理加載失敗提示。著色器語法錯(cuò)誤是最常見的原因。驗(yàn)證幾何體位置和高度確保你的多邊形坐標(biāo)正確且height設(shè)置合理。如果水面被地形或其它物體壓在下面自然看不到?？梢詴簳r(shí)關(guān)閉地形viewer.terrainProvider new Cesium.EllipsoidTerrainProvider();進(jìn)行測試。檢查材質(zhì)透明度確認(rèn)appearance的translucent屬性為true。如果為false半透明的baseColor.alpha可能無效。簡化著色器測試將復(fù)雜的著色器源碼替換為一個(gè)最簡單的版本只輸出固定顏色如material.diffuse vec3(0.0, 0.0, 1.0);。如果能顯示藍(lán)色說明幾何體和基本材質(zhì)流程沒問題問題出在著色器邏輯上。再逐步添加法線、反射等計(jì)算定位出錯(cuò)步驟。檢查法線貼圖路徑和格式確保紋理URL正確且服務(wù)器允許跨域CORS。紋理加載失敗會(huì)導(dǎo)致采樣結(jié)果為黑色或白色影響最終顏色。可以在uniforms中暫時(shí)將法線貼圖替換為一個(gè)純色紋理進(jìn)行測試。5.2 水面有顏色但不流動(dòng)確認(rèn)timeuniform 在更新在preRender事件監(jiān)聽器中打印waterMaterial.uniforms.time的值看它是否每幀都在遞增。檢查flowDirection值是否過小如果flowDirection的 x 和 y 值太小如 0.001乘以time后紋理坐標(biāo)偏移量可能在一段時(shí)間內(nèi)都小于一個(gè)像素肉眼難以察覺。嘗試將其增大到 0.05 或 0.1 看看。驗(yàn)證 UV 動(dòng)畫計(jì)算在著色器中可以暫時(shí)將最終顏色輸出為flow1.x或fract(flow1.x)取小數(shù)部分如果能看到規(guī)律的顏色條紋說明 UV 在變化問題可能出在法線貼圖采樣或法線變換上。5.3 水面閃爍Z-fighting或與地形穿插深度沖突Z-fighting當(dāng)水面幾何體與地形表面高度完全相同時(shí)GPU 深度測試會(huì)出現(xiàn)精度錯(cuò)誤導(dǎo)致交替顯示。解決方法是將水面高度略微抬高一點(diǎn)點(diǎn)如height: 0.01。地形穿插如果地形崎嶇平坦的水面多邊形會(huì)與地形交叉。這時(shí)需要更復(fù)雜的“水覆蓋”算法或者使用ClippingPlane裁剪掉穿幫部分。對(duì)于簡單場景確保水面高度高于地形最高點(diǎn)即可。調(diào)整渲染順序嘗試設(shè)置圖元的depthTestEnabled和depthFail屬性。有時(shí)關(guān)閉深度寫入但開啟深度測試可以解決一些透明物體的排序問題但這需要根據(jù)具體場景試驗(yàn)。5.4 反射失真或缺失環(huán)境貼圖問題Cesium 的czm_environmentMap默認(rèn)使用天空盒。確保你的場景設(shè)置了天空盒viewer.scene.skyBox或者開啟了基于物理的大氣渲染viewer.scene.globe.enableLighting true否則反射的內(nèi)容可能是空的。法線計(jì)算錯(cuò)誤反射向量嚴(yán)重依賴于法線。如果法線貼圖采樣或切線空間轉(zhuǎn)換出錯(cuò)法線方向錯(cuò)誤會(huì)導(dǎo)致反射圖像扭曲到奇怪的方向。檢查法線貼圖是否是“切線空間”法線貼圖并確認(rèn)czm_tangent和czm_bitangent是否在頂點(diǎn)數(shù)據(jù)中存在這依賴于VertexFormat。簡化調(diào)試將反射計(jì)算部分注釋掉直接輸出法線顏色material.diffuse blendedNormal * 0.5 0.5;觀察法線貼圖是否正確顯示為彩色凹凸圖案。我個(gè)人在多個(gè)項(xiàng)目中實(shí)踐這套流程后發(fā)現(xiàn)最大的挑戰(zhàn)往往不是著色器本身而是與 Cesium 龐大場景的集成與性能平衡。從一張靜態(tài)的藍(lán)色多邊形到一個(gè)能隨河道方向流動(dòng)、在陽光下波光粼粼、在岸邊顏色漸變的智能水面每一步調(diào)整都讓場景的敘事能力更強(qiáng)。記住參數(shù)沒有絕對(duì)的最優(yōu)值最好的效果是在你的具體場景中通過反復(fù)微調(diào)flowDirection、normalScale、fresnelPower這些“旋鈕”來達(dá)到的。不妨多花些時(shí)間觀察不同時(shí)間Cesium 的日照角度和不同視角下你水面的表現(xiàn)那才是檢驗(yàn)效果的唯一標(biāo)準(zhǔn)。