Unity——基於ShaderLab實現光照系統

小紫蘇發表於2022-01-04

這篇主要總結Unity中ShaderLab的著色器程式碼實現總結,需要有一定圖形學基礎ShaderLab基礎

一、著色器

1.頂點片元著色器

分頂點著色器和片元著色器,對應渲染管線的頂點變換和片元著色階段;

最簡單的頂點片元著色器:

Shader "MyShader/VertexFragmentShader"
{
    Properties{
        _MainColor("MainColor",Color) = (1,1,1,1)
    }

        SubShader
    {
        Tags { "RenderType" = "Opaque" }

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag

            float4 _MainColor;

            float4 vert(float4 v:POSITION) :SV_POSITION
            {
                return UnityObjectToClipPos(v);
            }

            fixed4 frag () : SV_Target
            {        
                return _MainColor;
            }
            ENDCG
        }
    }
}

2.表面著色器

將頂點和片元著色器再進行一層封裝;

通過表面函式控制反射率,光滑度,透明度等;

通過光照函式選擇要使用的光照模型;

表面著色器提供了便利,但是也降低了自由度;

表面著色器能實現的,頂點片元著色器都可以實現,但頂點片元著色器的可操作性更高,效能也更好;

簡單的表面著色器:

Shader "MyShader/SurfaceShader"
{
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        CGPROGRAM
        //表面著色器,使用Lambert光照
        #pragma surface surf Lambert 
           
        struct Input {
        float4 color :COLOR;
        };
        
        void surf(Input IN,inout SurfaceOutput o) {
            o.Albedo = 1;
        }
       
        ENDCG
    }
    Fallback "Diffuse"
}

3.固定函式著色器

已基本棄用不分析了;


二、光照模型

1.逐頂點光照(Gourand Shading)

在頂點著色器計算光照;頂點數目比片元少,計算量也少,通過線性插值得到每個畫素的光照;

所以非線性光照計算時會出錯——高光(後面會寫);

v2f vert(a2v v) {
	v2f o;
	//頂點變換到裁剪空間
	o.pos = UnityObjectToClipPos(v.vertex); 
    
	//環境光
	fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
    
	//世界空間下法線
	fixed3 worldNormal = normalize(mul(v.normal,unity_WorldToObject));
    
	//世界空間下光照方向
	fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
    
	//點成光照和法線得出漫反射方向,satruate取區間0-1;
	fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldNormal, worldLight));
    
	//環境光+漫反射
	o.color = ambient + diffuse;
	return o;
}

2.逐片元光照(Phong Shading)

在片元著色器計算光照;根據每個片元的法線計算光照;效果好計算量大,也叫phong插值;

v2f vert(a2v v) {
	v2f o;
	//頂點變換到裁剪空間
	o.pos = UnityObjectToClipPos(v.vertex);

	//傳遞世界座標法線到片元著色器
	o.worldNormal = mul(v.normal,unity_WorldToObject);
	
	return o;
}

fixed4 frag(v2f v) :SV_Target{
	//環境光
	fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz;
	
	//歸一化世界法線
	fixed3 worldNormal = normalize(v.worldNormal);

	//歸一化世界空間下光照方向
	fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz);
	
	//求漫反射
	fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * saturate(dot(worldNormal, worldLight));
	
	//相加環境光和漫反射
	fixed3 color = ambient + diffuse;
	return fixed4(color,1.0);
}

image-20220104122720695

這也是Lambert光照模型的演算法;

3.HalfLambert 光照

v社做半條命使用一個標準,計算漫反射時候結果+0,5;這樣對暗部有很大的優化;

//HalfLambertParma
fixed halfLambert = dot(worldNormal, worldLight) * 0.5 + 0.5;

//使用halfLambert計算漫反射
fixed3 diffuse = _LightColor0.rgb * _Diffuse.rgb * halfLambert;

image-20220104122852256

4.逐頂點高光

上面說的逐頂點計算光照對非線性光照會有錯誤;

高光由反射導致,和觀察方向、光線方向有關;具體關係參考圖形學基礎

在頂點著色器函式中新增:

//根據法線和光線方向用reflect方法計算反射方向
fixed3 reflectDir = normalize(reflect(-worldLight, worldNormal));

//計算觀察方向,攝像機位置-頂點位置(要求同在世界座標系下)
fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - mul(unity_ObjectToWorld, v.vertex).xyz);

