---
title: URP周りの取り組み紹介
tags: 
author: [DeNA_Tech](https://www.docswell.com/user/DeNA_Tech)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/47ZGD4ZME3.jpg?width=480
description: DeNAでのグラフィックス周りの開発事例として、様々なゲームジャンルでの利用を想定した統合シェーダー「Dorothy Shader」など、いくつかの技術事例を紹介したいと思います。  登壇者 : 岩崎 正揮 / 株式会社ディー・エヌ・エー  --------- Unity URP 完全に理解した勉強会 https://meetup.unity3d.jp/jp/events/1416  動画アーカイブ : https://www.youtube.com/watch?v=a0sDSXTDkUM
published: August 06, 24
canonical: https://www.docswell.com/s/DeNA_Tech/5MXW4N-2024-08-06-171707
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/47ZGD4ZME3.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/YJ6Y13Z57V.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJ5G4LWGJ4.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LE3RGL4P75.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/8EDY1NQ3EG.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/V7P6Q5LPJ8.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/2JV35PQVEQ.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5EG36PW17L.jpg)

「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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4JQ5423N7P.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/K749QL13E1.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/LJ1KPLGZ7G.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/GJWD2VK672.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EZGD4ZRJ3.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/Y76Y13Z1EV.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/G75G4LWL74.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/9J2YVLQ3JR.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DEYG3QW8EM.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/VJNGVK9978.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/YE9W6V23E3.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/GE8NZP5L7D.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LELPD1YQ7R.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4JM4PWDK7W.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PJRW1Y4679.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PEXPYG2D7X.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/3EKD34MDJD.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/L73RGLYPJ5.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/87DY1N537G.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/VJP6Q5GPE8.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/2EV35P6V7Q.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/57G36PN1JL.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/4EQ542QNJP.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/KJ49QLN371.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/LE1KPL5ZJG.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GEWD2V56J2.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/47ZGD4NRE3.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/YJ6Y13817V.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/GJ5G4L9LJ4.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/9E2YVL23ER.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/D7YG3QY87M.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/VENGVKP9J8.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/Y79W6V3373.jpg)

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


# Page. 42

![Page Image](https://bcdn.docswell.com/page/G78NZPMLJD.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/L7LPD13QJR.jpg)

実装方法
● 背景画像を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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/4EM4PWMKJW.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/PERW1YV6J9.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/P7XPYGZDJX.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/37KD348DED.jpg)

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


# Page. 48

![Page Image](https://bcdn.docswell.com/page/LJ3RGL2PE5.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/8JDY1NZ3JG.jpg)

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


# Page. 50

![Page Image](https://bcdn.docswell.com/page/VEP6Q5DP78.jpg)

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


# Page. 51

![Page Image](https://bcdn.docswell.com/page/27V35P1VJQ.jpg)

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


# Page. 52

![Page Image](https://bcdn.docswell.com/page/5JG36P21EL.jpg)

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


# Page. 53

![Page Image](https://bcdn.docswell.com/page/47Q542PNEP.jpg)

© DeNA Co., Ltd.
53