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

看板GameDesign (遊戲設計)作者meowyih (meowyih)時間3年前 (2021/09/27 13:32)推噓16(16推 0噓 1→)

留言17則, 16人參與討論串1/1

前二天在這篇文章文章代碼(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