色彩空间

本笔记首发知乎
https://zhuanlan.zhihu.com/p/203847313
建立于 20200405
修改于 20210403
声明:此文为个人笔记,自己温习,也乐在交流。如果文章中有侵权,错误,或者有不同的理解,烦请大家多多留言指点指正,本人会及时纠正(知错能改就是好孩子:P)。感谢,此致崇高敬意!

目录
一、色彩空间概念:1.1、色彩空间,1.2、HSL,1.3、CIE
二、图形中常见的数据处理:2.1、矫色,2.2、LDR HDR,2.3、Linear Gamma,2.4、数据理论,2.5、打印机色彩空间

色彩空间概念
1.1、色彩空间:
使用三维XYZ去表示RGB。(XYZ取值范围为约定0-1范围)


图1
[图2]
[图3]
图4

(图4),特殊说明,当RGB值都是同一数值是,我们定义为灰色,图中我约定为值域介于(0,0,0)- (1,1,1),最黑到最白,图7、图9黑线同理。

图5
图6

1.2、HSL:
HSL的由来,从图7到图8,把摄相机放置(1,1,1)点,并看向(0,0,0)点(图4),再把棱形转换成圆,就能得到一个圆柱图9。在图9中圆柱中心的直线为灰度L,圆平面上越往外颜色越饱和S。色相的变化就绕圆柱圆周边H。(UI实现时得注意角度制与弧度制的转换)
优点:把色彩的概念分离成色相,饱和度,亮度,调色混色更方便,更加专注。(图10、图11)

图7
图8
图9
图10
图11
发展与由来
//HSV 移动端高性能版
half3 RGBtoHSV(half3 arg1)
{
    half4 K = half4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0);
    half4 P = lerp(half4(arg1.bg, K.wz), half4(arg1.gb, K.xy), step(arg1.b, arg1.g));
    half4 Q = lerp(half4(P.xyw, arg1.r), half4(arg1.r, P.yzx), step(P.x, arg1.r));
    half D = Q.x - min(Q.w, Q.y);
    half E = 1e-4;
    return half3(abs(Q.z + (Q.w - Q.y) / (6.0 * D + E)), D / (Q.x + E), Q.x);
}
half3 HSVtoRGB(half3 arg1)
{
    half4 K = half4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    half3 P = abs(frac(arg1.xxx + K.xyz) * 6.0 - K.www);
    return arg1.z * lerp(K.xxx, saturate(P - K.xxx), arg1.y);
}
// 例:fixed3 c = RGBtoHSV(c);
// c = fixed3(c.x * A, c.y * B, c.z * C);
// c = HSVtoRGB(c)
// 转到HSV空间后,c.x分量信息为色相,c.y分量为饱和度,c.z分量为亮度。
//20200913 - 20210403 完成,摘自unity standard
摘自SD functions RGB to HSL
摘自SD functions HSL to RGB
使用方法

使用流程:RGB颜色空间转至HSL,HSL里面做其他混合操作,操作完成后,使用HSL to RGB转回来。

1.3、CIE
CIE:表示人类可以感知的所有颜色(图12)。人眼是传感器,会把看到的颜色光当作一系列信号传送给大脑(图14,15)。特点:1、相对于亮部来说,对暗部更敏感(所以正常情况下尽量把画面需要体现细节的点放在暗部),2、相于其他两色来说,对绿色敏感,其次红色,最后是蓝色,敏感度:绿色》红色》蓝色。
科学界标准更新:1920左右(制定光谱标准(色板))

图12
图13不准确,只为更为方便的概念理解,拉了一个简单3D空间样式图

CIE色板代表的是科学界及室验室的,一般情况下很难有这么高的还原(高宽的色板色域),更纯的颜色(硬件表现不出纯度更高更接近科学色板),我们常听说高色域显示器,可以理解比其他显示器(普便)的三角区域更大点,更纯的颜色,更接近科学界标准的色域(图22,图24)。
因为人类对不同颜色频率波段的颜色感知敏感度不一样,所以科学家在制作CIE时,把最敏感的颜色画得最少,不敏感的颜色画得最多,以达到计算上的正确和人眼上看到的色彩自然和色活觉均匀性,颜色的混合都是线性的,只要在两个颜色间绘制作一条直线就能等同于现实的颜色混合(图20)右侧图。

图14
图15
图16
图17
图18
图19
图20

在常用图形DCC中,常看到的是HSL(HSV)上图左侧圆形色域表示法。而从CIE转到HSV中,会发现混合颜色是不怎么正确的,这也是一种弊端。

图形常见的数据处理
2.1、矫色
矫色:使之在不同设备间保持大体一样的颜色
现代设备问题:


图21,左一为高色域(HDR)显示设备,中间大屏为电影激光显示设备,右为普通显示设备。
图22,几种常见的硬件在CIE中的色域大小。
图23,同份资源在不同硬件空间下的表现。
图24,不同色域的定义,起点位置都指上最纯色,只看最纯色的不同,代表着色域的不同,不同硬件的色域定义。
图25

在上图左右能对比出因不同色域的区别,而我们要做的,就是矫正调色。把右图矫正调色到好的效果成品左图。

