鋼鐵俠Unlit光照Shader，三種效果變化

返回目錄

大家好，我是阿趙，這里是鋼鐵俠材質制作第二部分，線條輪廓部分的制作

為了實現這個效果，可以把細節拆分成以下幾個部分：

1、輪廓光

1.效果分析

這是一個很基礎的輪廓光實現，用到的就是法線和觀察方向的點乘（NdotV）。

2.shader實現

Shader "azhao/IronManBodyCode" {Properties{_RimBias("RimBias", Float) = 1_RimPow("RimlPow", Float) = 2_RimlCol("RimCol", Color) = (0,0,0,0)}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;};struct v2f{float4 pos : SV_POSITION;float3 worldPos :TEXCOORD0;float3 worldNormal : TEXCOORD1;};float _RimBias;float _RimPow;float4 _RimlCol;v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.worldPos = mul(unity_ObjectToWorld, v.vertex);o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}half4 frag (v2f i) : SV_Target{float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));float NdotV = dot(i.worldNormal, worldViewDir);float fresnelVal = pow((1 - NdotV)*_RimBias, _RimPow);half4 col = _RimlCol* fresnelVal;return col;}ENDCG}} }

3.說明

這個其實就是菲涅爾的標準算法，在1-NdotV后，乘以一個bias值控制邊緣光的強度，再計算一個Pow運算，控制邊緣光的邊緣厚度。

2、添加橫紋

1.效果分析

看到這個效果，可能很多人都在考慮怎樣畫這個橫紋的貼圖。其實這個實現方式很巧妙，只需要一張Noise噪聲圖就可以了。

2.shader實現

Shader "azhao/IronManBodyCode" {Properties{_RimBias("RimBias", Float) = 1_RimPow("RimlPow", Float) = 2_RimlCol("RimCol", Color) = (0,0,0,0)_NoiseMap("NoiseMap",2D) = "black"{}_NoiseTiling("NoiseTiling",Vector) = (1,1,0,0)}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float2 uv : TEXCOORD0;float3 normal : NORMAL;};struct v2f{float4 pos : SV_POSITION;float3 worldPos :TEXCOORD0;float3 worldNormal : TEXCOORD1;};float _RimBias;float _RimPow;float4 _RimlCol;sampler2D _NoiseMap;float4 _NoiseTiling;v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.worldPos = mul(unity_ObjectToWorld, v.vertex);o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}half4 frag (v2f i) : SV_Target{float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));float NdotV = dot(i.worldNormal, worldViewDir);float fresnelVal = pow((1 - NdotV)*_RimBias, _RimPow);float2 noiseUV = i.worldPos.xy *_NoiseTiling.xy + _NoiseTiling.zw;float4 noiseCol = tex2D(_NoiseMap, noiseUV);half4 col = _RimlCol * (fresnelVal+noiseCol.r);return col;}ENDCG}} }

3.說明

這里多添加了一張Noise貼圖

由于我們想要的橫紋是永遠水平于世界空間，并不是希望會隨著角色的動作而變形的，所以我這里并沒有使用模型本身的UV坐標來采樣，而是使用了模型的頂點世界坐標的xy坐標來模擬了UV坐標，并且添加了一個Tiling值來控制Noise貼圖的平鋪次數。

如果不調整參數的情況下，添加Noise到材質球，會看到下面的效果。

雖然這個效果看起來也很cool，但并不是我想要的效果，所以再調整一下Tiling值

把平鋪y值調大，這個時候，就可以看到，Noise圖就變成了橫紋了。

3、橫紋動畫

我希望在顯示這個光線輪廓的過程中，身上的橫紋是有一個慢慢上升的動畫效果的
這個實現起來很簡單，只需要給Noise圖的uv做一個偏移就可以了，這里用到了_Time，根據時間來讓UV偏移。
float2 noiseUV = i.worldPos.xy _NoiseTiling.xy + _NoiseTiling.zw;
noiseUV.y += frac(_Time.y)_NoiseSpeed;
這里還加了一個frac函數，frac函數的作用是去掉數值的整數部分只保留小數部分。由于某些設備的數值精度支持范圍有問題，如果_Time不停的累加，達到很大的值時，可能會出問題。所以加一個frac函數讓它的值只使用小數部分。

4、完整shader

Shader "azhao/IronManBodyCode" {Properties{_RimBias("RimBias", Float) = 1_RimPow("RimlPow", Float) = 2_RimlCol("RimCol", Color) = (0,0,0,0)_NoiseMap("NoiseMap",2D) = "black"{}_NoiseTiling("NoiseTiling",Vector) = (1,1,0,0)_NoiseSpeed("NoiseSpeed",float) = 0}SubShader{Tags { "RenderType"="Opaque" }LOD 100Pass{CGPROGRAM#pragma vertex vert#pragma fragment frag#include "UnityCG.cginc"struct appdata{float4 vertex : POSITION;float3 normal : NORMAL;};struct v2f{float4 pos : SV_POSITION;float3 worldPos :TEXCOORD0;float3 worldNormal : TEXCOORD1;};float _RimBias;float _RimPow;float4 _RimlCol;sampler2D _NoiseMap;float4 _NoiseTiling;float _NoiseSpeed;v2f vert (appdata v){v2f o;o.pos = UnityObjectToClipPos(v.vertex);o.worldPos = mul(unity_ObjectToWorld, v.vertex);o.worldNormal = UnityObjectToWorldNormal(v.normal);return o;}half4 frag (v2f i) : SV_Target{float3 worldViewDir = normalize(UnityWorldSpaceViewDir(i.worldPos));float NdotV = dot(i.worldNormal, worldViewDir);float fresnelVal = pow((1 - NdotV)*_RimBias, _RimPow);float2 noiseUV = i.worldPos.xy *_NoiseTiling.xy + _NoiseTiling.zw;noiseUV.y += frac(_Time.y)*_NoiseSpeed;float4 noiseCol = tex2D(_NoiseMap, noiseUV);half4 col = _RimlCol * (fresnelVal+noiseCol.r);return col;}ENDCG}} }

總結

以上是生活随笔為你收集整理的钢铁侠材质制作——2、线条轮廓部分的制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。