OpenGL shader 实现“百叶窗”特效

字节流动

共 347字,需浏览 1分钟

 ·

2022-05-14 12:51

动态图

代码及详解:

代码很简单,让我们直接来看代码和注释

varying vec2 texcoord;

// uniform float iGlobalTime;
// uniform vec2 iResolution;

#define PI 3.1415926f
#define PIx2 2.*PI
#define PI_HALF PI/2.

#iChannel0 "file://./yeah_0.jpg"
#iChannel1 "file://./yeah.jpg"

void main()
{
    vec2 uv = gl_FragCoord.xy / iResolution.xy;
    float sinDegree = sin(PI_HALF * iTime); ///< 控制百叶窗随时间的开合变化
    float sinDegreeOffset = sinDegree * .1;  

    vec4 firstColor = texture2D(iChannel0, uv);
    vec4 secondColor = texture2D(iChannel1, uv);

    gl_FragColor = firstColor;

    /// @note 绘制多条 “线”
    float alpha = 0., beta = 0., gamma = 0.;
    for (float offset = 0.0 ; offset < 2.2; offset += 0.2)
    {
        /// @note y 方向上平移 offset 得到新的线条, 公式 y = -x + offset;
        float tmp = -uv.x + offset; 

        /// @note 在两条线之间(随时间开合)的区间
        if (uv.y > (tmp - sinDegreeOffset) && uv.y < (tmp + sinDegreeOffset))      
        {
            gl_FragColor = secondColor;
        }
    }
}

核心设计思想为

其中 y = -x + offset 的函数图如下所示

image.png

接着通过调节 sinDegreeOffset 控制两条线之间所夹的区域进行 “开闭”

image.png

原文链接: https://juejin.cn/post/7059024333565329444

作者:ShaderJoy


推荐:

Android FFmpeg 实现带滤镜的微信小视频录制功能

全网最全的 Android 音视频和 OpenGL ES 干货,都在这了

一文掌握 YUV 图像的基本处理

抖音传送带特效是怎么实现的?

所有你想要的图片转场效果,都在这了

面试官:如何利用 Shader 实现 RGBA 到 NV21 图像格式转换?

我用 OpenGL ES 给小姐姐做了几个抖音滤镜

浏览 115
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报