第十三章 OpenGL ES-RGB、HSV、HSL模型介绍

2024-04-09 15:36

本文主要是介绍第十三章 OpenGL ES-RGB、HSV、HSL模型介绍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

第十三章 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为白。如下图两图所示
在这里插入图片描述
在这里插入图片描述
HSV(HSB)颜色模型根据下图对应说明可以得知:

  • 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):亮度,在L=0处为黑色,在L=1处为白色,灰度沿着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;
}

这篇关于第十三章 OpenGL ES-RGB、HSV、HSL模型介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/888544

相关文章

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

MySQL中慢SQL优化的不同方式介绍

《MySQL中慢SQL优化的不同方式介绍》慢SQL的优化,主要从两个方面考虑,SQL语句本身的优化,以及数据库设计的优化,下面小编就来给大家介绍一下有哪些方式可以优化慢SQL吧... 目录避免不必要的列分页优化索引优化JOIN 的优化排序优化UNION 优化慢 SQL 的优化,主要从两个方面考虑,SQL 语

C++中函数模板与类模板的简单使用及区别介绍

《C++中函数模板与类模板的简单使用及区别介绍》这篇文章介绍了C++中的模板机制,包括函数模板和类模板的概念、语法和实际应用,函数模板通过类型参数实现泛型操作,而类模板允许创建可处理多种数据类型的类,... 目录一、函数模板定义语法真实示例二、类模板三、关键区别四、注意事项 ‌在C++中,模板是实现泛型编程

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数,你可以定义好线程数规则,生成线程数去跑代码说明:1.虚拟线程池:使用 Executors.newVir

JAVA SE包装类和泛型详细介绍及说明方法

《JAVASE包装类和泛型详细介绍及说明方法》:本文主要介绍JAVASE包装类和泛型的相关资料,包括基本数据类型与包装类的对应关系,以及装箱和拆箱的概念,并重点讲解了自动装箱和自动拆箱的机制,文... 目录1. 包装类1.1 基本数据类型和对应的包装类1.2 装箱和拆箱1.3 自动装箱和自动拆箱2. 泛型2

C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)

《C#集成DeepSeek模型实现AI私有化的流程步骤(本地部署与API调用教程)》本文主要介绍了C#集成DeepSeek模型实现AI私有化的方法,包括搭建基础环境,如安装Ollama和下载DeepS... 目录前言搭建基础环境1、安装 Ollama2、下载 DeepSeek R1 模型客户端 ChatBo

SpringBoot快速接入OpenAI大模型的方法(JDK8)

《SpringBoot快速接入OpenAI大模型的方法(JDK8)》本文介绍了如何使用AI4J快速接入OpenAI大模型,并展示了如何实现流式与非流式的输出,以及对函数调用的使用,AI4J支持JDK8... 目录使用AI4J快速接入OpenAI大模型介绍AI4J-github快速使用创建SpringBoot

SpringBoot整合easy-es的详细过程

《SpringBoot整合easy-es的详细过程》本文介绍了EasyES,一个基于Elasticsearch的ORM框架,旨在简化开发流程并提高效率,EasyES支持SpringBoot框架,并提供... 目录一、easy-es简介二、实现基于Spring Boot框架的应用程序代码1.添加相关依赖2.添