//Phong光照模型中高光計算公式,_Specular顏色,_Gloss粗糙度,_LightColor0系統引數光照顏色
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(saturate(dot(reflectDir, viewDir)), _Gloss);

o.color = ambient + diffuse + specular;

5.逐畫素高光

將逐頂點高光程式碼發放在片元著色器中執行;

image-20220104125546149

6.Bline-Phong光照模型

上面逐頂點和逐畫素高光都是使用Phong光照模型;

求高光的時候使用reflect函式計算反射向量,計算比較大;

Bline-Phong使用(光線方向+觀察方向)來替代反射向量;

//世界光線方向和觀察方向中間方向;
fixed3 halfDir = normalize(worldLight + viewDir);

//使用halfDir來計算高光
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0, dot(worldNormal, halfDir)), _Gloss);

fixed3 color = ambient + diffuse + specular;

image-20220104130243871


三、紋理貼圖

1.單張紋理

使用紋理取樣替代純色,在片元著色器中對紋理貼圖取樣,修改畫素顏色;

_MainTexture_ST 控制貼圖的縮放和偏移(Scale,Translate);

v2f vert(a2v v){
	//uv傳遞給片元著色器,可以使用巨集命令TRANSFORM_TEX
	o.uv = v.texcoord.xy * _MainTexture_ST.xy + _MainTexture_ST.zw;
	//o.uv = TRANSFORM_TEX(v.texcoord,_Maintexture);
}

fixed4 farg(v2f v) :SV_Target{
    //紋理取樣,表面顏色-紋素
	fixed3 albedo = tex2D(_MainTexture, v.uv).rgb * _Color.rgb;

	//環境光*表面顏色
	fixed3 ambient = UNITY_LIGHTMODEL_AMBIENT.xyz *albedo;
					
	fixed halfLambert = dot(worldNormal, worldLight) * 0.5 + 0.5;
	//漫反射*表面顏色
	fixed3 diffuse = _LightColor0.rgb * albedo.rgb * halfLambert;
}

2.法線紋理

法線計算兩種方式:

將光線和觀察向量變換到切線空間計算;

將切線空間下法線變換到世界空間計算;

切線空間計算由於矩陣變換在頂點著色器,計算少效率高;

由於認知,或者有其他需求我們也會在世界空間計演算法線;

- 法線紋理切線空間計算

v2f vert(a2v v) {
	v2f o;
	o.pos = UnityObjectToClipPos(v.vertex);

	o.uv.xy = v.texcoord.xy * _MainTexture_ST.xy + _MainTexture_ST.zw;
	//o.uv = TRANSFORM_TEX(v.texcoord,_Maintexture);
	o.uv.zw = TRANSFORM_TEX(v.texcoord,_BumpMap);

	//巨集定義,求世界空間——切線空間變換矩陣rotation
	TANGENT_SPACE_ROTATION;
	
	o.lightDir = mul(rotation,ObjSpaceLightDir(v.vertex)).xyz;
	o.viewDir = mul(rotation,ObjSpaceViewDir(v.vertex)).xyz;

	return o;
}

fixed4 frag(v2f v) :SV_Target{
	//切線空間-光線方向
	fixed3 tangentLightDir = normalize(v.lightDir);
   
	//切線空間-觀察方向
    fixed3 tangentViewDir = normalize(v.viewDir);
		
	//法線貼圖格式為NormalMap,使用UnpackNormal解壓,取樣得到切線空間下法線
	fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap,v.uv.zw));
	//法線縮放
	tangentNormal.xy *= _BumpScale;
	//法線貼圖壓縮方法,z值可以計算得出,勾股定理,以下是簡化後公式
	tangentNormal.z = sqrt(1.0-saturate(dot(tangentNormal.xy,tangentNormal.xy)));
	
    ...//漫反射高光計算都使用tangentNormal
}

- 法線紋理世界空間計算

