tks_yoshinagaの日記

KinectやLeap motion, VRやARなどの技術を使ってやったことのメモとか

Oculus QuestとA-Frameで始めるWebVR

0.はじめに

Oculus Questが発売され2週間以上経ち、そろそろ自分で何か作ってみたいという人も増えてくるんじゃないかなと思ったので、A-Frameを使ったWebVR開発のはじめの一歩について手順をまとめておきます。
本記事の内容をでとりあえずトリガーのオン/オフを取得できるようになり、これを応用すればコントローラの入力を取得できるようになります。まず第一歩を踏み出したい人はぜひ参考にしてください。
[今日のゴール]
https://hatena-quest.glitch.me/

1.A-Frameを使ったCGの表示

(1) Glitchにログイン 
     https://glitch.com/

(2)A-Frameのページにアクセス
     https://aframe.io/

(3) GET STARTEDをクリック
(4) remix the starter example on Glitchをクリック
(5) Remix your ownをクリック

f:id:tks_yoshinaga:20190615213522j:plain

 

(6) index.htmlをクリックしてソースが記述されていることを確認

(7) 画面上方のShowをクリック

f:id:tks_yoshinaga:20190615214337j:plain


(8) サンプルコンテンツが起動することを確認し、URLをメモっておく

f:id:tks_yoshinaga:20190615215005j:plain

補足1: A-Frameコンテンツの操作方法
 https://speakerdeck.com/takashiyoshinaga/ar-at-lu-er-dao?slide=14

補足2: サンプルソースの解説
 https://speakerdeck.com/takashiyoshinaga/ar-at-lu-er-dao?slide=29

(9) Oculus Questを装着しWebブラウザから先ほどメモったURLを開き、ブラウザ右下のゴーグルマークをクリック

ここまでの操作でOculusQuestでWebVRを体験することが可能です。
表示するオブジェクトの編集や変更の方法については補足として載せたリンクの資料を参考にしてください。

2. コントローラを使用

(1) 右手・左手用のコントローラを追加
laser-controlsコンポーネントによりコントローラの機能が実現。

     <a-entity id="ctlL" laser-controls="hand: left"></a-entity>
     <a-entity id="ctlR" laser-controls="hand: right"></a-entity>

(2) カメラと動作確認用のテキストを追加
テキストをカメラの子要素にすることでvalueに代入された文字列が常に目の前に表示されます。
     <a-entity camera look-controls position="0 1.6 0">
           <a-text id="txt" value="test" position="0 0 -1" scale="0.5 0.5 0.5"
           align="center" color="#000000"></a-text>
     </a-entity>

gist.github.com

(3) OculusQuestで現在作っているコンテンツのURLに再度アクセス
※現段階ではOculusQuestには完全に対応しておらずOculusTouchが表示される。

f:id:tks_yoshinaga:20190615223840j:plain

(4) 続いて<script> </script>を追加
※全コードを(7)の下に掲載していますので参考にしてください。

(5) コントローラとテキストを取得しスクリプトで扱えるようにする。

     const ctlL = document.getElementById("ctlL");
     const ctlR = document.getElementById("ctlR");
     const txt = document.getElementById("txt");

(6)トリガーボタンを押し始めたときの挙動を記述

     ctlL.addEventListener('triggerdown', function (event) {
            txt.setAttribute("value", "Left trigger down");
     });
     ctlR.addEventListener('triggerdown', function (event) {
            txt.setAttribute("value", "Right trigger down");
     });

(7)トリガーボタンを離したときの挙動を記述

     //Trigger Released
     ctlL.addEventListener('triggerup', function (event) {
            txt.setAttribute("value", "Left trigger up");
     });
     ctlR.addEventListener('triggerup', function (event) {
            txt.setAttribute("value", "Right trigger up");
     });

gist.github.com

 (8) ここまでできたらOculus Questで動作確認。

上手くいけばトリガーの動きに連動した内容の文字列が表示されます。
今回は文字列の表示のみですが、これを応用すればボタン操作に応じたアクションなどを記述することが可能です。
さらに、他のボタン入力の取得についても同様の手続きで可能です。各ボタンのイベント名などはA-Frameの公式サイトに掲載されていますのでそちらを参考にしてください。

また、各ボタンの入力を取得する簡易サンプルをGitHubで公開しました。
まずは結果を見たい方はこちらをご利用ください。

github.com


3.まとめ

今回はA-FrameでOculus Quest対応のWebVRコンテンツを作る第一歩という事で、比較的簡単にコントローラの情報を取る方法を紹介しました。今後、これを応用すればインタラクティブなコンテンツも作れるようになるはずです。
なおコントローラの情報を取得するための記述方法は他にもあるので、ある程度慣れてきたらA-Frameの公式リファレンスも熟読することをお勧めします。
これに関しても、まずは動きを見たい方にはコントローラを用いた簡単なコンテンツのサンプルコードを公開しています。ご興味があればぜひこちらもご覧ください。

 

告知!

自身が主催しているxRコミュニティのARコンテンツ作成勉強会で、Oculus Questを用いたコンテンツ開発の導入編を開催します。場所は福岡ですが、リモート配信も検討したいと考えています。もしご興味があればお問い合わせください。