[美術] 用 shader 畫真實風格的火焰的步驟

作者: YoshiCasa (Yoshi Casa)   2022-03-07 17:56:55
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,
套用左上三的顏色,
就能做出各種風格的大火或是燭光。
左下五:
也能做有趣的火焰鑽頭。
作者: sargent (Conditional)   2022-03-07 18:08:00
哇 真的很像火燄欸 很有看遊戲機畫面的感覺 謝謝分享
作者: strangechu (電冰箱)   2022-03-08 13:11:00
Github是不是沒有公開 看不到
作者: wel0789321 (在意你就輸了)   2022-03-12 13:18:00
感謝分享

Links booklink

Contact Us: admin [ a t ] ucptt.com