輝きを極める：Unity における高度な視覚手法

輝きを極める: Unity における 高度な視覚手法

→ シーケンス カードの構成 アジェンダ → → → → → ホログラフィック効果 マスキング、ポータル 視覚効果 (VFX) シェーディングとレンダリング パフォーマンスとワークフロー → 質問

発表タイトル Ors on Fa vre l Rémi Cha p e la in シニアテクニカルアーティスト シニアテクニカルアーティスト

シーケンス 輝くもの

カードの構成 ソーセージの作り方

ホログラフィックシェーダー → フレネルノード ⎯ 基本的にビューと法線のドット積 → 出力を使ってテクスチャやグラデーションの サンプリングを行う

カードの構造

カードの構造 → カードの境界線

カードの構造 → カードの境界線 → 背景

カードの構造 → カードの境界線 → 背景 → サブジェクトレイヤー 0

カードの構造 → → → → カードの境界線 背景 サブジェクトレイヤー 0 サブジェクトレイヤー 1

カードの構造 → → → → → カードの境界線 背景 サブジェクトレイヤー 0 サブジェクトレイヤー 1 カードのタイトル

カードの構造 → → → → → → カードの境界線 背景 サブジェクトレイヤー 0 サブジェクトレイヤー 1 カードのタイトル カードのコスト

カードの構造 → → → → → → → カードの境界線 背景 サブジェクトレイヤー 0 サブジェクトレイヤー 1 カードのタイトル カードのコスト VFX レイヤー

Sprite Mask と Sprite Renderer

Mask Interaction

深度の錯覚

VFX レイヤー → VFX Gra p h アセット 1 つ → VFX Gra p h 内に複数のシステム → VFX を簡単に作成するための専用ギズモ

カメラマスク → レンダーテクスチャにマスクを書き込む 2 台目のカメラ → SG (または VFX) でこのレンダーテクスチャのサン プリングを行い、カードの外側のすべてを隠す

新しいカードを公開 Robot Kyle はもういい

ひねりを加えたレンダーテクスチャの技 → スプライトマスク手法 ⎯ 機能するが、複雑な設定には適さない ⎯ 2 D オブジェクトや分割オブジェクトを使わな ⎯ 透明度に関する問題 ければならない → ひねりを加えたレンダーテクスチャの技 ⎯ ⎯ ⎯ カードマスクのサイズを大きくする カードマスクの R チャンネルにカード平面 の深度を格納する シェーダーグラフでこの深度のサンプリング を行う

ひねりを加えたカードマスキング → 比較 ⎯ ピクセルの実際の深度 ⎯ R チャンネルに格納されている深度 ⎯ 通常の表示 (true ) ⎯ B チャンネルに保存されているマスクでカー → 平面の現在のピクセルのほうが大きい場合 → 大きくない場合 ド内のピクセルをクリップ

カードの構造 → キャラクター ⎯ 頂点ディスプレイスメント用に ⎯ 視差オクルージョンマッピングを → 環境 細分化されたクアッド 使用したクアッド → スモーク/ゴーストの VFX

キャラクター → → → → 頂点ディスプレイスメント オン/オフ ハイトマップを使用した頂点ディスプレイスメント ボディ 上腕 前腕 色 ハイトマップ 法線マップ

キャラクター → → → → ハイトマップを使用した頂点ディスプレイスメント ボディ 上腕 前腕 → 視差効果を高めるために各平面がわずかに オフセットされる

視差オクルージョンマッピングとは → 視差オクルージョンマッピング (POM) はカメ ラの動きに合わせて UV をシフトさせ、平らな 表面が本物の奥行きを持っている ように見せる → ハイトマップと振幅を入力として受け取る → ノードはテクスチャのサンプリングに 使用できる UV を出力する

環境 → 深度を持つ視差オクルージョンマッピング → 4 つの頂点を持つシンプルなクアッド ⎯ 振幅とスクロールノイズを乗じた ⎯ 松の木と山々 2 レイヤーの小麦 ハイトマップ スクロールノイズ

