wakabaya's portfolio

PROGRAMING

VRmap Maker
簡単に３Ｄバーチャルツアーを作成

貼り付ける写真は、360度パノラマ写真である必要があります。
Insta360 や リコーの THETA シリーズなど、ワンショットで360度写真が撮影できるカメラも何種類か販売されていますが、
いずれも解像度的には４Ｋとかせいぜい８Ｋが精一杯で、たとえば細かい部分をズームさせる等を行うと粗さが目立ちます。
また、下手をすると撮影者も写りこんでしまうので、物陰に隠れてリモコンでシャッターを切るなどの工夫が必要です。

なので私は、画質に拘る場合は、一眼カメラに広角レンズを付けて三脚に縦向きに固定し、
縦構図で少しずつ回転させ角度を変えながら、下のような写真を８枚～１２枚ほど撮影。
それらを PhotoShop や LightRoom、PTGUI などの画像ソフトで合成して、１枚のパノラマ写真を作成しています。

マップを作成するのに必要な枚数だけ、パノラマ写真を作らなければいけないので、
たとえば広い博物館のバーチャルツアーを作成する場合などは、写真撮影にけっこうな手間が掛かります。

そうして、けっこうな手間を掛けて何とか作り上げた 360度パノラマ写真。
では次に、その写真をＰＣで表示して、マウスでぐるぐる動かしたり、
ホイールで寄ったり引いたりして、ＶＲを楽しもうと思ったとします。
そしてそれには、実はさまざまな方法があります。

その中で、私が最も素晴らしいと思ったのは、株式会社エージェンテックさんの
Smart360 という有料サービスでした。
用意した写真を Smart360 の専用サーバにアップロードするだけで公開できます。
またその画像の中にテキストや動画を埋め込んだりする事も可能。
ただしかなり高額で、さすがに企業でも無ければ導入には踏み切れないかも知れません。

他にも、リコーの提供しているサービスもなかなかで、こちらは月々4,000円のサブスク。
そっかー、毎月4000円かー・・・。

もちろん無料のサービスもありまして、
たとえば Google が公開している「VR View」。

googlevr/vrview から vrview.js が含まれた zip ファイルをダウンロード。
プロジェクトフォルダに組み込んで JavaScript を書けば、
比較的簡単に、しかも無料で VRコンテンツを表示する事が出来ます。　
（右は、Google VR View のデモです）

ただしこの VR View は、有料サービスのように、画像にテキストやポップアップするアイコンを貼り付けたり、ましてや複数の画像を行き来するようなバーチャルツアーを作成したいと思っても、それが可能なのかどうかすら、さっぱり分かりません。

それに設置が比較的簡単とは言え、ライブラリをダウンロードして、手作業で Webページに組み込まなければなりませんし、JavaScript の記述も必要。
かといって、先の有料サービスはやっぱり高い。

たとえば、生まれ育った実家の各部屋を撮影しておいて、いつでもバーチャルで見て回りたい・・・といった程度の利用を、もっともっとお手軽に出来ないだろうかという想いから、VRmap Maker の制作を想いたちました。

VRmap Maker は、マップ画面にドラッグ＆ドロップで写真を貼り付けていくだけで、マップどおりのバーチャルツアーを自動的に生成してくれます。

隣り合った写真は自動的に連結されて、３Ｄ画面上に表示されている
「 Λ 」アイコンをクリックすると、隣りの写真に移動することが出来ます。
画面左上に並んでいるアイコンのうち「＠」をクリックすると、右上にマップが表示されて自分の居る位置と向いている方向が分かります。
また、「 □ 」をクリックすると、全画面で表示。
「＋」と「－」、またはマウスのホイールで、ズームイン・アウトします。

下に、VRmap Maker で360度バーチャルツアーを作成している様子の動画を用意しました。 10分近くの少々長い動画ですが、宜しければご覧ください。