せっかく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)の半分。
