URP周りの取り組み紹介

URP周りの取り組み紹介 岩崎 正揮 第一技術部 テクノロジー推進第一グループ ゲームサービス事業本部 開発事業部 株式会社ディー・エヌ・エー © DeNA Co., Ltd. 1

自己紹介 岩崎 正揮 DeNA ゲームサービス事業本部 開発事業部 第一技術部 テクノロジー推進第一グループ グループリーダー 経歴 ● ● ● ● ● ● © DeNA Co., Ltd. 2004年、コンシューマゲーム会社に新卒入社 レースゲーム開発、ゲーム機を使ったR&D等に従事 2015年、DeNAに中途入社 IPタイトルの開発～運用を経験 グラフィクス横断部門を立ち上げ、マネージャーに 複数のプロジェクトのサポートを行ったり、 タイトル開発に従事したり 2

はじめに DeNAでは、主にUnityを用いてモバイルゲーム開発を行なっています 今日は、DeNAゲーム事業のグラフィクス横断チームの開発事例を紹介します ● 内製統合シェーダー「Dorothy Shader」 ● 背景画像と3Dオブジェクト描画の合成 © DeNA Co., Ltd. 3

内製統合シェーダー 「Dorothy Shader」 © DeNA Co., Ltd. 4

「Dorothy Shader」とは？ 様々な3Dゲームジャンルで利用しうるライティング機能を備えた内製統合シェーダーです 物理ベースライティング（PBR）、セルシェーディング（MatCap, Ramp）、UnLitなどの基 本的なライトモデルの他、ファーや輪郭線などサーフェイスにかかわる機能も、すべて一つ のシェーダ（UberShader）によって実現しています © DeNA Co., Ltd. 5

なぜ「Dorothy Shader」？ Unity標準のStandard ShaderではPBS（物理ベースシェーディング）が実装され、現実世界 のような見た目を作る事が可能になっています 一方で、DeNAでは様々なジャンル・テイストのゲームを開発します それらの中には、フォトリアリスティック表現を求めるものもあれば、アニメ調の表現を求 めるものなど、様々な表現要求があります それらを統一的に扱えるようにし、また開発が進むにつれて発生するシェーダ数の爆発/保 守の煩雑さ/メモリ増加などの問題を抑えるために、Dorothyを開発しています © DeNA Co., Ltd. 6

「Dorothy Shader」の実装の特徴 ● 多くの機能がUnity URP上でそのまま動くように実装されています ● UnityPackageとして独立した機能を提供しており、プロジェクトに簡単に導入するこ とができます （※一部独自のRendererFeatureなどに依存する機能もあり） ● URPに対応しているポストエフェクトなども基本的にそのまま動作します © DeNA Co., Ltd. 7

「Dorothy Shader」の機能紹介 © DeNA Co., Ltd. ● BRDFモデル ● Outline ● Global Illumination ● Shadow Custom Color ● Alpha Dither ● Normal Sphere Collection ● Surface Mask ● Diffuse Control Map ● Matcap Light ● Rim Light ● Fur ● Reflector Effect 8

「Dorothy Shader」の機能紹介 ● BRDFモデル ベースとなるシェーディングモデルを選択できる © DeNA Co., Ltd. ○ Realtime PBR ○ Ramp Diffuse PBR ○ Fabric BRDF ○ Matcap Diffuse ○ Simple Diffuse ○ UnLit 9

「Dorothy Shader」の機能紹介 ● BRDFモデル ベースとなるシェーディングモデルを選択できる © DeNA Co., Ltd. ○ Realtime PBR ○ Ramp Diffuse PBR ○ Fabric BRDF ○ Matcap Diffuse ○ Simple Diffuse ○ UnLit 10

「Dorothy Shader」の機能紹介 ● BRDFモデル ベースとなるシェーディングモデルを選択できる © DeNA Co., Ltd. ○ Realtime PBR ○ Ramp Diffuse PBR ○ Fabric BRDF ○ Matcap Diffuse ○ Simple Diffuse ○ UnLit 11

「Dorothy Shader」の機能紹介 ● BRDFモデル ベースとなるシェーディングモデルを選択できる © DeNA Co., Ltd. ○ Realtime PBR ○ Ramp Diffuse PBR ○ Fabric BRDF ○ Matcap Diffuse ○ Simple Diffuse ○ UnLit 12

「Dorothy Shader」の機能紹介 ● BRDFモデル ベースとなるシェーディングモデルを選択できる © DeNA Co., Ltd. ○ Realtime PBR ○ Ramp Diffuse PBR ○ Fabric BRDF ○ Matcap Diffuse ○ Simple Diffuse ○ UnLit 13

