path: root/files/ja/web/api/webvr_api/concepts/index.html

---
title: WebVR concepts
slug: Web/API/WebVR_API/Concepts
translation_of: Web/API/WebVR_API/Concepts
---
<p>{{APIRef("WebVR API")}}</p>

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

<h2 id="VRの歴史">VRの歴史</h2>

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

<p>1939年 <a href="https://en.wikipedia.org/wiki/View-Master">View-Master device</a> が作られ，3Dピクチャを見ることができるようになりました．そのデバイスは，ステレオ立体視の小さなカラー写真のペアを持つ厚紙のディスクに記録された画像を表示していました．数年の開発ののち，軍はそのテクノロジーの使用に興味を，持ち，そしてHeadsightプロジェクトが1961年に生まれました — これはビデオスクリーンとヘッドトラッキングシステムを合体させたヘルメットに影響を与えました．</p>

<p><img alt="" src="http://end3r.com/tmp/vr/view-master.jpg"></p>

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

<p><img alt="" src="http://end3r.com/tmp/vr/matrix.jpg" style="display: block; margin: 0px auto;"></p>

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

<h3 id="最近のVR">最近のVR</h3>

<p>では何が新しいのでしょう？ 十分なユーザ体験を提供するには，VRハードウェアは高精度，低レイテンシでデータを届ける必要があります; VRアプリケーションを動かすコンピュータはこれらすべての情報を扱うため，十分強力でなければなりません．そのような精度とパワーがあったとしても，手頃な価格で利用できるようになったのは最近のことです．早期のVRプロトタイプは何万ドルもコストがかかりましたが，<a href="https://www.vive.com/uk/">HTC VIVE</a>や<a href="https://www.oculus.com/rift/">Oculus Rift</a>、<a href="https://www.playstation.com/en-us/explore/playstation-vr/">Playstation VR</a> のような近年のHMDは数百ドルで利用でき，さらに <a href="http://www.samsung.com/global/galaxy/gear-vr/">Gear VR</a> や <a href="https://www.google.com/get/cardboard/">Google Cardboard</a> のようなモバイルベースのソリューションみたいに，もっと安価なソリューションもあります．</p>

<p>ソフトウェアの面では、Valveは、VIVEや他のソリューションで互換性のある <a href="http://store.steampowered.com/universe/vr">SteamVR</a> を作成し、利用しやすいVR UIのようなソフトウェアへのアクセスを提供しています。</p>

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

<h3 id="入力デバイス">入力デバイス</h3>

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

<p> </p>

<h2 id="VR_ハードウェアのセットアップ" style="line-height: 30px; font-size: 2.14285714285714rem;">VR ハードウェアのセットアップ</h2>

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

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

<div class="note">
<p><strong>Note</strong>: コンピュータ接続システムは位置センサーを含んでいない場合もありますが，通常は含まれています．</p>
</div>

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

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

<h2 id="位置，向き，速度，加速度">位置，向き，速度，加速度</h2>

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

<p><img alt="Position and Orientation VR setup" src="https://mdn.mozillademos.org/files/11083/positionOrientationVR.png" style="width: 100%;"></p>

<p>出力情報は，4つのカテゴリに分類できます: </p>

<ol>
 <li>位置 — 3D空間の3つの座標軸に沿ったHMDの位置です．位置センサから見て，x は左右，yは上下，zは前後となります．WebVRでは、x, y, z座標は {{domxref("VRPose.position")}} 内の配列として表現されます．</li>
 <li>向き — 3D空間の3つの座標軸周りのHMDの回転です．ピッチはx軸周り，ヨーはy軸周り，ロールはz軸周りの回転を意味します．WebVRでは ピッチ、ヨー、ロールは
 {{domxref("VRPose.orientation")}} 内の配列の最初の3要素で表されます．</li>
 <li>速度 — VRで考慮する速度は2種類あります:
  <ul>
   <li>速度（線速度） — 任意の1つの軸に沿ったHMDの移動速度です．この情報は  {{domxref("VRPose.linearVelocity")}} を用いて取得できます．</li>
   <li>角速度 — 任意の1つの軸周りのHMDの回転速度です．この情報は {{domxref("VRPose.angularVelocity")}} を用いて取得できます．</li>
  </ul>
 </li>
 <li>加速度 — VRで考慮する加速度は2種類あります:
  <ul>
   <li>加速度（線加速度） — 任意の1つの軸に沿ったHMDの移動の加速度です．この情報には {{domxref("VRPose.linearAcceleration")}} を用いてアクセスできます．</li>
   <li>角加速度 — 任意の1つの軸周りのHMDの回転加速度です．この情報には {{domxref("VRPose.angularAcceleration")}} を用いてアクセスできます．</li>
  </ul>
 </li>
</ol>

<h2 id="視界">視界</h2>

<p>視界 (FOV; field of view) は，ユーザの各目で見られる（と期待されている）範囲です．その形状は，おおよそピラミッド型になっていて，（前後の）側面はユーザの頭の内部を頂点として，残りはユーザの目の位置から広がっています（訳注； 原文では eminateと書かれていますが，emanateの誤字と判断しました）． それぞれの目は固有のFOVを持っていて，もう一方にわずかに重なっています．</p>

