得番兩個大師球...大家仲想我捉咩小精靈？
同埋今集我加番戰鬥時既音樂...希望大家鍾意！
Facebook : http://www.facebook.com/ahhins819
Instagram : http://instagram.com/ah_hin
Texture Pack : http://www.mediafire.com/download/8a03r0tqg3p51qt/Pokeballers+Pixelmon+Texturepack+2.2.1.zip
Shaders ：http://www.minecraftforum.net/topic/940974-172sonic-ethers-unbelievable-shaders-and-glsl-shaders-mod/
------------------------------------------------------------------------------------
YouTopia其他訓練員頻道：
大J: http://youtube.com/jstud1o
茶壺: http://youtube.com/jackdontlie
秋本: http://youtube.com/DidoPopcorn
石頭: http://youtube.com/mistersektau
KZee : https://www.youtube.com/GPKZee
屎萊姆: http://youtube.com/edwardslime
Sing：http://youtube.com/singsing524
------------------------------------------------------------------------------------
有任何意見或者想有野同我講既 記住下面留言呀！
glsl 教學 在 [程式] 超新手shader language 教學文(一) - 看板GameDesign 的推薦與評價
前二天在這篇文章
文章代碼(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
下一篇，
要將這個漸層的圓形，
變成單色的圓形。
--
※ 發信站: 批踢踢實業坊(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
... <看更多>