对应 GPUImageBrightnessFilter和 GPUImageSaturationFilter两个类
颜色空间
常见的颜色空间除了RGB外，还有HSV(HSB)、YUV等，下面简单介绍一下HSV颜色空间。
HSV的颜色特性如下:
-
色相(Hue)：表示色彩，用一个0°~360°的圆形来表示不同的色彩，如图1-1所示。其中0°表示红色，60°表示黄色，120°表示绿色，180°表示青色，240°表示蓝色，300°表示深红色。
1-1
-
饱和度(Saturation)：表示色彩的纯度或颜色接近光谱色的的程度。饱和度的取值越大，纯度越高，接近光谱色的程度也就越高，图像越鲜艳；反之，图像纯度越低，图像也就越接近灰度图。
饱和度为 -100
饱和度为0
饱和度为100
-
明度(Value)：也叫亮度(Brightness)，表示色彩的明亮程度，明度越高，色彩越亮；反之，色彩越暗。
亮度为 -100
亮度为0
亮度为 150
注:饱和度和明度的图片是使用PS修改对应参数后得出的结果，因而参数范围不同。
HSV的颜色空间模型是一个六棱锥，如图1-2所示:
1-2
H参数表示色彩信息，即所处的光谱颜色的位置，该参数用一个角度量来表示，红、绿、蓝分别相隔120°，互补色相差180°；S参数为一个比值，范围为0~1，它表示所选颜色的纯度和该颜色最大的纯度之间的比率，当S=0时，只有灰度；V参数表示色彩的明亮程度，范围为0~1。
如果想改变图片的饱和度，该怎么用Shader实现呢？我们知道，Shader中的色彩空间为RGB，如果想改变图片的饱和度，需要先把色彩空间从RGB转换为HSV，修改了饱和度后，再把色彩空间从HSV转回RGB，交给Shader去渲染。
RGB转HSV公式
注意，r、g、b均为归一化后的值，范围为 0~1之间。
HSV转RGB公式
注意：上面公式中 含义是
向下取整，而不是取绝对值!
Shader实现色彩空间的转换
- 传统算法(遵循上面的转换公式)
// RGB转HSV vec3 rgb2hsv(vec3 rgb) { float r = rgb[0]; float g = rgb[1]; float b = rgb[2]; float h = 0.0; float s = 0.0; float v = 0.0; float minValue = min(min(r, g),b); float maxValue = max(max(r, g),b); v = maxValue; float delta = maxValue - minValue; if (maxValue != 0.0){ s = delta / maxValue; }else { return vec3(h, s, v); } if (r == maxValue){ h = (g - b) / delta; }else if (g == maxValue) { h = 2.0 + (b - r) / delta; }else { h = 4.0 + (r - g) / delta; } h = h * 60.0; if (h < 0.0){ h += 360.0; } return vec3(h, s, v); } // HSV转RGB vec3 hsv2rgb(vec3 hsvColor) { float h = hsvColor[0]; float s = hsvColor[1]; float v = hsvColor[2]; if (h >= 360.0) h = 0.0; vec3 rgb = vec3(0.0); if(s<=0.0) { rgb = vec3(v); }else { float hi = floor(h/60.0); float f = (h/60.0)-hi; float p = v*(1.0-s); float q = v*(1.0-s*f); float t = v*(1.0-s*(1.0-f)); if(hi<=0.0) { rgb = vec3(v,t,p); } else if(hi<=1.0) { rgb = vec3(q,v,p); } else if(hi<=2.0) { rgb = vec3(p,v,t); } else if(hi<=3.0) { rgb = vec3(p,q,v); } else if(hi<=4.0) { rgb = vec3(t,p,v); } else if(hi<=5.0) { rgb = vec3(v,p,q); } } return rgb; } // main函数 void main(){ vec3 rgbColor = texture2D(inputImageTexture,textureCoordinate).rgb; vec3 hsvColor = rgb2hsv(rgbColor); hsvColor.y *= saturation; rgbColor = hsv2rgb(hsvColor); gl_FragColor = vec4(rgbColor,1.0); } - 优化后的算法(是我在网上查阅资料时找到的)
// RGB转HSV vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(c.bg, K.wz), vec4(c.gb, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } // HSV转RGB vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www); return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y); } //IQ大神的算法 // iq's smooth hsv to rgb vec3 hsv2rgb(vec3 c) { vec3 rgb = clamp( abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),6.0)-3.0)-1.0, 0.0, 1.0 ); rgb = rgb*rgb*(3.0-2.0*rgb); return c.z * mix( vec3(1.0), rgb, c.y); }
测试效果如下:
Snip20200926_4.png
下面来看看GPUImage中的做法:
// 灰度值
const mediump vec3 luminanceWeighting = vec3(0.2125, 0.7154, 0.0721);
void main() {
lowp vec4 textureColor = texture2D(inputImageTexture, textureCoordinate);
// 根据公式计算同等亮度情况下饱和度最低的值 即Saturation=0
lowp float luminance = dot(textureColor.rgb, luminanceWeighting);
lowp vec3 greyScaleColor = vec3(luminance);
// 在饱和度最低的图像和原图之间进行差值
gl_FragColor = vec4(mix(greyScaleColor, textureColor.rgb, saturation), textureColor.w);
}
此种做法确实精妙!!!
- 亮度的调节
如果只是单纯的调节亮度，是可以不用色彩空间的转换的，分别在R、G、B三个通道上加上对应的亮度值即可。
void main(){
vec4 textureColor = texture2D(inputImageTexture,textureCoordinate);
gl_FragColor = vec4(textureColor.rgb + vec3(brightness),textureColor.a);
}
- 参考链接
IQ大神的博客
RGBToHSV
StackOverFlow
网友评论