Tweet

Pocket

先日UE4で360パノラマ画像(Equirectangular)を作成する方法は紹介しましたが、月日が経つうちに全部屋のパノラマを作っていました。せっかくですからKRpano向けにUE4のパノラマ出力機能で作成してみましょう。

KRpanoというのは、パノラマ画像があればVRコンテンツを簡単に制作できるアプリケーションです。特にツアー(シナリオ自動生成機能)が最高。主にHTML5で出力されるのでスマホやGear VR向けVRコンテンツ制作がめっちゃ楽ちんです。
エンジニアの方であればtour.xmlを画像に応じて動的に生成するようにしておけばホットスポット(画面上に表示するマーカ)表示の自動化までできるでしょう。プレゼンテーションのコンテンツ制作が超時間短縮できるniceでhotでsexyな一品です。
読み方は「ケーアールパノ」です。

ネットVR写真展の会場をKRPanoでやる意義はもう１つあります。マルチデバイス対応でかつ動作が軽いことです。
これまでUE4でHTML5版やWindows64bit版のアプリケーションを公開してきましたが、如何せんハードウェアのハードルが高くて・・・こいつなら数年前のスマホでもバリバリ動きます。

　　ネット写真展(HTML5版)
　　ネットVR写真展(Win64版)

やってみよう

ゴールはこんな感じ。
　　・各部屋のパノラマ画像をスマホかGear VRで閲覧できること。
　　・出入口にホットスポット(矢印マーク)を表示して、ユーザが移動できるようにすること。

用意するものはこれら。
　　・KRPano
　　・パノラマ画像
　　・ホットスポットの画像(Vtourを作成するとデフォルトで付いてくる画像。)

１．UE4でパノラマ画像を出力する

事前準備です。あらかじめ上のような左右の画像を出力しておきます。やり方は過去記事『【CG】UE4から360度パノラマ写真を作ってSNSにアップしてみよう』をご参照。

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

２．KRPanoでベースとなるツアー(シナリオ)を作成する

こっからがKRPano。すごく簡単です。
7枚の画像を選択してMAKE VTOUR (MULTIRES) droplet.batにドラッグアンドドロップします。するとバッチが動き出して基本的なツアーを作成してくれます。

３．部屋間を移動するための表示(矢印)を載せる

これはXMLを1ミリでもかじっていればすぐにできます。KRPanoの実行環境以下には色んなサンプルも用意されていますので、このうちのviewer¥examples¥demotour-kuchlerhausを参考にさせてもらいましょう。

まず、skinフォルダにあるvtourskin_hotspot.pngの存在を確認しておきます。tour.xmlを開いて、以下の2箇所のソースを<!– scenes –>の手前あたりに貼り付けます。

次に、実際にsceneの中にホットスポットを配置するための記述をします。属性の1行を挿入すればOKです。

これでとりあえずはそれっぽい形になっています。一旦tour.htmlを開いてみましょう。こんな感じになっていると思います。ホットスポットが狙った位置にありませんね。位置の修正が必要です。

scene属性内にあるath属性の値を変えれば水平方向にホットスポットが移動します。結果的にはath=”140.0″でピッタリ合いました。グーだね。

あとは修正して～ブラウザでF5を押して～って感じで調整していけばよいでしょう。属性の中にとりあえず以下のような属性を追記してみます。
そしてこれを全部のシーンにやっていくだけ。地味ですが間隔を掴んでくるとちょいちょいちょいで終わると思います。

任意．画像を視差あり(ステレオ対応)にする

ここからは任意です。やんなくてもOK。ただしこれをやることでGear VRなどのかぶりモノを使ったときにきちんと立体感が出ます。だけど、ちょっと大変。
この辺のHow toは「KRPano stereo pano」というワードでググることで公式ドキュメントや英語ですが実際に試した方のブログが見つかりますので参考にして下さい。最初の頃「Parallax」とか「Multi panorama」とかでググってたのですが全然Hitしなくて焦った・・・。

さて本題に。やることは大きく以下です。
　　　　１．360パノラマをキューブマップに変換する。左右の２画像とも。
　　　　２．tiffをjpgに変換する。
　　　　３．tour.xmlをステレオ対応の記述に改変する。

4-1．左右のパノラマ画像をキューブにする

いつもやってるやつですね。Convert SPHERE to CUBE droplet.batに左、右のそれぞれの360パノラマ画像をキューブに変換します。すると、2枚から12枚のtiff画像が生成されます。

4-2．tiffをjpgに変換する

ペイントとかを使ってjpgに変換します。画像処理はこれで完了です。
今回は10シーンもあるから画像数は　1シーンにつき2枚のパノラマ　→　1枚から6つのキューブなので12枚　→　10シーン　→　計120枚になりました。

4-3．tour.xmlをステレオ対応の記述に改変する

これも簡単です。KRPanoのフォーラムに載っていますのでそれに従いましょう。★印のところをステレオ対応にします。改変前後のソースを載せておきますので、比較してみて、ご参考に。
　　%tは、左右情報（L”, “R”）に置換される　と思えばOK。
　　%sは、キューブ情報（”b”, “d”, “f”, “l”, “r”, “u”）に置換される　と思えばOK。

4-4．tour.xmlの定義どおりにファイルを配置し直す

例えば1シーンあたり以下のようなディレクトリ構成にします。これを私の場合は10シーンやりました。

完成

いかがでしょうか。デモをアップしました。PCでも、スマホでも、Gear VR、ハコスコなどでも閲覧可能です。
　　VR Gallery on the web(KRPano) – christinayan
　　https://christinayan01.jp/vr/krpano/

参考サイト

・KRPano
・Unofficial step by step tutorial for stereo panos – KRPano.com forum