详解OpenGL Shader彩虹条纹效果的实现

目录
  • 前言
  • 回顾
  • 效果实现
    • 增加条纹
    • 角度变化
  • 拓展

前言

在一款图片处理软件colorow中发现彩虹效果滤镜感觉蛮有意思。

在OpenGL Shader系列更新到现在尝试通过之前积累的知识点来自行实现效果。

回顾

之前使用过内置函数smoothstep可实现数值过渡效果。如下代码所示实现在坐标0.5分割黑色和白色分界。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = vec3(0.);
    float glow = smoothstep(0.5001,0.5002,uv.x);
    gl_FragColor = vec4(color,1.);
}

可知函数smoothstep能用于做分割效果。

分别在0.,0.2、0.05,0.25、0.15,0.3实现rgb色值效果，如下代码使用if-else来判断坐标。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec3 color = vec3(0.);
    float glow1 = 1. - smoothstep(0.,0.2,uv.x);
    float glow2 = uv.x > 0.05 ? 1. - smoothstep(0.05,0.25,uv.x) : 0.;
    float glow3 = uv.x > 0.15 ? 1. - smoothstep(0.15,0.3,uv.x) : 0.0;
    color += vec3(glow1,0.,0.)  + vec3(0.,glow2,0.) + vec3(0.,0.,glow3);
    gl_FragColor = vec4(color * 0.5,1.);
}

由于uv.x值是线性的所以呈现结果上来看并不自然。可以通过使用采用sin或是cos来增强过渡效果。

float glow1 = uv.x < 0.15 ? 1. - smoothstep(0.,1.,abs(sin(uv.x * 30.))) : 0.;
uv.x += 0.01;
float glow2 =  uv.x < 0.15 ? 1. - smoothstep(0.,1.,abs(sin(uv.x * 30.))) : 0.;
uv.x += 0.01;
float glow3 = uv.x < 0.15 ? 1. - smoothstep(0.,1.,abs(sin(uv.x * 30.))) : 0.;

效果实现

增加条纹

以上大致上实现了RGB彩条效果，若希望实现栅栏效果则需要将坐标平均分割出一段段。这里将再次使用sin或是cos配合abs只取正数，实现均匀分布的[0,1]取值范围，让取值为1或是0作为分割点即可。因为uv.x取值是[0,1]分割需要多段则需要将范围扩大将uv.x取值变更为[0,30]即可。

 // 色值大小计算
float v(in vec2 uv, float d, float o){
	 return 1.0-smoothstep(0.0,1.,abs(sin(uv.x * 30.)));
}
vec4 b(vec2 uv, float o) {
 // 坐标
 float d =  uv.x;
 return vec4(v(uv, d, o), 0.0, 0.0, 0.1) +  // 红色
 vec4( 0.0,v(uv + vec2(0.4,0.), d, o), 0.0, 0.1) + // 绿色
 vec4( 0.0,0.,v(uv + vec2(0.8,0.), d, o), 0.1);   // 蓝色
}
void main() {
    float iTime = 1.;
    vec2 uv = gl_FragCoord.xy /iResolution.x;
    gl_FragColor = b(uv, iTime)*0.2; // 降低亮度
}

角度变化

之前在简单转场效果中有介绍过对角线实现方法，这里对角线条纹实现采用distance内置函数，distance(x,y)等同于length(x-y)。 在这里使用smoothstep(0.0,1.,abs(sin(distance(uv.x ,uv.y)* 30.))),当x=y时v返回值为1表示最大，因此实现对角线效果。这里可以通过修改uv.y百分比来调节角度。

float v(in vec2 uv, float d, float o){
    return 1.0-smoothstep(0.0,1.,abs(sin(distance(uv.x ,uv.y)* 30.)));
}

拓展

此外增加sin运用还能实现彩虹扭曲效果。

水平

对角线

扭曲

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

赞 (0)

