為什麼這篇GLSL 教學鄉民發文收入到精華區：因為在GLSL 教學這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者meowyih (meowyih)看板GameDesign標題[程式] 超新手 shader l...
前二天在這篇文章
文章代碼(AID): #1XJQL9jP (GameDesign)
才知道有 https://www.shadertoy.com/ 這個方便測試 WebGL 的網站，
就稱趁機寫了三篇非常入門的 shader language 教學，
幫想從零開始學 shader language (GLSL)
的網友省點時間
UV 座標
講 shader 一定要先提的是 UV 座標。
UV其實就是一個長方形的XY軸座標，
差別是UV的座標值是在 [0,1] 之間，
所以UV(0.5,0.5)就是平面的正中央。
舉例，
一個畫布長寬 (600,400)，
某個點 a1 位置 (300, 100)，
其 uv 是
(300/600, 100/400) = (0.5, 0.25)。
UV這名字的由來，
就只是因為這二個字母是在三維的(X,Y,Z)前，
沒別的意義。
UV 的原點，
在 WebGL 是在左下角，
在 Godot 是在左上角，
並不一定。
顏色
shader用 RGB 加上一個透明度的四個值代表顏色。
四個值都在[0,1]之間，
大於1都算1，小於0就是0。
白色就是(1,1,1,1)，黑色就是(0,0,0,1)。
因為UV座標和顏色的值都是[0,1]之間，
所以馬上可以寫一個簡單的程式測試圓點在哪。
使用 ShaderToy 網站
開啟 https://www.shadertoy.com/ ，
點右上的 New，
在右邊編輯框內打入下面程式，
按下面 compile 的三角形執行按鈕。
code
https://i.imgur.com/VrybqHX.jpg
img
https://i.imgur.com/LeBQYwD.png
說明
每次要畫一個 pixel，
都會呼叫一次 mainImage()。
vec4 fragColor 是 pixel 的顏色，
fragCoord 是 pixel 座標 (非UV)。
iResolution 是 ShaderToy 內建的參數，
代表了畫面的長寬最大值。
Godot 要怎麼寫?
在 Godot 中要寫 shader，
最快的方法是建立一個 ColorRect Node，
填入 Rect 的長寬 (size)，
顏色 (color)。
再到右邊 Inspector 的
CanvasItem -> Materil ->
ShaderMaterial -> New Shader
就可以在 Shader Editor 裏開始寫了。
在 Godot 中，同樣的 function 是這樣寫的。
code
https://i.imgur.com/Kw0d526.jpg
UV 是 global variable 不用計算，
COLOR 也是類似的 variable。
因為都算是 GLSL，
長的都差不多。
比較 ShaderToy 和 Godot 的執行畫面，
ShaderToy 的黑色區域在左下角，
Godot 在左上角，
代表二者的原點位置不同。
橢圓弧形變正圓弧形
因為畫面不是正方形，
而是長方形，
所以看的出來畫出的漸層並非正圓弧，
而是橢圓形弧形的。
要解決 uv 的二個值最大都是 1，
代表的真實長度卻不同的問題，
我們可以重新計算 x 或 y 值。
一般來說 resolution.y 比較短 (橫向畫面)，
所以當作 1，照比例調整 uv.x。
code
https://i.imgur.com/QlLz5yE.jpg
image
https://i.imgur.com/3jhrLbm.png
在 Godot 裏，
語法也差不多。
差別是多了個可以從外部更改的 resolution 的 uniform 變數，
取得作畫範圍的像素長寬值。
code
https://i.imgur.com/UyGE880.jpg
轉換了 uv.x 後，
畫出來的陰影就是個圓弧形，
而非橢圓弧形的了。
將原點改成畫面中心處
如果我們想把原點放在中央，
而非左上或左下，
只要加一行座標轉換就可以了。
code
https://i.imgur.com/opVlKK9.jpg
這樣圓心就在中間了。
image
https://i.imgur.com/XntdZ4F.png
Godot version
https://i.imgur.com/NNApsmn.jpg
下一篇，
要將這個漸層的圓形，
變成單色的圓形。
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.228.97.156 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/GameDesign/M.1632720747.A.76E.html
※ 編輯: meowyih (61.228.97.156 臺灣), 09/27/2021 14:48:06
推 wangm4a1: 推 入門文章不多 因為本來就是進階 09/27 16:10
推 dklassic: 推新手文，也推 shadertoy XD 09/27 16:31
→ dklassic: 我還以為寫 shader 都知道這東西，看來沒我想像的廣播 09/27 16:31
推 devon5: 感謝分享 09/27 17:32
推 wel0789321: 讚 推個 09/27 19:20
推 coolrobin: 感謝推一個 09/27 20:34
推 LuMya: 推 學無止境 09/27 23:17
推 louisalflame: 推分享 09/28 08:19
推 CarpeDiemAL: 推 感謝！ 09/28 15:53
推 OSDim: 我今天才知道UV是怎麼來的 太神辣 09/28 23:26
推 johnny94: 推 09/29 10:06
推 leonardo0917: 推推 09/29 12:28
推 Bencrie: OpenGL 的 texture coordinates 叫 strq，不是 uvw 啊 09/30 01:40
推 grezod: 推 09/30 21:17
推 johnkry: 我看很深奧啊... 10/01 08:49
推 megah321: 推 10/08 18:53
推 WanderLudens: push 10/09 12:07