ShaderJoy —— 褪色效果【GLSL】

效果图

微信截图_20210627174651.png

原图

19.jpg

完整代码与注释

#iChannel0 "../images/19.jpg"

#iUniform float scale = .5 in {0., 1.}

const vec4 c = vec4(0.2124, 0.7153, 0.0722, 0.0);

vec4 bleach(vec4 p, vec4 m, vec4 s)
{
    vec4 a = vec4(1.0);
    vec4 b = vec4(2.0);

    float l = dot(m, c); ///< 计算灰度

    /// @note 提取亮部比例
    float x = clamp((l - 0.45) * 10.0, 0.0, 1.0);

    /// @note 提升亮部对比
    vec4 t = b * m * p; 

    /// @note 提升暗部对比
    vec4 w = a - (b * (a - m) * (a - p));

    /// @note 根据亮部比例混合
    vec4 r = mix(t, w, vec4(x));
    
    /// @note 和原图进行混合
    return mix(m, r, s);
}

void mainImage( out vec4 fragColor, vec2 fragCoord )
{
    vec2 uv = fragCoord.xy / iResolution.xy;
    vec4 m = texture(iChannel0, uv);
    vec4 p = vec4(vec3(dot(m, c)), m.a); ///< 灰度图 + 透明度

    fragColor = bleach(p, m, vec4(scale));
}
复制代码

其中 提升暗部提升亮部 的简化函数示意图分别如下所示

  • 提升暗部

微信截图_20210627174651.png

  • 提升亮部

微信截图_20210627174651.png

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享