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

前二天在這篇文章 文章代碼(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 img 說明 每次要畫一個 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 UV 是 global variable 不用計算， COLOR 也是類似的 variable。 因為都算是 GLSL， 長的都差不多。 比較 ShaderToy 和 Godot 的執行畫面， ShaderToy 的黑色區域在左下角， Godot 在左上角， 代表二者的原點位置不同。 橢圓弧形變正圓弧形 因為畫面不是正方形， 而是長方形， 所以看的出來畫出的漸層並非正圓弧， 而是橢圓形弧形的。 要解決 uv 的二個值最大都是 1， 代表的真實長度卻不同的問題， 我們可以重新計算 x 或 y 值。 一般來說 resolution.y 比較短 (橫向畫面)， 所以當作 1，照比例調整 uv.x。 code image 在 Godot 裏， 語法也差不多。 差別是多了個可以從外部更改的 resolution 的 uniform 變數， 取得作畫範圍的像素長寬值。 code 轉換了 uv.x 後， 畫出來的陰影就是個圓弧形， 而非橢圓弧形的了。 將原點改成畫面中心處 如果我們想把原點放在中央， 而非左上或左下， 只要加一行座標轉換就可以了。 code 這樣圓心就在中間了。 image Godot version 下一篇， 要將這個漸層的圓形， 變成單色的圓形。