大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇文章为大家展示了UnityShader中怎么实现一个翻书效果,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。
创新互联凭借在网站建设、网站推广领域领先的技术能力和多年的行业经验,为客户提供超值的营销型网站建设服务,我们始终认为:好的营销型网站就是好的业务员。我们已成功为企业单位、个人等客户提供了成都网站建设、做网站服务,以良好的商业信誉,完善的服务及深厚的技术力量处于同行领先地位。
首先打开Unity新建一个工程,场景,并且创建一个名为openBookEffect的Shader文件,删掉原本多余的代码。
第一步,我们先让它绕z轴旋转起来
这里就要用到一个旋转矩阵了,让顶点左乘该矩阵,就能得到旋转之后的位置了。(ps:这里就不详细的解释旋转矩阵怎么推导来的了,有兴趣的可以去百度了解一下。)
旋转矩阵有3种:
1.绕x轴旋转:
2.绕y轴旋转
3.绕z轴旋转
很明显,我们这里需要用到的是第三个 绕z轴旋转的矩阵。下面我们通过代码来构建一个旋转矩阵并使之旋转一定的角度:
Properties { _MainTex ("Texture", 2D) = "white" {} //旋转角度 _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); //旋转矩阵 float4x4 rotateMatrix={ c ,s,0,0, -s,c,0,0, 0 ,0,1,0, 0 ,0,0,1 }; //顶点左乘以旋转矩阵 v.vertex = mul(rotateMatrix,v.vertex); //模型空间转换到裁剪空间 o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } ....
修改 _Angle大小,来旋转平面,如图:
通过测试发现,这样的旋转并不是我们想要的效果,此时旋转的轴在中心,我们想让它的旋转轴在最左边,此时就需要把所有顶点在旋转之前都往左偏移5个单位,旋转完成之后再向右偏移5个单位就可以达到我们想要的效果了,代码如下:
v2f vert (appdata v) { v2f o; //旋转之前向左偏移5个单位 v.vertex -= float4(5,0,0,0); float s; float c; //通过该方法可以计算出该角度的正余弦值 sincos(radians(_Angle),s,c); //旋转矩阵 float4x4 rotateMatrix={ c ,s,0,0, -s,c,0,0, 0 ,0,1,0, 0 ,0,0,1 }; //顶点左乘以旋转矩阵 v.vertex = mul(rotateMatrix,v.vertex); //旋转之后偏移回来 v.vertex += float4(5,0,0,0); //模型空间转换到裁剪空间 o.vertex = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; }
现在有一点翻书的样子了,但是现在的翻书效果太生硬了,为了接近真实的翻书效果,我们就需要通过正余弦函数修改顶点的y坐标,来达到一个弧度的效果。
v2f vert (appdata v) { v2f o; //旋转之前向右偏移5个单位 v.vertex -= float4(5,0,0,0); float s; float c; //通过该方法可以计算出该角度的正余弦值 sincos(radians(_Angle),s,c); //旋转矩阵 float4x4 rotateMatrix={ c ,s,0,0, -s,c,0,0, 0 ,0,1,0, 0 ,0,0,1 }; //根据x坐标,通过正弦函数计算出 y坐标的正弦值, _WaveLength 控制波长, 振幅就跟随角度正弦值动态变化 v.vertex.y = sin(v.vertex.x*_WaveLength) * 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"{ Properties { //正面纹理 _MainTex ("Texture", 2D) = "white" {} //背面纹理 _SecTex("SecTex",2D)="White"{} //旋转角度 _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; //旋转之前向右偏移5个单位 v.vertex -= float4(5,0,0,0); float s; float c; //通过该方法可以计算出该角度的正余弦值 sincos(radians(_Angle),s,c); //旋转矩阵 float4x4 rotateMatrix={ c ,s,0,0, -s,c,0,0, 0 ,0,1,0, 0 ,0,0,1 }; //根据x坐标,通过正弦函数计算出 y坐标的正弦值, _WaveLength 控制波长, 振幅就跟随角度正弦值动态变化 v.vertex.y = sin(v.vertex.x*_WaveLength) * 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 { 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; //旋转之前向右偏移5个单位 v.vertex -= float4(5,0,0,0); float s; float c; //通过该方法可以计算出该角度的正余弦值 sincos(radians(_Angle),s,c); //旋转矩阵 float4x4 rotateMatrix={ c ,s,0,0, -s,c,0,0, 0 ,0,1,0, 0 ,0,0,1 }; //根据x坐标,通过正弦函数计算出 y坐标的正弦值, _WaveLength 控制波长, 振幅就跟随角度正弦值动态变化 v.vertex.y = sin(v.vertex.x*_WaveLength) * 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 { fixed4 col = tex2D(_SecTex, i.uv); return col; } ENDCG } }}
上述内容就是UnityShader中怎么实现一个翻书效果,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注创新互联行业资讯频道。