[程式] 超新手 shader language 教學文 (一)

[meowyih (meowyih)]

前二天在這篇文章
文章代碼(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: 推 入門文章不多 因為本來就是進階
推 dklassic: 推新手文，也推 shadertoy XD
→ dklassic: 我還以為寫 shader 都知道這東西，看來沒我想像的廣播
推 devon5: 感謝分享
推 wel0789321: 讚 推個
推 coolrobin: 感謝推一個
推 LuMya: 推 學無止境
推 louisalflame: 推分享
推 CarpeDiemAL: 推 感謝！
推 OSDim: 我今天才知道UV是怎麼來的 太神辣
推 johnny94: 推
推 leonardo0917: 推推
推 Bencrie: OpenGL 的 texture coordinates 叫 strq，不是 uvw 啊
推 grezod: 推
推 johnkry: 我看很深奧啊...
推 megah321: 推
推 WanderLudens: push