Android XR 裝置上的 Chrome 支援 WebXR。WebXR 是 W3C 的開放標準，可為支援的瀏覽器提供高效能的 XR API。如果您要建構網頁，可以運用 3D 模型強化現有網站，或打造全新的沉浸式體驗。
Android 專用 Chrome 延展實境版支援下列 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 的雙立體螢幕。以行動裝置或現有頭戴式裝置為目標的 WebXR 體驗，可能需要調整輸入程式碼，改為以手部為優先。
在 Android XR 上使用 WebXR 時，您可能需要更新程式碼，以補償雙螢幕 (每隻眼睛各一個螢幕) 的事實。
關於確保 WebXR 中的深度感
使用者在實體空間中放置虛擬物件時，物件的比例應準確，看起來才會像是真的存在於該空間。舉例來說，在家具購物應用程式中，使用者必須相信虛擬扶手椅能完美融入客廳。
Android 版 Chrome 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 的主要互動機制。Android XR 版 Chrome 預設支援 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 會逐一提示您授予權限。
如同網頁上的所有權限，您應妥善處理權限遭拒的情況。