OpenGL Shader实现阴影遮罩效果

目录
  • smoothstep另一种用法
  • 遮罩效果实现
  • 效果扩展

smoothstep另一种用法

在之前OpenGL Shader-抗锯齿实现文章中所介绍的那样：为了抗锯齿效果可以用smoothstep函数对绘制形状进行平滑过渡来实现。其中也提到了当smoothstep函数中入参a和b范围过大时就会出现渐变效果。如OpenGL Shader-抗锯齿实现中所展示的效果：

遮罩效果实现

看到这个效果后似乎可以利用smoothstep函数中a和b入参取大范围来实现不一样的特效能力。例如可以使用该特点来实现类似于老电影中遮罩效果，在视图边缘出现一层朦胧遮罩中间最亮四周有一层淡淡的阴影效果。

实现原理其实就是利用smoothstep函数入参使用大范围值，在绘制圆基础上改造处理。底色使用白色vec3(1.),阴影遮盖使用黑色vec3(1.)就能达到阴影遮罩效果了。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;

    vec4 texture = texture(iChannel2,uv);
    uv -= 0.5;
    uv.x *= iResolution.x/iResolution.y;
    float m = 0.4;
    m = smoothstep(m-0.2,m+0.2,length(uv) - 0.2);
    vec3 pixel = mix(vec3(1.),vec3(0.),m);
    gl_FragColor = vec4(pixel,1.0);

}

除了采用smoothstep函数实现外，下面还有一种方法也能实现阴影遮罩效果。如下glsl所示 对颜色向量vec4 texture和vignette相乘，相当于改变色值通道亮度达到明暗对比；同时对于取值uv.y-0.5可以理解越接近中心取值越接近为0，那么计算得出的vignette就越大约接近为1。

void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture = vec4(1.);
    float vigAmt = 4.0;
    float vignette = (1.0-vigAmt*(uv.y-0.5)*(uv.y-0.5))*(1.0-vigAmt*(uv.x-0.5)*(uv.x-0.5));
    texture *= vignette;
    gl_FragColor = texture;
}

通过对照也能发现采用圆形公式实现遮罩是有一定圆弧趋势，而另一种遮罩是偏向矩形，在特效效果上略有差异。以此类推肯定还可以根据这种方式来实现星型，爱心等形状遮罩。

smoothstep

vignette

效果扩展

最后可以增加一个time时间入参，通过vigAmt值不断变化vignette强弱来实现忽明忽暗的效果，会有一种在看老电影的感受。

#define time iTime
void main() {
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    vec4 texture = texture(iChannel2,uv);
    float vigAmt = 4.0 + 0.3 * sin(time + 5.0 * cos(time*5.0));
    float vignette = (1.0-vigAmt*(uv.y-0.5)*(uv.y-0.5))*(1.0-vigAmt*(uv.x-0.5)*(uv.x-0.5));
    texture *= vignette;
    gl_FragColor = texture;
}

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

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

    详解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实例分析（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实例分析（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实例分析（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实现物件材料效果详解

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

  • Unity Shader实现纹理遮罩效果

    纹理遮罩用处很多,简单来讲就是允许我们可以保护模型中的某些区域不受某些因素的影响.例如我们有时希望模型表面某些区域的反光强烈一些,而某些区域弱一些.为了得到更加细腻的结果,我们需要用一张遮罩纹理来控制该光照.还有一些情况就是某些模型需要多张纹理混合时,此时使用遮罩纹理可以控制如何混合这些纹理. 具体流程为:通过采样得到遮罩纹理的纹素值,然后使用其中某个或者几个通道的值来与某种表面属性进行相乘.当该通道的值为0时,此时该表面属性不受遮罩纹理的影响. shader代码如下: Shader "Cust

  • Unity shader实现遮罩效果

    Unity shader实现遮罩效果

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

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

    OpenGL Shader实现光照发光体特效

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

  • 详解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 Shader实现简单转场效果详解

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

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

随机推荐