モバイルでWidget上にActorを表示するときに躓いたこと

UE4

環境

UE4バージョン:4.20.3
動作環境:iPhone 8 Plus(iOS12)

先に結論

  • カスタム深度(Custom Depth)を使用してアクターをくり抜くことができた。
  • PCとモバイルでは一部動作が異なるので注意。

制作過程

こちらの記事を参考にさせていただきました。ありがとうございます!

UE4:Widget上にActorを表示する際の新たな手法の模索 – 僕の私のUnrealな日々
基本的にはこちらの記事の手順で実装していきます

もんしょの巣穴blog [UE4] CustomDepthを使ってみる
UE4のカスタム深度についてはこちらの記事を参照

最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!
モバイルでもカスタム深度は利用可能とのこと

下図のように椅子をキャプチャしてWidget上に表示してみます。

これを以下の3つの環境で動作検証しました。

・PC(SM5)
・PC(デフォルトハイエンドモバイル)
・iPhone実機

ハマった箇所

※iPhoneでのWidgetサイズが小さいのは解像度の関係

PC(SM5) と、PC(High-End Mobile) ではうまくいっていますが、iPhone実機ではうまく背景が抜けていません。原因を調べるため、カスタム深度を可視化して出力してみます。

可視化する方法はこちらのドキュメントを参考に、下図のようにマテリアルのノードを書き換えます。
ポストプロセス マテリアル | Unreal Engine

PCでは椅子の背景が黒になっているのに、iPhone実機では白になっています。

次に先ほどのノードを繋ぎ替えて、シーン深度を可視化してみます。

iPhone実機では天球の深度情報が書き込まれておらず、白になっています。
これはターゲットのハードウェアの性能(?)によるのでしょうか。

どこかのパラメータを弄れば、実機上でも天球ほどの遠いオブジェクトでも深度情報に書き込まれるように設定できるのかもしれません。(モバイルのレンダーターゲットのbitサイズを増やす的な?)

この辺りの情報が自分では見つけられなかったので、とりあえず「モバイル実機では遠くの深度情報は保存できない」ということにしておきます。(ぉぃ

以上により、

  1. カスタム深度が実機では背景色が白になる
  2. シーン深度が実機では天球が遠すぎて書き込まれない(白になる)

という状態になり、椅子と遠景が両方の深度に存在しているためにマスクで抜かれてしまったようです。

↑実機の方は椅子と遠景の両方が黒になってしまっている。

今回のアクターをマスクする(くり抜く)処理では、深度情報がない部分はマスクされずに残ってしまいます。これを回避する簡単な方法は、椅子の後ろに壁を置いて深度情報が残るようにします。

その結果、実機上での各種深度情報は下図のようになります。

これで、無事にiPhone実機でもマスクされた椅子のみが表示されるようになりました!

結論

モバイルでカスタム深度を使用するときはPCと距離の制約が異なる可能性があるので注意。
Androidではさらに動作が異なる?
設定で距離の制約を変えられるかもしれないが、当然コストが高くなるはず。
カメラから距離の遠いものを処理するのはモバイルでは避けたほうがよさそう。
特にゲーム仕様的に距離が予想できないもの(自由度が高いもの)は発見しづらい。
次項の使用例などでは使い勝手が良い。

使用例

逆〇裁判のように、3DオブジェクトをWidget上に表示して調べる。

参考

UE4:Widget上にActorを表示する際の新たな手法の模索 – 僕の私のUnrealな日々

SceneCaptureComponentとRenderTargetで雑なクロマキー – きのこるレポート

最新モバイルゲームの実例からみるUE4のモバイル向け機能・Tipsを全部まるっとご紹介!

モバイル プラットフォームでのポストプロセス エフェクトの使用方法 | Unreal Engine