OpenGL Shader实现简单转场效果详解

目录
  • 转场介绍
  • 渐变转场
  • 切换转场
    • x轴切换
    • y轴切换
    • 对角线切换
  • 位移转场
    • x轴位移
    • y轴位移

转场介绍

转场效果常出现再视频剪辑当中，用于衔接两段视频片段切换的过渡效果。转场常常在两个场景切换中去使用达到酷炫特效的作用。

那么如何在glsl中去实现转场效果？其实转场效果可以理解成两个纹理对象切换的过程。首先提前条件需要两个纹理对象，然后在这两个纹理对象上去实现纹理和纹理之间的切换。

渐变转场

通过mix函数混合两个纹理图像，使用time在[0,1]之间不停变化来控制第二个图片纹理混合的强弱变化从而实现渐变效果。

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = abs(sin(time));
    gl_FragColor = mix(texture1,texture2,progress);
}

切换转场

切换动画和渐变动画同样是使用mix函数来实现效果的。同时结合step函数来判断当前的progress值是否大于uv.x来控制当前绘制纹理是第一个还是第二个从而实现纹理卷帘位移效果。这里是采用了mix和step两个函数相结合来实现动画效果，同样的采用if-else也能够达到相同目的但是之前有提到过在glsl中最好优先考虑使用内置函数来实现效果，减少使用if-else判断语句。

x轴切换

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = abs(sin(time));
    gl_FragColor = mix(texture1,texture2,step(uv.x,progress));
}

y轴切换

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = abs(sin(time));
    gl_FragColor = mix(texture1,texture2,step(uv.y,progress));
}

对角线切换

对角线切换实现同样也是mix和step函数相结合，利用对角线对齐特性x-y=0的特点，当progress值到达0则切换到第二个纹理图像。

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture1 = texture(iChannel1,uv);
    vec4 texture2 = texture(iChannel2,uv);
    float progress = sin(time);
    gl_FragColor = mix(texture1,texture2,step(uv.x - uv.y, - progress));
}

位移转场

切换转场效果是底部纹理位置不动，上层纹理做覆盖来实现的。位移转场是两个纹理对象不重叠，像是类似轮播图的效果，实现效果是同时向着一个方向移动。位移动画对整体纹理做偏移处理，通过progress的值来分配第一个纹理和第二个纹理的占比。

x轴位移

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec2 newUv = uv;
    float progress = abs(sin(time));
    vec4 texture3;
    newUv.x -= progress;
    if(uv.x >= progress){
        texture3 = texture(iChannel1,newUv);
    }else{
        texture3 = texture(iChannel2,newUv);
    }
     gl_FragColor = texture3;
}

y轴位移

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec2 newUv = uv;
    float progress = abs(sin(time));
    vec4 texture3;
    newUv.y -= progress;
    if(uv.y >= progress){
        texture3 = texture(iChannel1,newUv);
    }else{
        texture3 = texture(iChannel2,newUv);
    }
     gl_FragColor = texture3;
}

