广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >Unity Shader实现3D翻页效果
  • 922
分享到

Unity Shader实现3D翻页效果

2024-04-02 19:04:59 922人浏览 安东尼
摘要

本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Sh

本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下

参考文章:UnityShader使用Plane实现翻书效果

效果图:

原理:Shader顶点动画

在顶点着色器进行对顶点Y值的偏移(使用了Sin函数模拟翻页时产生的弯曲),对顶点X值的偏移实现纸张在翻页时的收缩(一般是不用收缩),最后对顶点进行围绕Z轴旋转实现Plane翻页(Z轴是本例的旋转轴,请根据你具体情况修改,上面的两个偏移同理)。


Shader "Unlit/PaperTurnMilkShader"
{
 Properties
 {
  //正面图
  _MainTex ("Texture", 2D) = "white" {}
  //背面图
  _SrcTex("SrcTex", 2D) = "white"{}
  //旋转角度
  _Angle("Angle", Range(0,180)) = 0
  //弯曲程度
  _WeightY("Weight Y", Range(0,3)) = 0.2
  //收缩程度(值越大翻页时纸张越往内部靠拢)具体情况可测试
  _WeightX("Weight X", Range(0,1)) = 0
  //波长(值越大翻页时的弯曲次数越多)
  _WaveLength("WaveLength", Range(0,2)) = 0.4
 }
 SubShader
 {
  //关闭批处理(因为修改了顶点位置)
  Tags { "RenderType"="Opaque" "IgnoreProjector" = "True" "Queue" = "Geometry" "DisableBatching" = "True"}
  LOD 100
  //渲染正面
  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 _WeightY;
   float _WeightX;
   float _WaveLength;
   
   v2f vert (appdata v)
   {
    v2f o;
    //对顶点进行往X正方向偏移5个单位是为了离开旋转中心点,不然翻页时的旋转点是会在纸张中心进行围绕Z轴旋转(Z轴是纸张垂直线)
    v.vertex += float4(5, 0, 0, 0);
    float s;
    float c;
    //使用sincos获取 sin(弧度), cos(弧度)  ,radians(角度)=弧度 ,_Angle前加负号是控制旋转方向,可根据DX是右手法则顺时针旋转,故应该逆向翻页要取负数
    sincos(radians(-_Angle), s, c);
    //围绕Z轴旋转变换矩阵
    float4x4 rotate = {
     c,s,0,0,
     -s,c,0,0,
     0,0,1,0,
     0,0,0,1
    };
    //weight:_Angle在[0,90]变换区间时,weight会从0变为1;_Angle在[90,180]变换区间时,weight会从1变为0. 
    //weight可理解为是刚开始翻页(0°)到翻页到垂直时(90°)时,对其弯曲程度从小变大;(这个是对顶点Y值影响的结果)
    //同理,收缩程度也是一样道理
    float weight = 1 - abs(90 - _Angle) / 90;
    v.vertex.y += sin(v.vertex.x * _WaveLength) * weight * _WeightY;
    v.vertex.x -= v.vertex.x * weight * _WeightX;
    //在进行偏移之后,再对顶点进行围绕Z轴旋转_Angle角度
    v.vertex = mul(rotate, 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唯一的差别是:片元着色器的采样纹理改为_SrcTex(背面图)
  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;
   };
 
   sampler2D _SrcTex;
   float4 _MainTex_ST;
   float _Angle;
   float _WeightY;
   float _WeightX;
   float _WaveLength;
   v2f vert(appdata v)
   {
    v2f o;
    v.vertex += float4(5, 0, 0, 0);
    float s;
    float c;
    //使用sincos获取 sin(弧度), cos(弧度)  ,radians(角度)=弧度
    sincos(radians(-_Angle), s, c);
    //围绕Z轴旋转变换矩阵
    float4x4 rotate = {
     c,s,0,0,
     -s,c,0,0,
     0,0,1,0,
     0,0,0,1
    };
    float weight = 1 - abs(90 - _Angle) / 90;
    v.vertex.y += sin(v.vertex.x * _WaveLength) * weight * _WeightY;
    v.vertex.x -= v.vertex.x * weight * _WeightX;
    v.vertex = mul(rotate, 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(_SrcTex, i.uv);
    return col;
   }
   ENDCG
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: Unity Shader实现3D翻页效果

本文链接: https://www.lsjlt.com/news/131242.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Unity Shader实现3D翻页效果
    本文实例为大家分享了Unity Shader实现3D翻页效果的具体代码,供大家参考,具体内容如下 参考文章:UnityShader使用Plane实现翻书效果 效果图: 原理:Sh...
    99+
    2022-11-12
  • Unity中怎么利用Shader实现一个3D翻页效果
    本篇文章给大家分享的是有关Unity中怎么利用Shader实现一个3D翻页效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。效果图:原理:Shader顶点动画在顶点着色器进行对...
    99+
    2023-06-20
  • Unity Shader实现模糊效果
    本文实例为大家分享了Unity Shader实现模糊效果的具体代码,供大家参考,具体内容如下 今天分享一个超简单实现模糊效果的方法,先上图: 核心代码就这句: 注意要在3.0以上...
    99+
    2022-11-12
  • 基于Android实现3D翻页效果
    最近做了一个简单的3D效果翻页特效,先说说我的思路吧,首先我这个翻页效果并不是两个Activity之间的跳转,而是在同一个activity类切换不同的view而已。我现在的做法...
    99+
    2022-06-06
    3d Android
  • Unity Shader实现黑幕过场效果
    本文实例为大家分享了Unity Shader实现黑幕过场效果的具体代码,供大家参考,具体内容如下 一、效果演示 二、实现 Shader:黑幕过场着色器 //黑幕过场着色器 ...
    99+
    2022-11-12
  • Unity Shader实现径向模糊效果
    在游戏里面有很多模糊效果,像赛车类游戏。当你加速时,会发现2边的场景变模糊。如下图: 今天也来做一下径向模糊效果,首先创建一个Material,给它添加一个纹理后将Material...
    99+
    2022-11-12
  • Unity Shader怎么实现模糊效果
    本篇内容主要讲解“Unity Shader怎么实现模糊效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Unity Shader怎么实现模糊效果”吧!本文实例为大家分享了Unity Shader...
    99+
    2023-06-20
  • Unity Shader怎么实现径向模糊效果
    本篇内容主要讲解“Unity Shader怎么实现径向模糊效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Unity Shader怎么实现径向模糊效果”吧!在游戏里面有很多模糊效果,像赛车类游...
    99+
    2023-06-20
  • 利用unity怎么实现一个翻页效果
    这期内容当中小编将会给大家带来有关利用unity怎么实现一个翻页效果,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。创建物体ToPanel;添加组件ScrollRect,在下面创建一个空物体用来装需要移动的...
    99+
    2023-06-06
  • Unity Shader实现线框效果的制作步骤
    目录一、首先模型本身需要特殊处理二、编写Shader三、讲解先上图看看效果: 下面详细分享一下制作步骤吧: 一、首先模型本身需要特殊处理 二、编写Shad...
    99+
    2022-11-12
  • Unity实现仿3D轮转图效果
    本文实例为大家分享了Unity实现仿3D轮转图效果的具体代码,供大家参考,具体内容如下 一、效果演示 二、实现思路 ——获取位置:可以将每个item的运行轨...
    99+
    2022-11-12
  • CSS3如何实现3D翻书效果
    小编给大家分享一下CSS3如何实现3D翻书效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0)类似...
    99+
    2022-10-19
  • css3如何实现3d翻转效果
    今天小编给大家分享的是css3如何实现3d翻转效果,相信很多人都不太了解,为了让大家更加了解,所以给大家总结了以下内容,一起往下看吧。一定会有所收获的哦。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计...
    99+
    2023-06-14
  • Unity Shader实现动态过场切换图片效果
    本文实例为大家分享了Unity Shader实现动态过场切换图片的具体代码,供大家参考,具体内容如下 一、简单介绍 Shader Language的发展方向是设计出在便携性方面可以和...
    99+
    2022-11-12
  • 怎么使用纯CSS实现书籍3D翻页效果
    这篇文章主要介绍了怎么使用纯CSS实现书籍3D翻页效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。使用纯CSS实现书籍3D翻页效果,代码如下:<!doctype&nb...
    99+
    2023-06-08
  • Android集成Unity,实现3D看房效果
    引子 前几天有人找小编问能不能把3D模型放入到Unity中,再把Unity放入到Android APP中,在APP中实现观看房屋家具的功能,这次小编便来分享一下吧,如果还需要了解Android 集成Unity知识的,可以翻我主页其他文章 ...
    99+
    2023-08-31
    android unity 3d
  • CSS如何实现卡片3D翻转效果
    这篇文章将为大家详细讲解有关CSS如何实现卡片3D翻转效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果:代码:html:<div class="main">...
    99+
    2023-06-08
  • css3中怎么实现图形3d翻转效果
    css3中怎么实现图形3d翻转效果,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。<!DOCTYPE html&...
    99+
    2022-10-19
  • Bootstrap如何实现翻页效果
    这篇文章主要介绍Bootstrap如何实现翻页效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!效果图最后一页时:最开始一页时:实现①、翻页组件的布局<%@ page...
    99+
    2022-10-19
  • 使用CSS3怎么实现一个3D翻转效果
    本篇文章给大家分享的是有关使用CSS3怎么实现一个3D翻转效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。第一步非常简单,我们简单画1个演示方块,为其 添加transitio...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作