作者YoshiCasa (有希陋室)
看板GameDesign
標題[美術] 用 shader 畫真實風格的火焰的步驟
時間Mon Mar 7 17:56:55 2022
https://www.youtube.com/watch?v=nonpwfnGiNQ
這是我畫真實風格的火焰的步驟，
成品是 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://webptt.com/m.aspx?n=bbs/GameDesign/M.1646647018.A.34A.html
※ 編輯: YoshiCasa (61.228.119.213 臺灣), 03/07/2022 18:02:42
1F：推 sargent: 哇 真的很像火燄欸 很有看遊戲機畫面的感覺 謝謝分享 03/07 18:08
2F：→ strangechu: Github是不是沒有公開 看不到 03/08 13:11
抱歉忘了改。
不過有人點進去讓我很感動，謝啦 ^o^
3F：推 wel0789321: 感謝分享 03/12 13:18
※ 編輯: YoshiCasa (61.228.100.159 臺灣), 03/13/2022 20:14:04