昨天提到四邊的值是 0 與 1
顏色也是 0 與 1

今天，總算要開始在 Shadertoy 上玩 Code 了！

回來看我們的老朋友，新建專案時會看到的程式碼：

01.   void mainImage( out vec4 fragColor, in vec2 fragCoord )
02.   {
03.       // Normalized pixel coordinates (from 0 to 1)
04.       vec2 uv = fragCoord/iResolution.xy;
05.   
06.       // Time varying pixel color
07.       vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
08.   
09.       // Output to screen
10.       fragColor = vec4(col,1.0);
11.   }

4. vec2 uv 的值，運算後是從左到右，下到上，0 到 1 的過程
10. fragColor 是將 vec3 col 補上第四個值後的輸出

因此，決定顏色的關鍵就是第 7 行：

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

--

先替換成兩個簡單的數值：
1- vec3(0, 0, 0)：

vec3 col = vec3(0, 0, 0);

更改後點左下角三角形，沒錯誤的話會看到全黑畫面：

這是將 col 指定為 vec3(0, 0, 0)，等同於 HEX 色碼裡 #000000 的意思

2- vec3(1)：

vec3 col = vec3(1);

同樣點左下角三角形，沒錯誤的話會看到全白畫面：

這次用省略寫法，將 col 指定為 vec3(1) ，等同於 vec3(1, 1, 1)，
也等同於 HEX 色碼裡 #ffffff 的意思

接著有點神奇，
一樣調整 col ，這次帶入 uv.x

vec3 col = vec3(uv.x);

變成從左到右，黑到白的漸層了！(what?)

Shader 常常這麼令人驚嚇

發生了什麼事?

vec3 col = vec3(uv.x);

col = vec3(uv.x)，實際上也是
col = vec3(uv.x, uv.x, uv.x) 的意思
uv.x 實際上是一個從左到右， 0~1 的數字
所以運算出來的圖，就會是左到右，黑到白的畫面

如果想要的效果是白到黑呢?

vec3 col = vec3(1.-uv.x);

因為 uv.x 是從左到右，0 到 1 的過程
uv.x 不變，結果要從 1 到 0
用 (1. - uv.x) 就可以了

用數學的方式解決畫面的需求，
寫 Shader 就是這麼一回事!

同時也是我在先前的文章提到，寫 Shader 時思考方式很不一樣的部分

Q：那彩色的話...?
A：不難猜，但有更多有趣的部分，會放在明天的內容！