A-Frame

A-FRAME で簡単 全天球画像 表示を試す

More than 1 year has passed since last update.

今更な感じですが、少し前の勉強会で Mozilla さんの A-FRAME のお話を聴き A-FRAME の公式サイトを見てみたら、Examples のメニュー 360° Image を発見!
球体や立法体などのオブジェクトをおいてVRを楽しむだけじゃなく、360° の全天球画像も簡単に表示できる感じだったので、ちょっと試してみた。

少し前から RICOH THETA で 360° の 全天球画像を撮りまくっていたものの、全天球画像を共有するのが面倒なので、自前で簡単に全天球画像を見れるアルバムやビューワーを作れたらいいな と思っていたので、グッドタイミング!

A-FRAME とは?

公式サイトはこちら。https://aframe.io/

詳しいことはたぶん既にいろいろ情報があると思うので省きますが、A-FRAME の Docs の introduction ( https://aframe.io/docs/0.3.0/introduction/ )には次のようにあります。

A-Frame is an open-source WebVR framework for creating virtual reality (VR) experiences with HTML. We can build VR  scenes that work across smartphones, desktop, the Oculus Rift, and the room-scale HTC Vive.

HTML でVR体験を作るためのオープンソースの WebVR framework との事。

実際に試してみる

全天球画像の準備

今回は RICOH THETA S で撮影した次のような全天球画像を用意。

sample-photo.jpg

ちなみに THETA のアルバムサイト でどんなふうに見えるかは次のリンクから確認できます。
THETAアルバムサイトから表示

Webサーバの準備

ここは本題とあまり関係がないので詳しい事は割愛。手っ取り早く試したかったので、次の環境をサクッと構築。

  • Microsoft Azure - App Servise の Web App

htmlを書く

とりあえずドキュメントを見ながら必要最小限のコードを書いてみると、たったこれだけ。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A-Frame360写真テスト</title>
    <meta name="description" content="A-Frame Panorama Sample">
    <script src="aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-sky src="sample-photo.jpg" rotation="0 170 0"></a-sky>
    </a-scene>
  </body>
</html>

ざっくり言うと、こんな感じでできました。

  • <script> タグで aframe.min.js を読み込む

    • 今回は手っ取り早く試したかったので aframe.min.js をダウンロードして index.html と同じ場所に置きましたが、CDN から include しても良いです
      • Production Version の場合 <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
      • Development Version の場合 <script src="https://aframe.io/releases/0.4.0/aframe.js"></script>
      • releases の後ろの 0.4.0 は、そのときの A-FRAME の Version
  • A-FRAME で用意される <a-scene> タグ で囲んだ中に 表示させたい全天球画像を A-FRAME で用意される <a-sky> タグで指定する

    • DOCS で <a-sky> タグは The sky primitive adds a background color or 360° image to a scene. と説明されています
    • ここでは index.html と同じ場所に置いた sample-photo.jpg を指定
    • rotation は すべてのエンティティにあるコンポーネントで roll (x), pitch (y), yaw (z) の 3つを指定することで、エンティチィの方向を指定できます
    • 今回の場合は 全天球画像が最初に表示されたときの画像の向きを rotation で決めている感じです

実際に表示してみる

PCのブラウザで表示

WebVRに対応しているブラウザ(Chrome や Firefox など)で 下記のリンクにアクセスすると全天球画像がマウスでグリグリ動かせる形で見れると思います!

A-FRAMEで表示

スマホのブラウザで表示

そしてスマホのブラウザで見ると、最近の Facebook と同様に、スマホを上下左右に傾けることであらゆる方向を見回せます!
今回は 手元にあった iPhone6 の Mobile Safari で表示してみました。

IMG_4117.jpg

ここからぐるっと右を向いてみるとこんなふうに景色が変わりました。 A-FRAMEで表示 をスマホのブラウザで開くと実際に試せます。

IMG_4119.jpg

VRモードで表示

画面を良く見ると右下のほうにメガネっぽいアイコンが表示されていたので、それをタップしてみます。

Glass.jpg

そうするとスマホを横向きにするよう指示する画面が表示されたので、指示にしたがいスマホを横向きにしてみます。

IMG_4122.jpg

すると VRモード(と呼ぶのかどうか分かりませんが)で表示されました!

IMG_4118.jpg

ちょうど iPhone で試していたので URL をホーム画面に保存して再度表示させることで上下の余計な表示を無くしフルスクリーンで表示する事ができました。手元にあったタオバイザーで覗いてみたら、そこはまさに南の島!という感じで VR体験 できました。

IMG_4120.jpg

まとめ

今回はまずはサクっと動かして試してみたい ということで、ごくごく初歩的な内容だけでしたが簡単に全天球画像を表示することができました。タグを指定するだけなので html と同様に書くことができ非常に簡単です。

もう少し勉強して頑張れば何とかオリジナル全天球画像アルバム&Viewer を作れそうな気がしてきました。