<p><img alt="FOV related properties" src="https://mdn.mozillademos.org/files/11091/FOVrelatedProperties.png" style="width: 100%;"></p>

<p>FOVは次の値で定義されています: </p>

<ul>
 <li>{{domxref("VRFieldOfView.upDegrees")}}: FOVの上方へ広げる角度値です．</li>
 <li>{{domxref("VRFieldOfView.rightDegrees")}}: FOVの右側へ広げる角度値です．</li>
 <li>{{domxref("VRFieldOfView.downDegrees")}}: FOVを下方へ広げる角度値です．</li>
 <li>{{domxref("VRFieldOfView.leftDegrees")}}: FOVを左側へ広げる角度値です．</li>
 <li>zNear {{domxref("VRDisplay.depthNear")}}: ユーザの頭の中央からFOVの可視範囲開始まで距離．</li>
 <li>zFar {{domxref("VRDisplay.depthFar")}}: ユーザの頭の中央からFOVの可視範囲末端までの距離．</li>
</ul>

<div class="note">
<p><strong>Note</strong>: The user can potentially see all the way around them, which is a brand new concept for apps and games. Try to give people a reason to look around and see what's behind them — make them reach out and find things that are not visible at the very beginning. Describe what's behind their backs.</p>
</div>

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

<div class="note">
<p><strong>Note</strong>: ユーザは潜在的に周囲全体を見渡すことができます．それはまったく新しいアプリやゲームのコンセプトです．人々が見回したり背後にある何かを見たりする理由を与えることにトライしてみましょう — 最初は見えていないものを見つける手助けをしてあげてください．背後になにがあるか説明しましょう．</p>
</div>

<h2 id="VRアプリのための概念">VRアプリのための概念</h2>

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

<h3 id="立体視_Stereoscopic_vision">立体視 Stereoscopic vision</h3>

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

<p><img alt="How to create stereoscopic 3D images" src="https://mdn.mozillademos.org/files/11095/createStereoscopicImages.png" style="width: 100%;"></p>

<h3 id="ヘッドトラッキング_Head_tracking" style="line-height: 24px; font-size: 1.71428571428571rem;">ヘッドトラッキング Head tracking</h3>

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

<h3 id="眼精疲労_Eye_strain">眼精疲労 Eye strain</h3>

<p>HMDのメジャーな障害としてVRでよく使われる用語です．私たちはアプリキャンバス内で見せ続けることで常に目を欺いていますが，通常よりも眼を酷使することになるため，VRアプリを長時間利用し続けると眼精疲労を招きます．</p>

<p>望ましくない影響を最小化するするために，つぎのようなことが必要です:</p>

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

<p>一般に，ビジュアルエフェクトが少ないほど，ユーザに与える疲れは軽減されます．</p>

<h3 id="モーション酔い_Motion_sickness">モーション酔い Motion sickness</h3>

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

<p>ユーザのモーション酔いの発生を避けるために（あるいは最小化するために），次のことが必要です:</p>

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

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

<h3 id="遅延_Latency">遅延 Latency</h3>

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

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

<h3 id="フレームレート_Framerate_(_Frames_per_second_FPS_)">フレームレート Framerate ( Frames per second / FPS )</h3>

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

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

<h3 id="瞳孔間距離_Interpupillary_distance_(_IPD_)">瞳孔間距離 Interpupillary distance ( IPD )</h3>

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

<p>WebVRにおいては，IPDは {{domxref("VREyeParameters.offset")}} を使って算出でき、これはIPDのちょうど半分の値になっています．</p>

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

<h3 id="自由度_Degrees_of_Freedom_(_DoF_)">自由度 Degrees of Freedom ( DoF )</h3>

<p>DoF は空間内の剛体の動きを示します．この用語の値を作る決まった方法はありません — 3DoFという記述は，ヘッドトラッキングで回転のみを検出するセンサの文脈で発見でき，6DoFという記述を，位置と回転を同時に制御できる入力について書かれている文脈で見つけることができます．ジャイロセンサ，加速度センサ，コンパスのような3つのセンサを持つハードウェアで，9DoFという記述がされていることがありますが，3 x 3 DoFの結果として得られるものは，実際には6自由度のトラッキングとなります．</p>

<p>DoFは ユーザの頭の動きのトラッキングに直接関係します．</p>

<h3 id="フォーカスコーン_Cone_of_focus">フォーカスコーン Cone of focus</h3>

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

<p>アプリキャンバス上のどこに映像要素を配置するかを決定する際に，この制限を考慮することが重要となります．フォーカスコーンの端っこが遠すぎる場合は，非常に急速な眼精疲労につながります．MozVR.com に，これに関する興味深い記事が（他のものに混ざってですが）あります —  <a href="http://mozvr.com/posts/quick-vr-prototypes/">Quick VR Mockups with Illustrator</a> を参照してください．</p>

<h3 id="立体音響_3D_Positional_Audio">立体音響 3D Positional Audio</h3>

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

<p>これは <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a> と直接関係していて，キャンバス内にあるオブジェクト上にサウンドを配置したり，ユーザの移動方向や見ているシーンの部分に応じてオーティオを再生することが可能です．</p>