長所/ 短所 頂点ディスプレイスメント 長所 • 品質とライティングが向上する • あらゆる方向にプッシュできる • フラグメントステージが安価に なる 視差オクルージョンマッピング (POM) 短所 • 頂点不足時にアーティファクトが発 生する • ジオメトリを細分化する必要がある • Z ファイティングの問題が起こる可能 性がある • 頂点ステージが重くなる 長所 • シンプルなクアッドで使用できる • 頂点ステージが安価になる 短所 • ステップ数が多すぎる/少なすぎる場 合にアーティファクトが発生する • 平面の “上” を押せない • フラグメントステージで重くなる

ゴースト視覚効果

VFX Graph カスタム HLSL → グラフィックスバッファの読み取り/書き込みを サポート → テクスチャの読み取り/書き込みをサポート → グローバルバッファ/テクスチャバインディングを行う 必要がない → 新しい可能性を引き出す → とても楽しい :)

VFX Graph/RW テクスチャ HLSL まとめ → → → → → → → パフォーマンスが素晴らしい レンダリングコストが軽い → Unlit クアッド 1 つ VFX Gra p h ライブラリに完全にアクセスできる コンピュートシェーダーノードベースのサンドボックス としての VFX Gra p h 異なる VFX システム間、または VFX とシェーダー間の 通信を可能にする 再生が非常に楽しい C# 不使用で、すべてが VFX Gra p h にビルトイン

カスタムライティング トゥーンシェーディングはどうだろうか?

カスタムライティングサンプル → Pa c ka g e Ma na g e r からインストールできる → カスタムライティングシェーダーを簡単に 作成できる

カスタムライティングサンプル

レンダラー機能 もっとレンダーパスが必要です!

カードマスクアプローチの制限 → 2 台目のカメラを用意する → カードを横切るオブジェクトのすべてのシェーダー グラフを変更する必要がある → よく機能するのはカードマスクが見える場合だけ

→ 作成が非常に簡単で、必要なコードもほとんどない 補足事項 → 手書きのシェーダーでステンシルを読み書きできるが、 見た目が劣り、より多くの知識が必要 → シェーダーグラフにステンシル機能があれば理想的だが、 まだ ない

パフォーマンス、スケーラビリティ、 ワークフロー 三銃士

"あと 10 0 枚カードを作ろう!" - おそらく熱心な、あるクリエイティブディレクター

マテリアルのバリエーション → マテリアルバリアント ⎯ 手作業で作成するのは面倒 ⎯ バッチ処理が中断する ⎯ パフォーマンスが減速する → ランタイムのマテリアルインスタンス → マテリアルプロパティブロック

レンダラーシェーダーの ユーザー価値 (RSUV) → シェーダーがレンダリング用のデータにアクセス するための定数バッファが割り当てられている → CBuffer の空きデータ空間 (3 2 ビット) → レンダラーで C# でデータを設定する → シェーダー側でデータを取得する ⎯ unity_RendererUserValue → CPU から GPU へのデータ受け渡しが安上がり → バッチ処理を中断しない

レンダラーシェーダーのユーザー価値 → 異なるプロパティを持つ 4 0 枚のカード ⎯ テキストを表示するかしないか ⎯ 背面の色を 4 色から選択: ⎯ ランダムな Unite 年 ⎯ ランダムな境界線の色 ⎯ 赤、緑、青、黒 ⎯ 2 0 0 0 年から 2 0 3 1 年の間 → 3 2 ビットのデータをどうパックするか?

RSUV: 効率的にパッキング テキスト表示 背面の色 Unite 年 境界線の色 => => => => はい 青 (3 色目) 2025 オレンジ {RGB:1, 0.5, 0)

RSUV: 効率的にパッキング テキスト表示 背面の色 Unite 年 境界線の色 {0} {1} => => => => はい 青 (3 色目) 2025 オレンジ {RGB:1, 0 .5 , 0 )

RSUV: 効率的にパッキング テキスト表示 背面の色 Unite 年 境界線の色 {0} {0,0} => 0 {1} {0,1} => 1 {1,0} => 2 {1, 1} => 3 => => => => はい 青 (3 色目) 2025 オレンジ {RGB:1, 0 .5 , 0 )