2.2、LDR 和 HDR
LDR
由于硬件设备的局限性和不统一性,所以国际做了一个标准的统一性--LDR。
数据处理:类似方法,RGBA为0-255,M 浮点系数为1/255。把0-255整数范围映射到0-1浮点范围。目的是方便图形计算,方便硬件显示。(浮点可以为float half)
HDR
比LDR更宽的范围,更柔和的过渡,也属约定统称。像图22中三种不同的范围也都属于HDR。也只是在CIE中不同的范围。LDR没在CIE中画出来,他的范围会小太多。
怎么开启HDR,以unity为例:
A、在项目设置中开启HDR
B、在摄相机上开启HDR
C、RT处理
优点:
在高强度区域不会丢失颜色,需要使用ToneMapping
更好地支持泛光和发光效果
减少低频光照区域的条带
(见下文章的细节说明,主要思路是:保证高亮区域的信息正常(图26),并保持其他亮度区域无变化。)
缺点:
使用浮点渲染纹理(渲染速度较慢,需要更多 VRAM)
不支持硬件抗锯齿(但您可以使用抗锯齿后期处理效果来平滑边缘,采样后的抗锯齿效果欠佳)
并非所有硬件都支持,最少需要3.0以上

图26,左开启HDR无Tone,右开启HDR并开启Tone

2.3、线性空间与伽马空间
在做HDR之前需要理清,线性空间与伽马空间。Gamma 跟人类眼睛看到类似,而自然界现实中是类线性的,从自然界说Gamma空间其实是错误的,但从人眼看到Gamma是正确的。在图形计算里把,把颜色放在线性空间计算得到的结果更为正确,所以更高级而又复杂的图形计算都是把颜色放进线性空间内。

图27
图28
图29

图30,颜色混合(存在透明度混合问题)所以看上去gamma更舒服
图31
图32

会存在一个棘手问题:当带有透明通道时,在线性空间下的不准确性。一般解决方法,直接把资源先转换到gamma空间再计算。其他光照使用线性计算,UI 和特效带A通道的资源使用 gamma计算透明,管线用线性,透明计算用gamma,如果读者朋友有其他的好办法,希望跟您多交流。

2.4、数据理论
生成HDR:普便见的操控数据两种方法。A、把数值0-1转存到0-无限,这个无限属于约定数值(约定的标准,同理像之前只存到一个R通道,现在存到RGBA四通道);B、存储数据时,提高浮点位数。
从HDR生成再转成LDR,分两步:一、写到高范围高精度;二、解压到0-1低范围内。
这两步不同的地方就在于他们的M值系数不一样,第一步M乘上第二步M值等于1。一个数是另一个数的倒数。
真实世界的亮度对比度:是无穷小(黑-0,注1)到无穷大(亮-无穷大),而解决这项任务,因硬件问题,我们需要做一个曲线矫正,把所有HDR的颜色空间转换到LDR GAMMA空间0-1范围内。这步操作计算通常被大家叫做 GAMMA矫正。后面出来的Tone-Mapping(色调映射),也是更高级的数据的转换。图33。
真实世界是线性变化的,为了模拟人视眼的非线性化感观,做出了类似人眼的显示器,为了达到并贴近类人眼效果就要做各种相关的模拟计算,这里面有很多部分是非线性计算的,并且都是为了简洁化的运算。更精准和更高级计算前,需把数据转换成线性信息,再计算,计算完成后,再在最后的显示中转成标准gamma LDR。


图33:HDR亮度从0到无穷大小。图中曲线示意Tone-Mapping矫正。

HDR相关特性:如果画面对比度不是太强,HDR的效果并不明显(图34);当对比度非常高,已高到亮部细节丢失的情况下(已超出1范围),采用HDR并使用Tone-Mapping,将会重到一个高亮范围正常的,更接近人眼所观查的现实类似图像(图35),柔和又不失高强对比度,不失颜色饱和度。

图34:右图经过HDR处理后的,左边为源图未经过处理的。
图35:线性(亮部细节全无)
图35:亮部细节正常,并且其他区域也是正常。

对于Bloom和HDR的关联性:在HDR 高精度内使用Bloom计算来模拟泛光,计算完成后混合前源图,得到结果的HDR图,然后经过Tone-Mapping得到LDR图;而Bloom放在HDR里面计算时有个好处是高亮处不会失去细节和颜色,所以常常都会绑定使用。正常情况下Bloom和Tone-Mapping两个功能都会拆分出来,让艺术家自己去选择打开和关闭,调校出更好的艺术性。并且后现代的Tone-Mapping ACES 做完,不需要再次Gamma Pow(x, 0.4545)了。

2.5、打印机色彩空间
来源:a、节省印油,b、并由于现实中颜色的叠加是越叠加越黑,所以做的是减法。相片上呈现孔洞样式。
图文形式记录,理论与算法结合实践。不讲算法的都是流氓!算法错误,那就更加可怕了,可怕的半桶水还不自知。如果此篇笔记,朋友您有读到,在这感谢您的支持,如果您发现笔者有错误的地方,希望您能指点出来,笔者不胜感谢。

参考资源:
1、GDC《hdr_photographic》PDF
2、各大百科
3、Unity 手册
4、皮克斯动画

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,014评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,796评论 3 386
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,484评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,830评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,946评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,114评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,182评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,927评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,369评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,678评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,832评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,533评论 4 335
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,166评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,885评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,128评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,659评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,738评论 2 351

推荐阅读更多精彩内容

  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 10,561评论 0 11
  • 彩排完,天已黑
    刘凯书法阅读 4,202评论 1 3
  • 表情是什么,我认为表情就是表现出来的情绪。表情可以传达很多信息。高兴了当然就笑了,难过就哭了。两者是相互影响密不可...
    Persistenc_6aea阅读 124,570评论 2 7