【圖與畫】從電腦圖學看數位美術

帽捲
Maochinn
Published in
15 min readJun 11, 2023

做為一名電腦圖學(Computer Graphics)出身且有一點數位繪圖(Digital Painting)經驗的人來說,在整個大學和研究所期間都一直有想聊聊這兩者之間的關係,直到最近求學生涯算是告一個段落,再加上近年的AI繪圖愈發火熱,我才下定決心來寫這一系列的文章。

作為一名程式員,我們總是有一個貪婪的想法,我們想將「美」化約成數個元素,利用不同的數學模型(model)想方設法地去擬合(Fitting)不同的風格,用客觀的事實去理解主觀的感受,因為理論上要能夠定義「美」,那麼就一定能夠寫程式。

將「美」用冰冷的規則束縛住,使它不再神秘,使他不再美。

這件事情如此矛盾卻有無數人前仆後繼的追求這個聖杯,我不知道最近火紅的AI Art會不會是終極的解答,倘若是,那我們對這個產生「美」的AI又能了解幾分呢?所以我們不妨將視野拉回過去,看看前人如何追尋,從電腦圖學發展的路徑來探究美術。

引言

我從電腦圖學中學到灰階(Grayscale)樣條曲線(Spline Curve)以及高斯模糊(Blur)等專有名詞,另一方面在學習電繪的過程也會看到素描關係曲直虛實等概念,某種程度上,彼此好像有某種關係,例如:電腦可以用絕對的數值去描述一個像素的灰階值,但我們是否能夠定義黑、白、灰各自的範圍?顯然這是做不到的,因為黑白灰是相對的感受

就像是K大在許多課程所描述的,我們雖然不能用絕對的數值去一概而論,可是若在分析繪畫的時候能夠借助絕對的數值就可以更具體的理解一些相對的概念

(左圖)依據灰階值去分析大致的區塊,則可以得到(右圖)大致的黑白灰分布

我在塑造練習時會用數值來記錄黑白灰的各自的範圍,他們的數值不是重點,重點是你下筆的時候會有意識到你畫的是「黑」的部分,且在數值上不能畫到「灰」或是「白」的數值範圍,因此「電腦的角度來看美術」這件事可以幫助我們理性的理解人感受到的感性

目錄

從電腦看美術
從電腦圖學看數位美術
三原色光模式
- 如何感受到光的色彩
- 為甚麼是紅綠藍?
- 為甚麼不是黃綠藍?
亮度與色彩
結論

從電腦看美術

美,是一個相對主觀的感受,倘若在一個浮動標準上則難以討論,或者說討論前需要有大量的前提與共識,因此,我們透過電腦將「畫」數位化後成「圖」之後,其重點不是每個像素的數值,而是我們可以用一個共通的標準,來有意義討論繪畫。

因為過去在討論繪畫的時候,如果基礎的認知有偏差,往往會導致進階的溝通無法繼續,舉例來說,可能你認為的黑是30,而他認為的黑是10,那接下來要討論調子時可能就會牛頭不對馬嘴,換言之,數位化就是我們討論繪畫的一種共通語言

然而,在電腦這個平台上衍生出的電繪,或者準確地說是數位繪畫(Digital Paining),無論板繪或是螢幕繪,使用手指或是觸控筆,小畫家或是PS,雖然是不同的媒介,但最終仍是將其進行不同程度的數位化,將其顯示的螢幕上或是印刷到紙張上,這都都會利用到電腦圖學,因此我們不妨進一步將視角專注在電腦圖學是如何表現數位美術的。

現在以及過去的電繪設備: Ipad Pro 12.9 + procreate 以及 繪圖板 + CSP

從電腦圖學看數位美術

或許在一定程度上「如同電腦、機器般的思考繪畫」這麼說似乎有些令人排斥,但是,至少到目前為止,絕大多數現有電腦中的繪圖軟體還是人寫出來的,換言之,電腦的思考就是無數工程師思考後的結晶,也是無數人實驗並且反覆驗證的結果,也就是說,這些看似無趣的知識、規則,卻是客觀上最科學的解釋

因此這就是這個系列【圖與畫】的動機,我會儘量講的白話一些,當然,我更希望的是能夠普及一些電腦圖學的知識,也企圖系統化傳統美術的一些概念,讓繪畫的藝術家可以理解很多功能為甚麼可以這樣設計,電腦圖學的工程師可以理解一些抽象的概念。

