iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >UnityShader使用Plane实现翻书效果
  • 267
分享到

UnityShader使用Plane实现翻书效果

2024-04-02 19:04:59 267人浏览 薄情痞子
摘要

本文实例为大家分享了UnityShader使用Plane实现翻书效果的具体代码,供大家参考,具体内容如下 之前在网上看到一个Shadr可以实现旋转效果,就拿来实现一个翻书效果。解决办

本文实例为大家分享了UnityShader使用Plane实现翻书效果的具体代码,供大家参考,具体内容如下

之前在网上看到一个Shadr可以实现旋转效果,就拿来实现一个翻书效果。解决办法是用不同模型的显示与隐藏,像序列帧一样,为了实现效果感觉实现起来很繁琐且占用资源,后期优化可考虑用对象池解决。今天就试着用vertex shader来实现一下,互相交流学习,大神勿喷。

实现简单的翻书效果大概需要三步:

1.Plane的扭曲

2.Plane的旋转

3.正反面的采样

Plane的扭曲:

翻书的效果大概是,中间向外突出,X轴方向的正方向会向后偏移。

X轴负方向边沿是保持不动的,且扭曲程度跟随旋转角度增加又减小,90度为最大值。

Plane的旋转:

根据Plane的顶点X的范围(-5,5)

Plane的贴图采样:

用了两个Pass通道来实现,一个是后面剔除,一个是前面剔除。分别对两个图片采样。

下面是Shader


// Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)'

Shader "Personal/PageTurning" {
 Properties 
 {
  _Color ("Color", Color) = (1,1,1,1)
  _MainTex("MainTex",2D)="White"{}
  _SecTex("SecTex",2D)="White"{}
  _Angle("Angle",Range(0,180))=0
  _Warp("Warp",Range(0,10))=0
  _WarpPos("WarpPos",Range(0,1))=0
  _Downward("Downward",Range(0,1))=0
 }
 SubShader
 {
  pass
  {
   Cull Back

   CGPROGRAM
   #pragma vertex vert 
   #pragma fragment frag 
   #include "UnityCG.cginc"

   struct v2f 
   {
    float4 pos : POSITioN;
    float2 uv : TEXCOORD0;
   };
   fixed4 _Color;
   float _Angle;
   float _Warp;
   float _Downward;
   float _WarpPos;
   sampler2D _MainTex;
   float4 _MainTex_ST;

   v2f vert(appdata_base v)
   {
    v2f o;
    v.vertex += float4(5,0,0,0);
    float s;
    float c;
    sincos(radians(-_Angle),s,c);
    float4x4 rotate={   
    c,s,0,0,
    -s,c,0,0,
    0,0,1,0,
    0,0,0,1};
    float rangeF=saturate(1 - abs(90-_Angle)/90);
    v.vertex.y += -_Warp*sin(v.vertex.x*0.4-_WarpPos* v.vertex.x)*rangeF;
    v.vertex.x -= rangeF * v.vertex.x*_Downward;
    v.vertex = mul(rotate,v.vertex);
    
    v.vertex += float4(-5,0,0,0);
    o.pos = UnityObjectToClipPos(v.vertex);
    o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
    return o;
   }

   fixed4 frag(v2f i):COLOR
   {
    fixed4 color = tex2D(_MainTex,-i.uv);
    return _Color * color;
   }


   ENDCG
  }

  pass
  {
   Cull Front

   CGPROGRAM
   #pragma vertex vert 
   #pragma fragment frag 
   #include "UnityCG.cginc"

   struct v2f 
   {
    float4 pos : POSITION;
    float2 uv : TEXCOORD0;
   };
   fixed4 _Color;
   float _Angle;
   float _Warp;
   float _Downward;
   float _WarpPos;
   sampler2D _SecTex;
   float4 _MainTex_ST;

   v2f vert(appdata_base v)
   {
    v2f o;
    v.vertex += float4(5,0,0,0);
    float s;
    float c;
    sincos(radians(-_Angle),s,c);
    float4x4 rotate={   
    c,s,0,0,
    -s,c,0,0,
    0,0,1,0,
    0,0,0,1};
    float rangeF=saturate(1 - abs(90-_Angle)/90);
    v.vertex.y += -_Warp*sin(v.vertex.x*0.4-_WarpPos* v.vertex.x)*rangeF;
    v.vertex.x -= rangeF * v.vertex.x*_Downward;
    v.vertex = mul(rotate,v.vertex);
    
    v.vertex += float4(-5,0,0,0);
    o.pos = UnityObjectToClipPos(v.vertex);
    o.uv = TRANSFORM_TEX(v.texcoord,_MainTex);
    return o;
   }

   fixed4 frag(v2f i):COLOR
   {
    float2 uv = i.uv;
    uv.x = -uv.x;
    fixed4 color = tex2D(_SecTex,-uv);
    return _Color * color;
   }
   ENDCG
  }
 }
}

