月: 2020年11月

LumionからVRコンテンツをつくりWebで見る

せっかくLumionを持っていたら、ぜひＶＲコンテンツを作成したい。もちろんGearVRやOculusなどの本格的なコンテンツも作成できるが、ゴーグル(ヘッドマウントディスプレイ)を持って無くても見ることのできる便利なメディアが 、

Google VR View

Google VR View　である。java scriptを埋め込むだけで、Lumionで作成した360°パノラマイメージをwebページ上で体験することができる。

SketchUpからLumionへ

それではLumionからコンテンツを作ってみよう。今回は下のSketchUpモデルを使う[Fig01]。

[Fig01]　Lumionと同期させるSketchUPのモデル

LumionではSketchUpのファイル.skpをネイティブに開くことができるようになっている。前回のRevitからLumionへと同様、SketchUpでもLiveSyncを使うこともできるが、今回はLumionに.skpファイルを直接開く(インポートする）やり方でデモ。直接取り込むのとLiveSyncを使用して取り込むのも何も変わらない。（結局の所、筆者の遅いPCではLiveSyncを付けたまま作業できないし。。）取り込みには緑のインポートボタンを押す。

[Fig02]　IMPORT

インポートはSketchUpのレイヤや表示などの設定がそのまま反映される。すなわち、SketchUpで例えば「レイヤ1」を非表示の状態でインポートするとLumionに「レイヤ1」は取り込まれない。Revit+LiveSyncと同様、SketchUpのマテリアルはLumionでそのまま有効。ガラスが不透明でインポートされるかもしれないが、その場合はLumionでまとめてアサインできるので問題ない（Revit+LiveSyncの時と同じ)。SketchUpの場合は、面で作成した木や人の要素や、ガラス以外のマテリアルやからマッピングテクスチャもすべてSketchUpと同じように取り込まれる[Fig03]。「ネイティブ」なので。

[Fig03]　LumionではSketchUpモデル（.skpファイル）を直接インポートすることができる。

木や人はLumionで新たに入れ直し、SketchUpの不必要なレイヤは消して、.skpファイルを同期し直す。先の緑のIMPORTボタンを押すと、もう一つ同じモデルがインポートされてしまう。同期するには以下の手順で行う。まずモデルを選択すると、下のモデルの情報パネルが出てくるので[Fig04]、

[Fig04]　インポートモデルの情報パネル

左の同期ボタンを押す[Fig05]。　モデルが大きいと同期に少し時間がかかる。少し待つとSketchUpの平面の木や人が消える。同期なのでLumionでアサインしたガラスなどの設定は変わらないので安心ください。これでモデルの準備が完了です。

[Fig05]　同期ボタン

Lumion　360°パノラマビュー

いよいよVRコンテンツの書き出し。360°パノラマビューを使う。設定は、カメラや動画と同じ。

[Fig06]　360°パノラマビュー

[Fig07]　パノラマビューモード

モノラルモード

レンダリングボタンを押すと、保存するファイル形式の設定画面となる。Target DeviceはGeneric(汎用デバイス）。Stereo(立体的)はOn/Offの設定があるが、まずはOffでレンダリングすると

[Fig08]　レンダリング設定画面、モノラルモード(立体的オフ）

モノラルモードでは以下のようなレンダリング結果。

[Fig09]　360°パノラマビュー、モノラルモードでのレンダリング

ステレオモード

一方、ステレオモード(立体的）オンでレンダリングすると

[Fig10]　レンダリング設定画面、ステレオモード(立体的オン）

左目と右目用の画像が上下にレンダリングさる。

[Fig11]　360°パノラマビュー、ステレオモードでのレンダリング

モノでもステレオでもどちらのレンダリングでもGoogleVRで見ることができるが、もちろんより臨調感のあるVRコンテンツはステレオです。これでコンテンツを書き出し完了。静止画(jpg)ですが、360°パノラマ画像はレンダリングに非常に時間がかかる。ちなみに著者の遅いPCでは上のレンダリングで半日かかる。おそらく5分程度の動画なら2～3時間でレンダリングできるはずです。

htmlの設定

ここからはサーバーにアップするためのhtmlのページの設定。以下の手順はGoogleVRの公式ページの通り。まずは、VRViewのjavaコードの埋め込み。htmlの中にGoogleのサーバのリンクを貼る。

<script src="https://storage.googleapis.com/vrview/2.0/build/vrview.min.js"></script>

次にBodyの中にvrviewを貼る。

<div id='vrview'></div>

最後にVRコンテンツのロード。

window.addEventListener('load', onVrViewLoad);

function onVrViewLoad() {
  // Selector '#vrview' finds element with id 'vrview'.
  var vrView = new VRView.Player('#vrview', {
    video: '/url/to/video.mp4',
    is_stereo: true
  });
}

上の例ではvideo:を読み込むことなになっているが、上のデモのような静止画(jpg)の場合は、「video: ‘/url/to/video.mp4’,　」の部分を　「image: ‘ファイル名.jpg’,」

に変えるだけ。以下はhtmlの例。幅と高さは適宜設定してください。

==============================================

<html>

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>

<script src=”https://storage.googleapis.com/vrview/2.0/build/vrview.min.js”></script>

<script>
window.addEventListener(‘load’, onVrViewLoad);

function onVrViewLoad() {
var vrView = new VRView.Player(‘#vrview’, {
image: ‘ファイル名.jpg’,
is_stereo: true,
width: ‘100%’,
height: 500
});
}
</script>
</head>

<body>
<div id=”vrview”></div>
</body>

</html>

==============================================

サーバへのアップロード

htmlファイルをPC上で直接開くが、読み込むことがでない[Fig12]。

[Fig12]　PC上（ローカル環境）ではGoogleVRが読み込めません。

PCのローカル環境ではGoogleVRが読み込めないようです。筆者はここでつまずく。サーバにアップして確認する。

[Fig13]　GoogleVR

サーバにアップロードしたら無事に見れるようになりました。

簡単でしょ。試してみてください。

2020.11.22 HN

※動画(3分：1,280 x 720)のレンダリング時間は、360°パノラマイメージ(4,096 x 4,096)の半分。