[美術] 用 shader 畫真實風格的火焰的步驟
這是我畫真實風格的火焰的步驟，
成品是 2D，但是可以讓物件永遠面向攝影機來變 3D。
用圖片說話，從左上開始。
[火焰顏色]
左上一：
先做一個簡單的 fbm texture，
並讓它從下往上移動。
如果不知道 fbm 是甚麼，
需要先把這本書讀完。
https://thebookofshaders.com/
左上二：
從黑白變橘紅色
n = fbm( uv );
color = vec3( 1.5n, 1.5n, n );
至於變藍變綠，只是 rgb 變 grb 或 gbr 的把戲而已。
左上三：
火焰下方要暗一點，可以用
color = color * ( 1.0 - uv.y );
火焰中心要亮一點，可以用
uv.x = uv.x - 0.5;
color = color * ( 1.0 - abs( uv.x ));
讓火焰上下方亮度不同，
增加真實感。
[火焰型狀]
左下一：
n = fbm( uv )
調對比 n = pow( n, contrast )
調亮度 n = whiteness * n
消除淺色區塊 n = n - dnoise;
合起來是
color = vec4( vec3( whiteness * max( 0, pow( n, contrast ) - dnoise )), 1.0 );
左下二：
用左上一的參數，
加上 uv.y 調整，
讓越上面的區塊越稀疏，
越下面越濃密，
調整成火焰的外型。
左下三：
用 alpha = length( uv ); 的技巧，
可以做出橢圓形的漸層，
修改一下 uv 比例可以調整為蠟燭狀。
左下四：
利用左下二和三當 mask，
套用左上三的顏色，
就能做出各種風格的大火或是燭光。
左下五：
也能做有趣的火焰鑽頭。
--
完整的 Github 連結 https://bit.ly/3IO52K8
是 Godot Project
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.228.119.213 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/GameDesign/M.1646647018.A.34A.html
※ 編輯: YoshiCasa (61.228.119.213 臺灣), 03/07/2022 18:02:42
推
03/07 18:08,
2年前
, 1F
03/07 18:08, 1F
→
03/08 13:11,
2年前
, 2F
03/08 13:11, 2F
GameDesign 近期熱門文章
PTT遊戲區 即時熱門文章
10
14
196
307
58
99