书本翻页效果

1、书本翻页效果基本原理

对顶点进行平移—>矩阵旋转—>再平移,并利用三角函数相关知识制做出起伏感
关键点:

  • 如何制作旋转

利用旋转矩阵来对顶点进行旋转变换,但是,旋转前我们需要先对顶点进行平移,否则模型将绕着模型中心点旋转。因为旋转之前进行了平移,因此旋转结束后,我们需要再将顶点平移回来

  • 如何制作起伏感

需要在旋转前利用三角函数Sin让顶点在Y轴上进行偏移即可,并且0~90~180度之间变换时,0和180度不需要起伏感,90度时起伏感最大(页面最弯曲)

2、实现

Shader "ShaderProj/18/PageTurning"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _BackTex ("BackTex", 2D) = "white" {}
        _AngleProgress ("AngleProgress", Range(0, 180)) = 0
        _WeightX ("WeightX", Range(0, 1)) = 0
        _WeightY ("WeightY", Range(0, 1)) = 0
        _WaveLength ("WaveLength", Range(0 ,3)) = 0
        _MoveDis ("MoveDis", Float) = 0
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        Cull Off

        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma target 3.0
            #include "UnityCG.cginc"

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
            };

            sampler2D _MainTex;
            float4 _MainTex_ST;
            sampler2D _BackTex;
            float _AngleProgress;
            fixed _WeightX;
            fixed _WeightY;
            float _WaveLength;
            float _MoveDis;

            v2f vert (appdata_base v)
            {
                v2f o;
                float s;
                float c;
                sincos(radians(_AngleProgress), s, c);
                float4x4 rotationM = {c, -s, 0, 0,
                                      s, c, 0 ,0,
                                      0, 0, 1, 0,
                                      0, 0, 0, 1};

                v.vertex += float4(_MoveDis, 0, 0, 0);
                // 起伏
                float weight = 1 - abs(90 - _AngleProgress) / 90;
                // y 轴起伏, x 轴收缩
                v.vertex.y += sin(v.vertex.x * _WaveLength) * weight * _WeightY;
                v.vertex.x -= v.vertex.x * weight * _WeightX;  
                 
                float4 position = mul(rotationM, v.vertex);
                position -= float4(_MoveDis, 0, 0, 0);
                
                o.vertex = UnityObjectToClipPos(position);
                o.uv = v.texcoord; 
                return o;
            }

            fixed4 frag (v2f i, fixed face: VFACE) : SV_Target
            {
                fixed4 col = face > 0 ? tex2D(_MainTex, i.uv) : tex2D(_BackTex, i.uv);
                return col;
            }
            ENDCG
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值