このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

WebVR の概要

メモ: WebVR API は WebXR API に置き換えられました。 WebVR は標準として批准されることはなく、ごく少数のブラウザーでしか既定で実装・有効化されず、少数の端末しか対応していませんでした。

この文書は、バーチャルリアリティ (VR) の背景にある概念と理論について述べています。もしあなたがこの分野の初学者なら、コードを書き始める前に、これらのトピックを理解すると役に立つでしょう。

VR の歴史

VR は全く新しいというわけではありません —その概念は 2012 年の Oculus Rift Kickstarter キャンペーンよりずっと前にさかのぼります。人々は数十年の間その実験を続けてきました。

1939 年に View-Master device が作られ、3D 写真を見られるようになりました。この装置は、小さなカラー写真を立体視できるようにペアで記録した厚紙のディスクの画像を表示していました。数年にわたる開発の後、軍がこの技術の利用に関心を持ち、1961 年に Headsight プロジェクトが始まりました。このプロジェクトでは、ビデオ画面とヘッドトラッキングシステムを組み合わせたヘルメットが開発されました。

その後の数十年、さまざまな実験がなされましたが、もはや科学ラボや戦場に限定されませんでした。最終的に、映画監督がバーチャルリアリティのビジョンを示すポップカルチャーに引き継がれました。Tron (1982) や The Matrix (1999) のような映画が制作され、そこではまったく新しいサイバー世界へ転送されたり、サイバー世界と知ることなくとらわれてそれを現実世界として受け入れる世界が描かれました。

最初の VR ゲームの試みは大きく高価なものでした — 1991 年、 Virtuality Group はゴーグルを持つ VR レディなアーケードマシンを作成し、パックマンのような人気のタイトルを VR へ移植しました。セガは VR グラスを 1993 年の CES(Consumer Electronics Show )で発表しました。企業は実験をしていましたが、市場や消費者を納得させられませんでした — 実際に成功した VR プロジェクトの事例を見るには 2012 年まで待つ必要がありました。

最近の VR

では何が新しいのでしょう? 十分なユーザー体験を提供するには、VR ハードウェアは高精度かつ低遅延でデータを届ける必要があります。VR アプリケーションを動かすコンピューターは、これらすべての情報を扱えるだけの性能を備えていなければなりません。こうした精度と性能を手頃な価格で利用できるようになったのは、つい最近のことです。初期の VR プロトタイプは何万ドルもしましたが、近年の HMD である HTC VIVE や Meta Quest は数百ドルで購入できます。また、Google Cardboard のような、さらに安価なモバイル端末ベースのソリューションもあります。

ソフトウェアの面では、Valve は、VIVE や他のソリューションで互換性のある SteamVR を作成し、利用しやすい VR UI のようなソフトウェアへのアクセスを提供しています。

テクノロジー自体はすでにあるので、将来的には、より高価なヘッドセットが時間をかけて安価になっていき、多くの人々が VR 体験できるようになります。

入力機器

VR アプリケーションの入力を扱うことは興味深いトピックです — それは専用のユーザインターフェイスがデザインされなければならないのでまったく新しい体験となります。現時点でも古典的なキーボードとマウスから、Leap Motion や VIVE コントローラのような新しいものまで様々なアプローチがあります。これは特定の状況でどのように動作するかそしてあなたのゲームタイプにはどのような入力が最適なのかを確認する試行錯誤の事柄です。

VR ハードウェアのセットアップ

主に、モバイルタイプとコンピュータ接続タイプの 2 種類のセットアップがあります。最小のハードウェアセットアップは次のようなものです:

  • モバイル: Google Cardboard のように VR マウントにスマートフォン — スマートフォンは VR ディスプレイとして機能する — をマウントして作られるヘッドマウントディスプレイ (HMD) で、モバイルスクリーンをステレオビジョンへ投影するのに必要なレンズが含まれています。Mobile based VR setup
  • コンピュータ接続: コンピュータに接続する VR セットアップです — 右目と左目の両方に表示される映像を映す高解像度の横向きスクリーンを持つ HMD で構成されています。HMD は右目と左目のシーン(ステレオビジョン)を分割するためのレンズも備えています。セットアップは分離型の位置センサも含まれています。位置センサは頭の位置/向き/速度/加速度を取得して、コンピュータへ絶えずその情報を渡します。 Computer based VR Setup

