学习地址

【技术美术百人计划】图形 2.1 色彩空间介绍

补充学习地址

【技术美术百人计划】图形 2.1 色彩空间补充内容_哔哩哔哩_bilibili

1 色彩发送器

色彩其实是一个对象，光源是色彩这个对象的出生点，光源发出光线，经过直射、反射和折射等路径最终进入人眼，人眼细胞产生了一系列的化学反应，然后把产生的信号传入大脑，大脑再对颜色产生认知。

1.1 光源

产生光的物体，本质是一种物理现象，没进入人眼前我们认知是物理层面的：波与能量的分布。

1.2 波长

光，也就是波长，理论上无限大的，但是由于人眼感知范围有限，所以我们会把光定义局限在可见光范围内。

1.3 能量分布

光是一种波，有能量，能量单位焦耳。不过一般情况下我们研究光是看功率的，即单位时间接收到的能量。而光会有不同的功率，从波的角度看：一个光可以是由多个波长组合起来的波形。

这一点在图形学上有很多的应用，比如滤波等等，这种方式非常高效。

但如果每次描述色彩用“波长”描述实在太反人类了！不可能看到一种颜色我们就能记住它的波长吧！于是人们发明了一个叫做分光光度计的东西。

1.4 分光光度计

用以描述光线的具体能量强度，通过分光的方式对区间波长进行感应和测量。通过对混合波长组成的光线的拆分，光线形成了单一波长，就可以测量单一波长光的能量了。

1.5 光的传播

通过实验，比较反射前和反射后的光功率谱分布，发现少了一部分能量，这部分能量就是被反射物体所吸收的能量，也就是说，每次光经过反射或者投射都或多或少地对光的能量分布产生影响。

物体吸收了哪部分的光，这部分颜色光我们就看不到。比如：某个物体反射后吸收光的波长在600nm左右，也就是物体吸收了黄色和绿色的光；黑色的物体就是它吸收了所有的光，白色的就是反射了所有的光，就这么简单。

2 光源的接收者

上面说了，光源的接收者其实就是人眼。由于人眼本身对光的处理很复杂，涉及到化学的复杂理论，这里仅对人眼接受色彩会有什么样的感觉做一个简要的讨论。

2.1 相对亮度感知

阴暗的条件下突然点亮一盏灯——超级亮，如果同时点亮1000盏灯，只会觉得是原来的10倍亮度。一句话总结——人眼对于暗部的亮度变化非常敏感，而对于亮部的亮度不敏感。

2.2 人眼HDR

2.2.1 什么是HDR？

这部分内容参考了

先别玩显示器了，快来了解下HDR的基本知识吧！ - 哔哩哔哩 (bilibili.com)

HDRI_百度百科 (baidu.com)

HDR，全称是High Dynamic Range，即高动态范围。这本来是一个CG概念。

为什么会有这么一个概念出现？

既然是高动态范围，与之相对的就是低动态范围（Low Dynamic Range, LDR），这个动态范围值得其实是最高和最低亮度值之间的比值。

过去的计算机在表示图像的时候是用8bit（256）级或者16bit（65536）级来区分图像亮度，但区区几百或者几万级别的普通文件格式的图像无法再现真实的、接近自然光照的情况，于是就有了HDR技术的诞生。HDR技术在影像领域可以拓展亮度范围，呈现更多的影像内容，带来更加丰富、接近真实的细节表现，让显示设备上的画面更接近人眼看到的效果，新一代的高端显示器已经具备了HDR超高动态范围图像技术。

基于平面静态影像的视觉处理——在摄影时，HDR通过多张曝光的方式将得到的图像合成为一张图像，图像中无论是暗处还是亮出细节都很到位，极具画面层次感和立体感。

2.2.2 什么是HDRI？

HDRI，就是加上一个image——High Dynamic Range Image，即高动态范围图像，为了实现HDR技术的图像。它的亮度范围非常广，比其它格式的图像有着更大亮度的数据贮存。而且它记录亮度的方式与传统的图片不同，不是用非线性的方式将亮度信息压缩到8bit或16bit的颜色空间内，而是用直接对应的方式记录亮度信息——记录了图片环境中的照明信息，因此我们可以使用这种图像来“照亮”场景，引出了接下来要说的HDR环境贴图。

2.2.3 HDRI环境贴图

既然提到了HDRI，那赶紧把渲染会用到的“HDRI环境贴图”拿出来说说。

