前二天在這篇文章
文章代碼(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
下一篇，
要將這個漸層的圓形，
變成單色的圓形。