iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
2
Modern Web

寫給工程師的 WebGL 學習心得系列 第 10

[WebGL - Day10] Shadertoy - 座標與填上黑白

昨天提到四邊的值是 01
顏色也是 01

今天,總算要開始在 Shadertoy 上玩 Code 了!


回來看我們的老朋友,新建專案時會看到的程式碼:
shadertoy

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 的值,運算後是從左到右,下到上,01 的過程
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);

更改後點左下角三角形,沒錯誤的話會看到全黑畫面:
vec3(0)
這是將 col 指定為 vec3(0, 0, 0),等同於 HEX 色碼裡 #000000 的意思

2- vec3(1):

vec3 col = vec3(1);

同樣點左下角三角形,沒錯誤的話會看到全白畫面:
vec3(1)
這次用省略寫法,將 col 指定為 vec3(1) ,等同於 vec3(1, 1, 1),
也等同於 HEX 色碼裡 #ffffff 的意思


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

vec3 col = vec3(uv.x);

vec3(0.)
變成從左到右,黑到白的漸層了!(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);

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

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

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


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


上一篇
[WebGL - Day09] Shader 的寫法規定與通則
下一篇
[WebGL - Day11] Shadertoy - 顏色控制與使用 iTime 更新畫面
系列文
寫給工程師的 WebGL 學習心得30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
King Tzeng
iT邦新手 3 級 ‧ 2019-09-26 00:25:37

等不及了!!/images/emoticon/emoticon31.gif

終於回到當天一開始就發文了 XD

前輩要注意健康喔~早點休息~ /images/emoticon/emoticon69.gif

我要留言

立即登入留言