Unity Shader實(shí)現(xiàn)翻書(shū)效果
今天實(shí)現(xiàn)一個(gè)簡(jiǎn)單的翻書(shū)的效果，話不多說(shuō)，先上一張效果圖：
這里就隨便用的一張紋理了，我們還是稱為“翻木板”吧，哈哈。
實(shí)現(xiàn)過(guò)程：
其實(shí)這個(gè)效果實(shí)現(xiàn)起來(lái)還是挺簡(jiǎn)單的，大概思路其實(shí)就是 讓所有頂點(diǎn)都繞Z軸旋轉(zhuǎn)，并且通過(guò)正余弦使之帶有一點(diǎn)弧度。
下面開(kāi)始讓我們一步一步的實(shí)現(xiàn)該效果。
首先打開(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)翻書(shū)的樣子了，但是現(xiàn)在的翻書(shū)效果太生硬了，為了接近真實(shí)的翻書(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)“翻書(shū)”的過(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
}
}
}
最終效果：
參數(shù)參考：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了C# 引入委托的目的是什么，文中講解非常細(xì)致，代碼幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
C#實(shí)現(xiàn)Nginx平滑加權(quán)輪詢算法
這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)Nginx平滑加權(quán)輪詢算法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
基于WPF實(shí)現(xiàn)簡(jiǎn)單的下拉篩選控件
這篇文章主要為大家詳細(xì)介紹了如何基于WPF實(shí)現(xiàn)簡(jiǎn)單的下拉篩選控件，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定幫助，感興趣的小伙伴可以了解一下2023-04-04
c#中WinForm使用OpencvSharp4實(shí)現(xiàn)簡(jiǎn)易抓邊
C#?Windows?Forms中實(shí)現(xiàn)控件之間的連接線的方法詳解
C# WPF使用AForge類庫(kù)操作USB攝像頭拍照并保存
C++通過(guò)Callback向C#傳遞數(shù)據(jù)的方法
Unity實(shí)現(xiàn)人物旋轉(zhuǎn)和移動(dòng)效果