「VR」の記事 - Crieit

UE4のVRゲーム開発前に行う最適化手法をまとめてみる。

2020-07-20T08:46:46+09:00

はじめに

UnrealEngine4でVRゲーム開発前に行う最適化手法をまとめる
設定後の注意事項も合わせて書いてみる
VRゴーグルに依存する設定は説明しない
バージョンはUE4.25.1

設定項目一覧

フォワードシェーディング
MSAA (Multisample Anti-Aliasing)
Instanced Stereo Rendering

フォワードシェーディング

プロジェクト設定→レンダリング→フォワードレンダラ内にあるフォワードシェーディングにチェックを入れる。

MSAA (Multisample Anti-Aliasing)

プロジェクト設定→レンダリング→Default Settings→アンチエイリアス手法のドロップダウンリストからMSAAを選択。

デフォルトで使われるTemporalAnti-Aliasingに比べて見た目が劣るものの、フレームレートに影響が出にくいらしい。

Instanced Stereo Rendering

プロジェクト設定→レンダリング→VR内にあるインスタンス化ステレオにチェックを入れる。

UE4.25.1においてVRテンプレートを使用した場合、デフォルトでチェックが入っていた。

フォワードシェーディング設定後の注意事項

フォワードシェーディングにチェックを入れると以下の機能が使えなくなる。

SSR、SSAO、Contact Shadows
モーションブラーやD-Bufferデカールに対してMSAAを適用
GBufferを使ったマテリアル
Atmospheric Fog

最後に

後から設定するのは面倒なので作り始める前に設定しておきたいね。

A-FrameでVRモードに切り替える方法を追加する

2019-08-18T15:51:04+09:00

A-Frameはページ表示時にはVRモードではなくブラウザで表示するための通常の3Dモードで描画されており、右下のメガネボタンをクリックするとVRモードに切り替わる。

ただしこれを使わなくても適宜自由にVRモードに切り替えたりVRモードから脱出したりすることができる。

具体的にはsceneコンポーネントにそれらのメソッドが用意されている。

VRモードに切り替えるメソッド

例えばボタンをクリックしたときなどにVRモードに切り替えたい場合は下記のような形。

document.querySelector('a-scene').enterVR()

exitVRというメソッドもある。

イベント

VRモードに切り替わったり出たりした場合にイベントが発生するのでそのタイミングで処理を入れることも出来る。具体的にはenter-vrやexit-vrイベント。

他にもフォグ（霧のようなエフェクト）を入れたりもできるためちらっとドキュメントを見てみると面白い。

Scene – A-Frame

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上で見た。

Oculus Questのコントローラでaframe-teleport-controlsを使う

2019-06-29T22:02:34+09:00

A-Frameには aframe-teleport-controls という、VR空間内を近くにテレポートしつつ移動するためのコンポーネントがある。

VR空間内は勝手に自分のカメラの位置が移動してしまうと乗り物酔いと同じ原理で酔ってしまう。そのためそれを避けるためテレポートが役立つ。

ただ、Oculus Questで試すとこのリポジトリにかかれているサンプルのコードだとデフォルトでは動かない。というのも、上記の画像のとおりにコントローラが違うためデフォルトで設定されているボタンが異なる。

下記のようにボタンを例えばトリガーボタンに変更したりすれば動作するようになる。これで簡単にワープすることができる。

        teleport-controls="cameraRig: #cameraRig; teleportOrigin: #head; button: trigger;"

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いれてみんなで同時に部屋の中にいる、みたいなの試したい。

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上に不足しているので、何かしら試したら投稿していってみたいと思います。