Windows Mixed Reality Headsetで自作コンテンツを動かす with A-Frame

1.はじめに

　前回の記事で紹介した、Unityを用いたWindows Mixed Reality Headset (以下WinMR)対応コンテンツの作り方に続き、今回はウェブブラウザ上でVRを実現できるWebVR対応ライブラリのA-Frameとの連携についてご紹介。既存サンプルを編集しWinMRで利用するまでの手順をまとめます。

2.準備

A-Frame対応コンテンツの作成および動作確認に必要なものは以下の通り。

　(1) テキストエディタ → コードの記述に使用
　(2) webサーバー → コードのアップロード先

テキストエディタはさておきwebサーバーは持っていない方もいるかもしれません。その場合はwebサーバーとコードエディタが無償で使えるGlitchというサービスがお勧めです。
※要FacebookかGitHubアカウント

3.体験

(1) PCにWinMRヘッドセットを接続し頭に装着
(2) 仮想空間内でMicrosoft Edgeを起動
(3) A-Frameの公式サイトにアクセス

(4) ページ左のExamplesからコンテンツを選ぶ(例：Hello WebVR)
(5) 画面右下の眼鏡マークをクリック
(6) WebVRコンテンツのみが目の前に表示される

f:id:tks_yoshinaga:20170829142001j:plain

4.コードの編集

ここで一旦、WinMRヘッドセットを頭から外しまましょう。この章では既存のサンプルを編集し、WinMRで確認するまでの手順を紹介します。※Glitch使用

(1) 再びA-Frameのトップページにアクセス
(2) 画面右側の[GET STARTED]をクリック

f:id:tks_yoshinaga:20170829145758j:plain

(3) サンプルコードのページが表示される
(4) remix the starter example on Glitchをクリック
※ Glitchユーザー以外はその下に表示されたコードをコピペしたHTMLファイルを作成しWebサーバーにアップロード。
(5) 続けて表示される[Remix your own]ボタンをクリック

f:id:tks_yoshinaga:20170829150112j:plain

(6) 画面右上の[Sign in]ボタンをクリック
(7) 各自のアカウント(Facebook or GitHub)でログインする
(8) 画面右側のindex.htmlをクリックしコードを表示

f:id:tks_yoshinaga:20170829150906j:plain

[コード解説]

下記コードはA-FrameのページのHelloWebVRを表示するものです。チェックポイントとしては以下の1~3です。

解説1：
<head>タグ内でa-frameのjavascriptライブラリを読み込む

解説2：
表示する3Dコンテンツは<a-scene>から</a-scene>の間に記述する

解説3：
直方体や球体、円柱、板などの基本図形は<a-図形名>で提供されている。
さらにpositionで位置、rotationで回転、colorで色を設定可能。

<html>
  <head>
    <--解説1-->
    <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
  </head>
  <body>
    <--解説2-->
    <a-scene>
      <--解説3-->
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

話を戻します。このコードを編集することでオリジナルのコンテンツを作成することが可能です。例えば、表示するオブジェクトを球のみにし、背景の色を青とする場合には下記のように書き換えます。

(9) <a-scene>-</a-scene>の間をa-sphereとa-skyのみにする
(10) さらにa-skyのcolorを#58ACFAに変更する
(11) 画面上方の[Show Live]をクリック
(12) コンテンツが別のタブで表示され編集結果が反映されていればOK

なおコンテンツのURLはWinMR内でブラウザからアクセスする際に必要になるのでメモを取るか、PCでMicrosoft Edgeにブックマークしておいてください。

<a-scene>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-sky color="#58ACFA"></a-sky>
</a-scene>

f:id:tks_yoshinaga:20170829154548j:plain

5.実機で動作確認

(1) 複合現実ポータルを起動
(2) WinMRヘッドセットを装着
(3) 仮想空間内でMicrosoft Edgeを起動
(4) 先ほどのコンテンツのURLにアクセス
(5) 自身で編集したコンテンツが表示されるはず

6.まとめ

　HTMLのタグを記述するだけでWebブラウザ上で動くVRコンテンツを作れるA-FrameがWinMRにも対応ということで、アプリ開発者だけでなくWeb系の方でも手軽にコンテンツの制作ができ、VRの普及が加速しそうな印象を受けました。
　今回は基本図形の表示しか扱いませんでしたが、背景を全天球画像にしたり既存のobjファイルを読み込んで表示したりといったことも比較的簡単に実現できます。前回紹介したUnityと比べると物理演算やエフェクト関係は開発時にある程度頑張る必要がありますが、一方で開発環境の簡便さやWebとの連携のし易さなどの魅力もあり利用事例が今後増えるのではないかと思います。

------2019/06/17追記------

Oculus Quest向けの記事も投稿しました。
こちらはコントローラの入力を取得する手順なども記載しているのでご興味があればご覧ください。

tks-yoshinaga.hatenablog.com

------追記ここまで------

[補足情報1]

本記事よりちょっと丁寧に書いた資料を公開しました。

[補足情報2]
　A-Frameにご興味がある方は、私が主催しているARコンテンツ作成勉強会のWebAR編で講師をやってくれた早井さんの資料でとても丁寧に開発手順が解説されています。ぜひ参考にしてみてください。

speakerdeck.com