メモ: コンピュータ接続システムは位置センサーを含んでいない場合もありますが、通常は含まれています。

その他の VR 体験を補うハードウェア:

  • 手認識センサー: 手の位置と動きをトラッキングするセンサーで、手を興味深いコントローラーや VR ゲーム世界内のオブジェクトとして使えるようにします。現時点で最も先進的なものは Leap Motion で、(Oculus Rift に接続した)コンピューター上で動作し、モバイル端末に接続して使うこともできます(こちらは実験段階です)。
  • ゲームパッド: XBox コントローラおよびその類似コントローラをブラウザー内でキーボードとして動作するように設定できます。これは VR ウェブページとのインタラクションの可能性を広げます。モバイル環境で使えるゲームパッドも存在しますが、それらは Bluetooth 接続であるため、WebVR では動作しません。
  • アイトラッキングセンサー(実験的): FOVE プロジェクトは、眼球のかすかな動きを読み取る最初のヘッドセットです。
  • 顔の表情追跡(実験的): 南カリフォルニア大学や Facebook の Oculus 部門の研究者は、表情をトラッキングして、バーチャルキャラクターの表情へ適用する新しい方法をテストしています。
  • より複雑な位置センサーシステム: 例えば HTC VIVE は、空間の対角に配置された 2 つの位置センサーを備えています。空間をマッピングすることで、最大 5m x 5m の範囲で VR を体験できます。

位置、向き、速度、加速度

前述のように、位置センサは HMD に関する情報を検出して常にそれを出力しているので、頭の動きや回転などに追従してシーンを連続的に更新することができます。しかしその情報とは正確には何でしょうか?

Position and Orientation VR setup

出力情報は、4 つのカテゴリに分類できます。

  1. 位置 — 3D 空間の 3 つの座標軸に沿った HMD の位置です。位置センサから見て、x は左右、y は上下、z は前後となります。WebVR では、x, y, z 座標は VRPose.position 内の配列として表現されます。

  2. 向き — 3D 空間の 3 つの座標軸周りの HMD の回転です。ピッチは x 軸周り、ヨーは y 軸周り、ロールは z 軸周りの回転を意味します。WebVR では ピッチ、ヨー、ロールは VRPose.orientation 内の配列の最初の 3 要素で表されます。

  3. 速度 — VR で考慮する速度は 2 種類あります:

    • 速度(線速度) — 任意の 1 つの軸に沿った HMD の移動速度です。この情報は VRPose.linearVelocity を用いて取得できます。
    • 角速度 — 任意の 1 つの軸周りの HMD の回転速度です。この情報は VRPose.angularVelocity を用いて取得できます。
  4. 加速度 — VR で考慮する加速度は 2 種類あります:

    • 加速度(線加速度) — 任意の 1 つの軸に沿った HMD の移動の加速度です。この情報には VRPose.linearAcceleration を用いてアクセスできます。
    • 角加速度 — 任意の 1 つの軸周りの HMD の回転加速度です。この情報には VRPose.angularAcceleration を用いてアクセスできます。

視界

視界 (FOV; field of view) は、ユーザの各目で見られる(と期待されている)範囲です。その形状はおおよそ横向きのピラミッドで、頂点はユーザーの頭の中にあり、残りの部分はユーザーの目から広がっています。それぞれの目には固有の FOV があり、互いにわずかに重なっています。

FOV related properties

FOV は次の値で定義されています:

