Unity ShaderLab開發實戰（五）邊緣光RimColor
參考：https://blog.csdn.net/puppet_master/article/details/53548134
RimColor：邊緣發光效果。效果如下圖（圖片資源也是參考文章裡的）：
邊緣很簡單，法線和視線越垂直就是邊緣，簡單原理如下圖：
那邊緣發光效果就是希望在邊緣處額外加一個光的效果。我們可以根據dot（N,V）來獲得視線方向與法線方向的餘弦值，通過這個值來區分該畫素是否處在邊緣，進而判斷是否需要增加以及增加邊緣光的強弱。
下面我採用蘭伯特光照模型，簡單介紹一下Lambert模型：模型表面的明亮度直接取決於光線向量（light vector）和表面法線（normal）兩個向量將夾角的餘弦值。光線向量是指這個點到光從哪個方向射入，表面法線則定義了這個表面的朝向。
1.在個茶壺上實現效果：
實現程式碼：
Shader "Custom/RimColor" {
//屬性
Properties{
_Diffuse("Diffuse", Color) = (1,1,1,1)
_RimColor("RimColor", Color) = (1,1,1,1)
_RimPower("RimPower", Range(0.000001, 3.0)) = 0.1
_MainTex("Base 2D", 2D) = "white"{}
}
//子著色器
SubShader
{
Pass
{
//定義Tags
Tags{ "RenderType" = "Opaque" }
CGPROGRAM
//引入標頭檔案
#include "Lighting.cginc"
//定義Properties中的變數
fixed4 _Diffuse;
sampler2D _MainTex;
//使用了TRANSFROM_TEX巨集就需要定義XXX_ST
float4 _MainTex_ST;
fixed4 _RimColor;
float _RimPower;
//定義結構體：vertex shader階段輸出的內容
struct v2f
{
float4 pos : SV_POSITION;
float3 worldNormal : TEXCOORD0;
float2 uv : TEXCOORD1;
//在vertex shader中計算觀察方向傳遞給fragment shader
float3 worldViewDir : TEXCOORD2;
};
//定義頂點shader,引數直接使用appdata_base（包含position, noramal, texcoord）
v2f vert(appdata_base v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
//通過TRANSFORM_TEX巨集轉化紋理座標，主要處理了Offset和Tiling的改變,預設時等同於o.uv = v.texcoord.xy;
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
o.worldNormal = mul(v.normal, (float3x3)_World2Object);
//頂點轉化到世界空間
float3 worldPos = mul(_Object2World, v.vertex).xyz;
//可以把計算計算ViewDir的操作放在vertex shader階段，畢竟逐頂點計算比較省
o.worldViewDir = _WorldSpaceCameraPos.xyz - worldPos;
return o;
}
//定義片元shader
fixed4 frag(v2f i) : SV_Target
{
//unity自身的diffuse也是帶了環境光，這裡我們也增加一下環境光
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * _Diffuse.xyz;
//歸一化法線，即使在vert歸一化也不行，從vert到frag階段有差值處理，傳入的法線方向並不是vertex shader直接傳出的
fixed3 worldNormal = normalize(i.worldNormal);
//把光照方向歸一化
fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);
//根據半蘭伯特模型計算畫素的光照資訊
fixed3 lambert = 0.5 * dot(worldNormal, worldLightDir) + 0.5;
//最終輸出顏色為lambert光強*材質diffuse顏色*光顏色
fixed3 diffuse = lambert * _Diffuse.xyz * _LightColor0.xyz + ambient;
//進行紋理取樣
fixed4 color = tex2D(_MainTex, i.uv);
//以下為本篇主題：計算RimLight
//把視線方向歸一化
float3 worldViewDir = normalize(i.worldViewDir);
//計算視線方向與法線方向的夾角，夾角越大，dot值越接近0，說明視線方向越偏離該點，也就是平視，該點越接近邊緣
float rim = 1 - max(0, dot(worldViewDir, worldNormal));
//計算rimLight
fixed3 rimColor = _RimColor * pow(rim, 1 / _RimPower);
//輸出顏色+邊緣光顏色
color.rgb = color.rgb* diffuse + rimColor;
return fixed4(color);
}
//使用vert函式和frag函式
#pragma vertex vert
#pragma fragment frag
ENDCG
}
}
//前面的Shader失效的話，使用預設的Diffuse
FallBack "Diffuse"
}
2.如果只希望部分有自發光效果，而其他部分沒有自發光，我們就需要用Mask圖來控制了，我們用一張Alpha8的灰度圖來控制是否開啟邊緣光效果，將上面的shader簡單修改一下，增加Mask圖的通道：
Shader "ApcShader/RimLight"
{
//屬性
Properties{
_Diffuse("Diffuse", Color) = (1,1,1,1)
_RimColor("RimColor", Color) = (1,1,1,1)
_RimPower("RimPower", Range(0.000001, 20.0)) = 0.1
_RimMask("RimMask", 2D) = "white"{}
_MainTex("Base 2D", 2D) = "white"{}
}
//子著色器
SubShader
{
Pass
{
//定義Tags
Tags{ "RenderType" = "Opaque" }
CGPROGRAM
//引入標頭檔案
#include "Lighting.cginc"
//定義Properties中的變數
fixed4 _Diffuse;
sampler2D _MainTex;
//使用了TRANSFROM_TEX巨集就需要定義XXX_ST
float4 _MainTex_ST;
sampler2D _RimMask;
fixed4 _RimColor;
float _RimPower;
//定義結構體：vertex shader階段輸出的內容
struct v2f
{
float4 pos : SV_POSITION;
float3 worldNormal : TEXCOORD0;
float2 uv : TEXCOORD1;
//在vertex shader中計算觀察方向傳遞給fragment shader
float3 worldViewDir : TEXCOORD2;
};
//定義頂點shader,引數直接使用appdata_base（包含position, noramal, texcoord）
v2f vert(appdata_base v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
//通過TRANSFORM_TEX巨集轉化紋理座標，主要處理了Offset和Tiling的改變,預設時等同於o.uv = v.texcoord.xy;
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
o.worldNormal = mul(v.normal, (float3x3)_World2Object);
//頂點轉化到世界空間
float3 worldPos = mul(_Object2World, v.vertex).xyz;
//可以把計算計算ViewDir的操作放在vertex shader階段，畢竟逐頂點計算比較省
o.worldViewDir = _WorldSpaceCameraPos.xyz - worldPos;
return o;
}
//定義片元shader
fixed4 frag(v2f i) : SV_Target
{
//unity自身的diffuse也是帶了環境光，這裡我們也增加一下環境光
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * _Diffuse.xyz;
//歸一化法線，即使在vert歸一化也不行，從vert到frag階段有差值處理，傳入的法線方向並不是vertex shader直接傳出的
fixed3 worldNormal = normalize(i.worldNormal);
//把光照方向歸一化
fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);
//根據半蘭伯特模型計算畫素的光照資訊
fixed3 lambert = 0.5 * dot(worldNormal, worldLightDir) + 0.5;
//最終輸出顏色為lambert光強*材質diffuse顏色*光顏色
fixed3 diffuse = lambert * _Diffuse.xyz * _LightColor0.xyz + ambient;
//進行紋理取樣
fixed4 color = tex2D(_MainTex, i.uv);
//以下為本篇主題：計算RimLight
//把視線方向歸一化
float3 worldViewDir = normalize(i.worldViewDir);
//計算視線方向與法線方向的夾角，夾角越大，dot值越接近0，說明視線方向越偏離該點，也就是平視，該點越接近邊緣
float rim = 1 - max(0, dot(worldViewDir, worldNormal));
//計算RimLight
fixed3 rimColor = _RimColor * pow(rim, 1 / _RimPower);
//通過RimMask控制是否有邊緣光,Rim目前存在一張Alpha8型別的圖片中
fixed rimMask = tex2D(_RimMask, i.uv).a;
//輸出顏色+邊緣光顏色
color.rgb = color.rgb* diffuse + rimColor * (1 - rimMask);
return fixed4(color);
}
//使用vert函式和frag函式
#pragma vertex vert
#pragma fragment frag
ENDCG
}
}
//前面的Shader失效的話，使用預設的Diffuse
FallBack "Diffuse"
}
3.動態RimColor效果
用一張Mask紋理，白色代表有邊緣光，黑色無邊緣光，通過取樣這張Mask紋理，控制模型上顯示邊緣光的部分：
效果：（自己隨便做的，有引數可以調，大家可以發揮自己的想象，eg：火山噴發等等）
程式碼：
Shader "Custom/RimColor" {
//屬性
Properties{
_Diffuse("Diffuse", Color) = (1,1,1,1)
_RimColor("RimColor", Color) = (1,1,1,1)
_RimPower("RimPower", Range(0.000001, 20.0)) = 0.1
_RimMask("RimMask", 2D) = "white"{}
_MainTex("Base 2D", 2D) = "white"{}
_RimSpeed("RimSpeed", Range(-10, 10)) = 1.0
}
//子著色器
SubShader
{
Pass
{
//定義Tags
Tags{ "RenderType" = "Opaque" }
CGPROGRAM
//引入標頭檔案
#include "Lighting.cginc"
//定義Properties中的變數
fixed4 _Diffuse;
sampler2D _MainTex;
//使用了TRANSFROM_TEX巨集就需要定義XXX_ST
float4 _MainTex_ST;
sampler2D _RimMask;
fixed4 _RimColor;
float _RimPower;
float _RimSpeed;
//定義結構體：vertex shader階段輸出的內容
struct v2f
{
float4 pos : SV_POSITION;
float3 worldNormal : TEXCOORD0;
float2 uv : TEXCOORD1;
//在vertex shader中計算觀察方向傳遞給fragment shader
float3 worldViewDir : TEXCOORD2;
};
//定義頂點shader,引數直接使用appdata_base（包含position, noramal, texcoord）
v2f vert(appdata_base v)
{
v2f o;
o.pos = mul(UNITY_MATRIX_MVP, v.vertex);
//通過TRANSFORM_TEX巨集轉化紋理座標，主要處理了Offset和Tiling的改變,預設時等同於o.uv = v.texcoord.xy;
o.uv = TRANSFORM_TEX(v.texcoord, _MainTex);
o.worldNormal = mul(v.normal, (float3x3)_World2Object);
//頂點轉化到世界空間
float3 worldPos = mul(_Object2World, v.vertex).xyz;
//可以把計算計算ViewDir的操作放在vertex shader階段，畢竟逐頂點計算比較省
o.worldViewDir = _WorldSpaceCameraPos.xyz - worldPos;
return o;
}
//定義片元shader
fixed4 frag(v2f i) : SV_Target
{
//unity自身的diffuse也是帶了環境光，這裡我們也增加一下環境光
fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz * _Diffuse.xyz;
//歸一化法線，即使在vert歸一化也不行，從vert到frag階段有差值處理，傳入的法線方向並不是vertex shader直接傳出的
fixed3 worldNormal = normalize(i.worldNormal);
//把光照方向歸一化
fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);
//根據半蘭伯特模型計算畫素的光照資訊
fixed3 lambert = 0.5 * dot(worldNormal, worldLightDir) + 0.5;
//最終輸出顏色為lambert光強*材質diffuse顏色*光顏色
fixed3 diffuse = lambert * _Diffuse.xyz * _LightColor0.xyz + ambient;
//進行紋理取樣
fixed4 color = tex2D(_MainTex, i.uv);
//以下為本篇主題：計算RimLight
//把視線方向歸一化
float3 worldViewDir = normalize(i.worldViewDir);
//計算視線方向與法線方向的夾角，夾角越大，dot值越接近0，說明視線方向越偏離該點，也就是平視，該點越接近邊緣
float rim = 1 - max(0, dot(worldViewDir, worldNormal));
//計算rimLight
fixed3 rimColor = _RimColor * pow(rim, 1 / _RimPower);
fixed rimMask = tex2D(_RimMask, i.uv + float2(0, _Time.y * _RimSpeed)).r;
//輸出顏色+邊緣光顏色
color.rgb = color.rgb* diffuse + rimColor * (1 - rimMask);
return fixed4(color);
}
//使用vert函式和frag函式
#pragma vertex vert
#pragma fragment frag
ENDCG
}
}
//前面的Shader失效的話，使用預設的Diffuse
FallBack "Diffuse"
}