Unity shader 案例 --- 翻书效果

最新推荐文章于 2022-04-28 18:10:58 发布

翻译最新推荐文章于 2022-04-28 18:10:58 发布 · 1.5k 阅读

文章标签：

#unity #shader #1024程序员节

unity 同时被 2 个专栏收录

39 篇文章

订阅专栏

shader

17 篇文章

订阅专栏

本文介绍了一种使用Shader实现翻页书效果的方法。通过创建旋转矩阵并利用sin函数优化顶点位置，使得翻页更加自然。采用双面渲染技术确保页面两面都能正确显示。

效果图：

最近开始学习学习shader，不然感觉自己要堕落了(捂脸)，，，

先说下实现的思想吧：

1、使用旋转矩阵旋转顶点

2、使用sin函数，对顶点进行优化，简单说就是看起来更舒服

3、使用两个pass，对plane的两面都进行渲染（毕竟一页纸是有两面的）

首先，是创建一个旋转矩阵（我这边创建的是绕Z轴的，具体项目具体创建是X还是Y还是Z轴矩阵），然后将角度转成弧度进行计算

然后，对顶点的Y轴进行sin计算，v.vertex -= float4(5, 0, 0, 0);这句是让书绕最左边进行旋转，如果去掉的话，则书会以中心点进行旋转

最后，使用2个pass，一个渲染正面，一个渲染背面，就可以出现效果了

所有代码如下：

Shader "YW/TurnOverBook"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
		_SecondTex("second tex",2D) = "white"{}
		_Angle ("Rotate angle",Range(0,180)) = 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
            {
				float4 vertex : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
			float _Angle;

            v2f vert (appdata v)
            {
				float sins;
				float coss;
				float rad = (_Angle * 3.1415926) / 180;	//角度转弧度
				sincos(rad, sins, coss);
				//sincos(radians(_Angle), sins, coss);	//sincos函数是自带的  计算sin值和cos值得
				float4x4 rotateMatrix =
				{
					coss,sins,0,0,
					-sins,coss,0,0,
					0,0,1,0,
					0,0,0,1,
				};

                v2f o;
				v.vertex -= float4(5, 0, 0, 0);					//将中心点偏移到最坐边
				v.vertex.y += sin(v.vertex.x * 0.4) * sins;		//对顶点Y进行偏移
				v.vertex = mul(rotateMatrix, v.vertex);			//使用旋转矩阵对顶点进行旋转
				v.vertex += float4(5, 0, 0, 0);
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                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
			{
				float4 vertex : SV_POSITION;
				float2 uv : TEXCOORD0;
			};

			sampler2D _SecondTex;
			float4 _SecondTex_ST;
			float _Angle;

			v2f vert(appdata v)
			{
				float sins;
				float coss;
				float rad = (_Angle * 3.1415926) / 180;
				sincos(rad, sins, coss);
				//sincos(radians(_Angle), sins, coss);
				float4x4 rotateMatrix =
				{
					coss,sins,0,0,
					-sins,coss,0,0,
					0,0,1,0,
					0,0,0,1,
				};

				v2f o;
				v.vertex -= float4(5, 0, 0, 0);
				v.vertex.y += sin(v.vertex.x * 0.4) * sins;
				v.vertex = mul(rotateMatrix, v.vertex);
				v.vertex += float4(5, 0, 0, 0);
				o.vertex = UnityObjectToClipPos(v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _SecondTex);
				return o;
			}

			fixed4 frag(v2f i) : SV_Target
			{
				fixed4 col = tex2D(_SecondTex, i.uv);
				return col;
			}
			ENDCG
		}
    }
}

我也是刚开始学习shader，如果错误，勿怪，请提醒我修改