下面介紹 Shader 中 gl_FragColor 的計算與轉換：
一、顏色計算
1. 加
這里要講講三原色和三基色：三原色一般指的是紅、綠、藍三種，簡稱 RGB，這是加色系。就是光源只含有特定的波段，本身就是色光，將不同顏色的光加在一起形成新的顏色。典型的例子是顯示屏，關系如下：
顯然，shader 中的顏色屬於加色系。當我們把顏色相加時，會形成新的顏色，並且顏色會往白色靠攏。顏色的混合規律符合三原色規律。
顏色相加是指光的疊加，物理上是光的強度相加。例如多個光源照射到一個表面後反射至攝像機，就可以把各個光照的反射結果相加。而題目中的例子是Phong或Blinn材質的反射模型，其意義可以算是一種擬合，把材質的反射分解成漫反射和鏡面反射，然後把兩種反射光的結果相加。
2. 乘
講完三原色，再講講三基色：一般指的是顏料三原色，在純白光照射下顏色為絳紅、黃、青，簡稱 CMYK，屬於減色系。它們本身不發光，靠反光被看見。由於材料吸收特定波段的光，所以只有不被吸收的部分反射了回來。加上的顏色越多吸收的光也越多。
當我們使用乘法來做顏色混合時，其規律符合三基色的混合規律，這個時候又是減色系。
兩個顏色相乘，會算出兩個顏色中 RGB 值的乘積並合成一個新的顏色。而且顏色總會越來越暗，回不到原來的白色。通常將顏色和一個值相乘，來弱化這個顏色。實際應用中通常用於混合反射率、光照衰減等。
顏色相乘，其實並不是數學中常見的矢量積，而應該理解為顏色的非等比縮放。例如，光通過有色玻璃時，玻璃吸收某百分比的紅、藍、綠，就可以把光的紅藍綠強度分別乘以對應的百分比。漫反射也可以理解成材質吸收了某百分比的入射光後向各方向反射。漫反射貼圖存的其實就是
對顏色為（1,1,1,1）的光的反射率。
3. 減
單純的顏色相減似乎沒有意義，不過通過1.0-color可以實現顏色的反相。
4. 真正的顏色混合
在圖片或視頻濾鏡中，一般不會直接使用加減乘除來做顏色混合。而是使用 mix() 函數，它的公式是：x*(1−a)+y*a，其實也是顏色相加，但是算上了一定的比重。這樣不會因為一個白色的顏色和其他顏色相加后只有白色，現實世界中也不是這樣的。
mix()可以做單通道或多通道的融合：
①. 簡單的顏色漸變
回到上面的案例，通過加法來表示重疊區域：
通過 mix() 來混合兩個顏色的過渡：
為什么加法和mix()得到的過渡顏色不一樣？各位可以思考一下。
②. 復雜的顏色漸變
為 rgb 三個通道賦以不同的函數變化曲線。plot 是封裝好的畫線函數，以xy二維笛卡爾坐標系做曲線的繪制，pct 表示x軸的變化速率，當x是線性變化時，曲線為直線。當x是非線性變化時，會有不一樣的曲線，從而導致漸變色的多樣變化：
二、顏色轉換
1. 基於笛卡爾坐標系
RGB 是對機器很友好的色彩模式，但並不夠人性化，因為我們對色彩的認識往往是”什么顏色？鮮艷不鮮艷？亮還是暗？”。HSL 模式和 HSV(HSB) 都是基於 RGB 的，是作為一個更方便友好的方法創建出來的 —— refer
- HSL 為 色相，飽和度，亮度
- HSV 為色相，飽和度，明度
- HSB 為 色相，飽和度，明度
下圖表達了兩種顏色模型對人類來說的易理解程度：
HSL 和 HSB/HSV 又有一些區別：
這里提供轉換公式：
// RGB 轉 HSB vec3 rgb2hsb( in 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); } // HSB 轉 RGB // Function from Iñigo Quiles // https://www.shadertoy.com/view/MsS3Wc vec3 hsb2rgb( in 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); } 復制代碼那我們可以怎么應用 HSB 顏色呢？
當我們讓色相 Hue 從0~1 遞增時，你會發現所有顏色都一一取到了（這里的飽和度和亮度都設置為 1）：
假設讓亮度也一樣從0~1，看看效果會如何：
你會發現水平方向的亮度變化不好看，如果是垂直方向的呢？
再改一下垂直方向的飽和度，你會發現有了 HSB，一切顏色變化都更好理解了：
2. 極坐標系
HSB 原本是在極坐標下產生的（以半徑和角度定義）而並非在笛卡爾坐標系（基於xy定義）下。將 HSB 映射到極坐標我們需要取得角度和到像素屏中點的距離。由此我們運用 length() 函數和 atan(y,x) 函數。
當用到矢量和三角學函數時，vec2, vec3 和 vec4 被當做向量對待，即使有時候他們代表顏色。我們開始把顏色和向量同等的對待，事實上你會慢慢發現這種理念的靈活性有着相當強大的用途。—— refer