HDRI环境贴图（感觉有时候又叫HDR环境贴图，都是一个意思啦）就是一张HDRI，超越了普通光照颜色和强度的光照，渲染时用它来实现场景照明和模拟反射折射，在它的帮助下渲染出的3D场景将更加真实。

一般HDRI环境贴图适用于开放的环境。仔细想想在搜索HDRI环境贴图资源的时候，基本上都是一些：黄昏、日落、傍晚、户外等等一些广阔的外景（比如下图）：

但并不是只有室外的蓝天白云贴图，有时候需要的HDRI贴图可能是开阔的室内空间等等，如下图：

上面的HDRI和环境贴图其实算是一个拓展，但是我认为有必要放在一起说以加深印象，因此在这就滔滔不绝地说了这么多概念，其实百人计划后续就会专门设计到HDR和LDR，这里就当作暂时的了解吧！

【技术美术百人计划】图形 2.7 LDR与HDR_哔哩哔哩_bilibili

2.2.3 人眼HDR

上面说了那么多，提到了什么“更加真实”“更立体感”等等的描述，其实都是基于人眼看到的真实世界的样子，跟图像呈现的画面进行对比得出的结论。

人眼既可以分辨出高亮度的云彩不同层次，自动曝光！可以同时看到很亮的细节和很暗的细节，但不能完全保证同时生效。

2.3 人眼感光细胞分布

人眼可以把感知色彩的细胞简单分为两大类：杆状细胞和锥状细胞，前者负责感知亮度，后者负责感知色彩。

2.4 锥状细胞

锥状细胞专门用以感知颜色，被区分为了L细胞，M细胞，S细胞。三者负责感知的波长范围不同：

L细胞——红色区间；M细胞——绿色区间；S细胞——蓝色区间。

2.5 人眼的本质——光源的接收者

点题了！

人眼的本质就是光源的接收者，它的作用就是接受外部光线输入，输出神经电信号给大脑。

2.6 人眼接受光源的公式

这部分仅作了解吧

3 色彩空间的历史

了解一个东西，如果从他的历史开始去了解。这里就不再从头到尾去罗列了，简单说一下色彩系统从最初的到现在的都有哪些。

3.1 HSL色相饱和亮度 & HSV/HSB/HSL

1930年提出了一个基于主观意识区分的色彩系统——HSL（色相饱和亮度）。

这里顺带提一下之后1978年A.R.Smith在1978年基于RGB创建的一种颜色空间——HSV，与偏向硬件的RGB相比，HSV更偏向用户，但它本质上和RGB没啥区别，只是产生颜色的方式不同。

目前有HSL、HSV、HSB三种非常相似的颜色空间，于是我搜了搜三者的关系：

HSB为色相，饱和度，明度；HSV为色相，饱和度，明度，HSV和HSB是同一个东西。

HSL为色相，饱和度，亮度，和HSB/HSV有所不同。

关于HSL、HSB、HSV三者的区别，有一个回答写的非常的清楚：

色彩空间中的 HSL、HSV、HSB 有什么区别？ - 知乎 (zhihu.com)

（下图来自该问题中的其中一个回答）

3.1.1 HSB/HSV的S 和 HSL中的S

虽然S都是Saturation，饱和度，即颜色的纯度，但是：

HSB/HSV中的S——控制混入白色的亮，S越大白色越少，颜色越纯；

HSL中的S——跟黑白没有关系，S不控制混入黑白的多少。

3.1.2 HSB/HSV的B 和 HSL中的L

二者翻译过来一个都是明度，即颜色的明亮程度。但是：

HSB和HSV中的明度——被认为是光的量，可以是任何颜色，也可以被看作是混入黑色的量，值越大，混入黑色少，颜色自然明度越高；

HSL中的L——被翻译成“亮度”更准确，它可以被理解成黑白的占比，L越小趋向于黑色，L越大趋向于白色。

3.2 RGB 色彩系统

1931年，CIE提出了更加科学的色彩系统，希望完全客观、完全物理地量化色彩。

最开始通过测试得到了三基色的三条曲线，后来为了更具美感进行了归一化。

到这里还不够！既然归一化，那么可以让图像更加直观，于是有了r'和g'两个参数的二维空间：

3.3 XYZ 色彩空间

上面的RGB已经够直观的了，但是存在负数，我们希望在计算上更加的方便（不希望出现负数），于是在XYZ空间中表示色彩的方法就出现了。

注意：这里的RGB是CIE 1931 RGB，并不是sRGB（后面会提到）。

色域马蹄图-CIE xy色图

这里就是用X和Y来表示色彩，但是还是有一个垂直轴的，表示亮度。

