中山手机网站建设,个人网站 教程,中国交通建设监理协会网站,环球资源网网站特色第十三章 OpenGL ES-RGB、HSV、HSL模型详细介绍 第一章 OpenGL ES 基础-屏幕、纹理、顶点坐标 第二章 OpenGL ES 基础-GLSL语法简单总结 第三章 OpenGL ES 基础-GLSL渲染纹理 第四章 OpenGL ES 基础-位移、缩放、旋转原理 第五章 OpenGL ES 基础-透视投影矩阵与正交投影矩阵…第十三章 OpenGL ES-RGB、HSV、HSL模型详细介绍 第一章 OpenGL ES 基础-屏幕、纹理、顶点坐标 第二章 OpenGL ES 基础-GLSL语法简单总结 第三章 OpenGL ES 基础-GLSL渲染纹理 第四章 OpenGL ES 基础-位移、缩放、旋转原理 第五章 OpenGL ES 基础-透视投影矩阵与正交投影矩阵 第六章 OpenGL ES 基础-FBO、VBO理解与运用 第七章 OpenGL ES 基础-输入输出框架思维 第八章 OpenGL ES 基础-MVP矩阵理解 第九章 OpenGL ES 基础-高斯模糊原理 第十章 OpenGL ES 基础-图像USM锐化 第十一章 OpenGL ES 基础-基础光照 第十二章 OpenGL ES 基础-色温、色调、亮度、对比度、饱和度、高光 第十三章 OpenGL ES-RGB、HSV、HSL模型介绍
RGB颜色模型
RGB颜色模型是一种用于创建各种颜色的方法它基于红色Red、绿色Green和蓝色Blue三种颜色的组合。通过调节这三种颜色的强度和比例可以生成多种不同的颜色。在计算机图形学和数字显示领域中RGB颜色模型是最常用的颜色表示方式之一。可以把RGB颜色模型建立在一个RGB颜色立方体如下图所示
采用三维直角坐标系R-Red G-Green B-Blue构成一个RGB颜色立方体通常使用于彩色光栅图形显示设备中
HSV颜色模型
HSV代表色相Hue、饱和度Saturation、明度Value“或色相Hue、饱和度Saturation、亮度Brightness”。在HSV模型中色相同样表示颜色本身饱和度表示颜色的纯度或浓淡程度而明度或亮度则表示颜色的亮度程度。HSV模型有时也被称为HSB色相、饱和度、亮度/明度模型。
RGB颜色模型对应的红、黄、绿、清、蓝、品红对应HSV颜色模型的六边形黑白对应下0为黑上1为白。如下图两图所示 HSVHSB颜色模型根据下图对应说明可以得知
H(Hue)色调,用角度度量,取值范围为0°360° ,从红色开始按逆时针方向计算S(Saturation)饱和度,表示颜色接近光谱色的程度.一种颜色,可以看成是某种光谱色不白色混合的结果.通常取值范围为0%100%,值越大,颜色越饱和.光谱色的白光成分为0,饱和度达到最高.V(Value或Brightness)明度,表示颜色明亮的程度. HSL颜色模型
HSL代表色相Hue、饱和度Saturation、亮度Lightness。在HSL模型中色相表示颜色本身饱和度表示颜色的纯度或浓淡程度亮度则表示颜色的明暗程度。 HSL颜色模型中的HS基本一样原理区别亮度和明度 H(Hue)色调,使用不水平轴之间的角度来表示,范围从0 o到360o ,从蓝色开始 S(Saturation)饱和度,说明颜色的相对浓度L(Lightness)或者I(Intensity)亮度,在L0处为黑色,在L1处为白色,灰度沿着L轴分布
HSL和HLV的区别 HSV (色调, 饱和度, 明度)
明度 (V) 表示整体亮度。0% 为黑色100% 为所选色调的最亮色调。
概念 想象在彩色物体上照射白光。提高明度会使颜色变亮就像加强光线一样同时保持颜色本身不变。
HSL (色调, 饱和度, 明度)
明度 (L) 表示颜色的感知亮度0% 为黑色100% 为白色。50% 为中间灰。
概念 想象将彩色颜料与黑白颜料混合。增加明度会混入更多白色稀释颜色并使其变浅。降低明度会添加黑色使颜色变暗。
区别带来的影响 选择模型 对于艺术家来说HSV 可能更直观因为它反映了现实世界的灯光效果。 HSL 可以更直接控制亮度这对于 UI 设计和无障碍 concerns 很有帮助。
颜色阴影 在 HSV 中具有完全饱和度但不同明度的颜色仍保留其色调。想象同一个颜色的明亮和暗淡版本。 在 HSL 中将明度提高到 50% 以上会使颜色向白色方向冲淡即使完全饱和也是如此。这对于某些任务来说可能不太直观。
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) * 0.7, q.x * 1.8);
}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);
}
RGB和HSL转换 // snow color
vec3 RGBToHSL(vec3 color){vec3 hsl;float fmin min(min(color.r, color.g), color.b);float fmax max(max(color.r, color.g), color.b);float delta fmax - fmin;hsl.z (fmax fmin) / 2.0;if (delta 0.0){hsl.x 0.0;hsl.y 0.0;}else{if (hsl.z 0.5)hsl.y delta / (fmax fmin);elsehsl.y delta / (2.0 - fmax - fmin);float deltaR (((fmax - color.r) / 6.0) (delta / 2.0)) / delta;float deltaG (((fmax - color.g) / 6.0) (delta / 2.0)) / delta;float deltaB (((fmax - color.b) / 6.0) (delta / 2.0)) / delta;if (color.r fmax )hsl.x deltaB - deltaG;else if (color.g fmax)hsl.x (1.0 / 3.0) deltaR - deltaB;else if (color.b fmax)hsl.x (2.0 / 3.0) deltaG - deltaR;if (hsl.x 0.0)hsl.x 1.0;else if (hsl.x 1.0)hsl.x - 1.0;}return hsl;
}float HueToRGB(float f1, float f2, float hue){if (hue 0.0)hue 1.0;else if (hue 1.0)hue - 1.0;float res;if ((6.0 * hue) 1.0)res f1 (f2 - f1) * 6.0 * hue;else if ((2.0 * hue) 1.0)res f2;else if ((3.0 * hue) 2.0)res f1 (f2 - f1) * ((2.0 / 3.0) - hue) * 6.0;elseres f1;return res;
}vec3 HSLToRGB(vec3 hsl){vec3 rgb;if (hsl.y 0.0)rgb vec3(hsl.z);else{float f2;if (hsl.z 0.5)f2 hsl.z * (1.0 hsl.y);elsef2 (hsl.z hsl.y) - (hsl.y * hsl.z);float f1 2.0 * hsl.z - f2;rgb.r HueToRGB(f1, f2, hsl.x (1.0/3.0));rgb.g HueToRGB(f1, f2, hsl.x);rgb.b HueToRGB(f1, f2, hsl.x - (1.0/3.0));}return rgb;
}