动态修改这个值就可以达到Plan的翻转

下面我们实现翻书效果

我们接下来要用DOTween,不明白DOTween可百度下来了解使用这里就不详解;

创建Resources文件夹 在内创建子文件夹FrontTextur(正面)和VersoTextur(反面)用来存放一本书的正反面图片 把自己准备的图片导入 为了方面动态加载我都用数字代替第几页

接下来我们创建一个Plan位置归零

创建材质球PageTurning2

然后再复制一个改名PageTurning3

把刚才创建的Plan添加材质球PageTurning3

然后将Plan作为预设拖入Resources。

删除Plan,然后重新创建一个Plan添加材质球PageTurning2。

接下来用下面代码实现翻书


using UnityEngine;
using DG.Tweening;
 
public class PageTurning : MonoBehaviour
{
    private Material m_Material;
    private int nowPage = 1; //最下面页码
    private int lastPage;   //已经翻过的
    private int allPage = 10;   //所有的页数
    private float Thickness = 0; //书的厚度
 
    void Start ()
    {
        m_Material = GetComponent<MeshRenderer>().material;
        Texture ShowFront =  Resources.Load("AllTextur/FrontTextur/" + nowPage.ToString(), typeof(Texture)) as Texture;
        Texture ShowVerso = Resources.Load("AllTextur/VersoTextur/" + nowPage.ToString(), typeof(Texture)) as Texture;
         m_Material.SetTexture("_MainTex", ShowFront);
         m_Material.SetTexture("_SecTex", ShowVerso);
    }
    
    public void Turning()
    {
        nowPage += 1;    
        if (nowPage>10)   //设置阈值
        {
            nowPage = 1;
        }
        lastPage = nowPage - 1;
        if (lastPage < 1)
        {
            lastPage = allPage;
        }
        #region  翻动的页面
 
        Material m_Material2 = (Instantiate(Resources.Load("Plane"),new Vector3(0, Thickness+=0.001f, 0), QuaterNIOn.identity) as GameObject).GetComponent<MeshRenderer>().material;
 
        m_Material2.SetFloat("_Angle", 0);      //DoTween做旋转动画
        m_Material2.DOFloat(180, "_Angle", 2);
        
        //m_Material2.name = "当前Material"+ lastPage;
        Texture ShowFrontLast = Resources.Load("AllTextur/FrontTextur/" + lastPage.ToString(), typeof(Texture)) as Texture;  //Resources加载正面图片
        Texture ShowVersoLast = Resources.Load("AllTextur/VersoTextur/" + lastPage.ToString(), typeof(Texture)) as Texture;  //Resources加载反面图片
        m_Material2.SetTexture("_MainTex", ShowFrontLast);   //更改材质的正面 
        m_Material2.SetTexture("_SecTex", ShowVersoLast);    //更改材质球的反面
 
        #endregion
 
        Texture ShowFront = Resources.Load("AllTextur/FrontTextur/" + nowPage.ToString(), typeof(Texture)) as Texture;    //Resources加载正面图片
        Texture ShowVerso = Resources.Load("AllTextur/VersoTextur/" + nowPage.ToString(), typeof(Texture)) as Texture;   //Resources加载反面图片
        m_Material.SetTexture("_MainTex", ShowFront);       //更改材质求的正面
        m_Material.SetTexture("_SecTex", ShowVerso);       //更改材质球的反面
        //m_Material.name = "当前Material"+nowPage.ToString();
 
       
    }
}

把这个代码挂载到刚创建的Plan上

创建一个 UI的Button绑定脚本PageTurning上的 Turning方法。这样就实现了翻书的效果。

现在只做了往后翻书效果,如果想做往前翻的效果可把每次创建的Plan加载到集合中然后从集合中修改他们的材质球


m_Material.SetFloat("_Angle", value)

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

--结束END--

本文标题: UnityShader使用Plane实现翻书效果

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

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

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

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

