The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

WebVR

警告:WebVR はまだ試験運用版であり、仕様変更の可能性があります。

WebVR は、Daydream ヘッドセットや Pixel スマートフォンなど、ユーザーが所有している VR ヘッドセットや VR 対応端末を利用して、ブラウザに臨場感あふれる 3D エクスペリエンスを表示できるようにする JavaScript API です。

WebVR を使ってみる

サポートと利用

現在、WebVR API は次のブラウザで利用可能です。

  • Chrome ベータ版(M56+)(オリジン トライアルによって)
  • Firefox Nightly
  • Samsung Internet Browser for Gear VR(注: 現在、このブラウザは古いバージョンの WebVR 仕様をサポートしています)

WebVR をサポートしていないブラウザまたは古いバージョンの API を使用しているブラウザの場合は、WebVR Polyfill にフォールバックできます。ただし、VR はパフォーマンスの影響を非常に受けやすく、Polyfill は基本的にパフォーマンスのコストが大きいため、WebVR をネイティブでサポートしていないブラウザのユーザーに対しては、Polyfill を使用するかどうかを検討する必要があることに留意してください。

不安がある場合は、低品質の 3D エクスペリエンスを避けて、ユーザーが乗り物酔いのような状態にならないようにしてください。

WebVR の最新のステータスをご確認ください。

WebVR のコンテンツを作成する

WebVR のコンテンツを作成するには、いくつかの最新の API に加えて、WebGLWeb Audio などの既存のテクノロジーを活用し、さまざまな入力タイプとヘッドセットについて理解する必要があります。

WebVR を使ってみる

WebVR を使ってみる

WebGL シーンを用意して VR API を追加し、WebVR をさっそく使用してみましょう。
詳細を見る

WebVR シーンに入力機能を追加する

WebVR シーンに入力機能を追加する

魅力的な没入型のエクスペリエンスを提供するには、インタラクションが不可欠です。
スタートガイド

その他のリソース

最近は、優れた WebVR のリソースがウェブで見つかるようになってきています。

パフォーマンスをトラッキングする

WebVR のパフォーマンス

WebVR を使用するユーザーが不快に感じないようにするには、一貫した(高い)フレームレートを維持する必要があります。フレームレートが安定していないと、見ているユーザーは乗り物酔いのような状態になる場合があります。

モバイル端末では、通常、リフレッシュ レートは 60Hz です。つまりターゲットは 60fps です(フレームごとのブラウザのオーバーヘッドを含めて、1 フレームあたり 16ms)。PC では、通常、ターゲットは 90Hz です(オーバーヘッドを含めて 1 フレームあたり 11ms)。

これらの目標値を達成するには、ターゲット端末で定期的にテストを実施し、Chrome DevTools の Timeline を使用してフレームごとの負荷を測定する必要があります。

プログレッシブ エンハンスメントの原則を順守する

プログレッシブ エンハンスメントに基づいてユーザー数を増やす

ユーザーがヘッドマウント ディスプレイ(HMD)や VR 対応端末を所有していない場合は、プログレッシブ エンハンスメントの概念を採用するのが最善策です。

  1. ユーザーが、VR ヘッドセットを使用せずに、キーボード、マウス、タッチスクリーンなどの従来の入力装置を使用していると想定します。
  2. 実行時の入力とヘッドセットの使用可能状況の変化に対応します。

幸い、WebVR API を使用すると、VR 環境の変化を検出して、入力とユーザー端末の表示オプションの変化に対応することができます。

最初に非 VR 環境を想定することで、対象ユーザー数を最大限にし、ユーザーの設定に関係なく、可能な限り最高の 3D エクスペリエンスを提供できるようになります。

詳細については、WebVR シーンに入力を追加するのガイドをご覧ください。