实现过程：

其实这个效果实现起来还是挺简单的，大概思路其实就是 让所有顶点都绕Z轴旋转，并且通过正余弦使之带有一点弧度。

下面开始让我们一步一步的实现该效果。

首先打开Unity新建一个工程，场景，并且创建一个名为openBookEffect的Shader文件，删掉原本多余的代码。

第一步，我们先让它绕z轴旋转起来

这里就要用到一个旋转矩阵了，让顶点左乘该矩阵，就能得到旋转之后的位置了。（ps:这里就不详细的解释旋转矩阵怎么推导来的了，有兴趣的可以去百度了解一下。）

旋转矩阵有3种：

绕x轴旋转：
绕y轴旋转
绕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 BackCGPROGRAM#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 FrontCGPROGRAM#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}}
}

最终效果：

参数参考

Unity Shader - 翻书效果相关推荐

Unity 翻书效果
Unity翻书效果目前做的VR项目中需要一个翻阅魔法书的效果,考虑过使用UnityBookPageCurl-master插件,但是那个插件是纯UI显示的,只有二维效果,在VR里观感不佳,之后在网上找 ...
自定义控件android特效,Android自定义控件eBook实现翻书效果实例详解
本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import androi ...
【我的书】Unity Shader的书 — 目录（2016.5.19最后一次更新）
写在前面感谢所有点进来看的朋友.没错,我目前打算写一本关于Unity Shader的书. 出书的目的有下面几个: 总结我接触Unity Shader以来的历程,给其他人一个借鉴.我非常明白学Shad ...
【我的书】Unity Shader的书 — 文件夹（2015.12.21更新）
写在前面感谢全部点进来看的朋友.没错.我眼下打算写一本关于Unity Shader的书. 出书的目的有以下几个: 总结我接触Unity Shader以来的历程,给其它人一个借鉴.我非常明确学Shad ...
Unity 制作翻书电子书，外部异步加载千张图片（二）
Unity 制作翻书电子书,外部异步加载千张图片(二) Hello!这是我的第二篇文章,希望在你阅读这篇文章之后对你能有帮助. 上文完成的程序,我说过只是解决了当前的问题,存在了很多瑕疵.例如:1.替 ...
Unity3d实现翻书效果
Unity3d实现翻书效果此教程需要用到Book-Page Curl Pro插件,unity商店里有,需要插件和工程的话留邮箱 1.将插件中的bookPro复制成自己的prefab,将page0和p ...
Unity3D UGUI实现翻书效果
提示:素材来源网络,侵权必删 UI翻书效果效果图一.准备工作 1.新建Unity工程 2.新建Hierarchy面板二.使用步骤 1.新建UIBook脚本,挂在UIBook上 2.新建BookM ...
Unity 制作翻书电子书，外部异步加载千张图片（一）
Unity 制作翻书电子书,外部异步加载千张图片(一) Hello!这是我的第一篇文章,希望在你阅读这篇文章之后对你能有帮助. 之前我做过两次电子书的程序,用的都是网上随便一搜就能找到的插件,很方便, ...
winform实现翻书效果_如何用PPT实现翻书效果？
在PPT中,我们需要配合内容使用不同的动画效果,加深观众对内容的理解.当内容是讲述故事.过场片段,或是老师的课件讲解教材时,有一个实用好看的动画效果,就是"翻书效果"动画. 例如上 ...

Unity Shader - 翻书效果

实现过程：

第一步，我们先让它绕z轴旋转起来

Unity Shader - 翻书效果相关推荐

最新文章

热门文章