Android XR 版 Chrome は WebXR をサポートしています。WebXR は W3C のオープン スタンダードであり、サポートされているブラウザに高性能の XR API を導入します。ウェブ向けに構築する場合は、3D モデルを使用して既存のサイトを強化したり、新しい没入型エクスペリエンスを構築したりできます。
Chrome for Android XR では、次の WebXR 機能がサポートされています。
WebXR を実際に試すには、Android XR デバイスまたは Android XR エミュレータで Chrome を起動し、公式の WebXR サンプルを参照してください。
前提条件: WebXR フレームワークを選択する
開発を開始する前に、適切な WebXR フレームワークを選択することが重要です。これにより、自身の生産性が大幅に向上し、作成するエクスペリエンスの品質が向上します。
- 3D シーンを完全に制御し、カスタムまたは複雑なインタラクションを作成するには、three.js と babylon.js をおすすめします。
- ラピッド プロトタイピングや HTML のような構文を使用して 3D シーンを定義する場合は、A-Frame と model-viewer をおすすめします。
- その他のフレームワークとサンプルコードもご覧ください。
ネイティブ JavaScript と WebGL を使用する場合は、GitHub の WebXR を参照して、最初の WebXR テストを作成します。
Android XR 用に適応する
他のデバイスで既存の WebXR エクスペリエンスを実行している場合は、Android XR で WebXR を適切にサポートするようにコードを更新する必要があります。たとえば、モバイル デバイスに重点を置いた WebXR エクスペリエンスは、Android XR で 1 つの画面から 2 つのステレオ画面に適応する必要があります。モバイル デバイスや既存のヘッドセットをターゲットとする WebXR エクスペリエンスでは、入力コードをハンドファーストに適応させる必要がある場合があります。
Android XR で WebXR を使用する場合は、左右の目に 1 つずつ、2 つの画面があることを補正するためにコードを更新する必要があります。
WebXR で奥行き感を実現する方法
ユーザーが仮想オブジェクトを物理空間に配置する場合、そのオブジェクトが実際にそこに存在するように見えるように、スケールを正確にする必要があります。たとえば、家具ショッピング アプリでは、ユーザーは仮想の肘掛け椅子がリビングルームにぴったり収まることを信頼する必要があります。
Chrome for Android XR は WebXR の Depth Sensing モジュールをサポートしています。これにより、デバイスが実世界の環境の寸法と輪郭を認識する能力が向上します。この深度情報により、より没入感のあるリアルなインタラクションを作成し、ユーザーが十分な情報に基づいて意思決定を行えるようにすることができます。
スマートフォンの深度センサーとは異なり、Android XR の深度センサーは立体視で、2 つの深度マップをリアルタイムでストリーミングして立体視を実現します。ステレオ深度フレームを適切にサポートするように、WebXR コードを更新する必要があります。
次の例では、深度情報を立体的にレンダリングします。
// Called every time a XRSession requests that a new frame be drawn.
function onXRFrame(t, frame) {
const session = frame.session;
session.requestAnimationFrame(onXRFrame);
const baseLayer = session.renderState.baseLayer;
const pose = frame.getViewerPose(xrRefSpace);
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.renderState.baseLayer.framebuffer);
// Clears the framebuffer.
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Note: Two views will be returned from pose.views.
for (const view of pose.views) {
const viewport = baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);
const depthData = frame.getDepthInformation(view);
if (depthData) {
renderDepthInformationGPU(depthData, view, viewport);
}
}
} else {
console.error('Pose unavailable in the current frame!'); }
}
コードに関する主なポイント
- 深度データにアクセスするには、有効なポーズを返す必要があります。
pose.viewsは、各目のビューを返します。対応する for ループは 2 回実行されます。
WebXR Depth Sensing API を使用したリアルタイムの深度可視化。赤は近いピクセルを示し、青は遠いピクセルを示します。
WebXR で手の操作を追加する
WebXR アプリにハンド操作を追加すると、より直感的で没入感のあるエクスペリエンスを実現し、ユーザー エンゲージメントを高めることができます。
手入力は Android XR の主なインタラクション メカニズムです。Chrome for Android XR は、デフォルトの入力として Hand Input API をサポートしています。この API を使用すると、ユーザーはジェスチャーや手の動きを使用してシーン内の要素をつかんだり、押したり、操作したりすることで、仮想オブジェクトを自然に操作できます。
スマートフォンやコントローラ中心の XR デバイスなど、一部のデバイスでは手入力がまだサポートされていない場合があります。手入力を適切にサポートするには、WebXR コードを更新する必要があります。Immersive VR Session with Hands では、手によるトラッキングを WebXR プロジェクトに統合する方法を示しています。
次のアニメーションは、ピンチ操作と WebXR API を組み合わせて、ユーザーが仮想空間のサーフェスを「ワイプアウト」して現実世界へのパススルー ウィンドウを表示する例を示しています。
手のひらで画面を拭き取り、物理的な現実を透視する WebXR デモ。
WebXR での権限
権限が必要な WebXR API を使用すると、Chrome はサイトへの権限付与を求めるメッセージをユーザーに表示します。すべての WebXR API には、3D マッピングとカメラ トラッキング権限が必要です。トラッキングされた顔、目、手のデータをアクセスする権限も、権限によって保護されています。必要なすべての権限が付与されている場合、navigator.xr.requestSession('immersive-ar', options) を呼び出すと有効な WebXR セッションが返されます。
ユーザーが選択した権限設定は、ドメインごとに保持されます。別のドメインの WebXR エクスペリエンスにアクセスすると、Chrome で権限の確認が再度求められます。WebXR エクスペリエンスで複数の権限が必要な場合は、Chrome で各権限が 1 つずつプロンプトされます。
ウェブ上のすべての権限と同様に、権限が拒否された状況を適切に処理する必要があります。