本篇文章為大家展示了UnityShader中怎么實(shí)現(xiàn)一個(gè)翻書效果，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)憑借在網(wǎng)站建設(shè)、網(wǎng)站推廣領(lǐng)域領(lǐng)先的技術(shù)能力和多年的行業(yè)經(jīng)驗(yàn)，為客戶提供超值的營(yíng)銷型網(wǎng)站建設(shè)服務(wù)，我們始終認(rèn)為：好的營(yíng)銷型網(wǎng)站就是好的業(yè)務(wù)員。我們已成功為企業(yè)單位、個(gè)人等客戶提供了成都網(wǎng)站建設(shè)、做網(wǎng)站服務(wù)，以良好的商業(yè)信譽(yù)，完善的服務(wù)及深厚的技術(shù)力量處于同行領(lǐng)先地位。

首先打開(kāi)Unity新建一個(gè)工程，場(chǎng)景，并且創(chuàng)建一個(gè)名為openBookEffect的Shader文件，刪掉原本多余的代碼。

第一步，我們先讓它繞z軸旋轉(zhuǎn)起來(lái)

這里就要用到一個(gè)旋轉(zhuǎn)矩陣了，讓頂點(diǎn)左乘該矩陣，就能得到旋轉(zhuǎn)之后的位置了。（ps:這里就不詳細(xì)的解釋旋轉(zhuǎn)矩陣怎么推導(dǎo)來(lái)的了，有興趣的可以去百度了解一下。）

旋轉(zhuǎn)矩陣有3種：

1.繞x軸旋轉(zhuǎn)：

2.繞y軸旋轉(zhuǎn)

3.繞z軸旋轉(zhuǎn)

很明顯，我們這里需要用到的是第三個(gè) 繞z軸旋轉(zhuǎn)的矩陣。下面我們通過(guò)代碼來(lái)構(gòu)建一個(gè)旋轉(zhuǎn)矩陣并使之旋轉(zhuǎn)一定的角度：

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

修改 _Angle大小，來(lái)旋轉(zhuǎn)平面，如圖：

通過(guò)測(cè)試發(fā)現(xiàn)，這樣的旋轉(zhuǎn)并不是我們想要的效果，此時(shí)旋轉(zhuǎn)的軸在中心，我們想讓它的旋轉(zhuǎn)軸在最左邊，此時(shí)就需要把所有頂點(diǎn)在旋轉(zhuǎn)之前都往左偏移5個(gè)單位，旋轉(zhuǎn)完成之后再向右偏移5個(gè)單位就可以達(dá)到我們想要的效果了，代碼如下：

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

現(xiàn)在有一點(diǎn)翻書的樣子了，但是現(xiàn)在的翻書效果太生硬了，為了接近真實(shí)的翻書效果，我們就需要通過(guò)正余弦函數(shù)修改頂點(diǎn)的y坐標(biāo)，來(lái)達(dá)到一個(gè)弧度的效果。

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

效果如下：

現(xiàn)在看著效果是不是闊以了。感覺(jué)效果還挺不錯(cuò)的，但是還沒(méi)完，我們仔細(xì)觀察會(huì)發(fā)現(xiàn)“翻書”的過(guò)程，背面有點(diǎn)不真實(shí)，不應(yīng)該是該紋理的反面，而是另一張新的紋理，此時(shí)我們?cè)撛趺崔k呢？其實(shí)很簡(jiǎn)單，只需要把正面和反面分開(kāi)渲染就可以了，一個(gè)Pass渲染正面，一個(gè)Pass渲染背面。

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

完整代碼如下：

Shader "Learn Unity Shader/openBook"{  Properties  {    //正面紋理    _MainTex ("Texture", 2D) = "white" {}    //背面紋理 _SecTex("SecTex",2D)="White"{}    //旋轉(zhuǎn)角度    _Angle("Angle",Range(0,180))=0    //波長(zhǎng)    _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;      //波長(zhǎng)      float _WaveLength;      v2f vert (appdata v)      {        v2f o;        //旋轉(zhuǎn)之前向右偏移5個(gè)單位        v.vertex -= float4(5,0,0,0);        float s;        float c;        //通過(guò)該方法可以計(jì)算出該角度的正余弦值        sincos(radians(_Angle),s,c);        //旋轉(zhuǎn)矩陣        float4x4 rotateMatrix={          c ,s,0,0,          -s,c,0,0,          0 ,0,1,0,          0 ,0,0,1        };        //根據(jù)x坐標(biāo)，通過(guò)正弦函數(shù)計(jì)算出 y坐標(biāo)的正弦值， _WaveLength 控制波長(zhǎng)， 振幅就跟隨角度正弦值動(dòng)態(tài)變化        v.vertex.y = sin(v.vertex.x*_WaveLength) * s ;        //頂點(diǎn)左乘以旋轉(zhuǎn)矩陣        v.vertex = mul(rotateMatrix,v.vertex);        //旋轉(zhuǎn)之后偏移回來(lái)        v.vertex += float4(5,0,0,0);        //模型空間轉(zhuǎn)換到裁剪空間        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;      //波長(zhǎng)      float _WaveLength;      sampler2D _SecTex;  float4 _SecTex_ST;      v2f vert (appdata v)      {        v2f o;        //旋轉(zhuǎn)之前向右偏移5個(gè)單位        v.vertex -= float4(5,0,0,0);        float s;        float c;        //通過(guò)該方法可以計(jì)算出該角度的正余弦值        sincos(radians(_Angle),s,c);        //旋轉(zhuǎn)矩陣        float4x4 rotateMatrix={          c ,s,0,0,          -s,c,0,0,          0 ,0,1,0,          0 ,0,0,1        };        //根據(jù)x坐標(biāo)，通過(guò)正弦函數(shù)計(jì)算出 y坐標(biāo)的正弦值， _WaveLength 控制波長(zhǎng)， 振幅就跟隨角度正弦值動(dòng)態(tài)變化        v.vertex.y = sin(v.vertex.x*_WaveLength) * s ;        //頂點(diǎn)左乘以旋轉(zhuǎn)矩陣        v.vertex = mul(rotateMatrix,v.vertex);        //旋轉(zhuǎn)之后偏移回來(lái)        v.vertex += float4(5,0,0,0);        //模型空間轉(zhuǎn)換到裁剪空間        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    }  }}

上述內(nèi)容就是UnityShader中怎么實(shí)現(xiàn)一個(gè)翻書效果，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。