Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Unity Shader Breakdown

Unity Shader Breakdown

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

7d9e8d94eac1bf5f4cb3cb92666276f5?s=128

Tomoya Yamaguchi

July 19, 2021
Tweet

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