Unity Shader实现动态过场切换图片效果

本文实例为大家分享了Unity Shader实现动态过场切换图片的具体代码,供大家参考,具体内容如下

一、简单介绍

Shader Language的发展方向是设计出在便携性方面可以和C++、Java等相比的高级语言,“赋予程序员灵活而方便的编程方式”,并“尽可能的控制渲染过程”同时“利用图形硬件的并行性,提高算法效率”。

本文介绍,如何使用 shader ,动态过场形式切换图片的一点简单效果。

二、实现原理

1、通过时间叠加判断,当 值小于 主图 uv 的时候,进行切换图的渲染

// 过场切换的位置
float curPos = _Time.y*_Speed;

if(curPos < i.uv.x){
 col = tex2D(_CutTex,i.uv);
}

三、注意事项

1、 当小于 x,渲染_CutTex(开始都是小于 x的,开始渲染_CutTex), 随着时间变化,切换为 _MainTex

四、效果预览

五、实现步骤

1、打开Unity,新建一个工程

2、导入素材,和新建shader,并对应新建材质

3、编写好shader,把材质对应赋值

4、场景中添加一个 Quad ,并把材质赋给Quad,用来显示

5、运行场景,效果如上

六、关键代码

Shader "Unlit/CutEffect"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
  _CutTex("Cut Tex",2D)="white"{}

  // 切换速度
  _Speed("speed",Range(-1,1))=0.2

    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        LOD 100

        Pass
        {
            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;
   sampler2D _CutTex;
   float _Speed;

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;

                return o;
            }

            fixed4 frag (v2f i) : SV_Target
            {
                // sample the texture
                fixed4 col = tex2D(_MainTex,i.uv);

    // 过场切换的位置
    float curPos = _Time.y*_Speed;
    // 当小于 x,渲染_CutTex(开始都是小于 x的,开始渲染_CutTex),
    // 随着事件变化,切换为 _MainTex
    if(curPos < i.uv.x){
     col = tex2D(_CutTex,i.uv);
    }

                return col;
            }
            ENDCG
        }
    }
}

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

(0)

相关推荐

  • Unity Shader实现黑幕过场效果

    本文实例为大家分享了Unity Shader实现黑幕过场效果的具体代码,供大家参考,具体内容如下 一.效果演示 二.实现 Shader:黑幕过场着色器 //黑幕过场着色器 Shader "Custom/BlackScreenSpread" { Properties { _Color("Main Color", Color) = (1,1,1,1) _MainTex("Base (RGB)", 2D) = "white" {}

  • Unity Shader实现动态过场切换图片效果

    本文实例为大家分享了Unity Shader实现动态过场切换图片的具体代码,供大家参考,具体内容如下 一.简单介绍 Shader Language的发展方向是设计出在便携性方面可以和C++.Java等相比的高级语言,"赋予程序员灵活而方便的编程方式",并"尽可能的控制渲染过程"同时"利用图形硬件的并行性,提高算法效率". 本文介绍,如何使用 shader ,动态过场形式切换图片的一点简单效果. 二.实现原理 1.通过时间叠加判断,当 值小于 主图

  • 使用JavaScript实现点击循环切换图片效果

    废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单击循环切换图片</title> <script> var i = 1; function nextImg(){ i++; //步骤2:获取页面元素 var next = document.getElementById("

  • Unity Shader实现动态雾效果

    Unity Shader学习:动态雾,供大家参考,具体内容如下 先将相机近裁面四个角向量传给shader,再通过观察空间下的深度值和相机位置算出像素在世界坐标系的位置,通过世界空间高度值来设定雾的范围和浓度,然后通过噪声和uv偏移实现扰动效果.得到了类似寂静岭或恶灵附身1的效果. C#部分: using System.Collections; using System.Collections.Generic; using UnityEngine; [ExecuteInEditMode] publ

  • 原生JS实现隐藏显示图片 JS实现点击切换图片效果

    今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <

  • Core Animation一些Demo总结 (动态切换图片、大转盘、图片折叠、进度条等动画效果)

    前一篇总结了Core Animation的一些基础知识,这一篇主要是Core Animation 的一些应用,涉及到CAShapeLayer.CAReplicatorLayer等图层的知识. 先看效果图: 1.切换图片: 2.彩票转盘 3.图片折叠 4.进度条旋转 5.粒子效果 一.切换图片 看起来很复杂的动画,通过少量的计算和编码就可以简单的实现.要做到这一步,必须是需要研究iOS开发中的Core Animation和Core Graphics框架的.日常工作中,对于很多东西不求甚解,只是拿过

  • Unity shader实现遮罩效果

    本文实例为大家分享了Unity shader实现遮罩效果的具体代码,供大家参考,具体内容如下 效果: shader代码: Shader "Custom/Mask" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {}//目标图片,即需要被遮罩的图片 _MaskLayer("Culling Mask",2D) = "white"{}//混合的图片,设置

  • Unity Shader实现序列帧动画效果

    本文实例为大家分享了Unity Shader序列帧动画效果的具体代码,供大家参考,具体内容如下   实现原理 主要的思想是设置显示UV纹理的大小,并逐帧修改图片的UV坐标.(可分为以下四步) 1.我们首先把 _Time.y 和速度属性_Speed 相乘来得到模拟的时间,并使用CG 的floor 函数对结果值取整来得到整数时间time 2.然后,我们使用time 除以_HorizontalAmount 的结果值的商来作为当前对应的行索引,除法结果的余数则是列索引. 3.接下来,我们需要使用行列索引

  • Unity Shader实现翻书效果

    今天实现一个简单的翻书的效果,话不多说,先上一张效果图: 这里就随便用的一张纹理了,我们还是称为"翻木板"吧,哈哈. 实现过程: 其实这个效果实现起来还是挺简单的,大概思路其实就是 让所有顶点都绕Z轴旋转,并且通过正余弦使之带有一点弧度. 下面开始让我们一步一步的实现该效果. 首先打开Unity新建一个工程,场景,并且创建一个名为openBookEffect的Shader文件,删掉原本多余的代码. 第一步,我们先让它绕z轴旋转起来 这里就要用到一个旋转矩阵了,让顶点左乘该矩阵,就能得到

  • jquery淡化版banner异步图片文字效果切换图片特效

    复制代码 代码如下: <pre code_snippet_id="280064" snippet_file_name="blog_20140408_1_8982765" name="code" class="html"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

随机推荐