v2f vert(a2v v) {
	v2f o;
	o.pos = UnityObjectToClipPos(v.vertex);

	//減少暫存器使用,xy記錄主紋理uv,zw記錄法線uv
	o.uv.xy = v.texcoord.xy * _MainTexture_ST.xy + _MainTexture_ST.zw;
	o.uv.zw = TRANSFORM_TEX(v.texcoord,_BumpMap);

	//求世界空間下法線、切線、副切線
	float3 worldPos = mul(unity_ObjectToWorld,v.vertex).xyz;
	fixed3 worldNormal = UnityObjectToWorldNormal(v.normal);
	fixed3 worldTangent = UnityObjectToWorldDir(v.tangent.xyz);
	fixed3 worldBinnormal = cross(worldNormal,worldTangent)*v.tangent.w;
	
	//法線、切線、副切線構成切線空間變換矩陣,w值trick利用儲存世界座標系頂點座標
	o.Ttow0 = float4(worldTangent.x,worldBinnormal.x,worldNormal.x,worldPos.x);	
	o.Ttow1 = float4(worldTangent.y,worldBinnormal.y,worldNormal.y,worldPos.y);	
	o.Ttow2 = float4(worldTangent.z,worldBinnormal.z,worldNormal.z,worldPos.z);	

	return o;
}

fixed4 frag(v2f v) :SV_Target{
    ...
        
    //法線貼圖格式為NormalMap,使用UnpackNormal解壓,取樣得到切線空間法線
	fixed3 tangentNormal = UnpackNormal( tex2D(_BumpMap,v.uv.zw));
	
    //法線縮放
	tangentNormal.xy *= _BumpScale;
	
    //法線貼圖壓縮方法,z值可以計算得出,勾股定理,以下是簡化後公式
	tangentNormal.z = sqrt(1.0-saturate(dot(tangentNormal.xy,tangentNormal.xy)));
	
    //矩陣變換求出世界空間法線
	tangentNormal = normalize(half3(dot(v.Ttow0.xyz,tangentNormal),dot(v.Ttow1.xyz,tangentNormal),dot(v.Ttow2.xyz,tangentNormal)));
	
    ...//漫反射高光計算都使用tangentNormal
}

image-20220104134057523

3.漸變紋理

以上漫反射顏色都是光線顏色,或者光線顏色混合表面紋素顏色;

有時候漫反射的顏色要根據反射角大小有不同的變化,比如卡通渲染;

這就需要使用漸變紋理RampTexture;

//頂點著色器轉化RampTex的uv
 fixed4 frag (v2f i) : SV_Target{
    fixed halfLambert = 0.5 * dot(worldNormal,worldLightDir)+0.5;
    
     //根據halfLambert反射方向取樣RampTex紋素
	fixed3 diffuseColor = tex2D(_RampTex, fixed2(halfLambert, 			halfLambert)).rgb*_Color.rgb;

	fixed3 diffuse = _LightColor0.rgb * diffuseColor;
 }

三種不同的Ramp紋理:

Ram210

4.遮罩紋理

有些部位高光效果太強,人為的希望有些部位暗一些等,可以用到遮罩紋理Mask;

片元著色器中新增:

//反射方向
fixed3 halfDir = normalize(tangentLightDir + tangentViewDir);

//uv取樣高光遮罩紋理*高光範圍
fixed3 specularMask = tex2D(_SpecularMask,i.uv).r *_SpecularScale;

//高光結果混合遮罩紋理
fixed3 specular = _LightColor0.rgb * _Specular.rgb * pow(max(0,dot(tangentNormal,halfDir)),_Gloss) * specularMask;

效果對比:

image-20220104142009431


四、透明物體

1.透明測試

AlphaTest只決定畫不畫,不做顏色混合,給定一個閾值_Cutoff,透明度小於這個值都不畫;

透明測試需要關閉背面裁剪,以及加上透明測試三套件;

