Unity Shader实现翻书效果
更新时间：2019年11月30日 10:06:31 作者：长生但酒狂
这篇文章主要为大家详细介绍了Unity Shader实现翻书效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
今天实现一个简单的翻书的效果，话不多说，先上一张效果图：
这里就随便用的一张纹理了，我们还是称为“翻木板”吧，哈哈。
实现过程：
其实这个效果实现起来还是挺简单的，大概思路其实就是 让所有顶点都绕Z轴旋转，并且通过正余弦使之带有一点弧度。
下面开始让我们一步一步的实现该效果。
首先打开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
}
}
}
最终效果：
参数参考：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了C#调用C++动态库接口函数和回调函数方法，通过C++端编写接口展开内容，文章介绍详细具有一定的参考价值，需要的小伙伴可以参考一下2022-03-03
一般用反射获取类对象的实例比较简单,只要类有一个无参构造函数或没有显示声明带参的构造函数即可使用2013-10-10
这篇文章主要介绍了C# 利用代理爬网页的实现方法的相关资料,希望通过本能帮助到大家实现这样的功能，需要的朋友可以参考下2017-10-10
Zookeeper作为分布式的服务框架，虽然是java写的，但是强大的C#也可以连接使用。而现在主要有两个插件可供使用，分别是ZooKeeperNetEx和Zookeeper.Net，个人推荐使用ZooKeeperNetEx做开发，本文也已介绍ZooKeeperNetEx为主2021-06-06
这篇文章主要介绍了C#判断某程序是否运行的方法,代码结构简单功能实用,需要的朋友可以参考下2014-09-09
这篇文章主要介绍了C#实现左截取和右截取字符串实例,是针对字符串的常用操作,非常具有实用价值,需要的朋友可以参考下2014-10-10
这篇文章主要给大家介绍了关于C#中对称加密算法的踩坑日常记录，文中通过示例代码介绍的非常详细，对大家学习或者使用C#具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
现在给大家介绍一种最简单的跨窗体操作，WinForm的窗体是一个类，C#的类是引用类型，那么我们应该可以将WinForm窗体类进行传递，那不就可以进行操作了么？2013-03-03
这篇文章介绍了C#获取应用程序路径或Web页面目录路径的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
这篇文章主要介绍了C#中this的使用方法,this是C#程序设计中非常重要的一个关键字,本文以实例形式对此作出简单的用法分析,需要的朋友可以参考下2014-08-08
最新评论