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