Tags { "Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="Transparent"}

//渲染佇列,忽略投影器,渲染型別
Tags { "Queue"="AlphaTest" "IgnoreProjector"="True" "RenderType"="Transparent"}
        
//關閉裁剪
Cull Off

Pass{
	...
	  fixed4 frag (v2f i) : SV_Target{
	  		...
	  		//alpha值小於_Cutoff的都不畫
            clip(texColor.a - _Cutoff);
	  		...
	  }
	...
}

修改Culloff值大小的效果:

12313a

2.透明顏色混合

AlphaBlend透明混合要關閉深度寫入,否則會被剔除;

同時要選擇混合模式,多種混合模式有點像ps裡的透明圖層疊加;

//三套件
Tags { "Queue"="Transparent" "IgnoreProjector"="True" "RenderType"="Transparent"}
      
Pass{
	//關閉深度吸入,開啟深度測試,選擇顏色混合模式
	Tags{"LightMode"="ForwardBase"}
    ZWrite Off
    Blend SrcAlpha OneMinusSrcAlpha 
    
    ...
    
    fixed4 frag (v2f i) : SV_Target{
    	...
     	//返回著色是,加上透明度
        return fixed4(ambient +diffuse,texColor.a*_AlphaScale);
    }    
}

image-20220104144027301

3.複雜模型雙Pass顏色混合

模型複雜的時候會有自己遮擋自己的問題;用雙Pass解決,第一個pass提前做好深度寫入且只做深度入;

Pass{
    ZWrite On
    ColorMask 0     //RGBA任意|,選擇需要寫入的通道,只做深度緩衝,0不輸出顏色
}

image-20220104144601421

4.透明混合渲染雙面

同一個透明物體,我需要需要從正面看到透明物體的背面;

使用兩個Pass;一個Cull Front,一個Cull Back;

背面和正面分開畫,先畫背面,用正面和背面混合;

image-20220104145017317


五、複雜光照處理

1.複雜光照

Unity光源分為垂直光,點光源,錐形射光燈,面光源和探照燈都是烘焙後生效的不討論;

Unity中普通Forwad前向渲染,沒多一個燈光要加一個Pass單獨處理;

Deffer延遲渲染,多個燈光也指渲染一次,有個G-Buffer儲存了影像,在G-Buffer上處理光照;

點光源,錐形射光燈——光線方向由光源到頂點的方向;光線的衰減值也不同;

Unity系統提供的點光源和錐形射光燈的光線衰減紋理圖,減少了計算;

Tags{"LightMode" = "ForwardAdd"}
#pragma multi_compile_fwdadd

#include "Lighting.cginc"
#include "AutoLight.cginc"

fixed4 frag (v2f i) : SV_Target
{            
    fixed3 worldNormal = normalize(i.worldNormal);              
    
    //deal with different light,get worldLightDir;
    #ifdef USING_DIRECTIONAL_LIGHT
        fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz);
        fixed atten = 1.0;
    #else
        fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz - i.worldPos.xyz);  
        
    	//Get light attenuation
        #if defined (POINT)
	        float3 lightCoord = mul(unity_WorldToLight, float4(i.worldPos, 1)).xyz;
	        fixed atten = tex2D(_LightTexture0, dot(lightCoord, lightCoord).rr).UNITY_ATTEN_CHANNEL;
	    #elif defined (SPOT)
	        float4 lightCoord = mul(unity_WorldToLight, float4(i.worldPos, 1));
	        fixed atten = (lightCoord.z > 0) * tex2D(_LightTexture0, lightCoord.xy / lightCoord.w + 0.5).w * tex2D(_LightTextureB0, dot(lightCoord, lightCoord).rr).UNITY_ATTEN_CHANNEL;
	    #else
	        fixed atten = 1.0;
	    #endif
    #endif
	
    ...
	
    return fixed4((diffuse+specular)*atten,1.0);
}

image-20220104150659190

2.陰影處理

Untiy中MeshRender元件上有兩個選項:

image-20220104151230178

CastShadows——是否投射陰影,以及雙面投射;

Receive Shadows——接受其他物體投射的陰影;

要求v2f中頂點座標變數名必須是pos;

帶陰影的shader必須FallBack一個帶LightMode被設定為ShadowCaster的pass;

當然也可以自己實現這個Pass;

Tags { "LightMode"="ForwardBase" }

CGPROGRAM
#pragma multi_compile_fwdbase

#include "Lighting.cginc"
#include "AutoLight.cginc"

struct v2f
{
    float4 pos : SV_POSITION;
    SHADOW_COORDS(2)
};

v2f vert (appdata v)
{
    v2f o;
    o.pos = UnityObjectToClipPos(v.vertex);

    TRANSFER_SHADOW(o);
    return o;
}


fixed4 frag (v2f i) : SV_Target
{
	fixed atten = 1.0;
	fixed shadow = SHADOW_ATTENUATION(i);
	return fixed4((ambient+ diffuse + specular)*atten*shadow,1.0);
}

image-20220104155049153

3.透明物體陰影處理

CastShadows——改成Two Sides即可;

相關文章