這邊打個預防針,因為文章敘述上的流暢性,文章不會有非常完整的解釋以及證明,取而代之會是比較一條線的脈絡,因此可能會不夠嚴謹或是有誤,當然也歡迎補充。

這邊就舉個例子作為系列文章的濫觴,之後的文章應該也會是類似的感覺,我們可以先來談談,不管是在PS、CSP、Procreate之中最常看見的色彩系統,或者說一定會有的色彩系統,三原色光模式(RGB color model)

三原色光模式

所謂的RGB我想不需要我來解釋,其對應的是紅、綠、藍三色,那最令人好奇的是為甚麼所有顏色是由這三個顏色所組成?為甚麼不是更多顏色?例如CMYK,這邊可以參考wiki中寫道的

Physical principles for the choice of red, green, and blue

也就是說一開始選擇這三個顏色作為原色,並且進一步來組成其他顏色是因為生理上的原因,而非物理上的原因,甚麼意思呢?我們可以先來看物理中的光是怎麼回事,也就是可見光的波長對應我們觀察到的色彩。

sRGB rendering of the spectrum of visible light

下圖是測量不同光的波長分布,縱軸可以理解為光的強度,橫軸表示不同波長的光(波長由小到大是由藍到紅)。

Measured spectra of different light sources: (a) sunlight, (b) energy saving lamp, © halogen lamp (d) white light emitting diode. [1]

舉例來說,最上方表示表示白天光(Sunlight),可以發現基本上其是由所有波長的光所混和而成,而且每種光的強度高且平均,但是在藍光(約450nm)的強度稍強,因此在白天的時候整個環境是非常亮且白偏藍。在最下方的LED燈光,基本上就只由藍光(400~500nm)所組成,且光的強度弱,因此雖然也是藍色但是亮度遠不及白天光。更極端是雷射光(Laser),基本上就是單一波長的光。

當然,亮度色彩的概念其實是我們感受到的,對於物理來說光就只是電磁波,毫無反應,但我們在概念上可以這樣簡而言之:

光的絕對強度會影響亮度,但是不同波長光的相對強度則會影響色彩

進一步我們可以發現,若只考慮色彩,同樣是看到藍色,或者說是我們感受到藍色,其至少有兩種可能,一種是像白天光一樣,由不同波長光所混合而成,但是藍光部分偏強,另一種則是只由單一波長的藍光所造成,若將其推廣,每種色彩都可以用無窮多的方式混合而成。

一個在課本上的例子就是白光,自然中的白光是由七彩混合而成,或者說不同波長的光所混合而成,但是在螢幕上我們看到的白色卻只由RGB三個單一波長的光所混和而成。其結果如右圖所示,只要我們將圖片縮小或是拿遠看你就會發現RGB顏色就會混合成不同的顏色,這就是眼睛感受到的錯覺。

(Left) Photograph of a triangular prism, dispersing light. from wiki. (Right)Color wheel with RGB pixels of the colors. from wiki

換言之,為了讓人感受到相同的色彩,我們有無數種組合的方式,而用RGB作為三原色混合成各種色彩是人提出的其中一種解決方案。而因為螢幕是使用這樣的顯示方式,所以在電腦圖學中RGB色彩模型算是最常用的標準之一,但我們可以先來探討一個問題,我們是如何感受到光的色彩?

如何感受到光的色彩?

wiki的描述,我們看見顏色是因為視錐細胞(cone cell),其中分成三種類型的感光細胞,分別為L-cones、S-cones、M-cones,其分別對黃綠色、綠色和藍紫色的光敏感。

概念上來說,可以當作人的眼睛有三種sensor,每種sensor對應不同的波長的光會有不同的反應,例如:紅光照到S型的sensor幾乎不會有反應,而對於L則有較大的反應,其中,三種sensor所受到不同程度的反應就會讓你有不同色彩的感受

例如:假設三種sensor對650nm的光的反應比為S:M:L=0:1:10,那我們的大腦根據這樣的比例就會產生紅色的感受,若是0:1:1則可能是綠色的感受(540nm的光)。

Normalized responsivity spectra of human cone cells, S, M, and L types