到此这篇关于OpenGL Shader实现简单转场效果详解的文章就介绍到这了,更多相关OpenGL Shader转场效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解OpenGL Shader抗锯齿的实现

    详解OpenGL Shader抗锯齿的实现

    目录 绘制圆形锯齿问题 smoothstep函数介绍 抗锯齿实现 扩展 自制smoothstep函数抗锯齿 自制linearstep函数抗锯齿 绘制圆形锯齿问题 普通绘制圆形形状时可以看到图形边缘会有明显锯齿现象并不像真实圆形形状一样圆润边缘平滑.在glsl中这种情况是常见情况,这里是可以借助glsl内置函数来消除锯齿现象. vec3 sdfCircle(vec2 uv,float r,vec3 value){ float d = length(uv) - r; return d > 0. ?

  • OpenGL Shader实例分析（2）绘制心脏跳动效果

    本文将介绍怎么用Shader来绘制一个跳动的心脏.这里会涉及到一些数学知识.先看效果图: 源代码如下: // Created by inigo quilez - iq/2013 // License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. // changed by stalendp@gmail.com Shader "shadertoy/Heart" { // see ht

  • OpenGL Shader实例分析（1）Wave效果

    这篇文章主要分析一个Shader,从而感受shader的魅力,并学习相关shader的函数的用法. 先看Shader运行的效果: 下面是代码: Shader "shadertoy/Waves" { //see https://www.shadertoy.com/view/4dsGzH CGINCLUDE #include "UnityCG.cginc" #pragma target 3.0 struct vertOut { float4 pos:SV_POSITIO

  • OpenGL Shader实例分析（3）等待标识效果

    本文实例为大家分享了OpenGL Shader实例,等待标识,不过效率估计不是很高.结果如下: 代码: Shader "stalendp/waitIcons" { CGINCLUDE #include "UnityCG.cginc" #pragma target 3.0 struct v2f { float4 pos:SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(appdata_base v) { v2f o; o.

  • OpenGL Shader实例分析（4）闪光效果

    本文实例为大家分享了OpenGL Shader实例闪光效果的具体代码,供大家参考,具体内容如下 在游戏中,当战斗结束后,对一些获取的宝贝需要进行闪光处理.这篇文章介绍一个进行闪光处理的shader,运行效果如下: 代码如下: Shader "stalendp/imageShine" { Properties{ _image("image", 2D) = "white" {} _percent("_percent", Range

  • OpenGL Shader实现阴影遮罩效果

    OpenGL Shader实现阴影遮罩效果

    目录 smoothstep另一种用法 遮罩效果实现 效果扩展 smoothstep另一种用法 在之前OpenGL Shader-抗锯齿实现文章中所介绍的那样:为了抗锯齿效果可以用smoothstep函数对绘制形状进行平滑过渡来实现.其中也提到了当smoothstep函数中入参a和b范围过大时就会出现渐变效果.如OpenGL Shader-抗锯齿实现中所展示的效果: 遮罩效果实现 看到这个效果后似乎可以利用smoothstep函数中a和b入参取大范围来实现不一样的特效能力.例如可以使用该特点来实现

  • OpenGL Shader实例分析（8）彩色光圈效果

    OpenGL Shader实例分析（8）彩色光圈效果

    本文实例为大家分享了OpenGL实现彩色光圈效果的具体代码,供大家参考,具体内容如下 研究了一个彩色光圈效果,感觉挺不错的,分享给大家,效果如下: 代码如下: Shader "shadertoy/TotalNoob" { //https://www.shadertoy.com/view/XdlSDs Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChannel0("iChannel0&q

  • OpenGL Shader实例分析（7）雪花飘落效果

    OpenGL Shader实例分析（7）雪花飘落效果

    研究了一个雪花飘落效果,感觉挺不错的,分享给大家,效果如下: 代码如下: Shader "shadertoy/Flakes" { // https://www.shadertoy.com/view/4d2Xzc Properties{ iMouse ("Mouse Pos", Vector) = (100,100,0,0) iChannel0("iChannel0", 2D) = "white" {} iChannelReso

  • OpenGL Shader实现光照发光体特效

    OpenGL Shader实现光照发光体特效

    目录 内发光原理 发光体实现 扩展效果 小太阳 光源移动效果 内发光原理 内发光原理简单概况是:采样周边像素alpha取平均值叠加效果.概括来说似乎好像特别简单,但需要一定的理解和消化.发光物体可以当做是一个圆形对象,去采集圆形对象周边像素值.例如已知圆形半径是R,角度是Angle,然后根据半径和角度推导算出当前像素坐标位置,用当前像素坐标位置得到透明度再去做计算. 但其实在阴影遮罩效果中似乎已经介绍过了同样能够通过.不同点在于阴影遮盖是利用圆形绘制向外部晕染而内发光效果是作用于内部. 发光体实

  • OpenGL Shader实现简单转场效果详解

    OpenGL Shader实现简单转场效果详解

    目录 转场介绍 渐变转场 切换转场 x轴切换 y轴切换 对角线切换 位移转场 x轴位移 y轴位移 转场介绍 转场效果常出现再视频剪辑当中,用于衔接两段视频片段切换的过渡效果.转场常常在两个场景切换中去使用达到酷炫特效的作用. 那么如何在glsl中去实现转场效果?其实转场效果可以理解成两个纹理对象切换的过程.首先提前条件需要两个纹理对象,然后在这两个纹理对象上去实现纹理和纹理之间的切换. 渐变转场 通过mix函数混合两个纹理图像,使用time在[0,1]之间不停变化来控制第二个图片纹理混合的强弱变

  • 基于AngularJS的简单使用详解

    Angular Js 的初步认识和使用 一: 1.模块化 定义模块和控制器 ng-app="myapp" controller="myctrl" 指定模型 ng-model="" 获取的属性值: ng-bind="属性名"或者{{属性名}} 2.初始化模块(在Script中进行) var myapp1 =angular.module("myapp",[]); 3.定义模块的控制器,并依赖注入, $scope

  • Python 中 Virtualenv 和 pip 的简单用法详解

    本文介绍了Python 中 Virtualenv 和 pip 的简单用法详解,分享给大家,具体如下: 0X00 安装环境 我们在 Python 开发和学习过程中需要用到各种库,然后在各个不同的项目和作品里可能用的版本还不一样,正因为有这种问题的存在才催生了virtualenv的诞生.virtualenv 可以在电脑上创建一个虚拟环境,可以针对每一个项目创建一个虚拟环境,这样就不用担心各个不同的项目用不同版本的库的时候出现的冲突了. 下面的内容只适用于 Linux/OSX,未经 Windows 环

  • java_object的简单使用详解

    就我们所知道的,java中有子类和父类,子类由于继承父类而形成,那么父类还有没有父类呢?答案是有了,父类的父类就是object类,一切父类都继承了它,那么根据继承的属性,每一个子类都有一个object类,然而,我们不是蒙目地去继承它,继承它是有目的的,我们要使用里面定义的方法,object里面定义了很多方法,详情参考API帮助文档,下面我介绍object里面两种方法,继承而来的方法往往是需要我们重写的. 第一.比如里面的比较方法,用来比较两个对象的地址是否相等,实际比较地址是哈希地址,而这开发中

  • 基于RabbitMQ的简单应用(详解)

    基于RabbitMQ的简单应用(详解)

    虽然后台使用了读写分离技术,能够在一定程度上抗击高并发,但是如果并发量特别巨大时,主数据库不能同时处理高并发的请求,这时数据库容易宕机. 问题: 现在的问题是如何既能保证数据库正常运行,又能实现用户数据的入库操作? 解决方案: 引入rabbitMQ技术: 说明: 当数据库的访问压力过载时,这时会将过载以后的数据先保存到rabbitMQ中.其中的数据结构是队列的形式,先进先出.这时数据库从队列中取数据执行.一直到队列中的数据全部操作完成为止. RabbitMQ就是消息的中间件. RabbitMQ介

  • vue bus全局事件中心简单Demo详解

    1.vue-cli搭建好项目之后,使用npm安装vue-bus  npm install vue-bus 2.在入口文件main.js中全局注册 import Vue from 'vue'; import VueBus from 'vue-bus'; Vue.use(VueBus); 3.传递数据: this.$bus.emit("eventName",data) 4.接收数据: this.$bus.on("eventName",data) 5.注意事项 this的

  • 对vue v-if v-else-if v-else 的简单使用详解

    首先vue.js请注意 2.1.0版本以上方可使用v-else-if <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue.js"></script> </head> <body> <div id="box&q

  • 对python多线程中互斥锁Threading.Lock的简单应用详解

    一.线程共享进程资源 每个线程互相独立,相互之间没有任何关系,但是在同一个进程中的资源,线程是共享的,如果不进行资源的合理分配,对数据造成破坏,使得线程运行的结果不可预期.这种现象称为"线程不安全". 实例如下: #-*- coding: utf-8 -*- import threading import time def test_xc(): f = open("test.txt","a") f.write("test_dxc&quo

  • 对django中foreignkey的简单使用详解

    公司里很多部门,每个部门可以发多条信息,但每条信息只对应一个部门 部门类: class Dep(models.Model): name = models.CharField('小组名称',primary_key=True, blank=True, null=False, max_length =200) def __str__(self): return self.name 信息类: class Main(models.Model): dep = models.ForeignKey(Dep,ve

  • python基础知识（一）变量与简单数据类型详解

    1.1变量 变量的命名规则: 1.只能包含字母.数字.下划线,且不能用数字开头 2.不能使用python关键字 3.简短且具有描述性 1.2字符串 python中用引号引起来的都是字符串,单引号双引号都可以 a.字符串的索引 s = 'ABCDEF' #索引 s1 = s[0] s2 = s[-1] s3 = s[0:4] print(s1) #A print(s2) #F print(s3) #ABC,左闭右开 #打印全部 s4 = s[:] #s[0:] print(s4) s5 = s[0

随机推荐