昨天講了輸出黑白畫面，並留了個問題：
輸出的畫面如果要是彩色的要怎麼處理?

將三個顏色都寫進去，還要定成不同的值！

 vec3 col = vec3(uv.x, uv.y, 0.);

嗯...why?

這段程式碼的意思
col 的 RGB 三個顏色中

• 左到右，填滿 #ff0000
• 從下到上，填滿 #00ff00
• 沒有填滿 #0000ff

同時放在一起時就輸出這的畫面了

用 Photoshop 做示意的話：

補充：
我用了三個圖層各代表 #ff0000(R)、#00ff00(G)、#0000ff(B)
並且在上層使用了變亮的混和模式，最後合出一樣的畫面
較特別的是我在最上層圖層的混合模式選了 變亮

參考自：Adobe Photoshop 中的混合模式

變亮 查看每一個色版的顏色資訊，並選取基本或混合色彩 (兩者中較亮的那一個) 做為結果色彩。比混合色彩暗的像素會被取代，比混合色彩亮的像素不會改變。
由於我畫面顏色的疊加，確實是要顯示較亮的那個，
因此選擇變亮時，就會與 Shader 畫面一樣的結果

再換一個值：

vec3 col = vec3(uv.x, uv.y,uv.x);

原理相同，將 B 的顏色替換為 uv.x 的漸層顏色

加上 iTime！

前文提到，iTime 是 Shadertoy 內建隨著時間演進會一直更新的值
很適合配上三角函數，製造簡諧運動的效果

假設要寫一個從 vec3(0.) 到 vec3(1.) 的簡諧運動，
可這麼寫：

vec3 col = vec3(cos(iTime)*0.5+0.5);

由於 cos 運算結果 會落在 -1 ~ 1 間，
將 cos(iTime) 的結果乘以.5 後再加上 .5，
結果會落在 0~ 1 間，也就是黑白漸變的簡諧運動

畫面：

最後，這就是為什麼是 Shadertoy 一開始範例會這樣動了

vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));