RSUV: 効率的にパッキング テキスト表示 背面の色 Unite 年 境界線の色 {0} {0,0} => 0 {1} {0,1} => 1 {1,0} => 2 {1, 1} => 3 => => => => はい 青 (3 色目) 2025 オレンジ {RGB:1, 0 .5 , 0 )

RSUV: 効率的にパッキング テキスト表示 背面の色 Unite 年 境界線の色 {0} {0,0} => 0 {1} {0,1} => 1 {1,0} => 2 {1, 1} => 3 => => => => はい 青 (3 色目) 2025 オレンジ {RGB:1, 0 .5 , 0 )

RSUV: 効率的にパッキング テキスト表示 背面の色 Unite 年 境界線の色 {0} {0,0} => 0 {1} {0,1} => 1 {1,0} => 2 {1, 1} => 3 => => => => はい 青 (3 色目) 2025 オレンジ {RGB:1, 0 .5 , 0 )

RSUV: 効率的にパッキング テキスト表示 背面の色 Unite 年 境界線の色 {0} {0,0} => 0 {1} {0,1} => 1 {1,0} => 2 {1, 1} => 3 => => => => はい 青 (3 色目) 2025 オレンジ {RGB:1, 0 .5 , 0 )

発表タイトル セクションタイ トル コードサンプル RSUV エンコード (C#) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // Function Prototype data = HelpersRSUV.EncodeData(data, value, bitOffset, length); … uint data = 0x00000000; // All bits set to 0 data = HelpersRSUV.EncodeData(data, showText, 0, 1); // show => [0, 1] data = HelpersRSUV.EncodeData(data, colorIndex, 1, 2); // colorIndex => [0, 3] data = HelpersRSUV.EncodeData(data, year, 3, 5); // year => [0, 31] data = HelpersRSUV.EncodeData(data, ( int ) (borderColor.linear.r * 255 ), 8, 8); data = HelpersRSUV.EncodeData(data, ( int ) (borderColor.linear.g * 255 ), 16, 8); data = HelpersRSUV.EncodeData(data, ( int ) (borderColor.linear.b * 255 ), 24 , 8); // R =>[0, 255] // G =>[0, 255] // B =>[0, 255]

発表タイトル セクションタイ トル コードサンプル RSUV デコード (HLSL) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 // Function Prototype int value = DecodeBitsToInt(data, bitOffset, length); … void GetRSUVCardBack_float (out bool ShowText, { uint data = unity_RendererUserValue ; out int Year, out int CardColorIndex, ShowText = DecodeBitsToInt(data, 0 , 1); CardColorIndex = DecodeBitsToInt(data, 1, 2); Year = DecodeBitsToInt(data, 3, 5); } int borderR = DecodeBitsToInt (data, 8, 8); int borderG = DecodeBitsToInt (data, 16, 8); int borderB = DecodeBitsToInt (data, 24 , 8); BorderColor = float4(borderR / 255.0 , borderG / 255.0 , borderB / 255.0 , 1.0); out float4 BorderColor)

レンダラーシェーダーのユーザー価値 → 設定にかかる費用 → 作成するマテリアルバリアントの数を減らすことで ワークフローが合理化される → マテリアルのカスタマイズをマテリアルインス ペクターから C# MonoBehaviour に委ねる → シェーダーの値をゲーム駆動にできる → パフォーマンスの向上

まとめ 輝きを極める → ポータルを作成する複数の方法 ⎯ ⎯ ⎯ スプライトマスク 2 台目のカメラによる RT トリック レンダラー機能

まとめ 輝きを極める → 単純な平面に厚みを加える ⎯ ⎯ 頂点ディスプレイスメント 視差効果 ⎯ ⎯ Z オフセット 視差オクルージョンマッピング

まとめ 輝きを極める → カードに生命と雰囲気を加える方法 ⎯ ⎯ ⎯ UV スクロール/歪み VFX Gra p h ホログラフィック効果

まとめ 輝きを極める → パフォーマンス、スケーラビリティ、 ワークフローの改善 ⎯ レンダラーシェーダーのユーザー価値 (RSUV)

Thank you

質問