3.4 更加平滑的色彩空间

上述的马蹄图并不平滑，尤其是靠近蓝色部分，因此需要搞个更加优化的色彩空间。

自定一个色彩空间需要三个指标：

色域——三个基色的坐标，由此形成三角形
Gamma——如何对三角形进行划分
白点——色域三角形的重心

3.4.1 色域

其实就是整个三角形如何框定。

3.4.2 Gamma

它的值决定三角形如何切分，是对色彩进行采样的一种方式。

注意了，Gamma的取值并没有明确规定，而且目前广泛使用的2.2也是通过一大批实验者实验之后，得出的一个比较接近人眼的伽马值。

下图是Gamma=2.2的，是非线性的。

下图是Gamma=1，这种就是线性、等距的切分。

从显示器角度来说，显示器上电压与亮度的关系曲线类似于一个指数曲线，如下图，这个指数就是Gamma。

3.4.3 白点

整个色彩中心，最亮的、最白的地方。

3.5 线性颜色空间和伽马颜色空间

3.5.1 线性颜色空间

由上我们可以知道，使用线性渐变的颜色空间，我们称为线性颜色空间，也可以直接叫线性空间。

3.5.2 伽马颜色空间

那伽马颜色空间，或者伽马空间，就是不使用线性渐变的颜色空间——在线性空间的基础上进行伽马矫正后的颜色空间。

3.5.3 伽马颜色空间相对较暗

使用Gamma后画面会变暗。例如当Gamma值取2.2，当输入像素值为最大值的50%时，实际显示的亮度还不到亮度最大值的25%，画面可不就变暗了嘛。

4 常用的色彩模型和色彩空间

色彩模型：RGB、CMYK、LAB

色彩空间：满足色域、Gamma和白点三个指标，比如CIE XYZ、Adobe RGB、sRGB等

5 色彩空间转换

参考自论线性颜色空间的重要性（翻译） - 知乎 (zhihu.com)

5.1 渲染过程使用线性空间

虽然使用伽马空间便于显示，但在渲染过程中对颜色值进行计算时，却希望使用线性颜色空间。这是因为渲染过程中认为光的传播是线性的，两束光打到同一个地方，得到的亮度是两束光“颜色”相加，而不是相乘、相减或者其他计算方式。因此，在进行光照计算时用的是线性空间进行计算。因此，在渲染过程中，要确定使用的是线性颜色空间。

如何去做？

一种方法是手动矫正，读取贴图的颜色值，做反Gamma校正后将得到的线性值再给Shader进行光照计算，但这种方法比较费力。

另一种方法是直接使用sRGB贴图格式，所有的现代GPU都支持sRGB贴图格式，这类格式的图片虽然的像素还是经过Gamma校正的，但是文件里还保存了校正的Gamma值，作为贴图传给 GPU时，GPU的硬件会预先取出这个Gamma值，将贴图还原到线性空间中，再传给Shader做处理。这个方法相对手动矫正显得更快捷了，把矫正这件事情直接交给GPU去处理。

5.2 在显示前再转换到伽马空间

在显示前，应当将像素值变换到伽马颜色空间。这一步就是把渲染得到像素色值做一次Gamma校正。这样得到值，在非线性的显示器上就可以得到“正确”的效果！

补充内容

6 补充色域和色彩空间的知识

其实，上面提到的色域也可以直接叫做色彩空间（Color Space），而域有是一个数学概念，可以更好的说明色彩是有一定的范围。

6.1 常见的屏幕色域三种标准

这部分参考了：色域是什么？显示器屏幕色域sRGB、NTSC、Adobe RGB区别对比科普

常见的屏幕色域标准有：sRGB、NTSC、Adobe RGB。

sRGB——微软和HP在1996年共同开发的色彩空间；

NTSC——是NTSC电视标准下的色彩空间，被更多运用在电视行业；

Adobe RGB——是专业软件生产商Adobe在1998年推出的色彩空间，初衷是为了同时囊括sRGB（电脑常用的色彩空间）和CMYK（印刷常用的色彩空间），这样拍出的数码照片不仅能在电脑上正常显示和编辑，也能印刷出颜色无损而正确的相片。Adobe RGB相比sRGB囊括的色彩范围更广，受到设计师的青睐，因此在专业的摄影和后期领域被广泛使用。

把各种色域体现在马蹄图上：

根据马蹄图可以简单判断，sRGB能表示的色彩最少，色彩范围也最小，AdobeRGB跟sRGB相比更能表现出绿色和青色。

