Unity Shader實現翻書效果

2020-01-23 20:45:59

字體：大中小

來源：轉載

供稿：網友

今天實現一個簡單的翻書的效果，話不多說，先上一張效果圖：

這里就隨便用的一張紋理了，我們還是稱為“翻木板”吧，哈哈。

實現過程：

其實這個效果實現起來還是挺簡單的，大概思路其實就是 讓所有頂點都繞Z軸旋轉，并且通過正余弦使之帶有一點弧度。

下面開始讓我們一步一步的實現該效果。

首先打開Unity新建一個工程，場景，并且創建一個名為openBookEffect的Shader文件，刪掉原本多余的代碼。

第一步，我們先讓它繞z軸旋轉起來

這里就要用到一個旋轉矩陣了，讓頂點左乘該矩陣，就能得到旋轉之后的位置了。（ps:這里就不詳細的解釋旋轉矩陣怎么推導來的了，有興趣的可以去百度了解一下。）

旋轉矩陣有3種：

1.繞x軸旋轉：

2.繞y軸旋轉

3.繞z軸旋轉

很明顯，我們這里需要用到的是第三個 繞z軸旋轉的矩陣。下面我們通過代碼來構建一個旋轉矩陣并使之旋轉一定的角度：

Properties { _MainTex ("Texture", 2D) = "white" {} //旋轉角度 _Angle("Angle",Range(0,180))=0 } .... sampler2D _MainTex; //角度 float _Angle; //頂點著色器 v2f vert (appdata v) { v2f o; float s; float c; //通過該方法可以計算出該角度的正余弦值 sincos(radians(_Angle),s,c); //旋轉矩陣 float4x4 rotateMatrix={   c ,s,0,0,  -s,c,0,0,  0 ,0,1,0,  0 ,0,0,1 }; //頂點左乘以旋轉矩陣 v.vertex = mul(rotateMatrix,v.vertex); //模型空間轉換到裁剪空間 o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } ....

修改 _Angle 大小，來旋轉平面，如圖：

通過測試發現，這樣的旋轉并不是我們想要的效果，此時旋轉的軸在中心，我們想讓它的旋轉軸在最左邊，此時就需要把所有頂點在旋轉之前都往左偏移5個單位，旋轉完成之后再向右偏移5個單位就可以達到我們想要的效果了，代碼如下：

v2f vert (appdata v)  {  v2f o;  //旋轉之前向左偏移5個單位 v.vertex -= float4(5,0,0,0);  float s;  float c;  //通過該方法可以計算出該角度的正余弦值  sincos(radians(_Angle),s,c);  //旋轉矩陣  float4x4 rotateMatrix={   c ,s,0,0,   -s,c,0,0,   0 ,0,1,0,   0 ,0,0,1  };  //頂點左乘以旋轉矩陣  v.vertex = mul(rotateMatrix,v.vertex);  //旋轉之后偏移回來 v.vertex += float4(5,0,0,0);  //模型空間轉換到裁剪空間  o.vertex = UnityObjectToClipPos(v.vertex);  o.uv = v.uv;  return o;  }

現在有一點翻書的樣子了，但是現在的翻書效果太生硬了，為了接近真實的翻書效果，我們就需要通過正余弦函數修改頂點的y坐標，來達到一個弧度的效果。

v2f vert (appdata v) { v2f o; //旋轉之前向右偏移5個單位 v.vertex -= float4(5,0,0,0); float s; float c; //通過該方法可以計算出該角度的正余弦值 sincos(radians(_Angle),s,c); //旋轉矩陣 float4x4 rotateMatrix={  c ,s,0,0,  -s,c,0,0,  0 ,0,1,0,  0 ,0,0,1 }; //根據x坐標，通過正弦函數計算出 y坐標的正弦值， _WaveLength 控制波長， 振幅就跟隨角度正弦值動態變化 v.vertex.y = sin(v.vertex.x*_WaveLength) * s ; //頂點左乘以旋轉矩陣 v.vertex = mul(rotateMatrix,v.vertex); //旋轉之后偏移回來 v.vertex += float4(5,0,0,0); //模型空間轉換到裁剪空間 o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; }

效果如下：

現在看著效果是不是闊以了。感覺效果還挺不錯的，但是還沒完，我們仔細觀察會發現“翻書”的過程，背面有點不真實，不應該是該紋理的反面，而是另一張新的紋理，此時我們該怎么辦呢？
其實很簡單，只需要把正面和反面分開渲染就可以了，一個Pass渲染正面，一個Pass渲染背面。

首先我們需要通過 Cull 指令剔除不需要渲染的那一面。

完整代碼如下：

Shader "Learn Unity Shader/openBook"{  Properties  {    //正面紋理    _MainTex ("Texture", 2D) = "white" {}    //背面紋理 _SecTex("SecTex",2D)="White"{}    //旋轉角度    _Angle("Angle",Range(0,180))=0    //波長    _WaveLength("WaveLength",Range(-1,1))=0  }  SubShader  {    Pass    {      //剔除背面  Cull Back      CGPROGRAM      #pragma vertex vert      #pragma fragment frag      #include "UnityCG.cginc"      struct appdata      {        float4 vertex : POSITION;        float2 uv : TEXCOORD0;      };      struct v2f      {        float2 uv : TEXCOORD0;        float4 vertex : SV_POSITION;      };      sampler2D _MainTex;  float4 _MainTex_ST;      //角度      float _Angle;      //波長      float _WaveLength;      v2f vert (appdata v)      {        v2f o;        //旋轉之前向右偏移5個單位        v.vertex -= float4(5,0,0,0);        float s;        float c;        //通過該方法可以計算出該角度的正余弦值        sincos(radians(_Angle),s,c);        //旋轉矩陣        float4x4 rotateMatrix={          c ,s,0,0,          -s,c,0,0,          0 ,0,1,0,          0 ,0,0,1        };        //根據x坐標，通過正弦函數計算出 y坐標的正弦值， _WaveLength 控制波長， 振幅就跟隨角度正弦值動態變化        v.vertex.y = sin(v.vertex.x*_WaveLength) * s ;        //頂點左乘以旋轉矩陣        v.vertex = mul(rotateMatrix,v.vertex);        //旋轉之后偏移回來        v.vertex += float4(5,0,0,0);        //模型空間轉換到裁剪空間        o.vertex = UnityObjectToClipPos(v.vertex);        o.uv = v.uv;        return o;      }      fixed4 frag (v2f i) : SV_Target      {        fixed4 col = tex2D(_MainTex, i.uv);        return col;      }      ENDCG    }     Pass    {      //剔除正面  Cull Front      CGPROGRAM      #pragma vertex vert      #pragma fragment frag      #include "UnityCG.cginc"      struct appdata      {        float4 vertex : POSITION;        float2 uv : TEXCOORD0;      };      struct v2f      {        float2 uv : TEXCOORD0;        float4 vertex : SV_POSITION;      };      //角度      float _Angle;      //波長      float _WaveLength;      sampler2D _SecTex;  float4 _SecTex_ST;      v2f vert (appdata v)      {        v2f o;        //旋轉之前向右偏移5個單位        v.vertex -= float4(5,0,0,0);        float s;        float c;        //通過該方法可以計算出該角度的正余弦值        sincos(radians(_Angle),s,c);        //旋轉矩陣        float4x4 rotateMatrix={          c ,s,0,0,          -s,c,0,0,          0 ,0,1,0,          0 ,0,0,1        };        //根據x坐標，通過正弦函數計算出 y坐標的正弦值， _WaveLength 控制波長， 振幅就跟隨角度正弦值動態變化        v.vertex.y = sin(v.vertex.x*_WaveLength) * s ;        //頂點左乘以旋轉矩陣        v.vertex = mul(rotateMatrix,v.vertex);        //旋轉之后偏移回來        v.vertex += float4(5,0,0,0);        //模型空間轉換到裁剪空間        o.vertex = UnityObjectToClipPos(v.vertex);        o.uv = v.uv;        return o;      }      fixed4 frag (v2f i) : SV_Target      {        fixed4 col = tex2D(_SecTex, i.uv);        return col;      }      ENDCG    }  }}

最終效果：