另外,雖然波長只有一個維度,但是並不是說我拿紫色(400nm)+紅色(650nm)混和就會變成綠色((400+650)/2 = 525nm),因為我們能感受到色彩是因為三種視錐細胞不同程度的刺激所產生,這完全是生理的因素,不能直接套用物理的計算,何況不同波長的光應該也不能這樣相加平均。

有趣的是,因為LM對應的波長相當靠近,因此人對於紅到綠的色彩敏感程度會大於綠到藍。

為甚麼是紅綠藍?

這邊要先提到一個古老的實驗Color Matching,如左圖所示,這個實驗是有一個目標顏色,然後再拿紅綠藍三種顏色依據不同比例混合,然後用人眼來判斷是否與目標顏色相同,結果如右圖所示,我們可以用不同比例的RGB混合出等效於不同波長的光。

Maxwell method of color matching
(Left, Middle)[4] Maxwell method of color matching. (Right) Stiles-Burch 10° color matching functions averaged across 37 observers (adapted from Wyszecki & Stiles, 1982)

如果寫成數學式會長這樣,r, g, b分別對應R, G, B的強度

Target = r*R + g*G + b*B

敏銳的人可能會發現一件事,為甚麼紅光會有負的?因為他們發現很難用RGB混出非常飽和的藍綠色光,因此如中圖所示,實驗人員直接把些微的紅色跟目標藍綠色混和作為目標,再用藍+綠去match。如果寫成數學式會長成這樣

Target + r*R = g*G + b*B
Target = (-r)*R + g*G + b*B

因此此時測出來的r應該要變成是負號,總而言之,就是透過這種暴力的實驗,我們儘量將現實中所有感受到顏色窮舉,再利用r:g:b的比例去記錄下來,這才初步地建立了RGB模型。

當然,你可能仍有後續的疑問,為甚麼不是黃綠藍而是紅綠藍?

最簡單的說法是歷史因素,因為一開始人類是先做了RGB的嘗試後來才知道LSM三種感光細胞,因此就一直沿用至今。這當然可以用電腦圖學做解釋,但這個部分可能比較難理解,因此如果不想看可以直接繼續閱讀到下一章節。

延伸閱讀繼續閱讀

為甚麼不是黃綠藍?

簡單來說,是因為我們希望儘量讓三原色可以儘量獨立(Independent),希望一種原色可以簡單的對應一種感光細胞,而對於其他種感光細胞則較無反應。

舉例來說,紅光產生的反應比可能是

S:M:L = 0.0 : 1.0 : 10.0

黃光的反應比則可能是

S:M:L = 0.0 : 10.0 : 20.0

其中黃色雖然能夠有效刺激L,但是M也會被很大程度的被刺激,而紅色雖然對於L的刺激性不大,但是M的反應更小,而感知到色彩是三種感光細胞的反應比例(S:M:L)所產生,因此,紅色基本上可以理解成只會刺激L、綠色只會刺激M、藍色只會刺激S,這樣我們在操作跟理解上會比較方便,雖然事實上並非如此。

這樣的設計如果從線性代數的角度可以理解為RGB三個維度是接近線性獨立(linearly independent)的,有了這樣的特性,就可以套用很多的數學特性在上面,也就讓電腦計算上更方便,例如:可以將其視為特徵向量(Eigenvector)。

延伸閱讀

亮度與色彩

除了色彩,我們還能夠感受到亮度,換言之就是明暗,但是我們的感光細胞不只有視錐細胞,還有視桿細胞(rod cell),其只有一種感光細胞,因此只能感受到一維的強弱,並不能像SML視錐細胞一樣可以感受出三維的色彩。

因為視桿細胞主要用來感受明暗,且其數量遠大於視錐細胞,因此我們對於明暗的敏感度會遠大於色相,另外,我們在缺乏光的夜晚基本上也就是仰賴視桿細胞來感光,因此相較於明亮環境的五彩斑斕,昏暗環境則是黯然失色的。

Wavelength responsiveness of short (S), medium (M) and long (L) wavelength cones compared to that of rods (R).

從上圖也可以發現,視桿細胞主要受到藍綠光(500nm)的刺激,換句話說,綠色的光對於我們的眼睛來說不只是可以刺激視錐細胞中的LM,也可以有效刺激視桿細胞,我們也可以從計算灰階值的常見公式找到線索。

Gray = 0.299 * Red + 0.587 * Green + 0.114 * Blue