6.2 回顾伽马矫正

这部分参考了

色彩校正中的 gamma 值是什么？ - 知乎 (zhihu.com)

6.2.1 为什么要伽马矫正

Gamma曲线到底在矫正什么？回顾一下伽马Gamma出现的原因：

人眼对自然亮度感知是非线性的
我们用来记录/展示画面的媒介上，动态范围和灰阶预算是有限的。（无论纸张还是屏幕）

——为了在灰阶预算有限的前提下，协调自然亮度和主观灰阶感受这二者的映射关系，Gamma就产生了。

——是一个解决方案，用于化解“无限的自然存在，与有限的存储容量/传输带宽”之间的矛盾。

6.2.2 如何进行伽马矫正？

这里其实就是上述色彩空间转换里讲的内容：分别在采样时、输出到屏幕上给人眼看时，对亮度进行调整。

采样时，Gamma=1/2.2，调亮Gamma（Gamma值变小，说明画面更加明亮了）

显示时，Gamma=2.2，调暗Gamma（Gamma值变大，说明线性更加离谱了，画面就暗下来）

【技术美术图形部分】2.1 色彩空间相关推荐

【技术美术图形部分】图形渲染管线3.0-光栅化和像素处理阶段
写在前面开始学习<入门精要>第八章透明效果后,接触到了渲染顺序.透明度测试这些概念,才发现之前的渲染管线总结忘掉了光栅化和像素处理这两个阶段的学习记录,怪不得没什么印象...赶紧写一篇补 ...
【技术美术图形部分】PBR全局光照：理论知识补充
写在前面最近做东西的流程是这样的,想实现一个风格化森林小场景,场景体现的主体是风格化树和交互草 --> 于是用了两天时间学SpeedTree做树模型 --> 用了两天时间SD做了树干贴图 ...
【技术美术图形部分】2.2 模型与材质基础
记录之前膜拜一下这节课的大佬,才大三,我一个研二菜狗留下不学无术的泪水! May佬提到,这次课程安排的目的是给美术同学一个缓冲的空间,我的话在写这篇学习笔记就尽量加入一些自己的理解. 友情提示!才发现 ...
【技术美术图形部分】纹理基础1.0-纹理管线
目录 1 纹理三大问 1.1 What--针对物体表面属性进行"建模" 纹理 Texture 纹理值 Texture Value 纹素 Texels 1.2 Why--降低建模工作 ...
【技术美术图形部分】2.3 HLSL常用函数
--介绍HLSL常用函数,API的使用. 想要成为合格的技术美术,一定要具备Shader开发能力,满足性能的需求,无论是技术美术的哪一个方向,HLSL都是需要点满的技能点. 参考微软官方HLSL库: ...
【技术美术图形部分】图形渲染管线2.0-GPU管线概述几何阶段
图形渲染管线1.0 [技术美术知识储备]图形渲染管线1.0-基本概念&CPU负责的应用阶段在上一篇中,从渲染分类开始介绍了什么是渲染流水线.为什么要有流水线以及流水线如何进行的,还介绍了CP ...
【技术美术图形部分】PBR直接光部分：Disney原则的BRDF和次表面散射模型
写在前面补充去年遗漏下的知识.很多叙述都是参考了众多大佬的文章!因为是作为个人学习总结的博客,所以直接卑微的借鉴过来了,后面会给出所有参考的文章. 另外,放上一个忘了在哪一篇知乎评论里的截图: 说的 ...
【技术美术图形部分】图形渲染管线1.0-基本概念CPU负责的应用阶段
渲染分类谈渲染管线之前,我想有必要看看渲染的分类.渲染可以按不同的分类依据进行分类: 按照渲染时机可以分成实时渲染(除了用于3D游戏还多用于工业仿真方面,注重交互性和实时性)和离线渲染(离线渲染多用 ...
【技术美术图形部分】关于前向渲染和延迟渲染
学习参考 [技术美术百人计划]图形 3.4 延迟渲染管线介绍 <Unity Shader 入门精要> 1 Unity的渲染路径关于渲染路径,我在图形渲染管线1.0中就提过了,但只是初步的 ...
【技术美术图形部分】AO理论及优化 AO贴图如何参与渲染
写在前面昨天从美术的角度出发,对AO贴图参与到次世代建模流程中的过程进行了学习.今天从图形学角度学习环境光遮蔽. 封面图截取自实时渲染GI|Ambient Occlusion:AO.SSAO.HBA ...

【技术美术图形部分】2.1 色彩空间