下载Word文档
猜你喜欢
  • UnityShader使用Plane实现翻书效果
    本文实例为大家分享了UnityShader使用Plane实现翻书效果的具体代码,供大家参考,具体内容如下 之前在网上看到一个Shadr可以实现旋转效果,就拿来实现一个翻书效果。解决办...
    99+
    2022-11-12
  • CSS3如何实现3D翻书效果
    小编给大家分享一下CSS3如何实现3D翻书效果,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!先上效果图:(样式有点丑,可以忽略一下下,效果出来了就好,后期加到其他项目中方便更改0.0)类似...
    99+
    2022-10-19
  • 怎么用vue2.x+turn.js实现翻书效果
    这篇文章主要讲解了“怎么用vue2.x+turn.js实现翻书效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用vue2.x+turn.js实现翻书效果”吧!vue中使用turn.js...
    99+
    2023-06-26
  • JS怎么实现图片翻书效果
    这篇文章主要介绍JS怎么实现图片翻书效果,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码如下所示:<html xmlns="http://www.w3...
    99+
    2022-10-19
  • 如何使用JQuery的turn.js库来实现翻书效果
    这篇文章主要介绍“如何使用JQuery的turn.js库来实现翻书效果”,在日常操作中,相信很多人在如何使用JQuery的turn.js库来实现翻书效果问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操...
    99+
    2022-10-19
  • 怎么使用纯CSS实现书籍3D翻页效果
    这篇文章主要介绍了怎么使用纯CSS实现书籍3D翻页效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。使用纯CSS实现书籍3D翻页效果,代码如下:<!doctype&nb...
    99+
    2023-06-08
  • javaScript+turn.js如何实现图书翻页效果
    小编给大家分享一下javaScript+turn.js如何实现图书翻页效果,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!首先附上...
    99+
    2022-10-19
  • JS实现图片翻书效果示例代码
    picture.html 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <...
    99+
    2022-11-15
    JS 图片翻书
  • vue怎么实现书本翻页动画效果
    本文小编为大家详细介绍“vue怎么实现书本翻页动画效果”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue怎么实现书本翻页动画效果”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果如下:关键字transform...
    99+
    2023-06-29
  • vue实现书本翻页动画效果实例详解
    偶然兴起,想要用vue来做一个书本的组件,有了这个想法后边开始动手,先简单地实现基本的效果,为后续封装为组件进行准备工作,实现该效果的要使用vue + css + JavaScri...
    99+
    2022-11-13
  • Android使用ViewPager实现翻页效果
    本文实例为大家分享了Android使用ViewPager实现翻页效果的具体代码,供大家参考,具体内容如下 效果如图所示: 代码实现: 1.布局代码:activity_view_pa...
    99+
    2022-11-13
  • Android自定义控件eBook实现翻书效果实例详解
    本文实例讲述了Android自定义控件eBook实现翻书效果的方法。分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book...
    99+
    2022-06-06
    Android
  • 怎么用jQuery插件Turn.js实现移动端电子书翻页效果
    本篇内容主要讲解“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用jQuery插件Turn.js实现移动端电子书翻页效果”吧!先来...
    99+
    2023-07-04
  • 怎么使用html+css实现页面书本翻页特效
    本篇内容主要讲解“怎么使用html+css实现页面书本翻页特效”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用html+css实现页面书本翻页特效”吧!效果:实现:1.定义标签,shu是书...
    99+
    2023-07-05
  • JS+CSS实现超漂亮的动态翻书效果(思路详解)
    目录前言思路准备正文一、CSS实现1、搭建基本框架2、编写CSS二、JS实现总结前言 本文将带大家来实现一个非常有趣的案例——打开书本效果。我们平常冲浪时是不...
    99+
    2023-05-20
    js动态翻书效果 js翻书效果
  • 如何使用CSS实现图片翻转效果
    在现代网站设计和开发中,图片翻转效果已经成为了一个非常流行和常见的设计元素。通过这种效果,用户可以更加直观地感受到网站的活力和动态感。在本文中,我们将重点讨论如何使用CSS实现这种图片翻转效果。首先,我们需要明确一下CSS3中提供了两种方式...
    99+
    2023-05-14
  • 使用CSS实现卡片翻转效果的技巧
    使用CSS实现卡片翻转效果的技巧CSS是前端开发中最常用的技术之一,它不仅可以美化页面,还可以实现一些炫酷的特效。其中,卡片翻转效果是一种非常常见且具有吸引力的效果。本文将介绍如何使用CSS来实现卡片翻转效果,并提供具体的代码示例。基本结构...
    99+
    2023-11-21
    CSS卡片翻转效果
  • 使用CSS3怎么实现一个3D翻转效果
    本篇文章给大家分享的是有关使用CSS3怎么实现一个3D翻转效果,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。第一步非常简单,我们简单画1个演示方块,为其 添加transitio...
    99+
    2023-06-08
  • jQuery插件分享:Turn.js实现一个移动端电子书翻页效果
    怎么实现一个炫酷的翻书效果?下面本篇文章给大家分享一个jQuery插件--Turn.js,介绍一下怎么用Turn.js 实现移动端电子书翻页项目,希望对大家有所帮助!先来看一下效果:关于Turn.js它是一个轻量级的 (15kb) jQue...
    99+
    2023-05-14
    jquery turn.js
  • 使用JetpackCompose实现翻转卡片效果流程详解
    目录介绍执行ML Kit银行卡识别输出结论如何使用 Jetpack Compose 创建翻转卡片效果 介绍 在电子商务和银行应用程序中输入卡信息是很常见的情况。我认为让用户更轻松地...
    99+
    2023-05-19
    Jetpack Compose翻转卡片 Jetpack Compose翻转效果
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作