OpenGL Shader-实现亮度、对比度、饱和度效果 转载文章

基础概念

亮度

图像亮度其实就是图像的明暗程度，数字图像f(x，y) = i(x，y) r(x， y)，如果灰度值在[0，255]之间，则f值越接近0亮度越低f值越接近255亮度越高。

对比度

对比度是图像暗和亮的落差值，即图像最大灰度级和最小灰度级之间的差值。图像中明暗区域最亮的白和最暗的黑之间不同亮度层级测量就是灰度反差大小。

饱和度

饱和度对于具有鲜艳颜色，颜色丰富图像影响很大，而对于暗淡颜色或几乎中性颜色影响较小。饱和度也指图像颜色种类数量，图像灰度级是[Lmin，Lmax]，则在Lmin、Lmax的中间值越多，便代表图像的颜色种类多，饱和度也就更高。

锐度

锐度是补偿图像轮廓，增强图像边缘及灰度跳变部分使得图像变得清晰。图像锐化能够增强突出图像的边缘轮廓，画面视觉效果会变得清晰同时也会对好与劣细节放大。

Shader效果调节实现

亮度调节

[0,255]表示每个颜色的亮度等级，调节亮度就是在保证三原色混合比例不变的前提下改变对应颜色明暗度。在获取纹理RGB后相加一个brightness向量即可调节纹理亮度。brightness的调节范围在[0,1]之间。

vec4 textureColor = texture(iChannel3, uv);
float brightness = sin(iTime);
gl_FragColor = vec4((textureColor.rgb + vec3(brightness)), textureColor.w);
复制代码

对比度调节

对比度是一个画面中RGB值最大像素与RGB值最小像素之间差值大小，也就是最亮像素和最暗像素之间的差值。纹理RGB减去一半色值后和contrast值相乘，最后再加上被减去的一半色，contrast的调节范围在[0,2]之间。当contrast为1.0时是原图对比度，contrast越大，画面最亮和最暗像素之间差值越大；contrast越小，画面最亮和最暗像素之间差值越小；

vec4 textureColor = texture(iChannel3, uv);
float contrast = abs(sin(iTime)) * 2.0;
gl_FragColor = vec4((textureColor.rgb - vec3(0.5)) *  contrast + vec3(0.5), textureColor.w);  
复制代码

饱和度调节

saturation的调节范围在[0,2]。当saturation为1.0表示原图，saturation越大色彩越鲜艳，反之色彩越单调。饱和度调节中一个重要参数luminanceWeighting,向量算法是:0.2125 * renderTex.r + 0.7154 * renderTex.g + 0.0721 * renderTex.b。该公式是RGB转YUV的BT709明亮度转换公式，是基于人眼感知的图像灰度处理公式。通过dot算出纹理灰度值，然后通过mix函数混合，通过saturation调节饱和度。

const mediump vec3 luminanceWeighting = vec3(0.2125, 0.7154, 0.0721);
vec4 textureColor = texture(iChannel3, uv);
float saturation = abs(sin(iTime)) * 2.0;
vec3 greyScaleColor = vec3(dot(textureColor.rgb, luminanceWeighting));
gl_FragColor = vec4(mix(greyScaleColor, textureColor.rgb, saturation), textureColor.w);
复制代码

综合调节

结合以上各个参数调节，分别经过亮度、对比度、饱和度进行处理。

    float brightness =  0.;
    float contrast = 1.5;
    float saturation = 1.5;
    vec3 color = textureColor.rgb + vec3(brightness);
    vec3 color1 = (color - vec3(0.5)) *  contrast + vec3(0.5);
    vec3 color2 = vec3(dot(color1.rgb, luminanceWeighting));
    gl_FragColor = vec4(mix(color2, color1.rgb, saturation), textureColor.w);

复制代码

参考

作者：JulyYu
链接：https://juejin.cn/post/7057793339164196900
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。