これらのプロパティのデフォルト値は、VR ハードウェアによって微妙に異なりますが、上下方向は 53°、左右方向は 47°、zNear と zFar はそれぞれ 0.1m から 10000m くらいになっています。

メモ: ユーザーは周囲全体を見渡せる可能性があります。これはアプリやゲームにとってまったく新しい考え方です。ユーザーが見回して背後を見る動機を用意し、最初は見えていないものを探すよう促しましょう。背後に何があるか説明しましょう。

VR アプリのための概念

このセクションでは、通常のモバイルやデスクトップを開発するときにはほとんど考慮する必要がないけれど、VR アプリを開発するときに知っておきたい概念について説明します。

立体視

立体視は、人間や(おそらく)動物が持つ通常のビジョンで、(両目のそれぞれから見える)僅かに異なる 2 つの画像を 1 つの画像として知覚するものです。結果として奥行きを認識でき、見事な 3D の世界を見る手助けをしています。VR アプリでこれを再現するには、ユーザが HMD を使っている時に左右の目のそれぞれに与える、本当にわずかに異なるビューを横に並べた画像をレンダリングする必要があります。

How to create stereoscopic 3D images

ヘッドトラッキング Head tracking

360° シーンの臨場感をつくりだす主要なテクノロジは、HMD に搭載されているジャイロスコープや加速度センサ、磁気センサ(コンパス)によって実現されています。 それによって目が球面上のスクリーンの前にいると信じることができるので、アプリのキャンバス内に現実的な没入感を与えることができます。

眼精疲労

眼精疲労は、HMD の使用に伴う大きな問題として VR でよく使われる用語です。アプリのキャンバスに表示する映像によって常に目を欺いているため、通常よりも目を酷使することになり、VR アプリを長時間利用すると眼精疲労を招くことがあります。

望ましくない影響を最小化するために、つぎのようなことが必要です。

  • 異なる深さへの焦点合わせを避ける(例: たくさんのパーティクルを異なる深度(奥行き)に使うのを避ける)。
  • 目の輻輳を避ける(例: カメラに向かってくる物体があると、目はそれを追って輻輳します)。
  • できるだけ落ち着いた色の暗い背景を使う; 明るいスクリーンは目の疲れが増えます。
  • 明度の激しい変化を避ける。
  • 大量のテキストを読ませることを避ける。目(カメラ)の位置と読ませたいテキストとの距離にも注意しなければいけません。0.5m は近すぎて不快で、2m 以上だと立体効果が感じられないので、その間に配置することをお勧めします。
  • 一般に、物体とカメラと距離には注意してください、Oculus は、フォーカスの最小距離として 0.75m を推奨しています。
  • シーン内のオブジェクトとのインタラクションが必要なときは、ポインタを使います。これは少ない労力で正しく物体を指定するのに役立つでしょう。

一般に、視覚的な負荷を抑えるほど、ユーザーの疲労も軽減されます。

モーション酔い

開発者が細心の注意を払っていないと、VR アプリはユーザの気分の悪化を実際に引き起こします。これは、目から受け取る刺激と、体が受け取る(と期待するもの)が違う場合に発生します。

ユーザのモーション酔いの発生を避けるために(あるいは最小化するために)、次のことが必要です:

  • 常にヘッドトラッキングを維持する(これは最も重要です、特に体験の最中で発生する場合)。
  • 一定の速度を使う; 加速や減速するようなカメラの動きを避ける(線形の加速度を使い、できるだけ easing を避ける)。
  • 高フレームレートを維持する(30fps 未満は不快です)。
  • 急激な、あるいは予期できないカメラの回転を避ける。
  • 固定オブジェクト用の固定点を追加する(そうしなければ、ユーザはそれらが移動していると感じてしまいます)
  • どこに焦点を合わせていいか分からなくなるので、DoF (Depth of Feild; 被写界深度)やモーションブラーのポスト処理を使用しない。
  • 明るさの変化を避ける(スムースに照明を変化させるため、低周波のテクスチャやフォグエフェクトを使います)。

