ビジュアル再現 村上城 ~3DCGでよみがえる村上城~ ロゴ
トップ 作事小屋

A-Frameで360度パノラマを表示する

WebVRを実現する「A-Frame」

A-frameウェブサイト

当サイトに掲載している「PANORAMIC VIEW」シリーズ。VRっぽい動作をさせるべく、いわゆる360度パノラマ画像を、スマホのジャイロセンサーやコンパスのデータも利用しながら表示しています。一見、サイト側でいろんな制御をしているようにも見えますが、実はこれ、特殊なプログラムや高額なシステムを使ってるわけではありません。「A-Frame」という仕組みを活用することで、10行程度のごく短いソースコードで済ませているんですね。複雑なWebVRの組み込みがこれだけシンプルにできるとは、いい時代になったものです。

というわけで今回は、A-Frameを使って360度画像をウェブ表示する方法をまとめてみました。「RICHO THETA」などの360度カメラで撮った画像や、パノラマ生成アプリで作った画像など、色々なものに応用が効くはずですよ!

ソースコードはごく短くてOK!

では早速作り始めてみましょう。まずは、表示すべきパノラマ画像を用意します。細かい画像規格はいろいろあるのですが、今回の方法に関しては「正距円筒図法でタテヨコ比が1:2」であれば、あんまり細かいことにはこだわらずともOKです。で、これを一般的な画像と同じ「img src」コードで配置すると…

 <img src="画像へのパス">

↑のように、画像がそのままのカタチでベタっと貼りついてしまいます。これではVRになりませんよね(汗

そこで、A-frame公式サイトの「360° Image」のサンプルコードをちょっと改造。以下のようなコードを書いてみます。

 <!doctype html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>ページのタイトル</title>
   <script src="https://aframe.io/releases/latest/aframe.0.8.2.js"></script>
  </head>
  <body>
   <a-scene>
        <a-sky src="画像へのパス" rotation="0 0 0"></a-sky>
   </a-scene>
  </body>
 </html>
		

…すると、なんということでしょう!
こんなに単純なコードで、ぐるぐる回せる360度画像が表示されるではありませんか!(←某ナレーション風に)
さらに、右下に表示されるメガネマークを押せば、VRゴーグル向けの表示にも切り替わります。こういった一連の機能の搭載が、PC版とスマホ版ともに同じコードでできてしまうのも、地味に優れたポイントだと思います。

VR表示した御鐘門 VRゴーグル用に表示した御鐘門

冠木門

なお、スマホ版をきちんと表示させる上で重要なのが、ソースコード中に青色で示した「aframe.0.8.2.js」の箇所。ネット上の解説記事には「aframe.0.8.0.js」としているものが多いのですが、そのままでは一部環境で盛大なガタつきが発生します(以下動画参照)。今後のバージョンアップの影響が気になるものの、とりあえず2018年12月現在では「0.8.2」としておけば多くの端末で安定的に動作するようです。

…ホントこんだけです。匠めいた技術を使う必要は一切ありません。

さらに改造してみる

とりあえず360度画像を表示するだけなら上記コードでOKですが、折角なので、方位を正確に合わせてみましょう。

まず、PCでの表示については、ソースコードの赤色部分を調整します。"0 0 0"はそれぞれ仮想空間内のxyz軸を表すので、y軸にあたる真ん中の数字に必要な角度を入れれば、初期表示される方位を動かすことができます(上記「御鐘門」のケースでは"0 -120 0"としています)。

一方、スマホ上での方位を合わせるには、ソースコードではなく画像のほうをいじります。要は画像のメタデータに方位の情報を埋め込んでやるわけですね。方法はいくつかあるかと思いますが、筆者は「Exif Fixer」というフリーソフトを使用しました。パノラマ画像を読み込んだ後「Set North」をチェック→表示されたスライダーで北にあたる方角を指定。これでスマホ表示でも正しい方角を拾って表示できるようになります。

(※「Exif Fixer」の導入は各自の責任で行ってください。同ソフトの導入に伴ういかなる不具合についても、当サイトは感知致しません)

Exif fixer画面

ブラウザで表示できるメリット

こんな感じで「A-Frame」を用いることで、割と手軽に360度パノラマを表示することができます。空間上に文字を配置したり、立体形状を動かすなど、より高度なこともできそうなので(←本来はそういうツールなのだが)、そのうち機能拡張にもトライしてみたいと思います。

ただ、個人的に可能性を感じるのは「WebでVRコンテンツが表示できること」そのものです。目下、観光利用を狙った城関連のVR/ARアプリが各地で開発されていますが、中には重量が数百Mを超えるものや、端末に高い性能を要求するものなど、目的に対してちょっと負荷が高すぎるようなものも見られます。その点、Webベースの軽量な技術であれば、わざわざアプリをダウンロードしたり、ハイスペックな端末を用意する必要はありません。それこそWeb視聴環境だけあれば、気軽にVR体験をしてもらうことができます。

今回は「A-Frame」を用いましたが、同様のWebベースの技術としてはGoogleの「VR VIEW for the Web」なども有名です。開発予算が限られる小規模自治体やマイナーな史跡においては、こういった手法でのビジュアライゼーションで、結構やれることは多い気がします。

初稿:2018.12.21