颜色与感知

seeooco

已于 2023-08-09 10:35:50 修改

阅读量76

点赞数

分类专栏：计算机图形学CG 文章标签：图形渲染

于 2022-09-21 19:46:22 首次发布

本文链接：https://blog.csdn.net/NOSaac/article/details/126979330

版权

计算机图形学CG 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.Physical Basis of Color颜色的物理基础

[1]光的基本组成部分

牛顿对光的发现：

在这里插入图片描述

一个白光早穿过棱镜后出现多种光是因为它们的折射率的不同导致

[2]可见光谱

光谱——不同的波长对应不同的折射率

在这里插入图片描述

而物理上的可见光位于波长400~700范围中，图形学通常关注可见光部分

[3]Spectral Power Distribution（SPD 谱功率密度）

测量光的显著特性

每个波长的光量

在这里插入图片描述

多种光混合之后的SPD等于单个光对应得SPD相加，如下图所示

在这里插入图片描述

2.Biological Basis of Color颜色的生物基础

[1]什么是颜色

颜色是人感知的结果；并非物理上的普适概念
不同波长的光不是“颜色”

[2]人眼解剖学

在这里插入图片描述

视网膜上的感光细胞

Retinal Photoreceptor Cells: Rods（杆） and Cones（锥）

在这里插入图片描述

Rods：

眼睛里有一亿两千万根杆子
用来感知光的强度，得到灰度图，没有颜色

Cones：

眼睛里有600-700万个视锥细胞
用来感知颜色
分为三种不同的锥型细胞S-con、M-Con、L-Con

三种细胞对不同波长的响应各不相同
在这里插入图片描述

不同的人的这三种细胞的分布和数量差异很大，下面这幅图展示的是12个正常视力的人的三种锥形细胞分布情况

在这里插入图片描述

[3]色彩的三色理论

知道光在不同波长上的分布，某细胞对某波长的响应是多少，感知的结果S、M、L是将两者积分即可得到，即响应曲线和SPD的积分。

在这里插入图片描述

给定任何一种光线，人们看到的是S，M，L三个数，不知道原本光线的分布（SPD）

[4]人类视觉系统

人眼无法测量，大脑也无法接收有关每种光波长的信息
相反，眼睛只“看到”三个响应值（S、M、L），而这只是大脑可用的信息

在这里插入图片描述

3.同色异普

根据上面的色彩三色理论可以推想到，尽管两种光线不同光谱，但经过上述积分后，得到的SML是相同的，那么人们看到的颜色是相同的。（还可以出同一物体每个人看到的是不一样的），如下图尽管它们的SPD不同，但是它们最终显示的颜色还是一样的。
在这里插入图片描述

通过显示器的三色光，可以混合出现实中的种种颜色，但背后的光谱一般是不一样的。

4.Color Reproduction / Matching色彩复制/配色

计算机中的颜色系统是加色系统。即RGB三个值最高是混合为白色。绘画印刷是减色系统。

在这里插入图片描述

加色系统：

在这里插入图片描述

通过将一些颜色混合可以调处别的颜色。但有些颜色怎么也混合不出，通过给这些颜色加色就可以混合出，即将最后混合的颜色减去加上的颜色，就可以混合出该颜色。因此有些颜色的取值是负的。

在这里插入图片描述

[1]CIE RGB颜色匹配

实验：给出三种都是单一波长的光，目标光也是单一波长的光，将多少强度的三种光混合得到和目标光一样的颜色。

颜色匹配函数：描述了三种主光各自多少强度加起来得到给定波长的光的颜色。

在这里插入图片描述

现实中的光是许多不同强度的单一波长光的积分

5.Color Spaces颜色空间

[1]Standardized RGB (sRGB)

广泛应用于我们现在的显示设备
制造方式
- 先制造一台标准的显示器，测定它的匹配函数
- 大家按照这个标准去制造，得到的结果就和标准的一致了
形成的色域（gamut）是有限的

例如web端常用的RGB颜色表示法：

#RRGGBB的颜色代码，就是 RGB 颜色的十六进制表示法，其中 RR、GG、BB 分别是两位十六进制数字，表示红、绿、蓝三色通道的色阶，色阶可以表示某个通道的强弱。每个通道一共有 256 阶，取值是 0 到 255。RGB 的三个通道色阶的组合，理论上一共能表示 2的24次方。也就是一共 16777216 种不同的颜色。

在这里插入图片描述

但是RGB并不能表示人眼所能见到的所有颜色
在这里插入图片描述

RGBA

它其实就是在 RGB 的基础上增加了一个 Alpha 通道，也就是透明度。一些新版本的浏览器，可以用 #RRGGBBAA 的形式来表示 RGBA 色值

（注意：这里的 alpha 是一个从 0 到 1 的数）

WebGL 的 shader 默认支持 RGBA。因为在 WebGL 的 shader 中，我们是使用一个四维向量来表示颜色的，向量的 r、g、b、a 分量分别表示红色、绿色、蓝色和 alpha 通道

不过和 CSS 的颜色表示稍有不同的是，WebGL 采用归一化的浮点数值，也就是说，WebGL 的颜色分量 r、g、b、a 的数值都是 0 到 1 之间的浮点数。

RGB 颜色表示法的局限性

对一个 RGB 颜色来说，我们只能大致直观地判断出它偏向于红色、绿色还是蓝色，或者在颜色立方体的大致位置。所以，在对比两个 RGB 颜色的时候，我们只能通过对比它们在 RGB 立方体中的相对距离，来判断它们的颜色差异。除此之外，我们几乎就得不到其他任何有用的信息了。

也就是说，当要选择一组颜色给图表使用时，我们并不知道要以什么样的规则来配置颜色，才能让不同数据对应的图形之间的对比尽可能鲜明

在需要动态构建视觉颜色效果的时候，我们很少直接选用 RGB 色值，而是使用其他的颜色表示形式。这其中，比较常用的就是 HSL 和 HSV 颜色表示形式

[2]CIE XYZ

科学上应用更广泛
人造的颜色匹配系统，不是实验测出来的
匹配函数曲线如下

在这里插入图片描述

Y表示亮度，没有负数
将 $(X, Y, Z)$ 归一化，然后对（x，y）进行枚举，得到一张二维图像，表示在Y（亮度）固定的情况下，不同XZ对应的颜色。色域是一个颜色空间所有可能显示的颜色，下图右边就是色域。

在这里插入图片描述

色域Gamut

一个颜色空间所能表示的颜色的范围，如下图

在这里插入图片描述

色域的中心是白色的（最不纯）
色域的边缘则是纯色

6.Perceptually Organized Color Spaces感知组织的色彩空间

[1]HSV/HSL颜色空间

在这里插入图片描述

HSL 和 HSV 用色相/色调（Hue）、饱和度（Saturation）和亮度（Lightness）或明度（Value）来表示颜色。其中，Hue 是角度，取值范围是 0 到 360 度，饱和度和亮度/明度的值都是从0到100%如上图

色相/色调（Hue）：不同颜色
饱和度（Saturation）：接近单色还是白色
明度（Value）：亮度（黑色到有色）

我们可以把 HSL 和 HSV 颜色理解为，是将 RGB 颜色的立方体从直角坐标系投影到极坐标的圆柱上，所以它的色值和RGB色值是一一对应的。
在这里插入图片描述

CSS 和 Canvas2D 都可以直接支持 HSL 颜色，而 WebGL 需要通过算法转换（下面为RGB于HSL转换的代码）

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);
}

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);
}