「Dorothy Shader」の機能紹介 ● BRDFモデル ベースとなるシェーディングモデルを選択できる © DeNA Co., Ltd. ○ Realtime PBR ○ Ramp Diffuse PBR ○ Fabric BRDF ○ Matcap Diffuse ○ Simple Diffuse ○ UnLit 14

「Dorothy Shader」の機能紹介 ● BRDFモデル ベースとなるシェーディングモデルを選択できる © DeNA Co., Ltd. ○ Realtime PBR ○ Ramp Diffuse PBR ○ Fabric BRDF ○ Matcap Diffuse ○ Simple Diffuse ○ UnLit 15

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None 16

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None Full Simple None 17

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None 18

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None 19

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None 20

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None 21

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None 22

「Dorothy Shader」の機能紹介 ● Global Illumination リアルタイムグローバルイルミネーションの適用 © DeNA Co., Ltd. ○ Full ○ Simple ○ None 23

「Dorothy Shader」の機能紹介 ● Alpha Dither 不透明描画に対してディザパターンによるパンチスルーの適用 © DeNA Co., Ltd. 24

「Dorothy Shader」の機能紹介 ● Surface Mask 各種ライト機能及びベースカラーに対して適用可能なマスクテクスチャの設定 UV座標 © DeNA Co., Ltd. Object座標 ViewSpace座標 SphereMap座標 25

「Dorothy Shader」の機能紹介 ● Surface Mask 各種ライト機能及びベースカラーに対して適用可能なマスクテクスチャの設定 © DeNA Co., Ltd. 26

「Dorothy Shader」の機能紹介 ● Matcap Light MatCapを使ったライト効果。加算・乗算。 © DeNA Co., Ltd. 27

「Dorothy Shader」の機能紹介 ● Rim Light 追加ライトエフェクトとしてリムライトを適用 通常リムライト © DeNA Co., Ltd. 二値化リムライト SurfaceMaskによるマスキング 28

「Dorothy Shader」の機能紹介 ● Fur シェルの積層によるファー表現 ランダムノイズ © DeNA Co., Ltd. FBMノイズ 29

「Dorothy Shader」の機能紹介 ● Fur シェルの積層によるファー表現 毛のオクルージョンの指定 © DeNA Co., Ltd. SurfaceMaskによるマスキング 30

「Dorothy Shader」の機能紹介 ● Reflector Effect レフ板による反射のような効果 無し © DeNA Co., Ltd. 斜め45° 正面 31

「Dorothy Shader」の機能紹介 ● Reflector Effect レフ板による反射のような効果 青色 © DeNA Co., Ltd. 赤色 32

「Dorothy Shader」の機能紹介 ● Outline 押し出し法による輪郭線の描画 通常 © DeNA Co., Ltd. ライティング付き輪郭線 テクスチャ適用 33

「Dorothy Shader」の機能紹介 ● Shadow Custom Color 落ち影の色を変更 通常 © DeNA Co., Ltd. 青に変更 34

「Dorothy Shader」の機能紹介 ● Normal Sphere Collection 主にセルルックなどの2D表現のための法線の球体状への補正 補正無し © DeNA Co., Ltd. 50%補正 100%補正 35

「Dorothy Shader」の機能紹介 ● Normal Sphere Collection 主にセルルックなどの2D表現のための法線の球体状への補正 補正無し © DeNA Co., Ltd. 顔のみ適用（補正＋Y軸固定） 36

「Dorothy Shader」の機能紹介 ● Diffuse Control Map 拡散光領域に対して陰影部分をマップで指定し陰影のディティールを付与 © DeNA Co., Ltd. 影の付与 光の付与 37

「Dorothy Shader」の機能紹介 ● Diffuse Control Map 拡散光領域に対して陰影部分をマップで指定し陰影のディティールを付与 © DeNA Co., Ltd. 影の付与（頬・鼻） 光の付与（頬・鼻） 38

「Dorothy Shader」まとめ これらの機能群を使う事で、様々なプロジェクトで求められる表現を実現します また、必要とされる表現のヒアリングを定期的・随時に行い、必要に応じて機能拡充を行 なって行く事で、その時に求められる表現を可能にしていきます © DeNA Co., Ltd. 39

背景画像と3Dオブジェクト描画の合成 © DeNA Co., Ltd. 40

実装を行った背景 ゲーム制作の絵作りにおいて、以下のような要求があった。 ● 3D背景の中に、3Dで描画したキャラクターが隠れるような絵を作りたい。 ● カメラは固定でよい。 ● 背景はリッチにレンダリングしたい（プリレンダ品質）。 ● ゲームの状況によってキャラクターの位置を変えたり、表示・非表示を切り替えたい。 背景画像（プリレンダ）と3Dキャラクターの描画を合成する方向で実装を検討した。 © DeNA Co., Ltd. 41

