Unity Shader Breakdown

Transcript

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