相关推荐

  • 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抗锯齿的实现

    详解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实例分析（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实例分析（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实例分析（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实例分析（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实现光照发光体特效

    OpenGL Shader实现光照发光体特效

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

  • 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彩虹条纹效果的实现

    目录 前言 回顾 效果实现 增加条纹 角度变化 拓展 前言 在一款图片处理软件colorow中发现彩虹效果滤镜感觉蛮有意思. 在OpenGL Shader系列更新到现在尝试通过之前积累的知识点来自行实现效果. 回顾 之前使用过内置函数smoothstep可实现数值过渡效果.如下代码所示实现在坐标0.5分割黑色和白色分界. void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec3 color = vec3(0.); float g

  • 一文详解 OpenGL ES 纹理颜色混合的方法

    一文详解 OpenGL ES 纹理颜色混合的方法

    目录 一.混合API 二.参数含义 2.1 举个栗子 2.2 参数含义 三. 几种常用混合方式效果 3.1 混合(GL_ONE, GL_ZERO) 3.2 混合(GL_ONE, GL_ONE) 3.3 混合(GL_ONE, GL_ONE_MINUS_DST_ALPHA) 3.4 混合 (GL_SRC_ALPHA, GL_ONE) 3.5 混合 (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA) 在OpenGL中绘制的时候,有时候想使新画的颜色和已经有的颜色按照一定的方式

  • 详解angularjs实现echart图表效果最简洁教程

    详解angularjs实现echart图表效果最简洁教程

    本文介绍了详解angularjs实现echart图表效果最简洁教程,分享给大家,具体如下: ehcart是百度做的数据图表,基于原生js.接口和配置都写的很好很易读,还可以用于商用. 一 echart包引用 下载解压,放入lib中. 下载地址:echart_jb51.rar 并在index.html中引用如图两个js文件. app.js中引用angular-echarts 二 页面 html页面 <!--饼图--> <div> <donut-chart config=&quo

  • 详解Android 裸眼3D效果View控件

    详解Android 裸眼3D效果View控件

    描述:这是一个裸眼3D效果的控件View. Tips:本项目代码部分逻辑参考于其他文章(自如的3D裸眼实现),众人拾柴火焰高,希望大家能多多补充. 项目代码:https://gitee.com/jiugeishere/uidesign 控件效果如下: 实现功能: 实现三层图片叠加效果(裸眼3D效果) 可设置每层图片移动速率 可设置每层图片移动的限制度数 可直接设置图片或引入图片 设计核心: 主要的设计核心是依赖于传感器对手机晃动的监听(重力感应监听器),对每层图片进行不同的移动,实现仿3D效果.

  • 详解vue中v-bind:style效果的自定义指令

    自定义指令 1.什么是自定义指令 以 v- 为前缀,然后加上自己定义好的名字组成的一个指令就是自定义指令.为什么要有自定义指令呢?在有些时候,你仍然需要对普通的DOM元素进行底层的操作,这个时候就可以用到自定义指令. 2.自定义指令的语法 全局自定义指令 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时-- inserted: function (el) { // 聚焦元素 el.focus() } })

  • 详解Vue中过度动画效果应用

    详解Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name="fade"></transition> 1.v-enter: 定义进入过渡的开始状态.在元素被插入时生效,在下一个帧移除. 2.v-enter-active: 定义进入过渡的结束状态.在元素被插入时生效,在 transition/animation 完成之后移除. 3.v-lea

  • 详解js图片轮播效果实现原理

    本文实例讲述了js图片轮播效果实现原理,分享给大家供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="tex

  • 详解C语言的预处理效果

    目录 前言 一.预定义符号 二.#define 1.宏 2.宏与函数 3.带副作用的宏参数 4. 宏和函数的不同 5.#undef 三.条件编译 四.文件包含 1.函数库文件包含 2.本地文件包含 总结 前言 编译一个C语言程序涉及很多步骤.其中第一个步骤被称为预处理.C语言的预处理器在源代码编译之前对其进行一些文本性质的操作.它的主要任务包括删除注释.插入被#include指令包含的文件内容.定义和替换由#define指令定义的符号,同时确定代码的部分内容是否应该根据一些条件编译指令进行编译.

  • OpenGL Shader实现物件材料效果详解

    目录 需求背景 需求实现 功能拓展 高级实现 结果总结 需求背景 在一些主流app上有一些比较特殊的滤镜效果,例如灰尘.塑料封面.光影效果等.在此之前一直困惑这类滤镜效果是如何实现的,单纯glsl脚本来绘制难度似乎有点大.例如下面截取平台的几种效果像是在图片上方覆盖了一个透明图层. 需求实现 glsl脚本实现其实特别简单,加载两个纹理同时对两个纹理的rgb进行相加即可. void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; vec4

随机推荐