今までどうしてもうまくできなかった複数カメラの重ね合わせですが、GraphicsCompositorをいじっているうちにできるようになりました。

奥にPerspectiveカメラの3D画像を置いて、手前にOrthographicの2D画像を置く手順を辿ってみます。

1

いつものNew Gameを作成して…。

2

Camera slotsにFrontを追加して、Game rendererのルートをSceneRendererに設定。この中にMainカメラスロットとFrontカメラスロットを割り当てます。

新しいForward Rendererを作成して、FrontカメラのChildに割り当てます。

3

新しいForward Rendererのプロパティを設定。

前のレンダラーが描いた画像を消してしまわないように、Clear FlagsをDepth Onlyに。

G Buffer Render StageをGBufferに、Opaque Render StageをOpaqueに、Transparent Renderer StageをTransparentにしておきます。

4

レンダラーのインスタンスには名前を付けることができないため、レンダラーの割り当てはたいへんです。ビジュアルエディタ上でドラッグしても割り当てられますが、それでも10個くらいになるとカオスになります。

5

MainSceneに戻って、Frontに配置する2D画像レイヤーのカメラを設定します。まずはレイヤーの起点となるFrontエンティティを作成し、ここにOrthographicカメラを作ります。

6

適当に2D画面に映るスプライトも配置。

7

FrontエンティティのXを100にして、2D画像レイヤーの世界全体を右にずらします。これは3D画像レイヤーと画像が衝突しないようにするためです。

全く別の空間にあるべきものを、1つの空間で場所をズラして共存させるというのは、本来はやりたくないところです。この問題は後日改めて検証したいと思います。

8

2D画像レイヤー用カメラのプロパティを設定します。Orthographic Sizeには画面の高さを1/100した値を入力。

ZのPositionは500にしました。Near Clipが0.1、Far Clipが1000ですので、奥行き(Z)は-500~500-0.1の範囲になります。Orthographicなので、前後に移動させると画像の描画プライオリティが変わるだけで、大きさは変化しません。つまりZの値で2D画像のプライオリティを制御できます。

そしてSlotにFrontを設定。GraphicsCompositorで作成したFrontカメラスロットのことです。

9

Sprite Sheetは、ポジションが基点に設定されていれば、カメラの中央に表示されます。

10

これで実行してみると…。2Dレイヤーは表示されていますが、3Dレイヤーは白く塗りつぶされてしまっています。これは何故でしょうか?

11

実はMainSeanにあるSkyboxエンティティにBackgroundコンポーネントがついていて、これが全カメラに適用されてしまうようです。というわけでBackgroundのチェックボックスを外して非表示にすると…。

12

無事に2つの画面が合成されました。

3D画面の上に2D画面を重ねましたが、逆にもできます。ちょっとやってみましょう。

13

GraphicsCompositorでレンダリングの順番を変更できるとよいのですが、なんと並べ替える機能がありません。

新しいレイヤーを後から挿入したり、レンダーテクスチャーを追加したりするときに、毎回このレンダリングツリーを作り直さないといけません。

14

GraphicsCompositorの実体はGraphicsCompositor.xkgfxcompというテキストファイルです。これをいじって強制的に並び替えてしまいましょう。

15

Xenkoを一旦クローズして、テキストエディタで順番を変えてから、Xenkoを再起動させます。

16

無事に順番が変わっています。

手前に来る画像の背景が透明でなければなりませんので、3D画像レイヤーの背景を透明にします。

17

3D画像レイヤーのForward RendererでClear FlagをDepth Onlyに。

18

2D画像レイヤーのForward Rendererは、今度は一番最初に描画されることになりますので、Clear FlagをColor and Depthに戻して画面を初期化させるようにします。

19

2D画像レイヤーに置いたJumpyJet君は小さすぎてSphereの後ろに隠れてしまいますので、Scaleをいじって巨大化させておきます。

20

実行させてみると…。おおっ、後ろの2D画像レイヤーが出てないですね。暗闇の中に明るい物体があるので、ビカビカに光っています。

21

GraphicsCompositorに戻ってポストエフェクトを切ると…。

22

今度は表示されました。

今回の実験で、画面の重ね合わせについては何枚でも自由にできることがわかりました。

しかしながら、Rentererを重ねてレイヤーを作る方法と、Xenkoがデフォルトで準備しているポストエフェクトは共存ができないということもわかりました。また前述のようにBackground機能もレンダリングプロセスがカスタマイズされることは想定されていないようです。ちなみにUIも最前面に常に表示されてしまうので、UIを3D空間上に配置するようなことはできません。

GraphicsCompositorはXenkoの中でも割と最近実装された機能です。ロードマップにはGraphicsCompositorを改良する予定がありますので、その際にはこうした問題も解決されてほしいと思います。