1. 項目概述為什么鏡面反射Shader是Unity開發(fā)者的必修課在Unity里做項目尤其是涉及到高品質視覺效果的游戲、模擬器或者交互應用你遲早會碰到一個坎想讓你的水面、金屬、玻璃或者任何光滑表面看起來“真實”。這個“真實感”的核心往往就落在鏡面反射Specular Reflection上。它不是簡單的把環(huán)境貼圖糊上去而是模擬光線在光滑表面上的物理行為產生高光亮點和清晰的環(huán)境映像。很多新手甚至一些有經驗的開發(fā)者可能會直接去Asset Store找一個現(xiàn)成的Shader或者用Standard Shader調調參數就過去了。但當你需要定制一個獨特的材質或者優(yōu)化移動端性能時不理解背后的原理你就會寸步難行。這個教程就是帶你從“會用”到“懂原理”再到“能自己寫”。鏡面反射Shader不僅僅是加個CubeMap立方體貼圖那么簡單。它涉及到光照模型的計算、法線向量的處理、視角方向的引入以及如何在性能與效果之間做權衡。無論是你想做一個波光粼粼的湖面一個锃光瓦亮的跑車漆面還是一個科幻感十足的金屬走廊掌握自定鏡面反射Shader的能力都能讓你從素材的“使用者”晉升為效果的“創(chuàng)造者”。接下來我會拆解最經典的Phong和Blinn-Phong光照模型帶你手寫一個可用的鏡面反射Shader并深入探討在實際項目中你會遇到的各種坑和優(yōu)化技巧。2. 核心原理與光照模型拆解要寫鏡面反射首先得明白光是怎么在表面上“彈開”的。我們人眼能看到物體是因為光線從光源發(fā)出照射到物體表面再反射進入我們的眼睛。鏡面反射特指那種在光滑表面上光線沿著“入射角等于反射角”的規(guī)律集中向一個方向反射的現(xiàn)象。這個方向如果正好對準你的眼睛你就會看到一個非常亮的高光點。在Shader編程中我們不可能去追蹤每一條光線所以要用數學模型來近似。最經典的兩個模型就是Phong和Blinn-Phong。2.1 Phong光照模型最直觀的理解Phong模型的計算思路非常符合直覺我需要找到光線的反射方向向量 R然后看看這個反射方向與我的視線方向向量 V有多接近。兩者越接近說明視線越接近完美的反射光路鏡面高光就應該越強。計算過程分幾步走準備向量我們需要四個核心向量。表面法線 N垂直于表面的方向光線方向 L從表面點指向光源視線方向 V從表面點指向攝像機以及計算出來的反射方向 R。計算反射方向 R這是關鍵一步。給定入射光方向 L 和法線 N反射方向 R 可以通過公式R reflect(-L, N)得到。在代碼里我們可以直接用reflect函數。注意L通常定義為從光源指向表面點所以我們需要取反-L作為入射方向。計算高光強度Phong模型用反射方向R和視線方向V的點積dot product來衡量它們的接近程度。點積結果在[-1, 1]之間我們取最大值max(dot(R, V), 0)。這個值越接近1說明R和V越重合高光越強。施加高光指數直接使用點積的結果高光區(qū)域會非?！按蟆鼻摇吧ⅰ笨雌饋聿徽鎸崱Ｒ虼宋覀円胍粋€高光指數Shininess通常記為_Gloss或_Shininess。將點積的結果進行冪運算specular pow(max(dot(R, V), 0), _Gloss)。_Gloss值越大比如128、256高光點就越集中、越小、越銳利材質看起來就越光滑像拋光金屬值越小比如8、16高光就越分散材質看起來越粗糙像啞光塑料。注意Phong模型在數學上是正確的但計算反射向量R本身需要一次reflect運算在早期的硬件上開銷相對較大。而且當視線方向V與反射方向R的夾角較大時高光會突然消失有時會導致高光邊緣不自然。2.2 Blinn-Phong光照模型更高效的替代方案Blinn-Phong是對Phong模型的一個優(yōu)化改進它不再計算反射向量R而是引入了一個新的中間向量半角向量 H。半角向量H是光線方向L和視線方向V的角平分線方向計算非常簡單H normalize(L V)。然后Blinn-Phong模型用法線N和半角向量H的點積來代替Phong模型中的dot(R, V)。即specular pow(max(dot(N, H), 0), _Gloss)。為什么Blinn-Phong更常用性能更優(yōu)計算H normalize(L V)通常比計算R reflect(-L, N)在大部分硬件上更快尤其是在移動平臺這個優(yōu)勢更明顯。效果更平滑Blinn-Phong的高光過渡通常比Phong更平滑、更自然尤其是在高光指數較大時能產生更寬、更柔和的高光區(qū)域視覺上常常被認為更“好看”。成為行業(yè)事實標準正因為其效率和效果的平衡Blinn-Phong模型成為了早期固定渲染管線以及許多實時渲染應用包括Unity舊版內置Shader的事實標準。在Unity的Standard Shader中其鏡面反射部分就是基于類似Blinn-Phong的物理模型更精確地說是基于微表面理論的Cook-Torrance模型但Blinn-Phong是其一個簡化特例構建的。對于我們自定義Shader入門從Blinn-Phong開始理解是最佳路徑。3. 手把手實現(xiàn)一個基礎鏡面反射Shader理論懂了我們立刻動手。這里我們使用Unity的ShaderLab和CG/HLSL語言來編寫一個最簡單的Blinn-Phong鏡面反射Shader。我們將創(chuàng)建一個新的Unlit Shader然后加入漫反射和鏡面反射計算。3.1 搭建Shader基本結構首先在Unity中創(chuàng)建一個新的Shader文件命名為SimpleSpecular。清空默認代碼我們從最基本的框架開始。Shader Custom/SimpleSpecular { Properties { // 定義在材質面板上可調的屬性 _MainTex (Texture, 2D) white {} _Color (Color, Color) (1,1,1,1) _SpecColor (Specular Color, Color) (1,1,1,1) // 高光顏色 _Gloss (Gloss, Range(1, 256)) 20 // 高光指數 } SubShader { Tags { RenderTypeOpaque } LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag // 為了使用光照變量需要這個編譯指令 #pragma multi_compile_fwdbase #include UnityCG.cginc // 為了使用內置的光照變量如_LightColor0需要包含Lighting.cginc #include Lighting.cginc // 聲明與Properties塊對應的變量 sampler2D _MainTex; float4 _MainTex_ST; // 紋理的縮放和偏移 fixed4 _Color; fixed4 _SpecColor; float _Gloss; // 從頂點著色器傳遞給片段著色器的結構體 struct appdata { float4 vertex : POSITION; float3 normal : NORMAL; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 pos : SV_POSITION; float3 worldNormal : TEXCOORD1; float3 worldPos : TEXCOORD2; };這部分代碼定義了Shader的屬性、渲染標簽和基本結構。_SpecColor控制高光的顏色通常是白色但也可以是金色、藍色等來模擬特殊材質。_Gloss就是我們前面提到的高光指數。v2f結構體中我們除了傳遞紋理坐標和裁剪空間位置還傳遞了世界空間法線和世界空間頂點位置因為光照計算最好在世界空間或切線空間進行這里我們選擇世界空間。3.2 頂點著色器準備世界空間數據頂點著色器的任務是將模型頂點變換到裁剪空間并計算世界空間下的法線和位置。v2f vert (appdata v) { v2f o; o.pos UnityObjectToClipPos(v.vertex); // 變換到裁剪空間 o.uv TRANSFORM_TEX(v.uv, _MainTex); // 應用紋理縮放偏移 // 將法線從模型空間變換到世界空間 // 使用unity_WorldToObject的逆轉置矩陣來處理非均勻縮放 o.worldNormal UnityObjectToWorldNormal(v.normal); // 將頂點位置從模型空間變換到世界空間 o.worldPos mul(unity_ObjectToWorld, v.vertex).xyz; return o; }這里的關鍵是UnityObjectToWorldNormal函數它正確地處理了模型可能存在的非均勻縮放比如一個球被壓扁確保法線方向依然垂直于變換后的表面。這是新手極易忽略的一個點錯誤的世界法線會導致光照計算完全錯誤。3.3 片段著色器實現(xiàn)Blinn-Phong光照計算這是核心部分我們在每個像素片段上計算最終顏色。fixed4 frag (v2f i) : SV_Target { // 采樣紋理顏色 fixed4 col tex2D(_MainTex, i.uv) * _Color; // 歸一化世界空間法線 float3 worldNormal normalize(i.worldNormal); // 計算世界空間下的視線方向從表面指向攝像機 float3 viewDir normalize(_WorldSpaceCameraPos.xyz - i.worldPos); // 計算環(huán)境光簡化處理 fixed3 ambient UNITY_LIGHTMODEL_AMBIENT.rgb * col.rgb; // 計算漫反射Lambert // 獲取主平行光的方向和顏色 float3 lightDir normalize(_WorldSpaceLightPos0.xyz); // 如果光源是點光源方向需要計算lightDir normalize(光源世界坐標 - i.worldPos); fixed3 lightColor _LightColor0.rgb; // 蘭伯特系數法線與光線方向的點積取正值 float lambert max(0, dot(worldNormal, lightDir)); fixed3 diffuse lightColor * lambert * col.rgb; // 計算鏡面反射Blinn-Phong // 1. 計算半角向量 float3 halfDir normalize(lightDir viewDir); // 2. 計算法線與半角向量的點積 float specularFactor max(0, dot(worldNormal, halfDir)); // 3. 應用高光指數 float specularIntensity pow(specularFactor, _Gloss); // 4. 綜合光源顏色和高光顏色 fixed3 specular lightColor * _SpecColor.rgb * specularIntensity; // 最終顏色 環(huán)境光 漫反射 鏡面反射 fixed4 finalColor fixed4(ambient diffuse specular, col.a); return finalColor; } ENDCG } } FallBack Diffuse // 如果Shader不支持回退到漫反射Shader }逐行解析與實操要點視線方向viewDir計算方式是攝像機世界坐標 - 表面點世界坐標然后歸一化。方向是從表面指向攝像機。這是很多教程里容易寫反的地方寫反了高光會出現(xiàn)在錯誤的位置。光源方向lightDir對于場景中的主平行光Directional Light_WorldSpaceLightPos0.xyz直接存儲了光的方向從光源指向表面。對于其他類型光源需要根據光源位置計算。_LightColor0這是Unity內置變量包含了當前處理的光源的顏色和強度。確保場景中有激活的光源否則這個值可能是黑色。pow函數的陷阱pow函數在底數為0時如果指數也是0在某些平臺上可能產生未定義結果。雖然我們用了max(0, ...)確保底數非負但最佳實踐是給一個極小的偏移例如pow(max(0, dot(N, H)), _Gloss)。不過對于Blinn-Phong通常直接使用是安全的。性能小貼士在片段著色器中進行normalize操作和pow操作是比較耗能的。如果模型頂點足夠多可以考慮在頂點著色器計算worldNormal和viewDir對每個頂點計算一次然后通過插值傳遞給片段著色器。但要注意插值后的向量長度可能不為1在片段著色器中必須再次歸一化否則光照會出錯。把這個Shader賦給一個材質球拖到一個模型上調整_Gloss和_SpecColor你就能看到明顯的鏡面高光效果了。這是你完全從零開始控制的光照。4. 進階環(huán)境反射與Cubemap應用基礎的光照模型實現(xiàn)了針對點光源的鏡面高光但對于像金屬、水面這樣能清晰反射周圍環(huán)境的表面我們需要更強大的工具環(huán)境貼圖Cubemap。Cubemap是一張包含了六個面的特殊紋理分別對應前后左右上下六個方向模擬了一個無限遠的環(huán)境。4.1 采樣Cubemap實現(xiàn)簡單環(huán)境反射思路是在著色點根據視線方向V和法線N計算出反射方向R然后用這個R作為向量去采樣Cubemap。修改我們的Shader添加Cubemap屬性和采樣代碼在Properties中添加_EnvMap (Environment Map (Cube), Cube) _Skybox {} _ReflectIntensity (Reflection Intensity, Range(0, 1)) 0.5在CGPROGRAM中聲明對應變量samplerCUBE _EnvMap; float _ReflectIntensity;在片段著色器中計算反射并采樣在計算完Blinn-Phong高光后// 計算環(huán)境反射 // 注意這里的viewDir是從表面指向相機我們需要反射這個方向 // 反射函數reflect(入射方向, 法線)。入射方向是朝向表面的所以是 -viewDir float3 reflectDir reflect(-viewDir, worldNormal); fixed3 envReflection texCUBE(_EnvMap, reflectDir).rgb * _ReflectIntensity; // 最終顏色混合可以將反射結果加到最終顏色上或者與漫反射/高光進行混合 // 一種常見方式是用于金屬表面反射很強漫反射很弱 finalColor.rgb finalColor.rgb envReflection; // 另一種更物理的方式是使用菲涅爾效應進行混合見下文。這樣你的模型就會像鏡子一樣反射你指定的Cubemap環(huán)境了。你可以創(chuàng)建一個Cubemap資源或者使用Unity內置的Skybox/Cubemap材質來生成。4.2 引入菲涅爾效應Fresnel Effect現(xiàn)實世界中反射的強度并不是恒定的。當視線與表面法線方向接近即垂直看表面時反射較弱你更多看到表面的顏色漫反射當視線與表面幾乎平行即掠射角時反射會急劇增強。這種現(xiàn)象就是菲涅爾效應。海邊看水面近處清澈見底透射漫反射遠處則像鏡子一樣反射天空就是這個原理。在Shader中我們可以用一個簡單的公式來近似菲涅爾效應最常用的是Schlick近似fresnel baseReflectivity (1 - baseReflectivity) * pow(1 - dot(viewDir, normal), 5)其中baseReflectivity是0度角入射時的基礎反射率對于非金屬通常很低如0.04。修改我們的反射混合部分// 計算菲涅爾因子 float fresnelBias 0.04; // 基礎反射率可調 float fresnelScale 0.5; // 影響因子可調 float fresnelPower 5.0; // 冪指數控制過渡快慢 float fresnelFactor fresnelBias fresnelScale * pow(1.0 - max(0, dot(viewDir, worldNormal)), fresnelPower); // 將菲涅爾因子限制在[0,1] fresnelFactor saturate(fresnelFactor); // 使用菲涅爾因子混合表面顏色和環(huán)境反射顏色 fixed3 finalReflection lerp(col.rgb, envReflection, fresnelFactor); // 然后將finalReflection替換掉原來的col.rgb參與后續(xù)計算或者直接與高光等疊加 finalColor.rgb ambient diffuse * (1.0 - fresnelFactor) specular envReflection * fresnelFactor;引入菲涅爾后反射效果會隨著視角變化而動態(tài)變化真實感大幅提升。這是區(qū)分普通效果和高級效果的關鍵一步。實操心得對于移動平臺texCUBE采樣和菲涅爾計算pow都是性能開銷。一個常見的優(yōu)化是預先計算菲涅爾值并存儲在一張一維的Ramp貼圖中在片段著色器里用dot(viewDir, normal)作為UV的x去采樣用一次紋理采樣替代復雜的pow計算。紋理采樣在GPU上往往比復雜數學運算更快。5. 性能優(yōu)化與移動端適配實戰(zhàn)一個全功能的鏡面反射Shader在PC上跑可能沒問題但直接用到手機項目里很可能成為性能瓶頸。我們需要做一系列優(yōu)化。5.1 簡化計算與近似在頂點著色器計算將worldNormal和viewDir的計算移到頂點著色器。雖然片段著色器仍需歸一化但計算量已減少。簡化菲涅爾使用更簡單的公式如fresnel 1.0 - dot(viewDir, normal)甚至直接用一個恒定的反射強度在美術效果可接受的前提下?lián)Q取性能。降低紋理采樣精度對于Cubemap使用壓縮格式如ETC2 ASTC并降低其分辨率。128x128或64x64的Cubemap在移動端很多時候已經足夠。避免動態(tài)分支Shader中的if語句在GPU上效率很低盡量避免。例如可以用step()或saturate()函數來替代簡單的條件判斷。5.2 使用Unity內置的簡化光照函數Unity提供了一些內置的簡化光照函數它們已經為移動端優(yōu)化過。例如我們可以使用ShadeSH9來獲取球諧光照一種低代價的環(huán)境光近似以及使用UNITY_LIGHTMODEL_AMBIENT。對于更復雜的需求可以考慮使用Surface Shader它讓Unity幫你生成前向渲染所需的多Pass代碼但你仍然可以編寫自己的光照函數。不過對于極致的移動端優(yōu)化手寫一個精簡的頂點/片段著色器通常更可控。5.3 針對不同材質類型的Shader變體不是所有物體都需要完整的鏡面反射。我們可以創(chuàng)建多個簡化版本的Shader。高性能版無反射只保留漫反射和環(huán)境光用于遠處物體或背景。中性能版Blinn-Phong高光包含本文實現(xiàn)的基礎Blinn-Phong高光但不采樣Cubemap。適用于大多數需要高光的物體。高效果版完整反射包含Cubemap反射和菲涅爾效應僅用于關鍵的、近處的金屬或水面物體。在Unity中可以通過Shader的LODLevel of Detail功能或直接編寫多個Shader根據攝像機距離或平臺動態(tài)切換。5.4 實戰(zhàn)代碼一個移動端友好的簡化版這里給出一個極度簡化的移動端鏡面反射Shader框架去掉了菲涅爾和Cubemap只保留核心的Blinn-Phong高光并做了優(yōu)化。Shader Mobile/MobileSpecular { Properties { _MainTex (Texture, 2D) white {} _Color (Color, Color) (1,1,1,1) _Specular (Specular, Color) (0.5, 0.5, 0.5, 1) _Shininess (Shininess, Range(2, 64)) 16 // 移動端用較小的值 } SubShader { Tags { RenderTypeOpaque LightModeForwardBase } LOD 150 // 設置較低的LOD值在低端設備上可能被更簡單的Shader替代 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #pragma target 2.0 // 針對較低Shader模型 #include UnityCG.cginc #include Lighting.cginc struct appdata { float4 vertex : POSITION; float3 normal : NORMAL; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 pos : SV_POSITION; half3 worldNormal : TEXCOORD1; half3 viewDir : TEXCOORD2; half3 lightDir : TEXCOORD3; }; sampler2D _MainTex; float4 _MainTex_ST; fixed4 _Color, _Specular; half _Shininess; v2f vert (appdata v) { v2f o; o.pos UnityObjectToClipPos(v.vertex); o.uv TRANSFORM_TEX(v.uv, _MainTex); o.worldNormal UnityObjectToWorldNormal(v.normal); float3 worldPos mul(unity_ObjectToWorld, v.vertex).xyz; o.viewDir normalize(UnityWorldSpaceViewDir(worldPos)); // 使用內置函數 o.lightDir normalize(UnityWorldSpaceLightDir(worldPos)); // 使用內置函數 return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col tex2D(_MainTex, i.uv) * _Color; half3 worldNormal normalize(i.worldNormal); half3 viewDir normalize(i.viewDir); // 仍需歸一化 half3 lightDir normalize(i.lightDir); // 漫反射 half ndotl saturate(dot(worldNormal, lightDir)); fixed3 diffuse _LightColor0.rgb * ndotl * col.rgb; // 鏡面反射 (Blinn-Phong) half3 halfDir normalize(lightDir viewDir); half ndoth saturate(dot(worldNormal, halfDir)); half spec pow(ndoth, _Shininess); fixed3 specular _LightColor0.rgb * _Specular.rgb * spec; // 環(huán)境光 (簡化) fixed3 ambient UNITY_LIGHTMODEL_AMBIENT.rgb * col.rgb; fixed3 finalColor ambient diffuse specular; return fixed4(finalColor, col.a); } ENDCG } } FallBack Mobile/VertexLit }這個Shader使用了UnityWorldSpaceViewDir和UnityWorldSpaceLightDir內置函數來簡化計算將向量計算全部放在頂點著色器并設置了較低的#pragma target和LOD非常適合移動端。6. 常見問題與調試技巧實錄即使按照教程寫完了Shader效果不對也是家常便飯。這里記錄幾個我踩過的坑和調試方法。6.1 問題排查清單問題現(xiàn)象可能原因排查步驟完全沒有高光/反射1. 場景中沒有激活的光源。2. 法線向量計算錯誤最常見。3._LightColor0為黑色。4. Shader編譯錯誤但Unity未報錯檢查Console。1. 確保場景有Directional Light或其它光源。2. 在片段著色器輸出worldNormal或dot(N, L)的值到顏色通道可視化檢查。法線應顯示為平滑的彩色漸變。3. 檢查光源的Color和Intensity。4. 在Shader Inspector面板查看編譯狀態(tài)和錯誤信息。高光位置錯誤或閃爍1. 視線方向viewDir或光線方向lightDir計算錯誤符號反了。2. 向量在傳遞后沒有在片段著色器重新歸一化。3. 模型法線本身有問題導入設置錯誤。1. 牢記viewDir normalize(相機位置 - 表面位置)方向指向相機。lightDir對于平行光是_WorldSpaceLightPos0.xyz。2.務必在片段著色器對worldNormal,viewDir,lightDir進行normalize。3. 在模型導入設置中檢查“Normals”選項是否為“Calculate”或“Import”。高光邊緣有鋸齒或斷點高光指數_Gloss太大導致pow計算在低精度下如移動端出現(xiàn)精度問題。1. 降低_Gloss值移動端建議不超過64。2. 在pow計算前給點積結果加一個極小偏移pow(max(1e-4, ndoth), _Gloss)。Cubemap反射錯亂或拉伸1. 反射方向reflectDir計算錯誤。2. Cubemap紋理本身不是真正的立方體貼圖。3. 模型的UV或法線信息有誤。1. 確認reflect(-viewDir, normal)計算正確?？梢暂敵鰎eflectDir到顏色可視化。2. 確保導入的Cubemap資源類型是“Cubemap”而不是“Texture”。3. 嘗試用一個簡單的Sphere模型測試。在移動端幀率暴跌1. 在片段著色器進行了過多復雜計算如多個pow,normalize。2. 使用了高分辨率Cubemap。3. Shader變體過多導致Draw Call增加。1. 遵循第5節(jié)的優(yōu)化建議將計算上移到頂點著色器簡化公式。2. 將Cubemap分辨率降至128或64。3. 使用Shader LOD或為移動端單獨編寫簡化版Shader。6.2 調試技巧可視化中間變量這是Shader調試最有效的手段。將你懷疑有問題的中間變量如法線、點積結果、反射方向直接作為顏色輸出。例如在片段著色器中臨時替換返回語句// 可視化法線將-1到1映射到0到1 return fixed4(worldNormal * 0.5 0.5, 1.0); // 可視化蘭伯特系數 return fixed4(lambert.xxx, 1.0); // 可視化視線方向 return fixed4(viewDir * 0.5 0.5, 1.0);通過觀察顏色你可以直觀地判斷向量的方向是否正確計算的值是否在預期范圍內。法線應該是一個平滑變化的彩色球如果出現(xiàn)大片純色或奇怪的圖案計算肯定出錯了。6.3 關于性能分析使用Unity的Frame Debugger和Profiler。Frame Debugger可以逐幀查看每個Draw Call的狀態(tài)確認你的Shader是否被正確調用以及渲染狀態(tài)如混合模式、深度測試是否正確。Profiler在GPU模塊中可以查看每個Shader的耗時。重點關注GPU time和SetPass calls。如果你的自定義Shader耗時明顯高于Standard Shader就需要回頭審視優(yōu)化點了。寫Shader是一個不斷迭代和調試的過程。從最簡單的模型開始每增加一個功能就測試一次效果和性能逐步構建出復雜的效果這才是最穩(wěn)妥的路徑。別指望一口氣寫出一個完美無缺的Shader尤其是在面對不同平臺和性能約束的時候。