Unity Shader實現(xiàn)翻書效果

來源：本站原創(chuàng)|時間：2020-01-10|欄目：C#教程|點擊：次

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

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

實現(xiàn)過程：

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

下面開始讓我們一步一步的實現(xiàn)該效果。

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

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

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

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

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

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

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

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

Properties
  {
    _MainTex ("Texture", 2D) = "white" {}
    //旋轉(zhuǎn)角度
    _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);
    //旋轉(zhuǎn)矩陣
    float4x4 rotateMatrix={  
      c ,s,0,0,
      -s,c,0,0,
      0 ,0,1,0,
      0 ,0,0,1
    };
    //頂點左乘以旋轉(zhuǎn)矩陣
 v.vertex = mul(rotateMatrix,v.vertex);
 //模型空間轉(zhuǎn)換到裁剪空間
    o.vertex = UnityObjectToClipPos(v.vertex);
    o.uv = v.uv;
    return o;
  }
  ....

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

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

v2f vert (appdata v)
      {
        v2f o;
        //旋轉(zhuǎn)之前向左偏移5個單位
  v.vertex -= float4(5,0,0,0);
        float s;
        float c;
        //通過該方法可以計算出該角度的正余弦值
        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
        };
        //頂點左乘以旋轉(zhuǎn)矩陣
        v.vertex = mul(rotateMatrix,v.vertex);
        //旋轉(zhuǎn)之后偏移回來
  v.vertex += float4(5,0,0,0);

        //模型空間轉(zhuǎn)換到裁剪空間
        o.vertex = UnityObjectToClipPos(v.vertex);
        o.uv = v.uv;
        return o;
      }

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

v2f vert (appdata v)
 {
   v2f o;
   //旋轉(zhuǎn)之前向右偏移5個單位
   v.vertex -= float4(5,0,0,0);
   float s;
   float c;
   //通過該方法可以計算出該角度的正余弦值
   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)，通過正弦函數(shù)計算出 y坐標(biāo)的正弦值， _WaveLength 控制波長， 振幅就跟隨角度正弦值動態(tài)變化
   v.vertex.y = sin(v.vertex.x*_WaveLength) * s ;

   //頂點左乘以旋轉(zhuǎn)矩陣
   v.vertex = mul(rotateMatrix,v.vertex);
   //旋轉(zhuǎn)之后偏移回來
   v.vertex += float4(5,0,0,0);

   //模型空間轉(zhuǎn)換到裁剪空間
   o.vertex = UnityObjectToClipPos(v.vertex);
   o.uv = v.uv;
   return o;
 }

效果如下：

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

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

完整代碼如下：

Shader "Learn Unity Shader/openBook"
{
  Properties
  {
    //正面紋理
    _MainTex ("Texture", 2D) = "white" {}
    //背面紋理
 _SecTex("SecTex",2D)="White"{}

    //旋轉(zhuǎn)角度
    _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;
        //旋轉(zhuǎn)之前向右偏移5個單位
        v.vertex -= float4(5,0,0,0);
        float s;
        float c;
        //通過該方法可以計算出該角度的正余弦值
        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)，通過正弦函數(shù)計算出 y坐標(biāo)的正弦值， _WaveLength 控制波長， 振幅就跟隨角度正弦值動態(tài)變化
        v.vertex.y = sin(v.vertex.x*_WaveLength) * s ;

        //頂點左乘以旋轉(zhuǎn)矩陣
        v.vertex = mul(rotateMatrix,v.vertex);
        //旋轉(zhuǎn)之后偏移回來
        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;
      //波長
      float _WaveLength;

      sampler2D _SecTex;
  float4 _SecTex_ST;

      v2f vert (appdata v)
      {
        v2f o;
        //旋轉(zhuǎn)之前向右偏移5個單位
        v.vertex -= float4(5,0,0,0);
        float s;
        float c;
        //通過該方法可以計算出該角度的正余弦值
        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)，通過正弦函數(shù)計算出 y坐標(biāo)的正弦值， _WaveLength 控制波長， 振幅就跟隨角度正弦值動態(tài)變化
        v.vertex.y = sin(v.vertex.x*_WaveLength) * s ;

        //頂點左乘以旋轉(zhuǎn)矩陣
        v.vertex = mul(rotateMatrix,v.vertex);
        //旋轉(zhuǎn)之后偏移回來
        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
    }
  }
}

最終效果：

參數(shù)參考：

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持我們。

上一篇：dotnet core鏈接mongodb代碼實例

欄目：C#教程

下一篇：C# OleDbDataReader快速數(shù)據(jù)讀取方式(3種)

本文標(biāo)題：Unity Shader實現(xiàn)翻書效果

本文地址：http://mengdiqiu.com.cn/a1/C_jiaocheng/4595.html

更多C#教程

欧美大屁股bbbbxxxx,狼人大香伊蕉国产www亚洲,男ji大巴进入女人的视频小说,男人把ji大巴放进女人免费视频,免费情侣作爱视频

C#教程

Unity Shader實現(xiàn)翻書效果

您可能感興趣的文章

閱讀排行

本欄相關(guān)

隨機閱讀