Unity Shader Breakdown

CA.unity #2 のアーカイブです

1. Unity Shader Breakdown 2021/07/09 CA.unity #2 株式会社Colorful Palette / 山口 智也 1
2. @togucchi • 所属 株式会社Colorful Palette 「プロジェクトセカイ カラフルステージ！ feat.初音ミク」 開発チーム • 職種 Unity/グラフィックスエンジニア 3D周辺やバーチャルライブの開発を担当 • 経歴 2020年 4月 株式会社CyberAgent 新卒入社 2020年 5月 株式会社Colorful Palette 配属 山口 智也 (Yamaguchi Tomoya) 2
3. • Unityでのシェーダ実装に興味がある人 • ゲーム制作で独自の特殊な絵作りをしたい人 今回のLTのターゲット 3
4. 1. 概要 2. シェーダ解説 a. 深度フォグ b. フレア・パラ c. ディフュージョン d. ゴッドレイ 3. まとめ アジェンダ 4
5. 概要 5
6. 映像，VFXのメイキング映像 「VFX Breakdown」などで 検索すると出てきます Breakdown? https://www.youtube.com/results?search_query=vfx+breakdown 6
7. 7 © Unity Technologies Japan/UCL
8. 8 • 深度フォグ • フレア・パラ • ディフュージョン • ゴッドレイ 空気感を出すための ポストエフェクトを中心に解説 © Unity Technologies Japan/UCL
9. シェーダ解説 9
10. 画面の深度(depth)を元に 指定した色にフェードさせる 画面全体の色味の操作や 奥行き感を出すのに有効 Render Pipeline Assetの Depth Textureをtrueにする 深度フォグ 10 © Unity Technologies Japan/UCL
11. ランプテクスチャを使って 距離によるフォグの強さや 色を自由に制御 ランプテクスチャをUnityの Gradientから生成する拡張を 作成 深度フォグ 11 © Unity Technologies Japan/UCL
12. アニメの撮影処理などで よく用いられる，画面全体にグラ デーションをかける処理 画面全体のまとまりや 雰囲気の向上 フレア … 薄く明るくする光 パラ … 暗くする影 フレア・パラ 12 フレア パラ © Unity Technologies Japan/UCL
13. フレア，パラそれぞれに 円形の範囲指定，色の指定を できるようにして実装 フレアは元の色に対して加算 パラは乗算でブレンド フレア・パラ 13 フレア パラ © Unity Technologies Japan/UCL
14. フレア・パラ 14 薄紫色のフレア プロセカの例 ♪ ワーワーワールド
15. 画面全体の光の拡散を表現 アニメ等でよく使われる 全体の絵がやわらかく， ふんわりとしたものになる ディフュージョン 15 © Unity Technologies Japan/UCL
16. カラーを縮小バッファに コピー + コントラスト調整 ガウシアンブラーを適用後 元のカラーにブレンド (今回はスクリーン合成) ディフュージョン 16 負荷の軽減 + 大きくぼかすために 縮小バッファを使用する © Unity Technologies Japan/UCL
17. 17 ディフュージョン プロセカの例 ディフュージョン + 被写界深度 により全体がふわっと した雰囲気に ♪ ウミユリ海底譚
18. 光が差し込んでいるような表現 いわゆるVolumetric Lighting 今回はURP標準の デプスシャドウのShadowMapを 使ったRaymarchingで実現 ゴッドレイ 18 © Unity Technologies Japan/UCL
19. 各ピクセルからレイを飛ばし， 一定間隔でサンプリングする 光が遮蔽されていないポイントで 適当な係数をかけつつα値を 加算していく 解像度 ✕ サンプル数 → 処理負荷が非常に高い ゴッドレイ 19 各ポイントの座標で ShadowMapをサンプリングする
20. 深度テクスチャを元に オブジェクトに遮蔽されている部分 は計算しないようにする 時間をseedにした(疑似)乱数で レイのサンプリング開始位置を ピクセルごとにずらして ループ数を低減 ゴッドレイ - 工夫 - 20 ループ数48, 乱数なし ループ数48, 乱数あり © Unity Technologies Japan/UCL
21. まとめ 21
22. 22 ゴッドレイ © Unity Technologies Japan/UCL
23. 23 フォグ © Unity Technologies Japan/UCL
24. 24 ディフュージョン © Unity Technologies Japan/UCL
25. 25 フレア・パラ © Unity Technologies Japan/UCL 完成！
26. 26 ベース © Unity Technologies Japan/UCL
27. 27 © Unity Technologies Japan/UCL 完成！
28. 今回の発表のサンプル https://github.com/togucchi/urp-postprocessing-examples 28
29. シェーダ実装で より自由な絵作りを 29