Unity Shader實現翻書效果

2022-09-30 21:21:23 字數 3382 閱讀 7262

這裡就隨便用的一張紋理了,我們還是稱為「翻木板」吧,哈哈。

實現過程:

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

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

首先開啟unity新建乙個工程,場景,並且建立乙個名為openbookeffect的shader檔案,刪掉原本多餘的**。

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

這裡就要用到乙個旋轉矩陣了,讓頂點左乘該矩陣,就能得到旋轉之後的位置了。(ps:這裡就不詳細的解釋旋轉矩陣怎麼推導來的了,有興趣的可以去百度了解一下。)

旋轉矩陣有3種:

1.繞x軸旋**

2.繞y軸旋轉

3.繞z軸旋轉

很明顯,我們這裡需要用到的是第三個繞z軸旋轉的矩陣。下面我們通過**來構建乙個旋轉矩陣並使之旋轉一定的角度:

properties

//旋轉角度

_angle("angle",range(0,180))=0

} ....

sampler2d _maintex;

//角度

float _angle;

//頂點著色器

v2f vert (appdata v)

; //頂點左乘以旋轉矩陣

v.vertex = mul(rotatematrix,v.vertex);

//模型空間轉換到裁剪空間

o.vertex = unityobjecttoclippos(v.vertex);

o.uv = v.uv;

return o;

} ....

修改_angle大小,來旋轉平面,如圖:

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

v2f vert (appdata v)

;//頂點左乘以旋轉矩陣

v.vertex = mul(rotatematrix,v.vertex);

//旋轉之後偏移回來

v.vertex += float4(5,0,0,0);

dxkptxduch //模型空間轉換到裁剪空間

o.vertex = unityobjecttoclippos(v.vertex);

o.uv = v.uv;

return o;

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

v2f vert (appdata v)

; //根據x座標,通過正弦函式計算出 y座標的正弦值, _w**elength 控制波長, 振幅就跟隨角度正弦值動態變化

v.vertex.y = sin(v.vertex.x*_w**elength) * 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"

//背面紋理

_sectex("sectex",2d)="white"{}

//旋轉角度

_angle("angle",range(0,180))=0

//波長

_w**elength("w**elength",range(-1,1))=0

} subshader

; struct v2f

;sampler2d _maintex;

float4 _maintex_st;

dxkptxduch //角度

float _angle;

//波長

float _w**elength;

v2f vert (appdata v)

;//根據x座標,通過正弦函式計算出 y座標的正弦值, _w**elength 控制波長, 振幅就跟隨角度正弦值動態變化

v.vertex.y = sin(v.vertex.x*_w**elength) * 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

endcg

}pass

;struct v2f

;//角度

float _angle;

//波長

float _w**elength;

sampler2d _sectex;

float4 _sectex_st;

v2f vert (appdata v)

;//根據x座標,通過正弦函式計算出 y座標的正弦值, _w**elength 控制波長, 振幅就跟隨角度正弦值動態變化

v.vertex.y = sin(v.vertex.x*_w**elength) * 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

endcg}}}

最終效果:

引數參考:

本文標題: unity shader實現翻書效果

本文位址:

翻書動畫實現

最近利用空餘時間實現了一下翻書的動畫 主要利用了3個方面的東西 1 canvas的clip方法 2 設定path路徑,這其中包括了bezier函式的理解 3 繪圖原理參考 此大神 廢話不多說,直接原始碼吧 import android.animation.animator import androi...

CSS3 實現翻書效果

body ulul li一般3d層給實現3d效果的父盒子,視距給最大的盒子body。在給子元素設定旋轉角度過程中,使用偽類選擇器可以減少記憶體的占用,這裡使用到 nth child 偽類。主要css 如下 ul hover li nth child 1 ul hover li nth child 2...

Unity Shader實現模糊效果

今天分享乙個超簡單實現模糊效果的方法,先上圖 核心 就這句 注意要在3.0以上的版本才能使用 在取樣後做偏移取樣再疊加,效果與下面的 類似 float4 frag v2f o sv target 下面的完整 shader custom testshader40 scale scale range 0...