「OculusQuest」の記事 - Crieit

aframe-super-keyboardをVR内で動作させる

2019-07-28T23:30:51+09:00

A-FrameのVR内で文字を入力させたいと思い探してみるとaframe-super-keyboardというものが見つかった。しかし試してみるとどうもVR内ではうまく動かない。よく見るとデモもブラウザ上でしか動いていない。

一応なんとか動かせたのでそのメモ。

handを指定する

super-keyboardコンポーネントの属性にhandというプロパティがある。これはデフォルトでは

[cursor], [vive-controls], [tracked-controls], [oculus-touch-controls], [windows-motion-controls], [hand-controls], [daydream-controls] [cursor] > [raycaster]

となっている。

ということでもしかしたらデモも動く場合があるのかもしれない。ただ、コントローラのraycasterの階層の仕様が違ったり自分でraycasterを作っている場合は動かないので、ここを指定してあげる必要がある。

僕の場合もraycasterを自分で定義していたのでその要素を指定した。

handに指定したものが複数あるとおかしくなる

super-keyboardの動作仕様として、キーボード画像のhoverしたところの位置を判定して色替えを行っている。それをそのままキーボードの入力としているため、複数の要素でhoverできたりするとどうもおかしくなるっぽい。というか、検索した最初の要素でしか動かないっぽいので、右手では動かないけど実は左手では動く、みたいなパターンもあるっぽい。

うまく動かない場合は一度handの指定では一つの要素だけ存在するようにして試すとうまくいく可能性がある。

Oculus Questのコントローラの角度が謎

2019-07-03T22:06:49+09:00

A-FrameでOculus Questのコントローラを使う場合、oculus-quest-controlsコンポーネントを使うことができる。この動きに連動して銃を撃つようなアクションを作っていたのだが、どうもどうやっても角度が合わない。そのためちょっと調べてみたところ謎の角度になっていることがわかった。

ベースの角度

手を真下に下ろしているような状態がベースの角度となり、x, y, zともに0になる。

上下の動き

その状態からそのまま手を上に上げるとxの角度。段々と180に近づいていき、そのまま後ろに行くと-180度から-0に近づいていく。

左右の動き

次に真下の状態から左右方向に手を上げるとzの角度。手を右方向に上げていくと180に向かっていき、左方向に傾けると-180度に向かっていく。

yの傾き

yの傾きは、手を真下に下ろしたまま手の位置を固定したまま自分が手を中心に回るような動きとなる。これがちょっと不思議。

左回りに回転させると、段々と90度に近づいていく。ところが、90度を超えてからは今度はだんだんとそのまま0に近づいていく。右回りも同様で、段々と-90度に近づき、そこを経由して0に戻っていく。

ここの挙動が他と変わっているおかげで連動して生成する物体の傾きがどうしてもうまくあわなかったっぽい。

もしかしたら知っている人からすれば一般的な話なのかもしれないが、とりあえずメモ。

ちなみにダンプは適当にa-textを配置してそれに値をsetAttribute('value', value)して直接VR上で見た。

A-FrameでVRラジコンを作る

2019-06-17T23:27:42+09:00

前回3D空間でキーボード操作のラジコンを作ったが、それをOculusQuestのVR空間内でスティックで操作して遊べるようにしてみた。前回のは下記。

A-Frameでキーボード操作のラジコンを作ってみる

これにスティックによる処理を追加していく。

スティック操作による値を取得

左手右手の各コントロールコンポーネントはtracked-controlsというをベースとしており、これのaxismoveイベントを使うことでスティックの傾きを取得することができる。

そのためイベント受信用のコンポーネントを作り、それをhand-controlsに割り当てれば取得することができる。例えば下記のような感じで左手用、右手用のcar-controller-left, car-controller-rightコンポーネントを作った場合は下記のようになる。

コンポーネントは下記のような感じ。左手の上下でスピード、右手の左右でハンドルをさばく。

    AFRAME.registerComponent('car-controller-left', {
      init: function () {
        this.el.addEventListener('axismove', function (e) {
          const car = document.querySelector('[car]').components.car
          car.onAxisMoveSpeed(e)
        })
      }
    })

