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

作者: meowyih (meowyih)   2021-09-28 14:24:37
有人問為什麼 youtube 看的教學都是用拉的,
我前面幾篇都要自己寫 code?
那種拉來拉去的工具叫 Visual Shader Editor,
為了說明 Visual Shader Editor 和 Shader Language 的關係,
我做了個影片,
影片會用 Visual Shader Editor 重寫上面雷射光的 code。
// code 原來大概是長這樣
vec2 uv.y = uv.y - 0.5;
vec4 color = vec4(0.9,0.5,0.3,1);
float coeff = abs(5.0/(200*uv.y));
fragColor = (coeff,coeff,coeff,1)*color;
影片
https://youtu.be/StYf2IEB70U
影片說明
0:00 - 0:23 建立一個 ColorRect
0:23 - 0:55 改畫面大小和顏色
0:55 - 1:09 打開 Visual Shader Editor
1:09 - 1:40 把 Spatial mode 改成 CanvasItem,並建立 uv input
1:40 - 2:28 取得 uv.y 的值
2:28 - 3:01 uv.y = uv.y - 0.5 (畫面中間)
3:01 - 3:48 coeff = abs( 5.0 / ( 100 * uv.y ))
3:48 - 5:30 COLOR = vec4(coeff, coeff, coeff, 1) * vec4(0.9, 0.3, 1)
以直接畫在一個 2D canvas 的例子,
自己寫 code 比用 visual shader editor 簡單易懂多了。
visual shader editor 用在 3D 物件的著色比較好用。
而且不先學寫 code,
直接學拉來拉去那套,
應該也看不懂吧?
至少我是這樣啦
作者: ddavid (謊言接線生)   2021-09-28 15:00:00
想到之前看到一則twitter就能放下的shader效果https://twitter.com/zozuar/status/1440776076846776320不是哲學,而是數學XD
作者: dklassic (DK)   2021-09-28 16:42:00
我覺得真正不要拉的理由會是能實作的內容會受限 XD用拉的可以直接在中間 Debug 視覺成效還是很實用但是用拉的話通常都不能用到所有 Shader 功能像 Unity 就是用拉的會做不了 Geometry Shader
作者: skdXD (哈哈鏡)   2021-09-29 01:52:00
Unity也可以用寫的啦,不要亂帶風向
作者: dklassic (DK)   2021-09-29 02:21:00
我是說「在 Unity 用拉的」.....沒必要火氣這麼大直接說亂帶風向吧 OrzUnity 用拉的,的「Shader Graph」是不支援 Geometry 啊
作者: a82611141   2021-09-29 03:39:00
作者: LayerZ (無法如願)   2021-10-01 17:04:00
用拉的...拉出效能爆炸要修的時候就知道了?
作者: dklassic (DK)   2021-10-01 19:48:00
好問題,有什麼圖形編輯相對原生的效能差距研究嗎?像是 Unity 裡面提供的選項其實我都想不到會有什麼轉譯的缺失反過來用 Shader Graph 也可以避免要對三種 pipeline各寫一個版本的問題 XD啊不對,只能適用 HDRP 跟 URP XD

Links booklink

Contact Us: admin [ a t ] ucptt.com