计算机图形学基础知识介绍(一) 像素、颜色、色彩空间



  • 这本来是一篇很长的写给我们美术看的文档,现在还没写完,不过我觉得可以先把完成的部分慢慢贴上来分享给团队对这方面有兴趣的同学看一下。
    文中图片如果没有特别说明均来自维基百科和我自己的电脑截图。
    如果有错误欢迎在下面回帖指出。
    虽然不一定写的好,但作为原作者我还是希望不要外传

    像素

    像素是屏幕显示图像的基本单元。例如屏幕分辨率1920*1080,这些数字就是指的一个屏幕能显示像素的长宽个数。
    0_1539065800482_f44f2d0b-2b51-4767-aba1-729584e67183-image.png
    在photoshop中新建图像可以看到像素尺寸设置
    0_1539065866377_8217efc7-a412-4527-965d-50ff77b2f7db-image.png

    颜色和RGB色彩空间

    像素描述的是在屏幕的什么位置显示图像,而像素的颜色描述的就是在屏幕上的特定位置让屏幕发出怎样的光线。

    根据物理知识,我们知道一束光线的颜色由光的波长决定。视网膜上的视锥细胞在接受到不同波长的光线后会向大脑发出不同的神经刺激,因此大脑便“看”到了光线。

    而视锥细胞并不是全都长一个样,它们大致可以分为三类,分别对三个波长范围的光线敏感。我们可以简单地叫它们S、M、L细胞。它们接受的光线颜色从下面的图中可以看到。

    0_1539065929545_3f36caf7-ad6c-4c20-a91a-b54dfa89fa34-image.png

    从图中,我们可以看见M和L两个波峰靠的很近,它们分别是对绿色和对红色敏感的细胞。如果发生一些基因变异或病变,可能两种细胞的敏感波峰会更加接近,让大脑难以区分红色和绿色光线引发的刺激。这就是红绿色盲的产生原因。

    因此,我们对于人眼这种视觉模型的模拟建模结果就是将光线颜色分为红色、绿色、蓝色(RGB)三色,并进行混色。

    0_1539065946597_3d86a50f-38ac-4837-be8b-b813ae7d9ee9-image.png

    这就是我们的第一个色彩空间RGB色彩空间。例如,在上面的photoshop创建文件截图中我们可以看到颜色模式这一项显示的是RGB。

    但我们有了模型,怎样让颜色变成电脑中能存储的数字呢?

    很自然地,我们想到了用数字对应光照强度,数字越大对应的颜色光照强度越强。

    0_1539065963795_2bed2172-6919-4796-a03d-047b45fd8c91-image.png

    由于电脑中一个基础数据单元字节能存8个二进制位,即最多能存下0到255(2的八次方减一)这些整数,所以颜色的最大值就是255,最小值是0。

    上图中我们看到红色R的值是255,绿色G和蓝色B都是0,所以组合出来的光线中不包含绿色和蓝色,红色光是最强的,整体的颜色就是红色。

    灰度色彩空间

    那么,有时候对于黑白照片,我们并不需要各种颜色,只有黑色白色和很多灰色,那我们花3个字节来存储RGB三种颜色,岂不是很浪费?

    0_1539065985053_3124c920-5586-41b5-9966-c5b1a8501dd5-image.png

    为了节约空间,在早期的电脑中就使用了直接用0~255对应黑色到白色渐变的手法。这就是灰度颜色模式。

    0_1539066004855_6f0669cf-bc95-4c4b-9d19-4a4ac3587dab-image.png

    位图色彩空间

    甚至有时候可以更极端,可能对于文档扫描件,我们只需要黑色和白色就可以了。在早期的针式打印机中,我们要么点下一个颜色,要么就没有颜色,没有那么多渐变。因此干脆只用一个二进制位来区别颜色,0就是黑色,1就是白色。这就是位图颜色模式。

    在位图颜色模式下,经常使用dither(抖动)这种技巧,通过黑白点的疏密来让人眼产生灰度变化的错觉。下图就是一个例子。在现在的报纸印刷中也常能见到这种技术。

    0_1539066015722_452155b2-48de-49f5-9c7e-e3d49048c538-image.png

    在刚才的描述中,我们已经能体会到色彩空间这个概念了。对于RGB颜色模式来说,R的0~255,G的0~255,B的0~255,总共能形成256256256=16777216种颜色组合,这就是RGB色彩空间。对于灰度模式来说,我们有0~255灰度范围,总共能形成256种颜色。对于位图模式来说,我们有0和1,总共能形成2种颜色。因此整体来看,也是非常符合直觉地,RGB对颜色的描述能力要强过灰度模式,而灰度模式要强过位图模式。

    一种描述方式所能描述的所有颜色的集合,这就是色彩空间。

    CMYK色彩空间

    但是问题又来了。我们知道红绿蓝是光的三原色,现在我们也知道为什么了。可颜色的三原色是红黄蓝,这又怎么办呢?红光和绿光加上蓝光混在一起是白光,但红黄蓝三种颜色混合在一起就变成了黑色,好像不能用RGB的模型来描述了。

    回头看看photoshop创建图像时的颜色空间,我们可以看到除了RGB、灰度、位图以外,还有两个选项:CMYK颜色和Lab颜色。

    0_1539065985053_3124c920-5586-41b5-9966-c5b1a8501dd5-image.png

    Lab颜色我们先放到一边。我们着重看这个CMYK。首先最重要的是先解释一下这四个字母是什么,它们分别是:Cyan(天蓝), Magenta(洋红), Yellow(黄色), Black(黑色)。刚好是蓝色、红色、黄色、黑色这几种颜料的颜色。

    显然,既然我们可以对光线的混合建模,那当然也可以对颜色的混合建模了。这个建模结果就是CMYK色彩空间。它在印刷中常常被使用到。

    这里是一张RGB和CMYK在电脑显示器上显示效果

    0_1539066058323_6958ca0f-568a-4b2a-bb94-972b8d85ca02-image.png

    可以看到,两种颜色是有差别的,这就是为什么常常我们在显示器上看起来颜色是这样,等打印出来却发现效果好像不太对。

    至于Lab颜色空间,它是对人眼视觉的更进一步贴合。主要用于科研或者高端需要等情况,一般我们不会使用到它。

    HSL/HSV色彩空间和色盘

    另外还有两种色彩空间值得提及。

    首先是HSL/HSV色彩空间。这两个色彩空间其实是同一个色彩空间。它更符合我们平时对于颜色的主观描述。HSL指的是Hue(色调)、Saturation(饱和度)、Lightness(明度),HSV中的HS和HSL是一样的,而V指的是Value(值)。

    对于HSL,我们常用一个双圆锥来形容这个色彩空间。

    0_1539066071410_a944c2b6-690f-4eca-b84f-46d053cef02f-image.png

    而对于HSV,则常使用一个圆柱体。

    0_1539066095033_d0c2c795-04f2-437b-8fb3-1f7895ab6b8b-image.png

    其实我们已经接触过这个色彩空间很多次了,只是很少会明确指出这个空间。例如下面这个Windows的取色器就使用的是HSL色彩空间。

    0_1539066127134_24957216-2f14-4fce-a2bc-eed29c6181d2-image.png

    取色器由一块矩形区域和一个灰度条组成。在矩形区域中我们选取的就是H和S,横向是H色调,而纵向是S饱和度,最右侧我们选择的是明度(当然这里写的是Lum,可能用的是物理亮度单位Lumen,不过并不影响我们理解)。

    最后一种色彩空间色盘就很简单易懂了。它主要是一种用来节约存储空间的手段。例如下图这个DawnBringer32色盘,选取了32种颜色,并依次编号0~31,这样就使用了5个2进制位(32是2的5次方)编码了一个色彩空间,并且通过dither等手法一样可以形成看起来色彩丰富的图像。在早期的计算机中也常使用这种色彩空间。

    0_1539066156058_c12fb2ee-2400-44c3-b5bd-b6fda0fd0fcb-image.png

    下面是DawnBringer8的一张示例图,这是一个只使用8种颜色的色盘。(图片来自pixeljoint

    0_1539066162299_763d1c7c-3920-48f2-9ac0-b144e505742a-image.png


 

Copyright © 2018 bbs.dian.org.cn All rights reserved.

与 Dian 的连接断开,我们正在尝试重连,请耐心等待