はじめに

さて、今年はPSVR、Oculus、Vive、GearVRそしてGoogleのDaydreamがついに出そろい、VR元年とも言われています。
かくいう私もGalaxy S7を買ったのでGearVRも購入してみました。

スマホVRということで、PSVRやOculusとは格段に性能が劣るはずですが、それでも今まで経験したことの無い感じでした。

せっかくものもあるのでなんか開発してみたいと思い、いろいろ調べてみたところWebVRとA-Frameが面白そうだったので、
まずはこちらを試してみようと思います

WebVRってなに？

WebVRとは名前からも予想が付く通り、Web技術でVRを作るためのAPIです。簡単に言えばブラウザでVRが出来るようになります。

特徴として以下があげられます。

専用のアプリケーションがいらない
URLだけでコンテンツをシェアできる
専用のソフトが無くてもJSだけで開発が開始できる
遅い

専用のアプリケーションがいらない、というのはWebブラウザのみで実行できる、ということです。
もちろん、WebVRをサポートしている必要はありますがMozilla、Chrome、Samsung Internet(GearVR)とメジャーどころは一通り対応している状態です。
そのため、コンテンツをURLだけでシェアすることが出来ます。これはYouTubeが動画コンテンツの共有コストを劇的に下げたのと似ています。
また、そのような構造だとSecondlifeのようなメタバースも比較的作りやすいと思います。一つ一つの空間をURLで管理するのはSF感がありますね。
それを支援する要素として基本的にJSの追加APIにすぎないので、Unityなどの開発ツールを新規に導入する必要もないです。
ただし、現状だとただでさえ遅いVRがさらに遅くなるのでゲーム的なものは無理でしょうね。

A-Frameとは？

A-FrameはjQueryやthree.jsのようなVR向けのJSライブラリです。
MozillaのMozVRというチームで開発されています。

WebVRはそれ単独ではコントローラとセンサー情報しかなく、そこから取得した値をWegGLとかで3D描画してやる必要があります。
そのため、結構複雑なのですがA-Frameはこれをタグベースで比較的容易に構築するためのツールキットです。

とりあえず、ともかく動かしてみましょう。

<!doctype html>
<html>
  <head>
    <title>My first VR site</title>
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
    
  </head>
  <body>
    <a-scene>

      <a-sphere position="0 1.25 -1" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-box position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-box>
      <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

      <a-sky color="#ECECEC"></a-sky>
      <a-entity position="0 0 3.8">
        <a-camera></a-camera>
      </a-entity>
    </a-scene>
  </body>
</html>

こんな感じでHTMLを保存します。まずは普通にPCのブラウザで開いてみましょう。下記のような3Dが描画されましたね？

次はこれをGearVRが立ち上がる場所に置きます。適当なサーバでもいいですし、私はDockerでローカルPCにHTTPサーバを立ち上げてWi-Fi経由でアクセスするようにしています。
これをSamsung Internet経由で立ち上げます。すると先ほどPCで視たのと同様のコンテンツが表示されかつヘッドトラッキングされるのが分かるかと思います。

ポイントというか注意点としてスクリプトはhttps://aframe.io/releases/0.3.2/aframe.min.jsを使うということです。
0.3.2から仕様が結構変わってるらしく、GearVRではそれより前のバージョンのライブラリは正常に動作せずにレイアウトが崩れてしまいます。

MozVRや公式で上がってるサンプルも古いものが混じっているのでその場合はいったんソースをチェックアウトして、スクリプトのパスを変更してしまうのが良いです。

Netflixアプリのような動画再生デモもあってこれはカスタムメイドとかMikulusみたいなバーチャルデスクトップもできるのではないかとひそかに期待。
※ スクリプトのバージョンを上げる必要あり。

開発環境

基本的には何もいりません。エディタがあれば十分です。
ただ、それで３Dを作るのはやりツラいので、公式でA-Frame Inspectorというグラフィカルエディタも開発中です。
こちらのページからすぐに試すこともできます。

まとめ

なかなか簡単に開発できるので、ちょっと色々試してみたいですね。
３Dセンスが無いのでどうなるかはわかりませんが...

それではHappy Hacking!

参考