diff options
Diffstat (limited to 'files/ja/web/api/webvr_api')
| -rw-r--r-- | files/ja/web/api/webvr_api/concepts/index.html | 201 | ||||
| -rw-r--r-- | files/ja/web/api/webvr_api/index.html | 188 | ||||
| -rw-r--r-- | files/ja/web/api/webvr_api/using_the_webvr_api/index.html | 300 | ||||
| -rw-r--r-- | files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html | 268 | ||||
| -rw-r--r-- | files/ja/web/api/webvr_api/webvr_environment_setup/index.html | 110 |
5 files changed, 1067 insertions, 0 deletions
diff --git a/files/ja/web/api/webvr_api/concepts/index.html b/files/ja/web/api/webvr_api/concepts/index.html new file mode 100644 index 0000000000..a868ca06fd --- /dev/null +++ b/files/ja/web/api/webvr_api/concepts/index.html @@ -0,0 +1,201 @@ +--- +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> diff --git a/files/ja/web/api/webvr_api/index.html b/files/ja/web/api/webvr_api/index.html new file mode 100644 index 0000000000..bbce00b96f --- /dev/null +++ b/files/ja/web/api/webvr_api/index.html @@ -0,0 +1,188 @@ +--- +title: WebVR API +slug: Web/API/WebVR_API +tags: + - API + - Deprecated + - Experimental + - Landing + - Obsolete + - Reference + - VR + - Virtual Reality + - WebVR +translation_of: Web/API/WebVR_API +--- +<p>{{DefaultAPISidebar("WebVR API")}}{{Deprecated_Header}}</p> + +<div class="blockIndicator note"><strong>注:</strong> WebVR API は <a href="/ja/docs/Web/API/WebXR_API">WebXR API</a> に置き換えられました。 WebVR は標準として批准されることはなく、ごく少数のブラウザでしか既定で実装・有効化されず、少数の端末しか対応していませんでした。</div> + +<p class="summary">WebVR は，バーチャルリアリティデバイス — 例えば Oculus Rift のようなヘッドマウントディスプレイ — をウェブアプリへ公開し，ヘッドマウントディスプレイの位置や動きを3D空間上の動きへと変換する手助けを行います．これによって，バーチャルな製品紹介やインタラクティブな訓練アプリといったものから超臨場感のファーストパーソン・シューティングゲームといったものまで，非常に面白い様々なアプリケーションをつくることができます．</p> + +<h2 id="Concepts_and_usage" name="Concepts_and_usage">概念と利用方法</h2> + +<p>コンピュータに接続されている VR 装置は {{DOMxRef("Navigator.getVRDisplays()")}} メソッドによって返されます。それぞれの装置は {{DOMxRef("VRDisplay")}} オブジェクトで表されます。</p> + +<p><img alt='Sketch of a person in a chair with wearing goggles labelled "Head mounted display (HMD)" facing a monitor with a webcam labelled "Position sensor"' src="https://mdn.mozillademos.org/files/11035/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 60%;"></p> + +<p>{{DOMxRef("VRDisplay")}} VRDisplay は WebVR API の中心的なインターフェイスであり、そのプロパティとメソッドを介して、以下の機能にアクセスすることができます。</p> + +<ul> + <li>ディスプレイを識別するための有用な情報を取得し、ディスプレイにどのような機能があるのか、ディスプレイに関連付けられたコントローラなどを確認することができます。</li> + <li>ディスプレイに表示したいコンテンツの各フレームの {{DOMxRef("VRFrameData", "frame data")}} を取得し、一貫したレートで表示するためにそれらのフレームを送信します。</li> + <li>ディスプレイへの表示の開始と停止。</li> +</ul> + +<p>典型的な (シンプルな) WebVR アプリは次のように動作します。</p> + +<ol> + <li>{{DOMxRef("Navigator.getVRDisplays()")}} を使用して VR ディスプレイの参照を取得します。</li> + <li>{{DOMxRef("VRDisplay.requestPresent()")}} を使用して VR ディスプレイの表示を開始します。</li> + <li>WebVR 専用の {{DOMxRef("VRDisplay.requestAnimationFrame()")}} メソッドを使用して、ディスプレイの正しいリフレッシュレートでアプリのレンダリングループを実行します。</li> + <li>レンダリングループ内では、現在のフレームを表示するために必要なデータを取得し ({{DOMxRef("VRDisplay.getFrameData()")}})、表示されたシーンを 2 回 — それぞれの目の画像を1回ずつ描画し、レンダリングされたビューをディスプレイに送信してユーザーに表示します ({{DOMxRef("VRDisplay.submitFrame()")}})。</li> +</ol> + +<p>また WebVR 1.1 では、 {{DOMxRef("Window")}} オブジェクトに多数のイベントが追加され、 JavaScript が表示状態の変化に対応できるようになっています。</p> + +<div class="note"> +<p><strong>Note</strong>: <a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">WebVR API の使用</a>と <a href="/ja/docs/Web/API/WebVR_API/Concepts">WebVR の概念</a>の記事で、この API の使用方法がもっとわかります。</p> +</div> + +<h3 id="API_availability" name="API_availability">API の可用性</h3> + +<p>Web 標準として承認されることのなかった WebVR API は、標準化プロセスの終了に向けて順調に進んでいる <a href="/ja/docs/Web/API/WebXR_Device_API">WebXR API</a> に取って代わられて非推奨となりました。そのため、既存のコードを更新して、代わりに新しい API を使用するようにしてください。一般的には、移行はかなり苦痛のないものになるはずです。</p> + +<p>さらに、端末やブラウザーによっては、 WebVR は HTTPS 接続を介して安全なコンテキストを使用してページをロードする必要があります。ページが完全に安全でない場合、 WebVR のメソッドや機能は利用できません。これは、 {{DOMxRef("Navigator")}} の {{DOMxRef("Navigator.getVRDisplays", "getVRDisplays()")}} メソッドが <code>NULL</code> であるかどうかを確認することで簡単にテストできます。</p> + +<pre class="brush: js notranslate">if (!navigator.getVRDisplays) { + console.error("WebVR is not available"); +} else { + /* WebVR を使用する */ +} +</pre> + +<h3 id="Using_controllers_Combining_WebVR_with_the_Gamepad_API" name="Using_controllers_Combining_WebVR_with_the_Gamepad_API">コントローラーの使用: WebVR と Gamepad API の組み合わせ</h3> + +<p>多くの WebVR ハードウェアは、ヘッドセットと一緒に使用するコントローラーをセットアップします。これらは <a href="/ja/docs/Web/API/Gamepad_API">Gamepad API</a> を介して WebVR アプリで使用することができ、特に <a href="/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a> は、コントローラーの<a href="/en-US/docs/Web/API/GamepadPose">コントローラーのポーズ</a>や<a href="/en-US/docs/Web/API/GamepadHapticActuator">触覚アクチュエーター</a>などにアクセスするための API 機能を追加します。</p> + +<div class="note"> +<p><strong>Note</strong>: <a href="/ja/docs/Web/API/WebVR_API/Using_the_WebVR_API">WebVR API の使用</a>の記事では、 WebVR アプリでの VR コントローラーの使い方の基本を解説しています。</p> +</div> + +<h2 id="WebVR_interfaces" name="WebVR_interfaces">WebVR インターフェイス</h2> + +<dl> + <dt>{{DOMxRef("VRDisplay")}}</dt> + <dd>このAPIでサポートされているVRデバイスを表します．デバイスIDや説明など汎用的な情報や，VRシーンの表示を開始するためのメソッドや，両目のパラメータやディスプレイの対応機能を受け取るメソッド，その他の重要な機能のためのメソッドを含んでいます．</dd> + <dt>{{DOMxRef("VRDisplayCapabilities")}}</dt> + <dd>{{DOMxRef("VRDisplay")}} の利用可能な機能を示しています — この機能はVRデバイスで使える機能テストを実行するために使うことができ，例えば位置情報を返すことが可能かに使えます．</dd> + <dt>{{DOMxRef("VRDisplayEvent")}}</dt> + <dd>WebVR 関連イベントのイベントオブジェクトを表します (下記の {{anch("Window", "window オブジェクト拡張")}}を参照)。</dd> + <dt>{{DOMxRef("VRFrameData")}}</dt> + <dd>VR シーンの 1 フレームをレンダリングするために必要なすべての情報を表します。 {{DOMxRef("VRDisplay.getFrameData()")}} から構築されます。</dd> + <dt>{{DOMxRef("VRPose")}}</dt> + <dd>指定した時刻における位置の状態を表します（これには向き，位置，速度，加速度を含んでいます）．</dd> + <dt>{{DOMxRef("VREyeParameters")}}</dt> + <dd>指定した目に対応するシーンを正しくレンダリングするために必要となるすべての情報へのアクセスを提供します．これにはFOV情報を含まれています．</dd> + <dt>{{DOMxRef("VRFieldOfView")}}</dt> + <dd>中心点からの視界を記述する4つの異なる角度値で定義されるFOVを表します．</dd> + <dt>{{DOMxRef("VRLayerInit")}}</dt> + <dd> {{DOMxRef("VRDisplay")}} 内に表示されるレイヤを表します.</dd> + <dt>{{DOMxRef("VRStageParameters")}}</dt> + <dd>ルームスケール体験をサポートしているデバイスで，ステージエリアを示す値を表します．</dd> +</dl> + +<h3 id="Extensions_to_other_interfaces" name="Extensions_to_other_interfaces">その他のインターフェイスの拡張</h3> + +<p>The WebVR API extends the following APIs, adding the listed features.</p> + +<h4 id="Gamepad">Gamepad</h4> + +<dl> + <dt>{{DOMxRef("Gamepad.displayId")}} {{readonlyInline}}</dt> + <dd><dfn>関連付いている {{DOMxRef("VRDisplay")}} の {{DOMxRef("VRDisplay.displayId")}} を返します — その <code>VRDisplay</code> はゲームパッドが表示シーンのコントロールします．</dfn></dd> +</dl> + +<h4 id="Navigator">Navigator</h4> + +<dl> + <dt>{{DOMxRef("Navigator.activeVRDisplays")}} {{readonlyInline}}</dt> + <dd>現在表示されている（{{DOMxRef("VRDisplay.ispresenting")}} が <code>true の</code>）すべての {{DOMxRef("VRDisplay")}} オブジェクトを持つ配列を返します．</dd> + <dt>{{DOMxRef("Navigator.getVRDisplays()")}}</dt> + <dd>コンピュータに接続されている利用可能なVRデバイスを表す {{DOMxRef("VRDisplay")}} オブジェクトの配列へ解決する promiseを返します．</dd> +</dl> + +<h4 id="Window_events" name="Window_events">Window イベント</h4> + +<dl> + <dt>{{DOMxRef("Window.onvrdisplaypresentchange")}}</dt> + <dd>VRデバイスの表示状態が変更されたとき — すなわち，表示状態から非表示状態へ変化したときあるいはその逆（ {{event("onvrdisplaypresentchange")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．</dd> + <dt>{{DOMxRef("Window.onvrdisplayconnect")}}</dt> + <dd>互換性のあるVRデバイスがコンピュータに接続されたとき（ {{event("vrdisplayconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．</dd> + <dt>{{DOMxRef("Window.onvrdisplaydisconnect")}}</dt> + <dd>互換性のあるVRデバイスがコンピュータから接続解除されたとき（ {{event("vrdisplaydisconnect")}} イベントが発行されたとき）に実行されるイベントハンドラを表します．</dd> + <dt>{{DOMxRef("Window.onvrdisplayactivate")}}</dt> + <dd>ディスプレイが表示できるようになったとき ({{event("vrdisplayactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD を移動させて待機状態を解除した場合や、電源を入れたことで起動した場合などです。</dd> + <dt>{{DOMxRef("Window.onvrdisplaydeactivate")}}</dt> + <dd>ディスプレイが表示できなくなったとき ({{event("vrdisplaydeactivate")}} イベントが発生したとき) に実行されるイベントハンドラーを表します。例えば、HMD が一定期間使用されていなかったためにスタンバイモードやスリープモードになった場合などです。</dd> + <dt>{{DOMxRef("Window.onvrdisplayblur")}}</dt> + <dd>ブラウザ、OS、または VR ハードウェアによってディスプレイへの表示が何らかの理由で一時停止された場合 ({{event("vrdisplayblur")}} イベントが発生した場合) に実行されるイベントハンドラーを表します。例えば、ユーザーがシステムメニューやブラウザーと対話している間などに、トラッキングや体験の喪失を防ぐためです。</dd> + <dt>{{DOMxRef("Window.onvrdisplayfocus")}}</dt> + <dd>一時停止後に ({{event("vrdisplayfocus")}} イベントが発生したときに) ディスプレイへの提示が再開されたときに実行されるイベントハンドラーを表します。</dd> +</dl> + +<h2 id="Examples" name="Examples">例</h2> + +<p>次の Github リポジトリでいくつかの例を見つけられます。</p> + +<ul> + <li><a href="https://github.com/mdn/webvr-tests">webvr-tests</a>: 基本的な機能の使い方を示すためのシンプルなデモ。</li> + <li><a href="https://github.com/facebook/Carmel-Starter-Kit">Carmel starter kit</a> — nice simple, well-commented examples that go along with Carmel, Facebook's WebVR browser.</li> + <li><a href="https://webvr.info/samples/">WebVR.info samples</a> — slightly more in-depth examples plus source code</li> + <li><a href="https://webvr.rocks/firefox#demos">WebVR.rocks Firefox demos</a> — showcase examples</li> + <li><a href="https://aframe.io/">A-Frame homepage</a> — examples showing A-Frame usage</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("GamepadExtensions")}}</td> + <td>{{Spec2("GamepadExtensions")}}</td> + <td><a href="/ja/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Experimental Gamepad extensions</a> を定義。</td> + </tr> + <tr> + <td>{{SpecName("WebVR 1.1")}}</td> + <td>{{Spec2("WebVR 1.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<h3 id="Navigator.getVRDisplays"><code>Navigator.getVRDisplays</code></h3> + +<div> +<p>{{Compat("api.Navigator.getVRDisplays")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="https://vr.mozilla.org">vr.mozilla.org</a> — Mozilla VR team から提供されるデモ，ダウンロード，その他のリソース．</li> + <li><a href="https://aframe.io/">A-Frame</a> — Open source web framework for building VR experiences.</li> + <li><a href="https://webvr.info">webvr.info</a> — Up-to-date information about WebVR, browser setup, and community.</li> + <li><a href="https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate">threejs-vr-boilerplate</a> — A useful starter template for writing WebVR apps into.</li> + <li><a href="https://github.com/googlevr/webvr-polyfill/">Web VR polyfill</a> — JavaScript implementation of WebVR.</li> + <li><a href="https://www.supermedium.com">Supermedium</a> — A pure WebVR browser to easily access the best WebVR content.</li> + <li><a href="http://webvr.directory/">WebVR Directory</a> — List of quality WebVR sites.</li> +</ul> diff --git a/files/ja/web/api/webvr_api/using_the_webvr_api/index.html b/files/ja/web/api/webvr_api/using_the_webvr_api/index.html new file mode 100644 index 0000000000..240940fe73 --- /dev/null +++ b/files/ja/web/api/webvr_api/using_the_webvr_api/index.html @@ -0,0 +1,300 @@ +--- +title: WebVR APIの使い方 +slug: Web/API/WebVR_API/Using_the_WebVR_API +translation_of: Web/API/WebVR_API/Using_the_WebVR_API +--- +<p>{{draft("この WebVR API ドキュメントは現在v1.0の仕様への対応作業の途中です．従って、ここにある情報のいくつかは最新ではありません。この作業について質問がある場合は ~~chrisdavidmills へ連絡をとってください．")}}</p> + +<p class="summary"><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a> はウェブ開発者のツールキットへのすばらしい追加機能で、<a href="https://developer.oculus.com/">Oculus Rift</a> のようなバーチャルリアリティハードウェアへのアクセスが可能となります。そして出力された動きや向きはウェブアプリの描画更新に変換されます。しかし VR アプリを開発はどのようにやればいいのでしょうか？ この記事では、それに関する基礎的な解説を行います。</p> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>注記</strong></span>: WebVR は現在実験的な段階にあります（<a href="http://mozvr.github.io/webvr-spec/webvr.html">最新の仕様はこちら</a>にあります); 今の段階でもっとも正常に動作するのは Firefox Nightly/Developer Edition で、一部の機能は Google Chrome でも動作します。詳細は Brandon Jonesの <a class="external external-icon" href="http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html">Bringing VR to Chrome</a> を参照してください。</p> +</div> + +<h2 id="始めるには">始めるには</h2> + +<p>WebVRを始めるには，VRハードウェアのマニュアルに従ったセットアップと、<a href="/en-US/docs/Web/API/WebVR_API/WebVR_environment_setup">WebVR environment setup</a> に示されているコンピュータへの設定が必要になります、スムースな動作には専用GPUが推奨されます。</p> + +<p><a href="https://nightly.mozilla.org/">Firefox Nightly</a> (または <a href="https://www.mozilla.org/en-US/firefox/developer/">Developer Edition</a>) のインストールと合わせて <a href="http://www.mozvr.com/downloads/webvr-addon-0.1.0.xpi">WebVR Enabler Add-on</a> も必要となります。</p> + +<p>いちど環境が設定できたら、テストのために私たちの <a href="http://mozvr.com/projects/">MozVR projects</a> を開いて、[Enter VR<strong>]</strong> ボタンをクリックすることを試してください。</p> + +<div class="note"> +<p><strong>注記</strong>: より深い情報のために，<a href="/en-US/docs/Web/API/WebVR_API/WebVR_environment_setup">WebVR environment setup</a> をチェックしてください。</p> +</div> + +<div class="note"> +<p><strong>注記</strong>: モバイルデバイスを HMD として用いるような安価な選択肢もあります。この場合，位置センサは利用できませんので、代わりに <a href="/en-US/Apps/Build/gather_and_modify_data/responding_to_device_orientation_changes">deviceorientation API</a> を用いて擬似的な向きデータを使う必要があるかもしれません。</p> +</div> + +<h2 id="簡単なデモ">簡単なデモ</h2> + +<p>WebVR のデモは <a href="https://github.com/MozVR/">MozVR team repo</a> や <a href="https://github.com/mdn/webvr-tests">MDN webvr-tests repo</a> にたくさんありますが、この記事では、主に<a href="https://github.com/mdn/webvr-tests/tree/gh-pages/positionsensorvrdevice">positionsensorvrdevice</a> について (<a href="http://mdn.github.io/webvr-tests/positionsensorvrdevice/">動作しているデモ</a>) を例に解説します。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10797/vrpositionsensor-demo.png" style="display: block; height: 396px; margin: 0px auto; width: 800px;"></p> + +<p>これは簡単な 2.5D のデモで，<a href="/en-US/docs/Web/HTML/Element/canvas">HTML5 Canvas</a> にレンダリングされた Firefox ロゴが右目と左目のビューに表示されるものです．VR HMDでデモを見ているときにキャンバスをクリックすると、デモはフルスクリーンになり、Firefox ロゴに近づけるようになります。あなたが動くと頭の動きに合わせて上下左右や回転してリアルに動きます。</p> + +<p>あなたが WebVR のコードがどう動いているかを簡単に確認できるように、デモは意図的にシンプルになるよう保持されています。API は十分シンプルであるため，単純な DOM ベースインターフェイスでも複雑な WebGL シーンでも、好きなアプリに WebVR 制御の移動を簡単に適用できます。</p> + +<h2 id="アプリはどう動く">アプリはどう動く?</h2> + +<p>このセクションでは、アプリを動作させるために必要なコードの変更箇所を通じて、基礎的なレベルで何が必要かを知ることができます。</p> + +<h3 id="VRデバイスへのアクセス">VRデバイスへのアクセス</h3> + +<p>最初にコンピュータに接続中のVRハードウェアへのプログラム的な参照を取得します。それには接続中の全 VR デバイスの配列へと解決できるプロミスを返す {{domxref("Navigator.getVRDevices")}} を使います。</p> + +<p>返される可能性のあるオブジェクトが2種類あります:</p> + +<ul> + <li>{{domxref("PositionSensorVRDevice")}}: 位置センサカメラ。</li> + <li>{{domxref("HMDVRDevice")}}: VRヘッドマウントディスプレイ。</li> +</ul> + +<p> <a href="https://github.com/mdn/webvr-tests/tree/gh-pages/vrdevice">vrdevice demo</a> で基本的なデバイス情報を表示するための非常に簡単なコードを見ることができます。</p> + +<p>本当に欲しいものはデバイスのペアを取得するものです (将来のマルチプレイヤVRゲームでは複数のペアになるかもですが)。WebVR 仕様からもってきた（そして <a href="https://github.com/mdn/webvr-tests/tree/gh-pages/positionsensorvrdevice">positionsensorvrdevice</a> デモでも使っている）次のコードはかなりよく使うトリックです:</p> + +<pre class="brush: js">var gHMD, gPositionSensor; + +navigator.getVRDevices().then(function(devices) { + for (var i = 0; i < devices.length; ++i) { + if (devices[i] instanceof HMDVRDevice) { + gHMD = devices[i]; + break; + } + } + + if (gHMD) { + for (var i = 0; i < devices.length; ++i) { + if (devices[i] instanceof PositionSensorVRDevice && devices[i].hardwareUnitId === gHMD.hardwareUnitId) { + gPositionSensor = devices[i]; + break; + } + } + } +});</pre> + +<p>最初に見つかった {{domxref("HMDVRDevice")}} のインスタンスを取得し、それを <code>gHMD</code> 変数へ保存します．次に見つかった {{domxref("PositionSensorVRDevice")}} のインスタンスを取得して <code>gPositionSensor</code> 変数に代入していますが，それは先ほど取得した <code>gHMD</code> オブジェクトの {{domxref("VRDevice.hardWareUnitId")}} プロパティが一致するものだけを対象にしています。同一のハードウェアは複数のデバイスとして取得されますが、それらはハードウェアユニットIDを共有しています — これは取得した 2 つのデバイスの参照がマッチングしているかをチェックする方法です。</p> + +<h3 id="アプリの初期化">アプリの初期化</h3> + +<p>シーンを描画する {{htmlelement("canvas")}} 要素を次のように作成し、配置します:</p> + +<pre class="brush: js">var myCanvas = document.createElement('canvas'); +var ctx = myCanvas.getContext('2d'); +var body = document.querySelector('body'); +body.appendChild(myCanvas);</pre> + +<p>次に、新しい <a href="/en-US/docs/Web/API/HTMLImageElement">image</a> を作成し、アプリの <a href="/en-US/docs/Games/Anatomy#Building_a_main_loop_in_JavaScript">main loop</a> である<code>draw()を実行する前に </code>image が <code>ロードされているかをチェックするために</code> {{event("load")}} イベントを使います:</p> + +<pre class="brush: js">var image = new Image(); +image.src = 'firefox.png'; +image.onload = draw;</pre> + +<h3 id="メインループ">メインループ</h3> + +<p><code>draw()</code> は次のように実装します:</p> + +<pre class="brush: js">function draw() { + WIDTH = window.innerWidth; + HEIGHT = window.innerHeight; + lCtrOffset = WIDTH*0.25; + rCtrOffset = WIDTH*0.25; + + myCanvas.width = WIDTH; + myCanvas.height = HEIGHT; + + setView(); + drawImages(); + drawCrosshairs(); + + requestAnimationFrame(draw); +}</pre> + +<p><a href="/en-US/docs/Web/API/Window">window</a> の <code>WIDTH</code> と <code>HEIGHT</code> は各フレームでリサンプリングされ，次の設定に使われます:</p> + +<ul> + <li>左右の目のビュー中心からの相対的に描画される画像を維持するのに使われる左右のオフセット値です。半分の幅のシーンのコピーを描画するので、各コピーの中心はそれぞれ、エッジの端から端までのキャンバス全体幅のちょうど1/4の幅になります。</li> + <li>キャンバスの <a href="/en-US/docs/Web/API/HTMLCanvasElement/width">width</a> と <a href="/en-US/docs/Web/API/HTMLCanvasElement/height">height</a>。</li> +</ul> + +<p>これによってブラウザウィンドウがリサイズされたとしても、シーンが正しくリサイズされます。</p> + +<p>次にメインループの中で3つの関数を実行しています:</p> + +<ul> + <li><code>setView()</code> は，VR ハードウェアから位置と向きの情報を受け取り，シーン内の更新された画像位置の描画に使用する準備をします。</li> + <li><code>drawImages()</code> はシーンを更新された位置で実際に描画します。</li> + <li><code>drawCrosshairs()</code> は常にシーンの中央にある十字線を描画します。</li> +</ul> + +<p>これらの詳細は、後ほど解説します。</p> + +<p>ループの最後に <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame(draw)</a> を実行し<code>、draw()</code> ループが連続して呼び出されるようにします。</p> + +<h3 id="位置と向き情報の受取り">位置と向き情報の受取り</h3> + +<p>では <code>setView()</code> 関数の詳細を見ていきましょう。コードの各部分を順に追って、そこで何をしているかを説明します:</p> + +<pre class="brush: js">function setView() { + var posState = gPositionSensor.getState();</pre> + +<p>位置センサへの参照を使って {{domxref("PositionSensorVRDevice.getState")}} を呼び出します。このメソッドは、あなたが知りたい現在のHMDの状態のすべてを返します — {{domxref("VRPositionState")}} オブジェクトへのアクセスを通じて — 位置、向き、そして速度/ 加速度や角速度 / 角加速度のようなより高度な情報を含んでいます。</p> + +<pre class="brush: js"> if(posState.hasPosition) { + posPara.textContent = 'Position: x' + roundToTwo(posState.position.x) + " y" + + roundToTwo(posState.position.y) + " z" + + roundToTwo(posState.position.z); + xPos = -posState.position.x * WIDTH * 2; + yPos = posState.position.y * HEIGHT * 2; + if(-posState.position.z > 0.01) { + zPos = -posState.position.z; + } else { + zPos = 0.01; + } + }</pre> + +<p>HMDのスイッチがOFFにされたり位置センサを向いていなかったりした場合など、アプリがエラーになったり停止したりしないように、 {{domxref("VRPositionState.hasPosition")}} を使って HMD の正常な位置情報が利用可能かを確認する方法をチェックします。</p> + +<p>そして通知を目的として、アプリのUI内のパラグラフへ現在の位置情報を出力します。読みやすくするために、カスタム関数を使って小数点以下 2 桁に丸めています。</p> + +<p>最後に {{domxref("VRPositionState.position")}} に格納されている位置情報に関して、<code>xPos</code>、 <code>yPos</code>、<code>zPos</code> 変数に代入します。<code>zPos</code> の値を 0.01 以上にするのに <code>if ... else</code> ブロックが利用されていることに気付くでしょう — このアプリは0以下になると例外を投げていました。</p> + +<pre class="brush: js"> if(posState.hasOrientation) { + orientPara.textContent = 'Orientation: x' + roundToTwo(posState.orientation.x) + " y" + + roundToTwo(posState.orientation.y) + " z" + + roundToTwo(posState.orientation.z); + xOrient = posState.orientation.x * WIDTH; + yOrient = -posState.orientation.y * HEIGHT * 2; + zOrient = posState.orientation.z * 180; + + }</pre> + +<p>次に同じような処理をして、HMDの向きに応じてシーンの更新処理をします — {{domxref("VRPositionState.hasOrientation")}} を使って有効な向きデータかをチェックして，向きのデータを通知用のUIに表示し、<code>xOrient</code>、<code>yOrient</code>、<code>zOrient</code> の値を {{domxref("VRPositionState.orientation")}} に格納されている値から設定します．</p> + +<pre> timePara.textContent = 'Timestamp: ' + Math.floor(posState.timeStamp); +}</pre> + +<p>最後に {{domxref("VRPositionState.timeStamp")}} に格納されている現在のタイムスタンプを通知 UI に出力します。この値は位置データが更新済みか、どんな順序で更新が発生したかを判断するのに役立ちます。</p> + +<h3 id="シーンの更新">シーンの更新</h3> + +<p><code>setView()</code> で取得された <code>xPos</code>、<code>yPos</code>、<code>zPos</code>、<code>xOrient</code>、<code>yOrient</code>、<code>zOrient</code> の値は、<code>drawImages() </code>で行われるシーン病がの更新のための変更値として使用されます。どうやっているかを見ていきますが、左目のビューの描画コードだけをウォークスルーしていきます。右目については、右にオーバーシフトしている以外はほぼ同じです:</p> + +<pre class="brush: js">function drawImages() { + ctx.fillStyle = 'white'; + ctx.fillRect(0,0,WIDTH,HEIGHT);</pre> + +<p>最初に次のフレームが描画される前にシーンをクリアするため、白い {{domxref("CanvasRenderingContext2D.fillRect","fillRect()")}} を描画します。</p> + +<pre class="brush: js"> ctx.save(); + ctx.beginPath(); + ctx.translate(WIDTH/4,HEIGHT/2); + ctx.rect(-(WIDTH/4),-(HEIGHT/2),WIDTH/2,HEIGHT);</pre> + +<p>次に左目のビューを別の画像として扱って右目のビューに影響を与えないコードにするので、 {{domxref("CanvasRenderingContext2D.save","save()")}} でコンテキスト状態を保存します。</p> + +<p>そして {{domxref("CanvasRenderingContext2D.beginPath","pathを開始し")}}, {{domxref("CanvasRenderingContext2D.translate","canvasを変換します")}}、これによって原点を左目の中心（全体の1/4幅で半分の高さ）に移動させます。回転を正しく動かすためにもこれは必要です。回転はcanvasの原点が中心となります。そして左目のビュー全体を覆うように {{domxref("CanvasRenderingContext2D.rect","rect()")}} を描画します。</p> + +<p><code>rect()</code> はマイナスの 1/4 幅，マイナスの1/2 高さから描画し始めていることに注意してください。これは原点が既に移動しているためです。</p> + +<pre> ctx.clip();</pre> + +<p>canvas を {{domxref("CanvasRenderingContext2D.clip","clip()")}} します。<code>rect()</code> が描画された直後にこれを呼ぶので、キャンバス上に対して行うことは <code>rect() の内側に制限され</code>、<code>restore()</code> が呼び出されるまですべてのオーバーフローは隠蔽されます（後述）。これは左ビュー全体が右ビューから独立したままであることを保証します。</p> + +<pre class="brush: js"> ctx.rotate(zOrient * Math.PI / 180);</pre> + +<p>頭の回転と同じようにシーンを回転させるために、zOrientの値に従った回転が画像に適用します。</p> + +<pre class="brush: js"> ctx.drawImage(image,-(WIDTH/4)+lCtrOffset-((image.width)/(2*(1/zPos)))+xPos-yOrient,-((image.height)/(2*(1/zPos)))+yPos+xOrient,image.width*zPos,image.height*zPos);</pre> + +<p>実際に画像を描画しましょう! この少し厄介なコードを、ここでは引数ごとに分解してみましょう:</p> + +<ul> + <li><code>image</code>: 描画する画像</li> + <li> + <p><code>-(WIDTH/4)+lCtrOffset-((image.width)/(2*(1/zPos)))+xPos-yOrient</code>: 画像原点の水平座標。前に行った平行移動を打ち消すために <code>WIDTH/4</code> を引きます．そして中心に戻すために左中心オフセットを加えて，画像幅を <code>zPos</code> の逆数の2倍で割ったものを引きます— 描画する画像が小さい（大きい）ほど減算値が小さい（大きい）くなり，画像中心が保持されます．最後に，HMD の水平方向の動きや回転にあわせて画像位置を更新するために <code>xPos</code> を加えて，<code>yOrient</code> を引きます（y軸周りの回転が画像を水平方向に移動します)。</p> + </li> + <li><code>-((image.height)/(2*(1/zPos)))+yPos+xOrient</code>: 画像原点の垂直方向の座標です。これはIn this case the "HEIGHT/2の減算"と"右中心オフセットの追加"は、ちょうどお互いにキャンセルされるので、計算式から取り除きます。計算式の残りは上と同じように、zPos の逆数の 2 倍で画像幅を割ったものを減算することによる画像中心を保持と、<code>yPos</code> と <code>xOrient </code>による描画位置の修正です。</li> + <li><code>image.width*zPos</code>: 画像を描画する幅; 近いものほど大きく描画されるように <code>zPos</code> で修正します。</li> + <li><code>image.height*zPos</code>: 画像を描画する高さ; 近いものほど大きく描画されるように <code>zPos</code> で修正します。</li> +</ul> + +<pre class="brush: js"> ctx.strokeStyle = "black"; + ctx.stroke();</pre> + +<p>左目ビューの周囲に黒い {{domxref("CanvasRenderingContext2D.stroke","stroke()")}} を描画します。これはビューの分離をちょっとだけわかりやすくする手助けとなります。</p> + +<pre class="brush: js"> ctx.restore();</pre> + +<p>右目ビューの描画の実施に移行するため、キャンバスの復元を {{domxref("CanvasRenderingContext2D.restore","restore()")}} で行います。</p> + +<pre class="brush: js"> ... +}</pre> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>注記</strong></span>: ここである種のチートをしていて，2D キャンバスを使って3Dシーンを擬似的に表現しています。学習目的の場合、物事を簡単にすることができます。WEBテクノロジで作成された任意のアプリで、ビューレンダリングを修正するために上述した位置と向きのデータを使うことができます。例えば <a href="https://github.com/mdn/webvr-tests/tree/gh-pages/3Dpositionorientation">3Dpositionorientation</a> デモでは、<a href="http://threejs.org/">Three.js</a> を使って作成されたWebGLシーンのビューを制御するために上述の方法と非常によく似たコードを使っています。</p> +</div> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>注記</strong></span>: <a href="https://github.com/mdn/webvr-tests/blob/gh-pages/positionsensorvrdevice/index.html#L106-L119"><code>drawCrosshairs() のコード</code></a> は <code>drawImages()と比較して</code>非常にシンプルですので、もし興味があるなら自分自身で勉強することをおすすめします!</p> +</div> + +<h3 id="フルスクリーン表示">フルスクリーン表示</h3> + +<p>VRエフェクトはアプリを <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">フルスクリーンモード</a> で実行すると非常に効果的です。ディスプレイのダブルクリックやボタンの押下のような、特定のイベントが発生した時に {{htmlelement("canvas")}} 要素をフルスクリーンにするための一般的な設定を説明します。</p> + +<p>シンプルさを保つために、ここではキャンバスのクリック時に <code>fullScreen()</code> 関数を実行します:</p> + +<pre class="brush: js">myCanvas.addEventListener('click',fullScreen,false);</pre> + +<p><code>fullScreen()</code> 関数は、できるだけ互換性を保つために、ブラウザによって異なるキャンバスに実装されている <code>requestFullscreen()</code> メソッドのバージョンをチェックして、見つかった適切な関数を呼び出します:</p> + +<pre class="brush: js">function fullScreen() { + if (myCanvas.requestFullscreen) { + myCanvas.requestFullscreen(); + } else if (myCanvas.msRequestFullscreen) { + myCanvas.msRequestFullscreen(); + } else if (myCanvas.mozRequestFullScreen) { + myCanvas.mozRequestFullScreen(); + } else if (myCanvas.webkitRequestFullscreen) { + myCanvas.webkitRequestFullscreen(); + } +}</pre> + +<h2 id="FOV_とデバイスのキャリブレーション">FOV とデバイスのキャリブレーション</h2> + +<p>現在のデモではあまり考えませんでしたが，商用アプリでは，ユーザが持っているVRハードウェアを正しく動作させるためにユーザキャリブレーションをする必要があるでしょう．WebVR API はそれを手助けする多くの機能があります。</p> + +<p>HMDの位置と姿勢をリセットするために {{domxref("PositionSensorVRDevice.resetSensor")}} メソッドを利用できます。実行すると、現在のヘッドセットの位置/向きが 0 にセットされます。実行前に，ヘッドセットが検知可能な位置にあることを保証する必要があります。positionsensorvrdevice demo*** では、[Reset Sensor] ボタンでそれを実行することができます:</p> + +<pre class="brush: html"><button>Reset Sensor</button></pre> + +<pre class="brush: js">document.querySelector('button').onclick = function() { + gPositionSensor.resetSensor(); +}</pre> + +<p>他にもヘッドセットの視野角 (FOV) を、シーン内で上，右，下，左方向に見える範囲がどの程度かキャリブレーションします。それぞれの目のパラメータを別々に返す {{domxref("HMDVRDevice.getEyeParameters")}} メソッドを呼ぶと、両目それぞれの情報を個別に受け取ることができます。なお左目用パラメータで 1 回、右目用で 1 回の計 2 回の呼出しが必要です。それぞれの目用に {{domxref("VREyeParameters")}} オブジェクトを返します。</p> + +<p>一例として、 {{domxref("VREyeParameters.currentFieldOfView")}} を用いて片目分の現在のFOV を受け取れます。これは次の 4 つのプロパティを持つ {{domxref("VRFieldOfView")}} オブジェクトを返します:</p> + +<ul> + <li>{{domxref("VRFieldOfViewReadOnly.upDegrees","upDegrees")}}: FOVの上方向へ広がる角度の値．</li> + <li>{{domxref("VRFieldOfViewReadOnly.rightDegrees","rightDegrees")}}: FOVの右方向へ広がる角度の値．</li> + <li>{{domxref("VRFieldOfViewReadOnly.downDegrees","downDegrees")}}: FOVの下方向へ広がる角度の値．</li> + <li>{{domxref("VRFieldOfViewReadOnly.leftDegrees","leftDegrees")}}: FOVの左方向へ広がる角度の値．</li> +</ul> + +<p>FOVは眼を頂点としたピラミッド形になっています．</p> + +<p>あなたのアプリに適切なFOVをユーザが持っているかをチェックし，もしそうでないなら {{domxref("HMDVRDevice.setFieldOfView")}} メソッドを使って新しいFOVを設定します．これを扱う簡単な関数は次のような感じです:</p> + +<pre class="brush: js">function setCustomFOV(up,right,down,left) { + var testFOV = new VRFieldOfView(up,right,down,left); + + gHMD.setFieldOfView(testFOV,testFOV,0.01,10000.0); +}</pre> + +<p>この関数は引数として4つの角度を受け取り、VRFieldOfView() コンストラクタを用いて新しい {{domxref("VRFieldOfView")}} オブジェクトを作成します。これを <code>setFieldOfView()</code> の最初の2つの引数（左目と右目のFOV）として渡します。第 3、4 引数は，FOV のオブジェクト可視領域を定義する眼からの最短、最大距離を示す <code>zNear</code> と <code>zFar</code> です．</p> diff --git a/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html b/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html new file mode 100644 index 0000000000..d2f568e849 --- /dev/null +++ b/files/ja/web/api/webvr_api/using_vr_controllers_with_webvr/index.html @@ -0,0 +1,268 @@ +--- +title: WebVRでの VRコントローラーの使用 +slug: Web/API/WebVR_API/Using_VR_controllers_with_WebVR +tags: + - Experimental + - Gamepad API + - Guide + - VR + - Virtual Reality + - WebGL + - WebVR + - controllers +translation_of: Web/API/WebVR_API/Using_VR_controllers_with_WebVR +--- +<div>{{APIRef("WebVR API")}}</div> + +<p class="summary">多くのWebVRハードウェアは、ヘッドセットとコントローラーがセットになっています。WebVRアプリにおいては、ヘッドセットとコントローラーは<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API">Gamepad API</a>を通じて接続されます。中でも、<a href="https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API#Experimental_Gamepad_extensions">Gamepad Extensions API</a>は、コントローラーの状態(<a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadPose">controller pose</a>)、触覚アクチュエータ(<a href="https://developer.mozilla.org/en-US/docs/Web/API/GamepadHapticActuator">haptic actuators</a>)などの情報を取得します。この記事では、その基礎となる部分を解説いたします。</p> + +<h2 id="The_WebVR_API">The WebVR API</h2> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/WebVR_API">WebVR API</a> は初期段階ではあるが、開発者がウェブベースのバーチャルリアリティー経験を生み出すことのできるとても興味深いウェブの新しい機能です。コンピュータとつながっているVRヘッドセット（VRディスプレイ）へのアクセスを与えることで，ディスプレイをスタートしたり、ストップする操作ができます．動きのデータ（例：方向や位置）へアクセスして得られたデータは，各アニメーションループのフレームごとにディスプレイをアップデートするためなどに使用されます。</p> + +<p>この記事を読む前提として、Web VR API の基礎についてすでに知っていることを想定しています。 — もしまだ<a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a>にを読んでいない場合には、まずはそちらを読んでみましょう．その記事の中では，ブラウザ側がハードウェアの設定をサポートしたり，設定を要求したりすることについて詳しく説明しています。</p> + +<h2 id="The_Gamepad_API">The Gamepad API</h2> + +<p><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a> はよくサポートされたAPIであり， これを使用することでPCにつながっているゲームパッドやコントローラーに開発者がアクセスすることができるようになります。また、ウェブアプリケーションをゲームパッドやコントローラーを通じて操作することもできるようになります。基本としてGamepad APIは、ゲームパッドオブジェクトとしてつながっているコントローラーに対してアクセスの許可を与えます。そしてどのボタンが押されているか、軸がどの方向に向いているかなどの情報を取得するよう要求します。</p> + +<p>Gamepad APIの基本的な使い方については、<a href="/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API">Using the Gamepad API</a>や<a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a>の中で詳しく知ることができます。</p> + +<p>しかしながら，この記事では主に、位置、方向、触覚アクチュエーター（バイブレーション）などの高度なコントローラー情報へのアクセスのような、Gamepad Extensions APIで与えられたいくつかの新しい特徴に注目します。このAPIはとても新しく，Firefox 55+ BetaやFirefox Nightly のブラウザでのみデフォルトでWebVR APIがサポートされています。</p> + +<h2 id="コントローラーの種類">コントローラーの種類</h2> + +<p>VRハードウェアに付随するコントローラーには、２つの種類があります。</p> + +<ul> + <li>６軸に対して自由度を持つコントローラーは位置と方向のデータを取得することができる。具体的には、コントローラーがVRシーンや動きや回転のある物体を操作することができる。例えば、HTC VIVEのコントローラーがそれにあたる。</li> + <li>３軸に対して自由度を持つコントローラーは、位置データは取得できないが方向のデータを取得することができる．例えば Google Daydreamのコントローラーである。具体的には、3D空間で異なる物体をレーザーポインターのように指し示すことはできるが、3D空間を動き回ることはできない。</li> +</ul> + +<h2 id="コントローラーへのアクセス方法">コントローラーへのアクセス方法</h2> + +<p>ここではいくつかのコードを紹介します。まず、Gamepad APIを使用してVRコントローラーへの基本的なアクセス方法を見ていきましょう。いくつかのおかしなニュアンスを心に留めておきましょう、それは後から調べる価値があるものです。</p> + +<p>シンプルな例を紹介します。-<a href="https://github.com/mdn/webvr-tests/blob/master/vr-controller-basic-info/index.html">vr-controller-basic-info</a> のソースコード(<a href="https://mdn.github.io/webvr-tests/vr-controller-basic-info/">see it running live here also</a>)を御覧ください。この例はVRディスプレイやコンピューターと接続したゲームコントローラーへ情報を出力するシンプルなものです。</p> + +<h3 id="ディスプレイの情報を取得">ディスプレイの情報を取得</h3> + +<p>最初のコードです。</p> + +<pre class="brush: js notranslate">var initialRun = true; + +if(navigator.getVRDisplays && navigator.getGamepads) { + info.textContent = 'WebVR API and Gamepad API supported.' + reportDisplays(); +} else { + info.textContent = 'WebVR API and/or Gamepad API not supported by this browser.' +}</pre> + +<p>ここでは、<code>initialRun</code> というトラッキングの変数を使います。これは、「このページを初めてロードした」ことを示します。この点については、あとで詳しく述べます。次に、{{domxref("Navigator.getVRDisplays()")}} と {{domxref("Navigator.getGamepads()")}}メソッドがあるかないかをチェックして、WebVR と Gamepad APIs がサポートされているかどうかを検知します。もし、サポートされていれば、検知するプロセスをOFFにするために、カスタム機能である <code>reportDisplays()</code> を実行します。 <code>reportDisplays()</code> は、以下のような構成になっています。</p> + +<pre class="brush: js notranslate">function reportDisplays() { + navigator.getVRDisplays().then(function(displays) { + console.log(displays.length + ' displays'); + for(var i = 0; i < displays.length; i++) { + var cap = displays[i].capabilities; + // cap is a VRDisplayCapabilities object + var listItem = document.createElement('li'); + listItem.innerHTML = '<strong>Display ' + (i+1) + '</strong>' + + '<br>VR Display ID: ' + displays[i].displayId + + '<br>VR Display Name: ' + displays[i].displayName + + '<br>Display can present content: ' + cap.canPresent + + '<br>Display is separate from the computer\'s main display: ' + cap.hasExternalDisplay + + '<br>Display can return position info: ' + cap.hasPosition + + '<br>Display can return orientation info: ' + cap.hasOrientation + + '<br>Display max layers: ' + cap.maxLayers; + list.appendChild(listItem); + } + + setTimeout(reportGamepads, 1000); + // For VR, controllers will only be active after their corresponding headset is active + }); +}</pre> + +<p>This function first uses the promise-based {{domxref("Navigator.getVRDisplays()")}} method, which resolves with an array containing {{domxref("VRDisplay")}} objects representing the connected displays. Next, it prints out each display's {{domxref("VRDisplay.displayId")}} and {{domxref("VRDisplay.displayName")}} values, and a number of useful values contained in the display's associated {{domxref("VRCapabilities")}} object. The most useful of these are {{domxref("VRCapabilities.hasOrientation","hasOrientation")}} and {{domxref("VRCapabilities.hasPosition","hasPosition")}}, which allow you to detect whether the device can return orientation and position data and set up your app accordingly.</p> + +<p>The last line contained in this function is a {{domxref("WindowOrWorkerGlobalScope.setTimeout()")}} call, which runs the <code>reportGamepads()</code> function after a 1 second delay. Why do we need to do this? First of all, VR controllers will only be ready after their associated VR headset is active, so we need to invoke this after <code>getVRDisplays()</code> has been called and returned the display information. Second, the Gamepad API is much older than the WebVR API, and not promise-based. As you'll see later, the <code>getGamepads()</code> method is synchronous, and just returns the <code>Gamepad</code> objects immediately — it doesn't wait for the controller to be ready to report information. Unless you wait for a little while, returned information may not be accurate (at least, this is what we found in our tests).</p> + +<h3 id="ゲームコントローラーの情報を取得">ゲームコントローラーの情報を取得</h3> + +<p><code>reportGamepads()</code> 関数は、このような構成になっています。</p> + +<pre class="brush: js notranslate">function reportGamepads() { + var gamepads = navigator.getGamepads(); + console.log(gamepads.length + ' controllers'); + for(var i = 0; i < gamepads.length; ++i) { + var gp = gamepads[i]; + var listItem = document.createElement('li'); + listItem.classList = 'gamepad'; + listItem.innerHTML = '<strong>Gamepad ' + gp.index + '</strong> (' + gp.id + ')' + + '<br>Associated with VR Display ID: ' + gp.displayId + + '<br>Gamepad associated with which hand: ' + gp.hand + + '<br>Available haptic actuators: ' + gp.hapticActuators.length + + '<br>Gamepad can return position info: ' + gp.pose.hasPosition + + '<br>Gamepad can return orientation info: ' + gp.pose.hasOrientation; + list.appendChild(listItem); + } + initialRun = false; +}</pre> + +<p>This works in a similar manner to <code>reportDisplays()</code> — we get an array of {{domxref("Gamepad")}} objects using the non-promise-based <code>getGamepads()</code> method, then cycle through each one and print out information on each:</p> + +<ul> + <li>The {{domxref("Gamepad.displayId")}} property is the same as the <code>displayId</code> of the headet the controller is associated with, and therefore useful for tying controller and headset information together.</li> + <li>The {{domxref("Gamepad.index")}} property is unique numerical index that identifies each connected controller.</li> + <li>{{domxref("Gamepad.hand")}} returns which hand the controller is expected to be held in.</li> + <li>{{domxref("Gamepad.hapticActuators")}} returns an array of the haptic actuators available in the controller. Here we are returning its length so we can see how many each has available.</li> + <li>Finally, we return {{domxref("GamepadPose.hasPosition")}} and {{domxref("GamepadPose.hasOrientation")}} to show whether the controller can return position and orientation data. This works just the same as for the displays, except that in the case of gamepads these values are available on the pose object, not the capabilities object.</li> +</ul> + +<p>Note that we also gave each list item containing controller information a class name of <code>gamepad</code>. We'll explain what this is for later.</p> + +<p>The last thing to do here is set the <code>initialRun</code> variable to <code>false</code>, as the initial run is now over.</p> + +<h3 id="コントローラーのイベント">コントローラーのイベント</h3> + +<p>To finish off this section, we'll look at the gamepad-associated events. There are two we need concern ourselves with — {{event("gamepadconnected")}} and {{event("gamepaddisconnected")}} — and it is fairly obvious what they do.</p> + +<p>At the end of our example we first include the <code>removeGamepads()</code> function:</p> + +<pre class="brush: js notranslate">function removeGamepads() { + var gpLi = document.querySelectorAll('.gamepad'); + for(var i = 0; i < gpLi.length; i++) { + list.removeChild(gpLi[i]); + } + + reportGamepads(); +}</pre> + +<p>This function simply grabs references to all list items with a class name of <code>gamepad</code>, and removes them from the DOM. Then it re-runs <code>reportGamepads()</code> to populate the list with the updated list of connected controllers.</p> + +<p><code>removeGamepads()</code> will be run each time a gamepad is connected or disconnected, via the following event handlers:</p> + +<pre class="brush: js notranslate">window.addEventListener('gamepadconnected', function(e) { + info.textContent = 'Gamepad ' + e.gamepad.index + ' connected.'; + if(!initialRun) { + setTimeout(removeGamepads, 1000); + } +}); + +window.addEventListener('gamepaddisconnected', function(e) { + info.textContent = 'Gamepad ' + e.gamepad.index + ' disconnected.'; + setTimeout(removeGamepads, 1000); +});</pre> + +<p>We have <code>setTimeout()</code> calls in place here — like we did with the initialization code at the top of the script — to make sure that the gamepads are ready to report their information when <code>reportGamepads()</code> is called in each case.</p> + +<p>But there's one more thing to note — you'll see that inside the <code>gamepadconnected</code> handler, the timeout is only run if <code>initialRun</code> is <code>false</code>. This is because if your gamepads are connected when the document first loads, <code>gamepadconnected</code> is fired once for each gamepad, therefore <code>removeGamepads()</code>/<code>reportGamepads()</code> will be run several times. This could lead to inaccurate results, therefore we only want to run <code>removeGamepads()</code> inside the <code>gamepadconnected</code> handler after the initial run, not during it. This is what <code>initialRun</code> is for.</p> + +<h2 id="実際のデモの紹介">実際のデモの紹介</h2> + +<p>実際のWebVRのデモで使用されたGamepad APIを見てみましょう。このデモは<a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-controller-example">raw-webgl-controller-example</a> (<a href="https://mdn.github.io/webvr-tests/raw-webgl-controller-example/">see it live here also</a>).で見ることができます。</p> + +<p>私達の<a href="https://github.com/mdn/webvr-tests/tree/master/raw-webgl-example">raw-webgl-example</a> (詳しくは <a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a> を御覧ください。)と同じ方法で、このデモにおいても回転する3D立方体をレンダリングしています。また、これをVRディスプレイへ投影することもできます。</p> + +<p>唯一の違いとしては、VRディスプレイへ投影モードでは、VRコントローラーを使って立方体を動かすことができます。（オリジナルのデモ動画では、VRヘッドセットを動かすことで、立方体を動かすことができる。）</p> + +<p>以下に、このバージョンでのコードの違いをより詳しく紹介します。<a href="https://github.com/mdn/webvr-tests/blob/master/raw-webgl-controller-example/webgl-demo.js">webgl-demo.js</a>.を御覧ください。</p> + +<h3 id="コントローラーデータへのアクセス">コントローラーデータへのアクセス</h3> + +<p><code>drawVRScene()</code> 関数についてのコードの一部です。</p> + +<pre class="brush: js notranslate">var gamepads = navigator.getGamepads(); +var gp = gamepads[0]; + +if(gp) { + var gpPose = gp.pose; + var curPos = gpPose.position; + var curOrient = gpPose.orientation; + if(poseStatsDisplayed) { + displayPoseStats(gpPose); + } +}</pre> + +<p> {{domxref("Navigator.getGamepads")}}を利用して、コントローラーが接続されました。また <code>gp</code> 変数の中に最初に認識したコントローラーを保存します。 デモでは、コントローラーを一つしか使用しないので、その他のコントローラーは無視します。</p> + +<p>The next thing we do is to get the {{domxref("GamepadPose")}} object for the controller stored in gpPose (by querying {{domxref("Gamepad.pose")}}), and also store the current gamepad position and orientation for this frame in variables so they are easuy to access later. We also display the post stats for this frame in the DOM using the <code>displayPoseStats()</code> function. All of this is only done if <code>gp</code> actually has a value (if a gamepad is connected), which stops the demo erroring if we don't have our gamepad connected.</p> + +<p>Slightly later in the code, you can find this block:</p> + +<pre class="brush: js notranslate">if(gp && gpPose.hasPosition) { + mvTranslate([ + 0.0 + (curPos[0] * 15) - (curOrient[1] * 15), + 0.0 + (curPos[1] * 15) + (curOrient[0] * 15), + -15.0 + (curPos[2] * 25) + ]); +} else if(gp) { + mvTranslate([ + 0.0 + (curOrient[1] * 15), + 0.0 + (curOrient[0] * 15), + -15.0 + ]); +} else { + mvTranslate([ + 0.0, + 0.0, + -15.0 + ]); +}</pre> + +<p>Here we alter the position of the cube on the screen according to the {{domxref("GamepadPose.position","position")}} and {{domxref("GamepadPose.orientation","orientation")}} data received from the connected controller. These values (stored in <code>curPos</code> and <code>curOrient</code>) are {{domxref("Float32Array")}}s containing the X, Y, and Z values (here we are just using [0] which is X, and [1] which is Y).</p> + +<p>If the <code>gp</code> variable has a <code>Gamepad</code> object inside it and it can return position values (<code>gpPose.hasPosition</code>), indicating a 6DoF controller, we modify the cube position using position and orientation values. If only the former is true, indicating a 3DoF controller, we modify the cube position using the orientation values only. If there is no gamepad connected, we don't modify the cube position at all.</p> + +<h3 id="コントローラーの姿勢データの表示">コントローラーの姿勢データの表示</h3> + +<p><code>displayPoseStats()</code> 関数では、{{domxref("GamepadPose")}} オブジェクトのうちの表示したいすべての情報を取得することができます。そして、そのようなデータを表示するためのデモの中に存在するUI パネルに表示します。</p> + +<pre class="brush: js notranslate">function displayPoseStats(pose) { + var pos = pose.position; + var orient = pose.orientation; + var linVel = pose.linearVelocity; + var linAcc = pose.linearAcceleration; + var angVel = pose.angularVelocity; + var angAcc = pose.angularAcceleration; + + if(pose.hasPosition) { + posStats.textContent = 'Position: x ' + pos[0].toFixed(3) + ', y ' + pos[1].toFixed(3) + ', z ' + pos[2].toFixed(3); + } else { + posStats.textContent = 'Position not reported'; + } + + if(pose.hasOrientation) { + orientStats.textContent = 'Orientation: x ' + orient[0].toFixed(3) + ', y ' + orient[1].toFixed(3) + ', z ' + orient[2].toFixed(3); + } else { + orientStats.textContent = 'Orientation not reported'; + } + + linVelStats.textContent = 'Linear velocity: x ' + linVel[0].toFixed(3) + ', y ' + linVel[1].toFixed(3) + ', z ' + linVel[2].toFixed(3); + angVelStats.textContent = 'Angular velocity: x ' + angVel[0].toFixed(3) + ', y ' + angVel[1].toFixed(3) + ', z ' + angVel[2].toFixed(3); + + if(linAcc) { + linAccStats.textContent = 'Linear acceleration: x ' + linAcc[0].toFixed(3) + ', y ' + linAcc[1].toFixed(3) + ', z ' + linAcc[2].toFixed(3); + } else { + linAccStats.textContent = 'Linear acceleration not reported'; + } + + if(angAcc) { + angAccStats.textContent = 'Angular acceleration: x ' + angAcc[0].toFixed(3) + ', y ' + angAcc[1].toFixed(3) + ', z ' + angAcc[2].toFixed(3); + } else { + angAccStats.textContent = 'Angular acceleration not reported'; + } +}</pre> + +<h2 id="まとめ">まとめ</h2> + +<p>この記事は，WebVRアプリの中でVRコントローラーを使うためには，どのようにGamepad Extensionsを用いればよいのかというとても基本的な概念を解説したものです．実際のWebVRアプリの中では，VRコントローラーのボタンに紐付けられたコントローラーにより，おそらくより複雑なコントロールシステムをもたせることになるでしょう． そして，ディスプレイとコントローラーの両方の情報（位置や方向）を同期的にディスプレイへフィードバックするという複雑な処理を行うことになります．しかし，この記事でやりたかったのは，Gamepad Extensionsの中の純粋なGamepad Extensions部分を切り分けるということです．</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/WebVR_API">WebVR API</a></li> + <li><a href="/en-US/docs/Web/API/Gamepad_API">Gamepad API</a></li> + <li><a href="/en-US/docs/Web/API/WebVR_API/Using_the_WebVR_API">Using the WebVR API</a></li> + <li><a href="/en-US/docs/Games/Techniques/Controls_Gamepad_API">Implementing controls using the Gamepad API</a></li> +</ul> diff --git a/files/ja/web/api/webvr_api/webvr_environment_setup/index.html b/files/ja/web/api/webvr_api/webvr_environment_setup/index.html new file mode 100644 index 0000000000..394dab831d --- /dev/null +++ b/files/ja/web/api/webvr_api/webvr_environment_setup/index.html @@ -0,0 +1,110 @@ +--- +title: WebVR環境の設定 +slug: Web/API/WebVR_API/WebVR_environment_setup +translation_of: Archive/WebVR/WebVR_environment_setup +--- +<p>{{draft("このWebVR APIドキュメントは現在v1.0の仕様への対応作業の途中です．従って，ここにある情報のいくつかは最新ではありません．この作業について質問がある場合は ~~chrisdavidmills へ連絡をとってください．")}}</p> + +<p class="summary">この記事では，WebVRのテスト環境を設定するのに必要な作業を示します — 必要なハードウェアとソフトウェアを含めて — ，そしていくつかのトラブルシューティングのTIPSも共有します.</p> + +<h2 id="ハードウェア_Hardware">ハードウェア Hardware</h2> + +<p>まずはじめに WebVR に必要なハードウェアを見ていきましょう．</p> + +<h3 id="ヘッドマウントディスプレイ位置トラッカ">ヘッドマウントディスプレイ/位置トラッカ</h3> + +<p>現在，VR HMD ハードウェアにはいくつかの選択肢がありますが，ベスト/最も信頼のあるものは <a href="https://developer.oculus.com/">Oculus Rift</a> です．Oculus Rift はロバストなヘッドマウントディスプレイと，三脚やモニタにつけて使う位置トラッキングカメラが付属しています．Oculus Rift DK2 は $350で販売されていますが（訳注：2015/10末時点でSold out となり購入できません），市場に多くのヘッドセットが出てくれば価格が下がることが予想され，その技術も進歩するでしょう．</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11037/hw-setup.png" style="display: block; height: 78px; margin: 0px auto; width: 70%;"></p> + +<p>VRハードウェア装置に十分な投資ができない人のために，より安価な代替策があります．VR HMDは基本的には，両目の正面にゴーゴルを備えた単なる高解像度スクリーンです．ディスプレイ自体は，立体視を実現するために，それぞれの眼用にクロップと歪みを加えたシーンをわずかにオフセットして横に並べた表示を行っています．これがVR錯覚を作るための本質的な要素です．</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10695/stereoscopic.png" style="display: block; height: 540px; margin: 0px auto; width: 960px;"></p> + +<p>同様の体験を擬似的に作成するのに，Android用の Firefox <a href="https://nightly.mozilla.org/">Nightly</a> のようなサポートされているブラウザを使えます．このFirefox for Android Nightly を通じて，VRアプリの実行にトライしてみてください．スマートフォンを頭部にくっつけるための装置が必要かもしれません．これが <a href="https://www.google.com/get/cardboard/">Google Cardboard</a> の背景となる考え方です．この方式の主な課題は，位置追跡センサがないことと，スマホのプロセッサはデスクトップPCほど強力ではないことで，その体験はそれほどリアルではありません（頭を回しても仮想空間で同じ効果は得られませんし，グラグラするだけかも）．しかし手頃なテストの代替品として十分動作します．</p> + +<h3 id="VRシーンをレンダリングするためのコンピュータ">VRシーンをレンダリングするためのコンピュータ</h3> + +<p>バーチャルリアリティハードウェアは，許容可能なユーザ体験を届けるためには，高精度で低遅延データを扱う必要があります — 60fpsで表示を更新する必要があり，そうしなければジャダーやぎこちない体験になってしまいます．FPSを維持するには大量のデータを処理しなければなりません．従って，VRアプリケーションを動作させるコンピュータは非常に強力なものが必要となります．理想的には，ディスクリートGPUを備えたハイスペックのラップトップかデスクトップを使うべきです．最新の MacBook Pro 15"/17"あるいはMac Pro，あるいはWindowsのゲーミングPCのようなコンピュータが完璧でしょう．もし遅いコンピュータしかないなら，ひどい表示になってしまいます．</p> + +<h2 id="ソフトウェア_Software">ソフトウェア Software</h2> + +<p>WebVR アプリを実行するために，次に示すソフトウェアセットアップが必要となります．</p> + +<h3 id="Oculus_Rift_SDK">Oculus Rift SDK</h3> + +<p>Oculus Riftを使用するには，<a href="https://developer.oculus.com/downloads/">Oculus Rift SDK のダウンロードとインストール</a> が必要です．SDKには任意のVRアプリを実行するときにも必要となる Oculus Rift ランタイムに加え， トラブルシューティングに便利な <em>OculusWorldDemo</em> アプリが含まれています．</p> + +<h3 id="Firefox_Nightly_と_WebVR_Enabler_Add-on_(or_equivalent)">Firefox Nightly と WebVR Enabler Add-on (or equivalent)</h3> + +<p>ブラウザを設定するために，次のステップを実行します:</p> + +<ol> + <li>Firefox <a href="https://nightly.mozilla.org/">Nightly</a> と <a href="https://www.mozilla.org/en-US/firefox/developer/">Developer Edition</a> の両方がWebVRをサポートしています．未インストールであればどちらかをインストール，あるいは最新版に更新してください．</li> + <li>次に， <a class="external external-icon" href="http://www.mozvr.com/downloads/webvr-addon-0.1.0.xpi">WebVR Enabler Add-on</a> （訳注: このリンク先のバージョンは古いです）をインストールします — これは WebVRを有効にして，マルチプロセスブラウジングを無効化します(<a class="basiclink-blue" href="https://wiki.mozilla.org/Electrolysis">E10S</a>)，新しいFirefoxのブラウジング機能は現在WebVRと互換性がありません．</li> + <li>最後に，ブラウザを再起動します．</li> +</ol> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>注記</strong></span>: 手動でWebVRを有効にするには， <a>about:config</a> を開いて，<code>dom.vr*</code> prefsを有効にします．でも，WebVR Enabler Add-on は一発で全部を簡単にやってくれますよ．</p> +</div> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>注記</strong></span>: モバイルユーザの場合は，Firefox for Android は現在 <a href="http://nightly.mozilla.org/">Nightly builds</a> でWebVRをサポートしています．現在の実装は粗いものですが，時間をかけて刷新されていくでしょう．フィードバックも大歓迎！</p> +</div> + +<div class="note"> +<p><span style="font-size: 14px; line-height: 21px;"><strong>注記</strong></span>: Chrome Experimental ビルドもWebVRを利用可能になっています．詳しくは <a class="external external-icon" href="http://blog.tojicode.com/2014/07/bringing-vr-to-chrome.html">Bringing VR to Chrome</a> by Brandon Jones をチェックしてください．</p> +</div> + +<h3 id="表示設定">表示設定</h3> + +<p>最適なパフォーマンスのためには，後述の説明のようにディスプレイを設定することが<strong>非常に重要です</strong>．そうしないと，余計なジャダーや遅延が発生します．こういった状況を改善し WebVR を真にプラグ&プレイにすることに取り組んでいる最中ですが，現時点ではベストな結果を得るには手動での設定が必要になります．</p> + +<h4 id="Windows">Windows</h4> + +<p>初めに，コントロールパネルで <em>Display > Screen Resolution </em>を開き，次の設定をします:</p> + +<ul> + <li><em>Orientation</em> to <em>Landscape (flipped).</em></li> + <li><em>Multiple displays</em> to <em>Extend these displays</em>.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10683/win-screen-resolution.png" style="display: block; height: 573px; margin: 0px auto; width: 644px;"></p> + +<p>次に，<em>Advanced Settings > Monitor > Monitor Settings</em> を開いて，<em>Screen refresh rate</em> を <em>60Hz </em>に設定します．</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10685/win-monitor.png" style="display: block; height: 573px; margin: 0px auto; width: 644px;"></p> + +<h4 id="Mac">Mac</h4> + +<p>まず System Preferences > Displays > Display を開いて，次の設定をします:</p> + +<ul> + <li><em>Optimize for</em> to <em>Rift</em></li> + <li><em>Rotation</em> to <em>90°</em></li> + <li><em>Refresh</em> to <em>60Hz</em></li> +</ul> + +<p><em><img alt="" src="https://mdn.mozillademos.org/files/10691/mac-displays.png" style="display: block; height: 528px; margin: 0px auto; width: 1342px;"></em></p> + +<p>次に <em>System Preferences <span class="gray5 light px1">> </span>Displays <span class="gray5 light px1">> </span>Arrangement</em> を開いて， <em>Arrangement</em> を <em>Mirrored </em>にセットします．</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10693/mac-displays-mirrored.png" style="display: block; height: 528px; margin: 0px auto; width: 668px;"></p> + +<h2 id="トラブルシューティング_Troubleshooting">トラブルシューティング Troubleshooting</h2> + +<p>このセクションではトラブルシューティングTIPをいくつか紹介します．</p> + +<dl> + <dt>HMD や位置トラッキングカメラがまったく動作しません．</dt> + <dd>Oculus Rift SDKに含まれている <em>OculusWorldDemo</em> （異なるVRハードなら同様のデモ）でシステムが動作するかテストしてみてください．ハードウェア装置がまったく動作していない場合は，付属のマニュアルに説明されている通りに正確に設定されていることを確認してください．古典的なミスとして，トラッキングカメラのレンズキャップが付いたままだったり，USBケーブルの挿し忘れがあります．</dd> + <dt>HMD や位置トラッキングカメラがまだ動かないです</dt> + <dd>一般的な状況として，トラッキングカメラが停止していると，シーンは見られるけれど，頭の回転に追従しません．TIP: カメラが動作していると青い光がつきます．もし <em>OculusWorldDemo </em>が動作しているのにWebVRアプリがまだ動作しないときは，ブラウザの再起動を試してください — Nightly は非常に実験的な状態で，時々動かないことがあります．</dd> + <dt>{{anch("Display configuration")}}の説明にしたがって正しく実施したのに，まだグラフィックスがjuddery/jerky です．</dt> + <dd>使っているGPUが遅すぎるか，専用の（ディスクリートな）GPUを備えていないか，Oculus Rift を起動した時にグラフィックスカードが切り替わっていない（これは個別の事例のはずですが，すべてのコンピュータでは保証できません）．いずれにせよ，Macの <a href="https://gfx.io/">gfxCardStatus</a> のようなアプリケーションを使って，何が起こっているかをテストすることができます．これを使うと，インテグレーテッドGPUかディスクリートGPUの切り替えられているかを確認でき，さらに特定の一方だけを使うよう強制することもできます．"You are using a system that gfxCardStatus does not support. Please ensure that you are using a MacBook Pro with dual GPUs." というメッセージが表示されたら，たぶんGPUを持っていないので，高速なプロセッサを入手するか，jerkinessを我慢する必要があります．Windowsの場合は，現在同じ機能を持つアプリはありませんし，手動で変更しなければなりません．</dd> + <dt>VRデバイスと一緒に使うと既存のセカンドディスプレイが妙な動作をします．</dt> + <dd>2ndモニタ（あるいはラップトップで外部モニタ）を使っている場合，VRデバイスを使うときは外したほうが良いです．ときどき奇妙な効果が発生します．</dd> + <dt>Linuxはどうなってます？</dt> + <dd>WebVR はLinuxで現在動作しますか？（続く）</dd> +</dl> |