毎度おなじみ超便利パノラマ作成アプリkrpano。2019年のバージョン1.20から深度マップ（Depth Map）に対応しているのはご存知かと思います。
深度マップの情報を追加することで、「パノラマ画像1枚なのにあら不思議、パノラマ空間が立体的に見えるではありませんか！　しかも見回すだけでなくウォークスルーができるぞ！」というのがウリの機能です。

デモシーンの遺跡みたいなものを見たっきりで試したことがなかったわけですが、改めて知ると結構お手軽で悪くないのかな、と思って試してみました。

Depthmap Demotour: Little Temple of Abu Simbel

Image from krpano

タイトルの通り画像はCGで、Unreal Engine 4で出力していきたいと思います。

やってみよう

まずはUE4で画像を作ります。普通のパノラマ画像と、深度マップのパノラマ画像の2枚を作ります。

１．UE4

１-1．普通のパノラマ画像

普通のパノラマ画像は、PluginsのPanoramic Captureを有効化して作ります。
詳しくはこちらの記事で。

【UE4】『Stereo Panoramic Movie Capture』プラグインで360度パノラマ画像を作ってSNSにアップしてみよう

１-2．深度マップのパノラマ画像

さて深度マップですが、こちらはブループリントまたはコンソールを使ってレンダリング設定を変えてやることで可能です。私はブループリント派です。

既存のブループリントの最後に　SP.OutputSceneDepth 1　を追加します。文字列と1の間に半角スペースがあるのに注意ください。
これだけ。あとは1-1と同じ手順でパノラマ画像が生まれます。

こういう2枚の画像が出てきました。
深度マップですが、レンジが狭いと思った場合はPhotoshopを使ってノーマライズしてもいいと思います。
　

２．krpano

バージョン1.20以降を用意します。
ソースコードですが、krpanoの/examples/depthmap/depthmap-images/をそのまま持ってくるのが簡単だと思います。
一例として。depthmap-imagesを削ぎ落とすと以下のようなソースになります。コーディング自体は超シンプルにしてくれています。2行、画像のパスのおまじないを書くだけ。ありがたい。

<krpano>
	<include url="%VIEWER%/plugins/combobox.xml" />
	<include url="%VIEWER%/plugins/contextmenu.xml" />
	<include url="%VIEWER%/plugins/iphone_fullscreen_swipe.xml" />
	<include url="%VIEWER%/plugins/webvr.xml" />
	<include url="%VIEWER%/plugins/depthmap_navigation.xml" />

	<scene name="room-0" title="Room 0">
		<view tx="0" ty="0" tz="0" />
		<image>
			<sphere   url="room-0.png" />
			<depthmap url="room-0_depthmap.png" scale="1.0" offset="0.065" />
		</image>
	</scene>

	<scene name="room-a" title="Room A" autoload="true">
		<view tx="0" ty="0" tz="0" />
		<image>
			<sphere   url="room-a.png" />
			<depthmap url="room-a_depthmap.png" scale="1.0" offset="0.065" />
		</image>
	</scene>
	<!-- ・・・略・・・ -->
</krpano>