背景画像と3Dキャラクター描画の合成 ● Blenderで背景を描画し、color bufferとdepth bufferを画像データで出力。 ● 出力した画像データをUnityにimportして、その上にUnityで3Dキャラクターを描画。 ● 結果を最終出力として表示する。 © DeNA Co., Ltd. 42

実装方法 ● 背景画像をColor buffer / Depth bufferに書き込む。 ○ 具体的には、URPのRenderer Feature / Render Passを実装して、3Dオブジェクト のOpaque描画の前（RenderPassEvent.BeforeRenderingOpaques）のタイミング で、背景画像のcolor / depthをRender targetにBlitするようにする。 ● その後3Dオブジェクトを通常通りに描画すればOK。 余談 ● 最初はUnityのOpaque描画結果のRenderTargetと、背景のImageをdepth testを行いながら合成するパスを書いて実装していた。 ● GPUのdepth testを活かした方が良いとの指摘を受けて、上記の方法に修正。 © DeNA Co., Ltd. 43

実装コード（RenderPass拡張部分のみ抜粋） © DeNA Co., Ltd. ● 背景のColor, Depth画像を RenderTargetにBlitするだけのパ ス。 ● RenderPassEvent.BeforeRendering Opaqueにて実行。 ● 最終的にこのRenderer Featureを セットしたCameraで3D描画する。 44

描画パスの中身（FrameBuffer） © DeNA Co., Ltd. 45

実装におけるつまづきポイント アイディア・実装はシンプル。だが実際に動かしてみると色々な問題に直面する。 その中でも原因がわかりづらかった、つまづきポイントを紹介。 1. Blenderで出したdepth画像と、Unityで描画したdepth bufferの座標系が違うため、そ のままだと合成結果が正しくならない。 2. BlenderとUnityの座標系と回転姿勢の計算方式が違うため、カメラやオブジェクトの位 置・回転姿勢がずれる。 © DeNA Co., Ltd. 46

1. Depth Bufferの座標系違いの補正 ● Depth Bufferに格納するdepthの座標系にはいくつか種類がある。 ○ Linear or Non-linear ○ Forward Z（Near面 : 0 -> Far面 : 1） or ReverseZ（Near面 : 1 -> Far面 : 0） ● Blenderから出してもらったDepth Imageの座標系はLinear / ForwardZ ● Unity描画の座標系は環境依存 ○ Perspective行列をみると、Non-linearであることがわかる。 ○ ForwardZかどうかは、Graphics APIによって異なる。 ■ UnityEngine.SystemInfo.usesReversedZBuffer から、ForwardZ / ReverseZを判別。 → Depth画像をRenderTargetにBlitする際に、Unity環境の座標系に変換する対応を入れた。 © DeNA Co., Ltd. 47

1. Depth Bufferの座標系違いの補正 ● 画像のdepth値を一旦カメラ座標 系での奥行きの値（EyeZ）に変 換。 ● その後、現在の動作環境に合わせ てdepth値（1~0）に変換。 © DeNA Co., Ltd. 48

2. DCCツールとUnityの座標系の違い補正 ● 正しく合成を行うには、Blenderで背景を描画した時のカメラと同じ位置・姿勢で、 Unity側で描画を行う必要がある。 ● ただしBlenderのCameraの位置・Euler角をそのままUnityで使うとずれる。 ○ ● 座標系の違い・Quaternionでの回転乗算順の違いが原因。 Blenderは右手系でなおかつY軸が手前という座標系。Quaternionは（デフォルトで） XYZの順で乗算する。さらにカメラに限ってはZ-方向（Blenderのworldでの下方向）が forwardになっている。 ● Unityは左手系でZ+がforward、QuaternionはZXYの順。 → 座標系と回転角度のコンバートを行うことで対応。 © DeNA Co., Ltd. 49

2. DCCツールとUnityの座標系の違い補正 ● Blenderの回転姿勢（Euler角）か ら、Blenderの回転乗算順で回転 行列を作る。 （カメラの回転姿勢に関しては特別に、下方向を むくカメラを前に向けるために、さらにX軸方向 に-90度回転する行列を入れてます） ● 座標系の違いは基底変換を行列を 作って対応。 (upとfrontを入れ替えるだけ) © DeNA Co., Ltd. 50

諸々対応した結果 Blenderで作った正解の合成画像と、同じ画像を再現することができた。 Blenderで描画した Reference画像 © DeNA Co., Ltd. Unityで合成した結果 51

まとめ ● DeNAのグラフィクス横断チームの取り組みを２つ紹介しました ● 何かの参考になれば幸いです © DeNA Co., Ltd. 52

© DeNA Co., Ltd. 53