全体的に、体に反射的な行動を引き起こすような信号を目が脳に送るべきではありません。

遅延

遅延は、物理的な頭の動きと、HMD スクリーンが更新されて表示が目に届くまでの間にかかる時間のことです。これは現実感の体験を提供する上で最も重要な要素のひとつです。人間は非常に小さな遅延を検出することができ、知覚させないためには遅延を 20 ミリ秒以下を維持する必要があります(例えば 60Hz のモニタは 16 ミリ秒で応答します)。

Oculus Rift ヘッドセットの遅延は 20 ミリ秒以下ですが、モバイル・デバイスベースの環境ではスマートフォンの CPU パワーやその他の性能に大きく依存します。

フレームレート (Frames per second / FPS)

Wikipedia の定義に基づくと、フレームレートは、連続した別々の画像(フレームと呼ぶ)をイメージングデバイスが生成する周波数のことです。60fps は、スムースなユーザ体験のために許容できるフレームレートですが、アプリが動作しているマシン性能や見せたいコンテンツの複雑さによっては、急激に低下する可能性があります。30fps 未満では、一般にジッタがあると考えられていて、ユーザーをいらだたせます。

最も困難なタスクの 1 つは、一定の高フレームレートを維持することで、それを実現するために、可能なかぎり効率的に動作するようにコードを最適化しなければなりません。一定のフレームレートを保てなかったり急激にフレームレートが変化するようなことが無いよう、適切なフレームレートにすることが好ましいです; このために、シーンに配置するオブジェクトを必要最小限にしたり、(WebGL の場合では)ドローコールを削減することが必要となります。

瞳孔間距離 (IPD)

Wikipedia の定義に基づくと、IPD は両目の瞳孔の中心間の距離です。IPD は両眼目視装置の設計においてクリティカルで、両目の瞳孔とも目視装置の射出ひとみ (exit pupils) に位置合わせする必要があります。

WebVR においては、IPD は VREyeParameters.offset を使って算出でき、これは IPD のちょうど半分の値になっています。

この値は HMD によって返され、60mm から 70mm くらいでしょう; Oculus Rift のようないくつかの HMD では、ユーザ固有の IPD をセット可能です。通常この値は変化しませんが、シーン全体のスケールを変更するためにそれを実施するかもしれません。例えば、IPD が 6000mm にセットされていると、小人の世界を見る巨人のように、ユーザーはシーンを見るでしょう。

自由度 (DoF)

DoF は空間内の剛体の動きを示します。この用語の略語の作り方は統一されていません。回転のみを検出するヘッドトラッキングセンサーについては 3DoF、位置と向きを同時に制御できる入力については 6DoF と表記されることがあります。また、ジャイロセンサー、加速度センサー、磁気センサー(コンパス)の 3 つを備えたハードウェアについて 9DoF と表記されることもありますが、3 x 3 DoF の値から実際に得られるのは 6 自由度のトラッキングです。

DoF は ユーザの頭の動きのトラッキングに直接関係します。

フォーカスコーン

私たちの実際の FOV は非常に広いですが(約 180°)、シンボルを感じ取れる範囲(中心 60°)やテキストを読める範囲(中心 10°)は小さな部分だけだと知っておく必要があります。視線追跡センサを備えていない場合、ユーザの目がフォーカスしている場所をスクリーンの中心であると仮定します。

アプリのキャンバス上のどこに視覚要素を配置するか決める際は、この制限を考慮することが重要です。視覚要素をフォーカスコーンの端に近づけすぎると、眼精疲労が急速に進むことがあります。

立体音響

立体音響は、3 次元空間内でどのように音が聞こえるかをシミュレーションするための音響操作エフェクトです。

これはウェブオーディオ API と直接関係していて、キャンバス内にあるオブジェクト上にサウンドを配置したり、ユーザの移動方向や見ているシーンの部分に応じてオーディオを再生することが可能です。