あとはもう面倒になったので傾きも使わず前回作った処理をそのまま呼んでいるだけ。

      onAxisMoveSpeed: function(e) {
        if (e.detail.axis[1] == 0) {
          this.speeding = null
        } else if (e.detail.axis[1] > 0) {
          this.speeding = 'down'
        } else if (e.detail.axis[1] < 0) {
          this.speeding = 'up'
        }
      },
      onAxisMoveAngle: function(e) {
        if (e.detail.axis[0] == 0) {
          this.rotating = null
        } else if (e.detail.axis[0] > 0) {
          this.rotating = 'right'
        } else if (e.detail.axis[0] < 0) {
          this.rotating = 'left'
        }
      },

実際のもの

実際にVR上でプレイしたものを録画したやつ。

VRでのスティック操作バージョン（モデル変える前に撮影したやつ） pic.twitter.com/9v34bxapMu
— だら🍔技術系投稿サービスや100の質問メーカー運営中 (@dala00) June 17, 2019

GitHubページで実際に試せる。実機がない人はキーボードのWASDでもOK。

https://dala00.github.io/a-frame-car-sample/

ソースはGitHubにもアップしてある。

dala00/a-frame-car-sample: Car control sample with A-Frame

まとめ

めちゃくちゃ簡単なのでぜひみんなやってみましょう。

次はFirebaseのRealtime Databaseいれてみんなで同時に部屋の中にいる、みたいなの試したい。

Windowsで？ Oculus Quest内で撮影した動画が正常に取得できない場合

2019-06-17T22:42:44+09:00

Oculus Questは元々撮影機能が付いており、VRで遊んでいる様子を撮影して動画にすることができる。しかし、どうもWindowsでかどうかはわからないが、USB接続して直接mp4ファイルをコピーすると壊れてしまって再生できなくなるっぽい。（2019/6/17現在）

詳しいことはよくわからないが、下記の情報を元に試してみたら動画をPCにコピーしてくることができた。

Video codec change? — Oculus

具体的には下記のような感じでadbを利用してダウンロードすれば正常なまま取得できるっぽい。

adb pull /sdcard/Oculus/VideoShots/file-you-want.mp4

/Oculus以降は直接エクスプローラでパスを見てみた方が良いかも。

もしかしたらアップデートが来れば改善するかもしれないので今だけかもしれない。

A-FrameのSuper HandsでVR空間のオブジェクトを掴んでみる

2019-06-12T22:28:14+09:00

A-Frameという、マークアップとJavaScriptを使ってOculus Quest等のブラウザだけでVRアプリケーションを作ることのできるフレームワークがあります。

サンプルなどを試してみると本当に簡単にVR空間を作ることができて面白いのですが、やはりWebエンジニアとしてはただ物を配置するだけではなく色々とインタラクティブにVR空間で遊べるようにしてみたいと感じます。

とくにOculus Questのようなコントローラは物を掴んだりという操作が非常にすべてが直感的で、VRをはじめてみて一番の衝撃でもありました。なんとかそのあたりを簡単にできるようにしたいと思い調べてみたところ、下記のライブラリが見つかりました。

Super Hands

wmurphyrd/aframe-super-hands-component: 👐All-in-one natural hand controller, pointer, and gaze interaction library for A-Frame

公式のマニュアルでも紹介されており、恐らく簡単にコントローラを使えるようにしてくれているのだと思います。

実際に上記のページのサンプルを試してみました。

こんな感じで手が表示され、青いボックスを掴んだり、両手で掴むと拡大縮小することもできます。GitHubのREADMEを見るとわかりますが、ソースもたったこれだけです。

注意点

多分ですが、ローカルやCodePenなどでもうまく動かなかった気がします。手のモデルを読み込んでいるのでとりあえずサンプルのHTMLをどこかWeb上にアップしてアクセスして試さないとダメっぽいです。

ですのでもしかしたら公式で紹介しているコントローラなどでもうまく手を使ったりすることができるのかもしれません。

ちなみにサーバーアップされているサンプルが下記です。（対応端末でないと手は出てきません）

https://wmurphyrd.github.io/aframe-super-hands-component/examples/physics/

まとめ

とにかくA-Frameでできることのサンプルやプレビュー画像がWeb上に不足しているので、何かしら試したら投稿していってみたいと思います。