UnityShader中怎么實現(xiàn)一個翻書效果

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

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

首先打開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 } }}

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

名稱欄目：UnityShader中怎么實現(xiàn)一個翻書效果
網(wǎng)站鏈接：http://muchs.cn/article24/pdjeje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、域名注冊、網(wǎng)站設(shè)計公司、企業(yè)建站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站策劃

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容