Unity Shader Breakdown - Speaker Deck

Slide 1

Slide 1 text

Unity Shader Breakdown 2021/07/09 CA.unity #2 株式会社Colorful Palette / 山口智也 1

Slide 2

Slide 2 text

@togucchi ● 所属株式会社Colorful Palette 「プロジェクトセカイカラフルステージ！ feat.初音ミク」開発チーム ● 職種 Unity/グラフィックスエンジニア 3D周辺やバーチャルライブの開発を担当 ● 経歴 2020年 4月株式会社CyberAgent 新卒入社 2020年 5月株式会社Colorful Palette 配属山口智也 (Yamaguchi Tomoya) 2

Slide 3

Slide 3 text

● Unityでのシェーダ実装に興味がある人 ● ゲーム制作で独自の特殊な絵作りをしたい人今回のLTのターゲット 3

Slide 4

Slide 4 text

1. 概要 2. シェーダ解説 a. 深度フォグ b. フレア・パラ c. ディフュージョン d. ゴッドレイ 3. まとめアジェンダ 4

Slide 5

Slide 5 text

概要 5

Slide 6

Slide 6 text

映像，VFXのメイキング映像「VFX Breakdown」などで検索すると出てきます Breakdown? https://www.youtube.com/results?search_query=vfx+breakdown 6

Slide 7

Slide 7 text

7 © Unity Technologies Japan/UCL

Slide 8

Slide 8 text

8 ● 深度フォグ ● フレア・パラ ● ディフュージョン ● ゴッドレイ空気感を出すためのポストエフェクトを中心に解説 © Unity Technologies Japan/UCL

Slide 9

Slide 9 text

シェーダ解説 9

Slide 10

Slide 10 text

画面の深度(depth)を元に指定した色にフェードさせる画面全体の色味の操作や奥行き感を出すのに有効 Render Pipeline Assetの Depth Textureをtrueにする深度フォグ 10 © Unity Technologies Japan/UCL

Slide 11

Slide 11 text

ランプテクスチャを使って距離によるフォグの強さや色を自由に制御ランプテクスチャをUnityの Gradientから生成する拡張を作成深度フォグ 11 © Unity Technologies Japan/UCL

Slide 12

Slide 12 text

アニメの撮影処理などでよく用いられる，画面全体にグラデーションをかける処理画面全体のまとまりや雰囲気の向上フレア … 薄く明るくする光パラ … 暗くする影フレア・パラ 12 フレアパラ © Unity Technologies Japan/UCL

Slide 13

Slide 13 text

フレア，パラそれぞれに円形の範囲指定，色の指定をできるようにして実装フレアは元の色に対して加算パラは乗算でブレンドフレア・パラ 13 フレアパラ © Unity Technologies Japan/UCL

Slide 14

Slide 14 text

フレア・パラ 14 薄紫色のフレアプロセカの例 ♪ ワーワーワールド

Slide 15

Slide 15 text

画面全体の光の拡散を表現アニメ等でよく使われる全体の絵がやわらかく，ふんわりとしたものになるディフュージョン 15 © Unity Technologies Japan/UCL

Slide 16

Slide 16 text

カラーを縮小バッファにコピー + コントラスト調整ガウシアンブラーを適用後元のカラーにブレンド (今回はスクリーン合成) ディフュージョン 16 負荷の軽減 + 大きくぼかすために縮小バッファを使用する © Unity Technologies Japan/UCL

Slide 17

Slide 17 text

17 ディフュージョンプロセカの例ディフュージョン + 被写界深度により全体がふわっとした雰囲気に ♪ ウミユリ海底譚

Slide 18

Slide 18 text

光が差し込んでいるような表現いわゆるVolumetric Lighting 今回はURP標準のデプスシャドウのShadowMapを使ったRaymarchingで実現ゴッドレイ 18 © Unity Technologies Japan/UCL

Slide 19

Slide 19 text

各ピクセルからレイを飛ばし，一定間隔でサンプリングする光が遮蔽されていないポイントで適当な係数をかけつつα値を加算していく解像度 ✕ サンプル数 → 処理負荷が非常に高いゴッドレイ 19 各ポイントの座標で ShadowMapをサンプリングする

Slide 20

Slide 20 text

深度テクスチャを元にオブジェクトに遮蔽されている部分は計算しないようにする時間をseedにした(疑似)乱数でレイのサンプリング開始位置をピクセルごとにずらしてループ数を低減ゴッドレイ - 工夫 - 20 ループ数48, 乱数なしループ数48, 乱数あり © Unity Technologies Japan/UCL

Slide 21

Slide 21 text

まとめ 21

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

今回の発表のサンプル https://github.com/togucchi/urp-postprocessing-examples 28

Slide 29

Slide 29 text

シェーダ実装でより自由な絵作りを 29