刻風(fēng)之杖風(fēng)格化水面：深度淡色與頂點(diǎn)波浪)
《塞爾達(dá)傳說風(fēng)之杖》的水面效果放到現(xiàn)在看依然是很適合進(jìn)自己項(xiàng)目的風(fēng)格化渲染模板。它的水面沒有超寫實(shí)細(xì)節(jié)沒有復(fù)雜的物理交互靠的是幾個(gè)顏色分層、頂點(diǎn)起伏和深度淡色就把“一整片大?！钡母杏X撐起來了。在 Unity 里用 Shader Graph 復(fù)刻這套效果不需要堆大量節(jié)點(diǎn)也不需要高規(guī)格顯卡核心要處理的其實(shí)只有三件事波面頂點(diǎn)動(dòng)畫、深度決定顏色、像素亮度閾值。這篇文章會(huì)用一個(gè)完整案例帶你走一遍“風(fēng)格拆解 - URP 工程準(zhǔn)備 - Shader Graph 節(jié)點(diǎn)搭建 - 材質(zhì)調(diào)試 - 性能觀察”的流程。不管是正在做圖形學(xué)實(shí)驗(yàn)還是想給游戲項(xiàng)目加一片風(fēng)格化海面都可以直接照這個(gè)思路去改。復(fù)刻不等于是逐像素還原原作重點(diǎn)是抓住“風(fēng)之杖水面”給人的第一印象大塊的藍(lán)、清晰的顏色分層、緩慢翻滾的低頻波浪以及靠近岸邊時(shí)那一圈干凈的白色浪花。本文涉及到的關(guān)鍵詞包括圖形學(xué)、引擎渲染、Unity、Shader、Shader Graph。如果你之前沒怎么接觸過卡通渲染建議先把 Surface 輸出、Vertex Position、Scene Depth 這幾個(gè)基本概念過一遍再看節(jié)點(diǎn)時(shí)會(huì)輕松很多。1. 核心能力速覽能力項(xiàng)說明項(xiàng)目類型Unity URP 風(fēng)格化 Shader Graph 復(fù)刻案例主要功能深度淡色、低頻頂點(diǎn)波浪、NPR 高光、岸邊泡沫原始版本參考《塞爾達(dá)傳說風(fēng)之杖》同類型風(fēng)格化海面渲染管線通用渲染管線 URPShader Graph 工程硬件門檻需支持 DirectX 11 / Vulkan開啟 Shader Model 5.0 的顯卡顯存占用低普通集顯和獨(dú)顯都能跑具體占用以編輯器 Profiler 為準(zhǔn)啟動(dòng)方式Unity 編輯器打開工程自動(dòng)編譯 Shader Graph是否支持 API 調(diào)用不涉及材質(zhì)參數(shù)通過 Material 屬性面板暴露是否支持批量任務(wù)支持同一 Shader Graph 可批量創(chuàng)建材質(zhì)參數(shù)可批量覆蓋適合讀者圖形學(xué)入門、Unity 風(fēng)格化渲染、NPR Shader 學(xué)習(xí)者上手難度中等掌握基本節(jié)點(diǎn)后 2 小時(shí)左右可完成這里提前說明教程復(fù)刻的是“美術(shù)風(fēng)格原理”不是把原版游戲的貼圖、網(wǎng)格、模型資源搬進(jìn) Unity。直接拆包使用游戲原始資產(chǎn)做大范圍復(fù)用會(huì)涉及版權(quán)風(fēng)險(xiǎn)自己學(xué)習(xí)研究可以商用前一定要把貼圖和模型都換成自制的。2. 風(fēng)之杖水面風(fēng)格拆解為什么這套效果值得復(fù)刻先看清楚原版水面到底做了哪些事再去想節(jié)點(diǎn)怎么連。風(fēng)之杖的水面第一眼會(huì)給人一種“可愛但很真實(shí)”的感覺拆開看其實(shí)就四個(gè)層次。第一層是大色塊。原版海面沒有細(xì)膩的噪點(diǎn)貼圖也不靠復(fù)雜的光照模型而是直接把水面分成深藍(lán)、淺藍(lán)、白色三種大色塊。深藍(lán)是遠(yuǎn)海和大深度區(qū)域淺藍(lán)是近岸淺水白色則出現(xiàn)在浪尖、船體周圍和岸邊浪花。這種大色塊處理方式非常適合 Shader Graph 去做甚至比傳統(tǒng)手寫 Shader 更容易控制閾值。第二層是頂點(diǎn)波浪。原版水面不是完全平面而是有明顯起伏的“塊狀波浪”波浪頻率不高幅度也不算夸張整體感覺像是一層軟軟的果凍在緩慢起伏。這也是今天復(fù)刻的核心用頂點(diǎn)位移而不是法線貼圖。第三層是閃爍高光。原版水面在某些角度會(huì)出現(xiàn)一塊塊亮白色區(qū)域它不是真實(shí)反射可以理解成一種“受光面高亮閾值”。當(dāng)水面法線方向接近光照方向配合低頻波浪的動(dòng)態(tài)變化就會(huì)形成這種閃爍塊面。第四層是海岸泡沫。在島嶼、礁石邊緣和水面交界處會(huì)有一圈白色用來交代水面和物體的前后關(guān)系。原版用貼圖和頂點(diǎn)色實(shí)現(xiàn)我們在 Shader Graph 里可以用“深度差值 平滑閾值”來做。所以復(fù)刻的關(guān)鍵不是把效果做得“像素級(jí)一致”而是把“大色塊、低頻波浪、硬邊緣高光、深度泡沫”這四個(gè)特征帶過來。理解了這套邏輯你會(huì)發(fā)現(xiàn)風(fēng)格化水面其實(shí)比寫實(shí)水面更容易控制因?yàn)樗恍枰?PBR 那一整套復(fù)雜參數(shù)一個(gè)顏色、一個(gè)深度值、一組波浪參數(shù)就能出效果。3. 環(huán)境準(zhǔn)備與工程配置在動(dòng)手連節(jié)點(diǎn)之前先把工程環(huán)境確認(rèn)一遍。3.1 版本與渲染管線建議使用 Unity LTS 版本并在 Hub 中創(chuàng)建 URP 模板工程。如果創(chuàng)建的是內(nèi)置渲染管線工程也可以在 Package Manager 里安裝 URP 并轉(zhuǎn)換為 URP 工程但最省事的方式是直接新建 URP 工程。創(chuàng)建完成后打開 Project Settings - Graphics確認(rèn) Scriptable Render Pipeline Settings 已經(jīng)指向 URP Asset。URP 資源里有兩個(gè)開關(guān)對(duì)本章節(jié)很重要配置項(xiàng)位置用途Depth TextureURP Asset - General開啟后才能在 Shader Graph 中使用場景深度節(jié)點(diǎn)Opaque TextureURP Asset - General開啟后可以用 GrabPass 類的屏幕顏色節(jié)點(diǎn)本案例非必須HDRURP Asset - Lighting如果需要高光更亮可以開啟風(fēng)格化水面一般用默認(rèn)深度開關(guān)不打開后續(xù) Scene Depth 節(jié)點(diǎn)運(yùn)行時(shí)采不到數(shù)據(jù)水面永遠(yuǎn)算不出淺水和深水交界這是最容易踩的坑。3.2 GPU 與圖形 API 要求Shader Graph 默認(rèn)生成的節(jié)點(diǎn)代碼需要 Shader Model 5.0 級(jí)別的圖形 API。社區(qū)里常見的報(bào)錯(cuò)是 “a d3d11-compatible gpu (feature level 11.0, shader model 5.0) is required to run this application”出現(xiàn)這類提示通用排查思路是確認(rèn)顯卡驅(qū)動(dòng)已經(jīng)更新到最新版本確認(rèn) Unity 圖形 API 設(shè)置里包含 Direct3D 11 或 Vulkan舊項(xiàng)目從內(nèi)置管線切 URP 后檢查 Player Settings 里的 Graphics APIs 是否把自動(dòng)圖形 API 關(guān)掉了在 Windows 上優(yōu)先使用 Direct3D 11不要在老舊虛擬機(jī)里測試 Shader Graph如果你是在 Mac 上開發(fā)Metal 的兼容性通常沒問題但要注意 URP 版本不能太老。3.3 工程目錄結(jié)構(gòu)先建好目錄避免后面 Shader、材質(zhì)、腳本到處亂放。Assets/ ├── Shaders/ │ ├── Water/ │ │ └── WindWakerWater.shadergraph │ └── Functions/ │ └── WindWakerWave.hlsl ├── Materials/ │ └── Water/ ├── Scenes/ │ └── WaterTest.unity └── Editor/ └── WaterCreator.csShader Graph 文件保存時(shí)會(huì)自動(dòng)編譯材質(zhì)則可以后續(xù)在 Materials 目錄里手動(dòng)創(chuàng)建。4. WindWaker 風(fēng)格水面 Shader Graph 實(shí)現(xiàn)下面進(jìn)入主體實(shí)現(xiàn)。我從 Shader Graph 的最終目標(biāo)往回推我們需要一個(gè)能夠在場景中平鋪一整塊巨大平面的水面材質(zhì)它具備深度變色、頂點(diǎn)波浪、波浪受光閃爍和岸邊泡沫四個(gè)能力。創(chuàng)建 Shader Graph 時(shí)選擇 URP - Lit Shader Graph 或 URP - Unlit Shader Graph。建議選擇 Unlit因?yàn)轱L(fēng)格化水面不需要 PBR 的金屬度和粗糙度參數(shù)自己控制顏色和亮度更直接。如果你想讓水面有輕微環(huán)境反射再改成 Lit 也不難。4.1 基礎(chǔ)顏色與深度淡色這是整個(gè)水面效果最重要的一個(gè)環(huán)節(jié)。邏輯是用水面深度值去 lerp 深藍(lán)和淺藍(lán)深度越大越深藍(lán)深度越小越淺藍(lán)。在 Shader Graph 中獲取深度的常用節(jié)點(diǎn)是 Scene Depth也有的版本叫 Depth。操作如下添加節(jié)點(diǎn) Scene Depth通過 Screen Position 節(jié)點(diǎn)的 Screen 通道把水面像素的屏幕坐標(biāo)連給 Scene Depth再用 LinearEyeDepth 把深度值從非線性的 Z 緩沖轉(zhuǎn)換到線性空間得到線性深度差之后我們需要計(jì)算“水面的厚度”。簡單理解就是水面表面離水下場景物體的距離。水面離底部越近顏色越淺離底部越遠(yuǎn)顏色越深。節(jié)點(diǎn)連接思路Scene Depth - Subtract(surfaceDepth) - SmoothStep - Lerp(deepColor, shallowColor)這里 DeepColor 可以選擇偏暗一點(diǎn)的藍(lán)色例如 RGB(0.04, 0.31, 0.55)ShallowColor 選擇偏青的淺藍(lán)例如 RGB(0.27, 0.82, 0.90)。實(shí)際顏色可以在材質(zhì)面板里調(diào)。核心參數(shù)是一個(gè)叫 DepthDensity 的系數(shù)它決定深度淡色的速度。密度值越大同樣是 1 米水深顏色變化越劇烈海面顏色分層越明顯。這個(gè)參數(shù)可以直接暴露到材質(zhì)面板。4.2 頂點(diǎn)波浪多正弦波疊加風(fēng)之杖水面最明顯的特點(diǎn)是波浪不是貼圖褶皺而是頂點(diǎn)真正在上下移動(dòng)。用 Shader Graph 的 Vertex Position 節(jié)點(diǎn)就可以操作。思路是在頂點(diǎn)階段計(jì)算一個(gè)高度值加到本地坐標(biāo) Y 軸上。最簡單的是單個(gè)正弦波height sin(time * speed position.x * frequency) * amplitude但單個(gè)正弦波會(huì)顯得機(jī)械風(fēng)之杖水面看起來是幾個(gè)方向不同的低頻波疊加在一起。我們至少疊加兩個(gè)方向一個(gè)主方向一個(gè)斜方向兩個(gè)波的頻率和速度都要分開才能出現(xiàn)“層層推進(jìn)”的感覺。這里推薦把波形計(jì)算封裝成一個(gè) Custom Function 節(jié)點(diǎn)避免主圖節(jié)點(diǎn)太亂。新建一個(gè) HLSL 文件放到 Shaders/Functions 目錄下void WindWakerWave_float( float3 positionOS, float time, float amp1, float freq1, float speed1, float amp2, float freq2, float speed2, out float3 offsetOS, out float waveHeight) { // 只使用 xz 平面坐標(biāo)水面在 y 軸上起伏 float2 uv positionOS.xz; // 方向 1接近 x 軸的正弦波負(fù)責(zé)主波浪 float dir1 dot(uv, normalize(float2(1.0, 0.3))); float wave1 sin(time * speed1 dir1 * freq1) * amp1; // 方向 2斜向次波浪打破機(jī)械感 float dir2 dot(uv, normalize(float2(-0.4, 1.0))); float wave2 sin(time * speed2 dir2 * freq2) * amp2; float height wave1 wave2; offsetOS float3(0.0, height, 0.0); waveHeight height; }在 Shader Graph 里添加 Custom Function 節(jié)點(diǎn)選擇該 HLSL 文件Type 選 File。把 Vertex 階段的 Position 連給 positionOSTime 節(jié)點(diǎn)連給 time兩個(gè)波浪的振幅、頻率、速度分別暴露成屬性。最后把 offsetOS 加到原來的 Object Position 上連到 Vertex Position 節(jié)點(diǎn)。Object Position - Add(offsetOS) - Vertex PositionwaveHeight 輸出留著后面高光和泡沫都要用到。4.3 卡通化波峰用閾值制造硬邊緣水面能站起來不只靠頂點(diǎn)位移還要讓波浪頂部出現(xiàn)明顯的高亮層。真實(shí)水面高光是連續(xù)漸變的但卡通風(fēng)格要求“有就是有沒有就是沒有”中間過渡要盡量窄。處理方式是把 waveHeight 節(jié)點(diǎn)值做一個(gè) SmoothStep 或 StepwaveHeight - SmoothStep(waveCrestStart, waveCrestStart waveCrestWidth, waveHeight)得到一個(gè) 0 到 1 之間的 CrestMask然后用它去跟基礎(chǔ)顏色混合?；旌蠙?quán)重不要太大大概 0.2 到 0.4 就行讓波浪頂部略微發(fā)白。這個(gè)做法的好處是效果非?？煽卣{(diào)窄波峰寬度就能讓水從“橡皮泥”變成“刀切豆腐”的感覺非?？ㄍ?。4.4 閃爍高光光照方向與法線方向的關(guān)系為了泡泡面受光閃爍的效果我們需要一個(gè)簡單的高光模型。不需要 BlinnPhong 的高光節(jié)點(diǎn)那么復(fù)雜可以直接用“法線方向 光照方向”做點(diǎn)積。問題是頂點(diǎn)位移之后法線方向需要重新計(jì)算。最穩(wěn)妥的方式是用相鄰頂點(diǎn)的高度差計(jì)算出法線但 Shader Graph 里直接做會(huì)比較繞。更實(shí)用、也符合風(fēng)格化的做法是用手動(dòng)定義的輕量法線擾動(dòng)模擬波浪頂部朝向光照方向的區(qū)域使用一個(gè)“波浪偏移法線”例如給法線一個(gè)沿 X/Z 方向的偏移量偏移量大小由 waveHeight 的導(dǎo)數(shù)方向決定再把得到的法線與主光源方向做 dot 運(yùn)算簡化節(jié)點(diǎn)寫法NormalDirection - Add(normalBias) - Normalize - Dot(lightDirection) - SmoothStep(highlightStart, highlightStart 0.2, dotResult) - Multiply(specColor, creastMask)這種做法雖然不夠物理但卡通高光本身就不需要物理法線。重點(diǎn)是把高光出現(xiàn)的區(qū)域圈成“塊狀”而不是漸變條狀。在風(fēng)之杖里水面高光更像是一個(gè)個(gè)亮斑所以可以適當(dāng)調(diào)高 smoothstep 的閾值。這里提醒一句如果你對(duì)法線計(jì)算有更高要求可以在頂點(diǎn)階段用自定義函數(shù)對(duì)相鄰頂點(diǎn)采樣做偏導(dǎo)計(jì)算或者干脆在 Fragment 階段使用 ddx/ddy 求高度場梯度。對(duì)于教學(xué)案例用近似法線已經(jīng)夠了。4.5 岸邊泡沫與深度關(guān)系泡沫是最能體現(xiàn)“水面遇到物體”效果的地方。Shader Graph 中有一個(gè)非常方便的思路sceneDepth - surfaceDepth 水面厚度當(dāng)水面厚度很小說明這個(gè)像素非常靠近水下物體或岸邊地面。用 SmoothStep 處理這個(gè)厚度閾值設(shè)成比如 0.1 到 0.5 米就能在岸邊或礁石附近圈出一圈白色泡沫。這里要把泡沫范圍控制窄一點(diǎn)原版泡沫不是全面覆蓋只在交界處有干凈的細(xì)線。節(jié)點(diǎn)連接思路waterThickness - SmoothStep(foamDepthMin, foamDepthMax, waterThickness) - Multiply(foamColor) - Add(baseColor)如果想讓泡沫邊緣有一些噪聲抖動(dòng)可以添加一個(gè)簡單的噪聲節(jié)點(diǎn)把噪聲值加到 foamDepthMax 上泡沫就不會(huì)是一根筆直的線。4.6 可選的折射與透明效果原版受限于性能并沒有做真正的折射。今天復(fù)刻時(shí)如果堅(jiān)持完全還原是可以不開啟透明和不做折射的光是深度淡色已經(jīng)能模擬出水下顏色。如果你希望做出“水面底下物體錯(cuò)位”的現(xiàn)代感效果那就要在透明隊(duì)列里使用 GrabPass 或 URP 的 Opaque Texture。流程是Screen Position - Add(UVOffest) - SampleOpaqueTexture - 跟隨透明度混合這個(gè)方案會(huì)增加不少帶寬消耗對(duì)于移動(dòng)端尤其明顯。所以實(shí)際項(xiàng)目中建議把這個(gè)能力做成開關(guān)PC 上開啟移動(dòng)端關(guān)閉。5. 材質(zhì)屬性面板與參數(shù)說明Shader Graph 里暴露的屬性最終會(huì)自動(dòng)映射到材質(zhì) Inspector 面板。下面列出本案例需要用到的關(guān)鍵屬性你可以按自己的需要命名屬性名類型默認(rèn)值參考作用BaseColorDeepColor深藍(lán) (0.04, 0.31, 0.55)深水區(qū)顏色BaseColorShallowColor淺藍(lán) (0.27, 0.82, 0.90)淺水區(qū)顏色DepthDensityFloat0.06深度淡色速率WaveAmp1Float0.12主波浪振幅WaveFreq1Float0.8主波浪頻率WaveSpeed1Float1.2主波浪速度WaveAmp2Float0.06次波浪振幅WaveFreq2Float1.6次波浪頻率WaveSpeed2Float0.8次波浪速度CrestRangeFloat0.25波峰發(fā)白寬度FoamDepthMaxFloat0.4泡沫出現(xiàn)的最大水深SpecStrengthFloat1.0高光強(qiáng)度要批量管理多個(gè)水面材質(zhì)可以寫一個(gè)簡單的編輯器腳本在菜單欄生成水面物體并自動(dòng)掛載材質(zhì)。using UnityEditor; using UnityEngine; public static class WaterCreator { [MenuItem(Tools/WindWaker/Create Water Plane)] public static void CreateWaterPlane() { GameObject go GameObject.CreatePrimitive(PrimitiveType.Plane); go.name Ocean_WindWaker; Object.DestroyImmediate(go.GetComponentCollider()); Shader shader Shader.Find(Shader Graphs/WindWakerWater); if (shader null) { Debug.LogError(找不到 Shader Graphs/WindWakerWater請(qǐng)先保存你的 Shader Graph 文件); return; } Material mat new Material(shader); string path Assets/Materials/Water/WindWakerWater.mat; AssetDatabase.CreateAsset(mat, path); AssetDatabase.SaveAssets(); go.GetComponentRenderer().sharedMaterial AssetDatabase.LoadAssetAtPathMaterial(path); Undo.RegisterCreatedObjectUndo(go, Create Water Plane); } }這個(gè)腳本放在 Editor 目錄下使用不需要擔(dān)心打包進(jìn)玩家端。6. 場景驗(yàn)證怎么判斷效果是否接近風(fēng)之杖風(fēng)格搭建一個(gè)簡單的測試場景放一個(gè)大平面然后在場景里放幾個(gè)高低不同的立方體或礁石模型觀察水面和物體交界處。驗(yàn)證清單相機(jī)俯瞰海面時(shí)能看到明顯的深藍(lán)和淺藍(lán)分層而不是一整片同一個(gè)顏色波浪持續(xù)緩慢起伏不會(huì)出現(xiàn)高頻抖動(dòng)頻率太低會(huì)像果凍太高會(huì)像水面沸騰波浪頂部有一層干凈的白色而不是模糊的一團(tuán)光照方向變化時(shí)水面出現(xiàn)塊狀高光閃爍岸邊石頭周圍有一圈白色泡沫泡沫邊緣有輕微噪聲抖動(dòng)從側(cè)面看水面不是一個(gè)純平面頂點(diǎn)有真實(shí)的 Y 軸位移如果以上六點(diǎn)都成立說明這個(gè) Shader Graph 的核心鏈路已經(jīng)跑通。剩下的就是調(diào)數(shù)值手感。如果你想讓水面看起來更“圓潤”把兩個(gè)波浪的振幅調(diào)高、頻率調(diào)低并把波峰寬度調(diào)大。如果想讓水面更“清脆利落”就反過來振幅降低、頻率調(diào)高、波峰寬度調(diào)窄。這套控制邏輯一旦建立后續(xù)做雪地、巖漿、泥潭都可以復(fù)用同一個(gè) Shader Graph 模板只是換顏色和波型參數(shù)。7. 性能觀察與參數(shù)調(diào)節(jié)建議在 Unity 編輯器的 Game 模式下打開 Profiler可以重點(diǎn)觀察 Render 和 Scripts 兩項(xiàng)耗時(shí)。Shader Graph 節(jié)點(diǎn)雖然直觀但節(jié)點(diǎn)數(shù)量增多后會(huì)生成較長的指令流尤其是 Fragment 階段被多次采樣的節(jié)點(diǎn)一定要警惕。對(duì)于這種風(fēng)格化水面性能優(yōu)化優(yōu)先級(jí)如下第一減少 Fragment 階段的采樣。Scene Depth 的采樣是必需的但不要為了泡沫在 Fragment 階段再加多個(gè)高度場采樣。波浪高度只算了一次頂點(diǎn)階段可以直接把 waveHeight 傳到 Fragment 階段避免重復(fù)計(jì)算。第二謹(jǐn)慎開啟透明。透明表面會(huì)改變渲染順序大量水面 Mesh 疊加時(shí)Overdraw 會(huì)很明顯。能用不透明做出來的效果盡量不透明。第三控制波浪網(wǎng)格的頂點(diǎn)密度。如果整個(gè)海面只用一個(gè)大平面頂點(diǎn)數(shù)不夠波浪會(huì)很粗糙但如果每個(gè)小區(qū)域都放一個(gè)高密度平面頂點(diǎn)壓力也不小。建議用 Unity 的 LOD Group 做兩層海面遠(yuǎn)處用低分段網(wǎng)格近處用高分段網(wǎng)格。第四批量處理參數(shù)。如果場景中有多塊不同水域可以共用同一個(gè)材質(zhì)然后用 MaterialPropertyBlock 覆蓋局部差異不建議創(chuàng)建大量不同參數(shù)的新材質(zhì)實(shí)例否則會(huì)破壞合批。從實(shí)際經(jīng)驗(yàn)看這套節(jié)點(diǎn)圖在 PC 端幾乎沒有壓力在移動(dòng)端需要關(guān)掉折射和降低分辨率屬于“風(fēng)格化特效里性價(jià)比很高”的方案。具體的顯存和幀耗時(shí)還是要拿到自己的目標(biāo)設(shè)備上跑一輪數(shù)據(jù)再下結(jié)論。8. 常見問題與排查方法問題現(xiàn)象可能原因排查方式解決方案材質(zhì)顯示紫紅色Shader 編譯失敗查看 Console 窗口報(bào)錯(cuò)日志按報(bào)錯(cuò)信息檢查節(jié)點(diǎn)類型、Custom Function 路徑和 HLSL 文件是否缺失啟動(dòng)項(xiàng)目提示 d3d11-compatible GPU圖形 API 或驅(qū)動(dòng)不滿足 Shader Model 5.0 要求檢查 Project Settings - Player - Graphics APIs切換到 Direct3D 11 或 Vulkan更新顯卡驅(qū)動(dòng)水面沒有深度淡色全部是深藍(lán)URP Depth Texture 未開啟檢查 URP Asset 的 Depth Texture 選項(xiàng)勾選 Deep Texture 并重啟編輯器Scene Depth 節(jié)點(diǎn)連不上或報(bào)錯(cuò)版本不同節(jié)點(diǎn)名稱有差異在搜索欄分別搜索 Scene Depth、Camera Depth Texture不同版本節(jié)點(diǎn)名稱不同檢索后重新連接波浪看起來特別硬SmoothStep 閾值過窄或振幅過大觀察波峰 Mask 的數(shù)值范圍把 CrestRange 調(diào)大或降低波浪振幅高速移動(dòng)相機(jī)時(shí)水面閃爍頂點(diǎn)波形精度不夠在材質(zhì)面板把波浪頻率調(diào)低低頻波浪更適合風(fēng)格化水面也能避免閃爍泡沫出現(xiàn)在整個(gè)水面深度判斷邏輯錯(cuò)誤檢查 Scene Depth 是否被正確轉(zhuǎn)換到線性空間使用 LinearEyeDepth 處理后再計(jì)算水面厚度高光區(qū)域太大像大面積曝光Dot 節(jié)點(diǎn)結(jié)果沒有被 SmoothStep 約束檢查高光分支的 SmoothStep 閾值提高高光 Threshold把亮度收縮成塊狀9. 最佳實(shí)踐與擴(kuò)展方向做完這個(gè)案例之后可以沿著幾個(gè)方向繼續(xù)拓展。第一把波形函數(shù)做成可配置的 SubGraph。目前 HLSL 自定義函數(shù)已經(jīng)是一個(gè)獨(dú)立文件你可以繼續(xù)把它分享成 SubGraph然后在不同水面 Shader 中復(fù)用。這樣后續(xù)調(diào)整波形算法時(shí)只需要改一處所有水面的表現(xiàn)同時(shí)更新。第二加入角色交互。風(fēng)之杖里船只會(huì)讓水面產(chǎn)生明顯的交互浪花。可以在 Update 里用 SphereCollider 對(duì)船底采樣產(chǎn)生一個(gè)局部的浪花權(quán)重然后傳給水面 MaterialPropertyBlock。這種交互量不需要很大一個(gè)浮點(diǎn)數(shù)數(shù)組就能傳遞多個(gè)點(diǎn)的水面擾動(dòng)強(qiáng)度。第三做天氣系統(tǒng)。把波浪速度、振幅、高光閾值統(tǒng)一暴露為全局參數(shù)然后寫一個(gè)簡單的 MonoBehaviour 在晴天/風(fēng)雨天之間做插值就能讓同一片海面具備兩種氣質(zhì)。第四嘗試深度霧與顏色映射。當(dāng)前案例用的是硬邊界的深度淡色如果你想往更現(xiàn)代的風(fēng)格化靠攏可以把 lerp 換成一份 DepthColorRamp甚至用一組 Gradient 作為深度顏色映射表這樣海水顏色會(huì)更柔和。第五團(tuán)隊(duì)協(xié)作和版本管理。Shader Graph 資產(chǎn)本質(zhì)上也是文本資產(chǎn)建議配合 Git 進(jìn)行管理。可以在項(xiàng)目根目錄執(zhí)行g(shù)it init git add Assets Packages ProjectSettings git commit -m init wind waker water shader demo這樣每次修改都有回退點(diǎn)尤其是波形參數(shù)調(diào)到不可逆的時(shí)候Git 能救你一次?？偨Y(jié)這個(gè)案例最值得嘗試的地方在于只用一張平面、一個(gè) Shader Graph不開復(fù)雜渲染特性就能復(fù)刻出風(fēng)格化海面的核心視覺。最先應(yīng)該驗(yàn)證的是深度淡色鏈路因?yàn)閳鼍吧疃仁钦麄€(gè)水面色塊分層的骨架如果這一步?jīng)]有出效果后面幾個(gè)環(huán)節(jié)都缺少基準(zhǔn)。最容易踩的坑是 URP 資源的 Depth Texture 沒有打開以及 Shader Graph 版本升級(jí)后節(jié)點(diǎn)名稱變化。把環(huán)境問題排干凈之后再回到數(shù)值調(diào)試把波浪振幅和頻率調(diào)到自己想要的手感上這片海就算真正“活”了。順手可以再做一個(gè)夜間版本把 BaseColorDeep 換成暗色把高光調(diào)低泡沫改成微弱反光同一個(gè)材質(zhì)模板就變成了另一片完全不同的海面。建議收藏備用之后做風(fēng)格化地形、卡通渲染或者圖形學(xué)作業(yè)時(shí)都可以回來翻一翻這套節(jié)點(diǎn)的組織思路。 Unity Shader Graph復(fù)刻風(fēng)之杖風(fēng)格化水面：深度淡色與頂點(diǎn)波浪
《塞爾達(dá)傳說風(fēng)之杖》的水面效果放到現(xiàn)在看依然是很適合進(jìn)自己項(xiàng)目的風(fēng)格化渲染模板。它的水面沒有超寫實(shí)細(xì)節(jié)沒有復(fù)雜的物理交互靠的是幾個(gè)顏色分層、頂點(diǎn)起伏和深度淡色就把“一整片大?！钡母杏X撐起來了。在 Unity 里用 Shader Graph 復(fù)刻這套效果不需要堆大量節(jié)點(diǎn)也不需要高規(guī)格顯卡核心要處理的其實(shí)只有三件事波面頂點(diǎn)動(dòng)畫、深度決定顏色、像素亮度閾值。這篇文章會(huì)用一個(gè)完整案例帶你走一遍“風(fēng)格拆解 - URP 工程準(zhǔn)備 - Shader Graph 節(jié)點(diǎn)搭建 - 材質(zhì)調(diào)試 - 性能觀察”的流程。不管是正在做圖形學(xué)實(shí)驗(yàn)還是想給游戲項(xiàng)目加一片風(fēng)格化海面都可以直接照這個(gè)思路去改。復(fù)刻不等于是逐像素還原原作重點(diǎn)是抓住“風(fēng)之杖水面”給人的第一印象大塊的藍(lán)、清晰的顏色分層、緩慢翻滾的低頻波浪以及靠近岸邊時(shí)那一圈干凈的白色浪花。本文涉及到的關(guān)鍵詞包括圖形學(xué)、引擎渲染、Unity、Shader、Shader Graph。如果你之前沒怎么接觸過卡通渲染建議先把 Surface 輸出、Vertex Position、Scene Depth 這幾個(gè)基本概念過一遍再看節(jié)點(diǎn)時(shí)會(huì)輕松很多。1. 核心能力速覽能力項(xiàng)說明項(xiàng)目類型Unity URP 風(fēng)格化 Shader Graph 復(fù)刻案例主要功能深度淡色、低頻頂點(diǎn)波浪、NPR 高光、岸邊泡沫原始版本參考《塞爾達(dá)傳說風(fēng)之杖》同類型風(fēng)格化海面渲染管線通用渲染管線 URPShader Graph 工程硬件門檻需支持 DirectX 11 / Vulkan開啟 Shader Model 5.0 的顯卡顯存占用低普通集顯和獨(dú)顯都能跑具體占用以編輯器 Profiler 為準(zhǔn)啟動(dòng)方式Unity 編輯器打開工程自動(dòng)編譯 Shader Graph是否支持 API 調(diào)用不涉及材質(zhì)參數(shù)通過 Material 屬性面板暴露是否支持批量任務(wù)支持同一 Shader Graph 可批量創(chuàng)建材質(zhì)參數(shù)可批量覆蓋適合讀者圖形學(xué)入門、Unity 風(fēng)格化渲染、NPR Shader 學(xué)習(xí)者上手難度中等掌握基本節(jié)點(diǎn)后 2 小時(shí)左右可完成這里提前說明教程復(fù)刻的是“美術(shù)風(fēng)格原理”不是把原版游戲的貼圖、網(wǎng)格、模型資源搬進(jìn) Unity。直接拆包使用游戲原始資產(chǎn)做大范圍復(fù)用會(huì)涉及版權(quán)風(fēng)險(xiǎn)自己學(xué)習(xí)研究可以商用前一定要把貼圖和模型都換成自制的。2. 風(fēng)之杖水面風(fēng)格拆解為什么這套效果值得復(fù)刻先看清楚原版水面到底做了哪些事再去想節(jié)點(diǎn)怎么連。風(fēng)之杖的水面第一眼會(huì)給人一種“可愛但很真實(shí)”的感覺拆開看其實(shí)就四個(gè)層次。第一層是大色塊。原版海面沒有細(xì)膩的噪點(diǎn)貼圖也不靠復(fù)雜的光照模型而是直接把水面分成深藍(lán)、淺藍(lán)、白色三種大色塊。深藍(lán)是遠(yuǎn)海和大深度區(qū)域淺藍(lán)是近岸淺水白色則出現(xiàn)在浪尖、船體周圍和岸邊浪花。這種大色塊處理方式非常適合 Shader Graph 去做甚至比傳統(tǒng)手寫 Shader 更容易控制閾值。第二層是頂點(diǎn)波浪。原版水面不是完全平面而是有明顯起伏的“塊狀波浪”波浪頻率不高幅度也不算夸張整體感覺像是一層軟軟的果凍在緩慢起伏。這也是今天復(fù)刻的核心用頂點(diǎn)位移而不是法線貼圖。第三層是閃爍高光。原版水面在某些角度會(huì)出現(xiàn)一塊塊亮白色區(qū)域它不是真實(shí)反射可以理解成一種“受光面高亮閾值”。當(dāng)水面法線方向接近光照方向配合低頻波浪的動(dòng)態(tài)變化就會(huì)形成這種閃爍塊面。第四層是海岸泡沫。在島嶼、礁石邊緣和水面交界處會(huì)有一圈白色用來交代水面和物體的前后關(guān)系。原版用貼圖和頂點(diǎn)色實(shí)現(xiàn)我們在 Shader Graph 里可以用“深度差值 平滑閾值”來做。所以復(fù)刻的關(guān)鍵不是把效果做得“像素級(jí)一致”而是把“大色塊、低頻波浪、硬邊緣高光、深度泡沫”這四個(gè)特征帶過來。理解了這套邏輯你會(huì)發(fā)現(xiàn)風(fēng)格化水面其實(shí)比寫實(shí)水面更容易控制因?yàn)樗恍枰?PBR 那一整套復(fù)雜參數(shù)一個(gè)顏色、一個(gè)深度值、一組波浪參數(shù)就能出效果。3. 環(huán)境準(zhǔn)備與工程配置在動(dòng)手連節(jié)點(diǎn)之前先把工程環(huán)境確認(rèn)一遍。3.1 版本與渲染管線建議使用 Unity LTS 版本并在 Hub 中創(chuàng)建 URP 模板工程。如果創(chuàng)建的是內(nèi)置渲染管線工程也可以在 Package Manager 里安裝 URP 并轉(zhuǎn)換為 URP 工程但最省事的方式是直接新建 URP 工程。創(chuàng)建完成后打開 Project Settings - Graphics確認(rèn) Scriptable Render Pipeline Settings 已經(jīng)指向 URP Asset。URP 資源里有兩個(gè)開關(guān)對(duì)本章節(jié)很重要配置項(xiàng)位置用途Depth TextureURP Asset - General開啟后才能在 Shader Graph 中使用場景深度節(jié)點(diǎn)Opaque TextureURP Asset - General開啟后可以用 GrabPass 類的屏幕顏色節(jié)點(diǎn)本案例非必須HDRURP Asset - Lighting如果需要高光更亮可以開啟風(fēng)格化水面一般用默認(rèn)深度開關(guān)不打開后續(xù) Scene Depth 節(jié)點(diǎn)運(yùn)行時(shí)采不到數(shù)據(jù)水面永遠(yuǎn)算不出淺水和深水交界這是最容易踩的坑。3.2 GPU 與圖形 API 要求Shader Graph 默認(rèn)生成的節(jié)點(diǎn)代碼需要 Shader Model 5.0 級(jí)別的圖形 API。社區(qū)里常見的報(bào)錯(cuò)是 “a d3d11-compatible gpu (feature level 11.0, shader model 5.0) is required to run this application”出現(xiàn)這類提示通用排查思路是確認(rèn)顯卡驅(qū)動(dòng)已經(jīng)更新到最新版本確認(rèn) Unity 圖形 API 設(shè)置里包含 Direct3D 11 或 Vulkan舊項(xiàng)目從內(nèi)置管線切 URP 后檢查 Player Settings 里的 Graphics APIs 是否把自動(dòng)圖形 API 關(guān)掉了在 Windows 上優(yōu)先使用 Direct3D 11不要在老舊虛擬機(jī)里測試 Shader Graph如果你是在 Mac 上開發(fā)Metal 的兼容性通常沒問題但要注意 URP 版本不能太老。3.3 工程目錄結(jié)構(gòu)先建好目錄避免后面 Shader、材質(zhì)、腳本到處亂放。Assets/ ├── Shaders/ │ ├── Water/ │ │ └── WindWakerWater.shadergraph │ └── Functions/ │ └── WindWakerWave.hlsl ├── Materials/ │ └── Water/ ├── Scenes/ │ └── WaterTest.unity └── Editor/ └── WaterCreator.csShader Graph 文件保存時(shí)會(huì)自動(dòng)編譯材質(zhì)則可以后續(xù)在 Materials 目錄里手動(dòng)創(chuàng)建。4. WindWaker 風(fēng)格水面 Shader Graph 實(shí)現(xiàn)下面進(jìn)入主體實(shí)現(xiàn)。我從 Shader Graph 的最終目標(biāo)往回推我們需要一個(gè)能夠在場景中平鋪一整塊巨大平面的水面材質(zhì)它具備深度變色、頂點(diǎn)波浪、波浪受光閃爍和岸邊泡沫四個(gè)能力。創(chuàng)建 Shader Graph 時(shí)選擇 URP - Lit Shader Graph 或 URP - Unlit Shader Graph。建議選擇 Unlit因?yàn)轱L(fēng)格化水面不需要 PBR 的金屬度和粗糙度參數(shù)自己控制顏色和亮度更直接。如果你想讓水面有輕微環(huán)境反射再改成 Lit 也不難。4.1 基礎(chǔ)顏色與深度淡色這是整個(gè)水面效果最重要的一個(gè)環(huán)節(jié)。邏輯是用水面深度值去 lerp 深藍(lán)和淺藍(lán)深度越大越深藍(lán)深度越小越淺藍(lán)。在 Shader Graph 中獲取深度的常用節(jié)點(diǎn)是 Scene Depth也有的版本叫 Depth。操作如下添加節(jié)點(diǎn) Scene Depth通過 Screen Position 節(jié)點(diǎn)的 Screen 通道把水面像素的屏幕坐標(biāo)連給 Scene Depth再用 LinearEyeDepth 把深度值從非線性的 Z 緩沖轉(zhuǎn)換到線性空間得到線性深度差之后我們需要計(jì)算“水面的厚度”。簡單理解就是水面表面離水下場景物體的距離。水面離底部越近顏色越淺離底部越遠(yuǎn)顏色越深。節(jié)點(diǎn)連接思路Scene Depth - Subtract(surfaceDepth) - SmoothStep - Lerp(deepColor, shallowColor)這里 DeepColor 可以選擇偏暗一點(diǎn)的藍(lán)色例如 RGB(0.04, 0.31, 0.55)ShallowColor 選擇偏青的淺藍(lán)例如 RGB(0.27, 0.82, 0.90)。實(shí)際顏色可以在材質(zhì)面板里調(diào)。核心參數(shù)是一個(gè)叫 DepthDensity 的系數(shù)它決定深度淡色的速度。密度值越大同樣是 1 米水深顏色變化越劇烈海面顏色分層越明顯。這個(gè)參數(shù)可以直接暴露到材質(zhì)面板。4.2 頂點(diǎn)波浪多正弦波疊加風(fēng)之杖水面最明顯的特點(diǎn)是波浪不是貼圖褶皺而是頂點(diǎn)真正在上下移動(dòng)。用 Shader Graph 的 Vertex Position 節(jié)點(diǎn)就可以操作。思路是在頂點(diǎn)階段計(jì)算一個(gè)高度值加到本地坐標(biāo) Y 軸上。最簡單的是單個(gè)正弦波height sin(time * speed position.x * frequency) * amplitude但單個(gè)正弦波會(huì)顯得機(jī)械風(fēng)之杖水面看起來是幾個(gè)方向不同的低頻波疊加在一起。我們至少疊加兩個(gè)方向一個(gè)主方向一個(gè)斜方向兩個(gè)波的頻率和速度都要分開才能出現(xiàn)“層層推進(jìn)”的感覺。這里推薦把波形計(jì)算封裝成一個(gè) Custom Function 節(jié)點(diǎn)避免主圖節(jié)點(diǎn)太亂。新建一個(gè) HLSL 文件放到 Shaders/Functions 目錄下void WindWakerWave_float( float3 positionOS, float time, float amp1, float freq1, float speed1, float amp2, float freq2, float speed2, out float3 offsetOS, out float waveHeight) { // 只使用 xz 平面坐標(biāo)水面在 y 軸上起伏 float2 uv positionOS.xz; // 方向 1接近 x 軸的正弦波負(fù)責(zé)主波浪 float dir1 dot(uv, normalize(float2(1.0, 0.3))); float wave1 sin(time * speed1 dir1 * freq1) * amp1; // 方向 2斜向次波浪打破機(jī)械感 float dir2 dot(uv, normalize(float2(-0.4, 1.0))); float wave2 sin(time * speed2 dir2 * freq2) * amp2; float height wave1 wave2; offsetOS float3(0.0, height, 0.0); waveHeight height; }在 Shader Graph 里添加 Custom Function 節(jié)點(diǎn)選擇該 HLSL 文件Type 選 File。把 Vertex 階段的 Position 連給 positionOSTime 節(jié)點(diǎn)連給 time兩個(gè)波浪的振幅、頻率、速度分別暴露成屬性。最后把 offsetOS 加到原來的 Object Position 上連到 Vertex Position 節(jié)點(diǎn)。Object Position - Add(offsetOS) - Vertex PositionwaveHeight 輸出留著后面高光和泡沫都要用到。4.3 卡通化波峰用閾值制造硬邊緣水面能站起來不只靠頂點(diǎn)位移還要讓波浪頂部出現(xiàn)明顯的高亮層。真實(shí)水面高光是連續(xù)漸變的但卡通風(fēng)格要求“有就是有沒有就是沒有”中間過渡要盡量窄。處理方式是把 waveHeight 節(jié)點(diǎn)值做一個(gè) SmoothStep 或 StepwaveHeight - SmoothStep(waveCrestStart, waveCrestStart waveCrestWidth, waveHeight)得到一個(gè) 0 到 1 之間的 CrestMask然后用它去跟基礎(chǔ)顏色混合?；旌蠙?quán)重不要太大大概 0.2 到 0.4 就行讓波浪頂部略微發(fā)白。這個(gè)做法的好處是效果非?？煽卣{(diào)窄波峰寬度就能讓水從“橡皮泥”變成“刀切豆腐”的感覺非?？ㄍ?。4.4 閃爍高光光照方向與法線方向的關(guān)系為了泡泡面受光閃爍的效果我們需要一個(gè)簡單的高光模型。不需要 BlinnPhong 的高光節(jié)點(diǎn)那么復(fù)雜可以直接用“法線方向 光照方向”做點(diǎn)積。問題是頂點(diǎn)位移之后法線方向需要重新計(jì)算。最穩(wěn)妥的方式是用相鄰頂點(diǎn)的高度差計(jì)算出法線但 Shader Graph 里直接做會(huì)比較繞。更實(shí)用、也符合風(fēng)格化的做法是用手動(dòng)定義的輕量法線擾動(dòng)模擬波浪頂部朝向光照方向的區(qū)域使用一個(gè)“波浪偏移法線”例如給法線一個(gè)沿 X/Z 方向的偏移量偏移量大小由 waveHeight 的導(dǎo)數(shù)方向決定再把得到的法線與主光源方向做 dot 運(yùn)算簡化節(jié)點(diǎn)寫法NormalDirection - Add(normalBias) - Normalize - Dot(lightDirection) - SmoothStep(highlightStart, highlightStart 0.2, dotResult) - Multiply(specColor, creastMask)這種做法雖然不夠物理但卡通高光本身就不需要物理法線。重點(diǎn)是把高光出現(xiàn)的區(qū)域圈成“塊狀”而不是漸變條狀。在風(fēng)之杖里水面高光更像是一個(gè)個(gè)亮斑所以可以適當(dāng)調(diào)高 smoothstep 的閾值。這里提醒一句如果你對(duì)法線計(jì)算有更高要求可以在頂點(diǎn)階段用自定義函數(shù)對(duì)相鄰頂點(diǎn)采樣做偏導(dǎo)計(jì)算或者干脆在 Fragment 階段使用 ddx/ddy 求高度場梯度。對(duì)于教學(xué)案例用近似法線已經(jīng)夠了。4.5 岸邊泡沫與深度關(guān)系泡沫是最能體現(xiàn)“水面遇到物體”效果的地方。Shader Graph 中有一個(gè)非常方便的思路sceneDepth - surfaceDepth 水面厚度當(dāng)水面厚度很小說明這個(gè)像素非常靠近水下物體或岸邊地面。用 SmoothStep 處理這個(gè)厚度閾值設(shè)成比如 0.1 到 0.5 米就能在岸邊或礁石附近圈出一圈白色泡沫。這里要把泡沫范圍控制窄一點(diǎn)原版泡沫不是全面覆蓋只在交界處有干凈的細(xì)線。節(jié)點(diǎn)連接思路waterThickness - SmoothStep(foamDepthMin, foamDepthMax, waterThickness) - Multiply(foamColor) - Add(baseColor)如果想讓泡沫邊緣有一些噪聲抖動(dòng)可以添加一個(gè)簡單的噪聲節(jié)點(diǎn)把噪聲值加到 foamDepthMax 上泡沫就不會(huì)是一根筆直的線。4.6 可選的折射與透明效果原版受限于性能并沒有做真正的折射。今天復(fù)刻時(shí)如果堅(jiān)持完全還原是可以不開啟透明和不做折射的光是深度淡色已經(jīng)能模擬出水下顏色。如果你希望做出“水面底下物體錯(cuò)位”的現(xiàn)代感效果那就要在透明隊(duì)列里使用 GrabPass 或 URP 的 Opaque Texture。流程是Screen Position - Add(UVOffest) - SampleOpaqueTexture - 跟隨透明度混合這個(gè)方案會(huì)增加不少帶寬消耗對(duì)于移動(dòng)端尤其明顯。所以實(shí)際項(xiàng)目中建議把這個(gè)能力做成開關(guān)PC 上開啟移動(dòng)端關(guān)閉。5. 材質(zhì)屬性面板與參數(shù)說明Shader Graph 里暴露的屬性最終會(huì)自動(dòng)映射到材質(zhì) Inspector 面板。下面列出本案例需要用到的關(guān)鍵屬性你可以按自己的需要命名屬性名類型默認(rèn)值參考作用BaseColorDeepColor深藍(lán) (0.04, 0.31, 0.55)深水區(qū)顏色BaseColorShallowColor淺藍(lán) (0.27, 0.82, 0.90)淺水區(qū)顏色DepthDensityFloat0.06深度淡色速率WaveAmp1Float0.12主波浪振幅WaveFreq1Float0.8主波浪頻率WaveSpeed1Float1.2主波浪速度WaveAmp2Float0.06次波浪振幅WaveFreq2Float1.6次波浪頻率WaveSpeed2Float0.8次波浪速度CrestRangeFloat0.25波峰發(fā)白寬度FoamDepthMaxFloat0.4泡沫出現(xiàn)的最大水深SpecStrengthFloat1.0高光強(qiáng)度要批量管理多個(gè)水面材質(zhì)可以寫一個(gè)簡單的編輯器腳本在菜單欄生成水面物體并自動(dòng)掛載材質(zhì)。using UnityEditor; using UnityEngine; public static class WaterCreator { [MenuItem(Tools/WindWaker/Create Water Plane)] public static void CreateWaterPlane() { GameObject go GameObject.CreatePrimitive(PrimitiveType.Plane); go.name Ocean_WindWaker; Object.DestroyImmediate(go.GetComponentCollider()); Shader shader Shader.Find(Shader Graphs/WindWakerWater); if (shader null) { Debug.LogError(找不到 Shader Graphs/WindWakerWater請(qǐng)先保存你的 Shader Graph 文件); return; } Material mat new Material(shader); string path Assets/Materials/Water/WindWakerWater.mat; AssetDatabase.CreateAsset(mat, path); AssetDatabase.SaveAssets(); go.GetComponentRenderer().sharedMaterial AssetDatabase.LoadAssetAtPathMaterial(path); Undo.RegisterCreatedObjectUndo(go, Create Water Plane); } }這個(gè)腳本放在 Editor 目錄下使用不需要擔(dān)心打包進(jìn)玩家端。6. 場景驗(yàn)證怎么判斷效果是否接近風(fēng)之杖風(fēng)格搭建一個(gè)簡單的測試場景放一個(gè)大平面然后在場景里放幾個(gè)高低不同的立方體或礁石模型觀察水面和物體交界處。驗(yàn)證清單相機(jī)俯瞰海面時(shí)能看到明顯的深藍(lán)和淺藍(lán)分層而不是一整片同一個(gè)顏色波浪持續(xù)緩慢起伏不會(huì)出現(xiàn)高頻抖動(dòng)頻率太低會(huì)像果凍太高會(huì)像水面沸騰波浪頂部有一層干凈的白色而不是模糊的一團(tuán)光照方向變化時(shí)水面出現(xiàn)塊狀高光閃爍岸邊石頭周圍有一圈白色泡沫泡沫邊緣有輕微噪聲抖動(dòng)從側(cè)面看水面不是一個(gè)純平面頂點(diǎn)有真實(shí)的 Y 軸位移如果以上六點(diǎn)都成立說明這個(gè) Shader Graph 的核心鏈路已經(jīng)跑通。剩下的就是調(diào)數(shù)值手感。如果你想讓水面看起來更“圓潤”把兩個(gè)波浪的振幅調(diào)高、頻率調(diào)低并把波峰寬度調(diào)大。如果想讓水面更“清脆利落”就反過來振幅降低、頻率調(diào)高、波峰寬度調(diào)窄。這套控制邏輯一旦建立后續(xù)做雪地、巖漿、泥潭都可以復(fù)用同一個(gè) Shader Graph 模板只是換顏色和波型參數(shù)。7. 性能觀察與參數(shù)調(diào)節(jié)建議在 Unity 編輯器的 Game 模式下打開 Profiler可以重點(diǎn)觀察 Render 和 Scripts 兩項(xiàng)耗時(shí)。Shader Graph 節(jié)點(diǎn)雖然直觀但節(jié)點(diǎn)數(shù)量增多后會(huì)生成較長的指令流尤其是 Fragment 階段被多次采樣的節(jié)點(diǎn)一定要警惕。對(duì)于這種風(fēng)格化水面性能優(yōu)化優(yōu)先級(jí)如下第一減少 Fragment 階段的采樣。Scene Depth 的采樣是必需的但不要為了泡沫在 Fragment 階段再加多個(gè)高度場采樣。波浪高度只算了一次頂點(diǎn)階段可以直接把 waveHeight 傳到 Fragment 階段避免重復(fù)計(jì)算。第二謹(jǐn)慎開啟透明。透明表面會(huì)改變渲染順序大量水面 Mesh 疊加時(shí)Overdraw 會(huì)很明顯。能用不透明做出來的效果盡量不透明。第三控制波浪網(wǎng)格的頂點(diǎn)密度。如果整個(gè)海面只用一個(gè)大平面頂點(diǎn)數(shù)不夠波浪會(huì)很粗糙但如果每個(gè)小區(qū)域都放一個(gè)高密度平面頂點(diǎn)壓力也不小。建議用 Unity 的 LOD Group 做兩層海面遠(yuǎn)處用低分段網(wǎng)格近處用高分段網(wǎng)格。第四批量處理參數(shù)。如果場景中有多塊不同水域可以共用同一個(gè)材質(zhì)然后用 MaterialPropertyBlock 覆蓋局部差異不建議創(chuàng)建大量不同參數(shù)的新材質(zhì)實(shí)例否則會(huì)破壞合批。從實(shí)際經(jīng)驗(yàn)看這套節(jié)點(diǎn)圖在 PC 端幾乎沒有壓力在移動(dòng)端需要關(guān)掉折射和降低分辨率屬于“風(fēng)格化特效里性價(jià)比很高”的方案。具體的顯存和幀耗時(shí)還是要拿到自己的目標(biāo)設(shè)備上跑一輪數(shù)據(jù)再下結(jié)論。8. 常見問題與排查方法問題現(xiàn)象可能原因排查方式解決方案材質(zhì)顯示紫紅色Shader 編譯失敗查看 Console 窗口報(bào)錯(cuò)日志按報(bào)錯(cuò)信息檢查節(jié)點(diǎn)類型、Custom Function 路徑和 HLSL 文件是否缺失啟動(dòng)項(xiàng)目提示 d3d11-compatible GPU圖形 API 或驅(qū)動(dòng)不滿足 Shader Model 5.0 要求檢查 Project Settings - Player - Graphics APIs切換到 Direct3D 11 或 Vulkan更新顯卡驅(qū)動(dòng)水面沒有深度淡色全部是深藍(lán)URP Depth Texture 未開啟檢查 URP Asset 的 Depth Texture 選項(xiàng)勾選 Deep Texture 并重啟編輯器Scene Depth 節(jié)點(diǎn)連不上或報(bào)錯(cuò)版本不同節(jié)點(diǎn)名稱有差異在搜索欄分別搜索 Scene Depth、Camera Depth Texture不同版本節(jié)點(diǎn)名稱不同檢索后重新連接波浪看起來特別硬SmoothStep 閾值過窄或振幅過大觀察波峰 Mask 的數(shù)值范圍把 CrestRange 調(diào)大或降低波浪振幅高速移動(dòng)相機(jī)時(shí)水面閃爍頂點(diǎn)波形精度不夠在材質(zhì)面板把波浪頻率調(diào)低低頻波浪更適合風(fēng)格化水面也能避免閃爍泡沫出現(xiàn)在整個(gè)水面深度判斷邏輯錯(cuò)誤檢查 Scene Depth 是否被正確轉(zhuǎn)換到線性空間使用 LinearEyeDepth 處理后再計(jì)算水面厚度高光區(qū)域太大像大面積曝光Dot 節(jié)點(diǎn)結(jié)果沒有被 SmoothStep 約束檢查高光分支的 SmoothStep 閾值提高高光 Threshold把亮度收縮成塊狀9. 最佳實(shí)踐與擴(kuò)展方向做完這個(gè)案例之后可以沿著幾個(gè)方向繼續(xù)拓展。第一把波形函數(shù)做成可配置的 SubGraph。目前 HLSL 自定義函數(shù)已經(jīng)是一個(gè)獨(dú)立文件你可以繼續(xù)把它分享成 SubGraph然后在不同水面 Shader 中復(fù)用。這樣后續(xù)調(diào)整波形算法時(shí)只需要改一處所有水面的表現(xiàn)同時(shí)更新。第二加入角色交互。風(fēng)之杖里船只會(huì)讓水面產(chǎn)生明顯的交互浪花。可以在 Update 里用 SphereCollider 對(duì)船底采樣產(chǎn)生一個(gè)局部的浪花權(quán)重然后傳給水面 MaterialPropertyBlock。這種交互量不需要很大一個(gè)浮點(diǎn)數(shù)數(shù)組就能傳遞多個(gè)點(diǎn)的水面擾動(dòng)強(qiáng)度。第三做天氣系統(tǒng)。把波浪速度、振幅、高光閾值統(tǒng)一暴露為全局參數(shù)然后寫一個(gè)簡單的 MonoBehaviour 在晴天/風(fēng)雨天之間做插值就能讓同一片海面具備兩種氣質(zhì)。第四嘗試深度霧與顏色映射。當(dāng)前案例用的是硬邊界的深度淡色如果你想往更現(xiàn)代的風(fēng)格化靠攏可以把 lerp 換成一份 DepthColorRamp甚至用一組 Gradient 作為深度顏色映射表這樣海水顏色會(huì)更柔和。第五團(tuán)隊(duì)協(xié)作和版本管理。Shader Graph 資產(chǎn)本質(zhì)上也是文本資產(chǎn)建議配合 Git 進(jìn)行管理。可以在項(xiàng)目根目錄執(zhí)行g(shù)it init git add Assets Packages ProjectSettings git commit -m init wind waker water shader demo這樣每次修改都有回退點(diǎn)尤其是波形參數(shù)調(diào)到不可逆的時(shí)候Git 能救你一次?？偨Y(jié)這個(gè)案例最值得嘗試的地方在于只用一張平面、一個(gè) Shader Graph不開復(fù)雜渲染特性就能復(fù)刻出風(fēng)格化海面的核心視覺。最先應(yīng)該驗(yàn)證的是深度淡色鏈路因?yàn)閳鼍吧疃仁钦麄€(gè)水面色塊分層的骨架如果這一步?jīng)]有出效果后面幾個(gè)環(huán)節(jié)都缺少基準(zhǔn)。最容易踩的坑是 URP 資源的 Depth Texture 沒有打開以及 Shader Graph 版本升級(jí)后節(jié)點(diǎn)名稱變化。把環(huán)境問題排干凈之后再回到數(shù)值調(diào)試把波浪振幅和頻率調(diào)到自己想要的手感上這片海就算真正“活”了。順手可以再做一個(gè)夜間版本把 BaseColorDeep 換成暗色把高光調(diào)低泡沫改成微弱反光同一個(gè)材質(zhì)模板就變成了另一片完全不同的海面。建議收藏備用之后做風(fēng)格化地形、卡通渲染或者圖形學(xué)作業(yè)時(shí)都可以回來翻一翻這套節(jié)點(diǎn)的組織思路。