可以發現綠色的權重是最高的,也就是我們看到相同能量下的綠光對於其他色光,我們會感受到更亮的感覺,如果純粹從數值上來看,或許可以粗暴的理解為綠色的亮度是紅色的兩倍、藍色的六倍,那這可以解釋為甚麼示波器或是儀器會用綠光來表示。

但是敏銳的人可能會注意到藍色的權重比紅色還要低,但是視桿細胞明明對藍色比較敏感,這是因為因為我們轉灰階的圖通常是在明亮的環境下所拍出來的,在明亮的環境下,視錐細胞會相對容易刺激,也就是上述的灰階公式比較多考慮到視錐細胞,而紅光可以有效的刺激LM,所以紅光對於明度的權重自然較高。

但是,在昏暗的環境下則相反,感受明暗主要是由視桿細胞所影響,也就是藍光更能表示明度,這就是Purkinje effect

延伸閱讀

An animated sequence of simulated appearances of a red flower (of a zonal geranium) and background foliage under photopic, mesopic, and scotopic conditions

換句話說,這個灰階公式也是針對某個特定情況下才成立的,因此我們也可以知道為甚麼有人會說不同的色相對於明度的貢獻不同,這點最直觀可以從灰階公式中找到答案,而且在現實中昏暗場景跟明亮場景對應的灰階又可以用不一樣的公式來計算。

無論如何,這邊是要說明色彩會對我們感受到的明度有所影響,另一方面,人對於亮暗的敏感度遠大於色彩,也就是對於眼睛來說,在光線不足的情況下我們較感受不到色彩,但是可以感受到亮暗,所以我們也可以理解為何繪畫中黑白灰的素描關係更重要,因為我們對其更加敏感。

延伸閱讀

結論

總結來說,人用不同的實驗並且分析,將人的生理反應記錄下來,就像是三原色光模式,我們透過人為設計出來的RGB來記錄人對其的視覺感受,也就是說這些設計並不是基於物理上的原因,而是因為生理上的感受。

這邊節錄一些前面的發現

  • 人對於紅到綠的色彩敏感程度會大於綠到藍。
  • 人對於明暗的敏感度會遠大於色相
  • 綠色的亮度是紅色的兩倍、藍色的六倍。
  • 色彩會對明度有所影響

雖然的數據不一定完全正確,但是將生理上的感受記錄成物理上的數據,就能夠一定程度客觀地反應人的感受,例如:

  • 繪畫時黑白灰的素描關係會比色相重要
  • 紅色若要做到跟綠色相同亮度,可能紅色的明度要提高。

我們可以透過實驗,去驗證上面的假設,如果已經有人提出相同的觀點,那你也可以用這些數據來佐證,從科學的觀點來理解。

另一方面,我們將人感受到的亮度與色彩的概念,一定程度上數位化成明度與色相的數值,雖然這並非視能夠完全對應的,因為色彩會影響到明度,但是我們的操作上會把明度跟色相彼此獨立,也就是調整色相時不會影響明度,兩者互不干涉,也就較容易操作與理解,這也就是為甚麼我們要選用紅綠藍而非黃綠藍的原因。

有了明度與色相,就有了所謂的HSV Color Model,乃至於其他的各種色彩模型,這些都是基於某種感受而人為設計出來的,換言之,因為有過去不同的實驗,我們才能有基礎做後續的數位化,或許不需要了解「為甚麼會感受到色彩」的生理機制,但我們只需要理性的去察覺各種感受,並將其記錄下來、大膽提出假設、仔細驗證,也就是所謂的研究,也就是K大常常在做的繪畫研究

因此從電腦圖學看數位美術可以這樣描述:

我們企圖用理性的科學去驗證感性的美學
用基於物理的方式去分析生理的現象
做出客觀的事實去理解主觀的感受

與其說這些是電腦圖學不如說這就是科學,透過實驗以及反覆驗證得到的一些經驗公式,而我們只需要知道結論便可以在繪畫中表現不同的效果,甚至我們可以自己做實驗來提出不同的假說,並且在反覆的驗證中找到能讓自己最有感受的那種「美」。

或許冰冷的規則不是束縛住「美」,而是探究它神秘的路徑,使「美」之所以美。

至少我是這麼想的。

歡迎斗內鼓勵我繼續寫相關文章!

--

--