使用 WebXR 進行開發

Android XR 版 Chrome 支援 WebXR。WebXR 是 W3C 的開放標準，可為支援的瀏覽器提供高效能 XR API。如果您是為網頁建構內容，可以使用 3D 模型強化現有網站，或打造全新沉浸式體驗。

Chrome for Android XR 支援下列 WebXR 功能：

如要查看 WebXR 的實際運作情形，請在 Android XR 裝置或 Android XR 模擬器上啟動 Chrome，並瀏覽官方 WebXR 範例。

前置條件：選擇 WebXR 架構

開始開發前，請務必選擇合適的 WebXR 架構。這麼做可大幅提升您自己的工作效率，並改善您創造的體驗品質。

如果您偏好使用原生 JavaScript 和 WebGL，請參閱 GitHub 上的 WebXR，建立第一個 WebXR 實驗。

為 Android XR 進行調整

如果您有在其他裝置上執行的 WebXR 體驗，可能需要更新程式碼，才能在 Android XR 上正確支援 WebXR。舉例來說，以行動裝置為主的 WebXR 體驗必須從單一螢幕改為在 Android XR 中使用兩個立體螢幕。針對行動裝置或現有頭戴式裝置打造的 WebXR 體驗，可能需要調整輸入程式碼，以便以手勢為優先。

在 Android XR 上使用 WebXR 時，您可能需要更新程式碼，以便因應兩個螢幕 (每隻眼睛一個) 的情況。

關於如何確保 WebXR 中的深度感

當使用者將虛擬物件放置在實體空間時，其比例應正確無誤，讓物件看起來像是真正存在於該空間。舉例來說，在家具購物應用程式中，使用者需要信任虛擬扶手椅會完美地融入客廳。

Chrome for Android XR 支援 WebXR 中的深度感測模組，可強化裝置感知現實環境的尺寸和輪廓的能力。這項深度資訊可讓您打造更身歷其境且逼真的互動體驗，協助使用者做出明智的決定。

與行動裝置上的深度感測不同，Android XR 中的深度感測是立體的，會即時串流兩個深度地圖，以便雙眼視覺。您可能需要更新 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 迴圈。

使用 WebXR 深度感測 API 進行即時深度視覺化。紅色代表較近的像素，藍色代表較遠的像素。

在 WebXR 中新增手勢互動

在 WebXR 應用程式中加入手勢互動功能，可提供更直覺且身歷其境的體驗，進而提升使用者參與度。

手勢輸入是 Android XR 的主要互動機制。Chrome for Android XR 支援手勢輸入 API 做為預設輸入方式。這個 API 可讓使用者以自然的方式與虛擬物件互動，使用手勢和手部動作抓取、推送或操控場景中的元素。

行動電話或以控制器為主的 XR 裝置可能尚不支援手勢輸入。您可能需要更新 WebXR 程式碼，才能正確支援手動輸入。「使用手勢的沉浸式 VR 工作階段」示範如何將手勢追蹤整合至 WebXR 專案。

以下動畫示範如何結合捏合與 WebXR API，讓使用者「抹除」虛擬空間的表面，以便顯示進入現實世界的透視窗。

WebXR 示範：使用手指撥動螢幕，以便透過螢幕看到真實世界。

WebXR 中的權限

當您使用需要權限的 WebXR API 時，Chrome 會提示使用者授予網站權限。所有 WebXR API 都需要 3D 對應和攝影機追蹤權限。追蹤的臉部、眼睛和手部資料的存取權也受到權限保護。如果已授予所有必要權限，呼叫 navigator.xr.requestSession('immersive-ar', options) 會傳回有效的 WebXR 工作階段。

使用者選擇的權限偏好設定會保留在每個網域。當您存取其他網域中的 WebXR 體驗時，Chrome 會再次提示您授予權限。如果 WebXR 體驗需要多項權限，Chrome 會逐一要求每項權限。

如同網站上的所有權限一樣，您應該妥善處理權限遭拒的情況。