WebXR 光照估計：深入解析真實感擴增實境渲染

擴增實境（Augmented Reality, AR）承諾無縫地融合我們的數位與實體世界。我們已在許多應用中見證其魅力：在產品視覺化中，您能將一張虛擬沙發放在客廳；在沉浸式遊戲中，角色們在您的廚房餐桌上奔跑；在教育應用程式中，古老的文物栩栩如生地重現。但究竟是什麼區分了令人信服的 AR 體驗與那些感覺人工、格格不入的體驗呢？答案，往往就是光線。

當一個數位物件無法對其真實環境的光線做出反應時，我們的大腦會立即將其識別為一個偽物。一個採用扁平、通用光照的 3D 模型，看起來就像一張貼在螢幕上的貼紙，瞬間打破了存在的幻覺。為了實現真正的照片級真實感，虛擬物件必須被相同的光源照亮，投射出相同的陰影，並反映出與旁邊實體物件相同的周遭環境。這正是 WebXR 光照估計 API 成為網頁開發者革命性工具的原因。

本篇綜合指南將帶您深入探索 WebXR 光照估計的世界。我們將探討為何光線是 AR 真實感的基石，揭開此 API 背後技術的神秘面紗，逐步介紹實際操作步驟，並展望沉浸式網頁渲染的未來。本文適合希望直接在開放網頁上打造下一代引人入勝 AR 體驗的網頁開發者、3D 藝術家、XR 愛好者以及產品經理。

無形之力：為何光線是真實感 AR 的基石

在我們深入探討 API 的技術細節之前，至關重要的是要理解為何光線對於創造可信的 AR 如此基礎。我們的目標是達到所謂的「感知真實感」（perceptual realism）。這不必然是關於創造超高細節、百萬多邊形模型；而是關於欺騙人類的視覺系統，使其接受一個數位物件是場景中合理的一部分。光線提供了我們大腦用來理解物體形狀、質地及其與環境關係的必要視覺線索。

讓我們來看看在現實世界中，我們常視為理所當然的幾個關鍵光照元素：

• 環境光 (Ambient Light)：這是充滿空間的柔和、非定向光。它從牆壁、天花板和地板反彈，照亮非直接光線照射的區域。沒有它，陰影將會是純黑色，創造出不自然的刺眼外觀。
• 定向光 (Directional Light)：這是從一個主要、通常是遠處的光源（如太陽或明亮的天花板燈）發出的光。它創造出明顯的高光並投射出邊緣銳利的陰影，給予我們對物體形態和位置的強烈感知。
• 反射與高光 (Reflections and Specularity)：一個物體表面如何反映周遭世界，告訴我們其材質特性。一個鍍鉻球體會有清晰如鏡的反射，一個塑膠玩具會有柔和模糊的高光（specularity），而一個木塊則幾乎沒有。這些反射必須與真實世界的環境相匹配才顯得可信。
• 陰影 (Shadows)：陰影可以說是在現實中固定一個物體最重要的線索。陰影將物體與一個表面連接起來，賦予其重量和位置感。陰影的柔和度、方向和顏色提供了關於環境中光源的豐富資訊。

想像一下，在您的辦公室放置一個虛擬的、閃亮的紅色球體。使用預設的、基於場景的光照，它可能只有一個通用的白色高光和一個簡單的深色圓形陰影。它看起來很假。現在，透過光照估計，同一個球體可以反映出來自您螢幕的藍光、來自檯燈的溫暖黃光，甚至窗戶的扭曲倒影。它的陰影變得柔和，並且正確地從主要光源處投射出去。突然之間，這個球體不只是看起來在您的桌上，而是融入了您桌子的環境中。這就是真實感光照的力量，也是 WebXR 光照估計 API 所解鎖的能力。

揭開 WebXR 光照估計 API 的神秘面紗

WebXR 光照估計 API 是更廣泛的 WebXR 設備 API 規範中的一個模組。它的使命簡單而強大：透過設備的相機分析使用者的真實世界環境，並向開發者的 3D 渲染引擎（如 Three.js 或 Babylon.js）提供可操作的光照數據。它扮演著一座橋樑，讓您的虛擬場景光照能由實際的實體場景光照所驅動。

它是如何運作的？簡化視圖

這個過程並非魔法；而是電腦視覺的複雜應用。當一個啟用光照估計的 WebXR 會話處於活動狀態時，底層平台（如 Android 上的 Google ARCore）會持續分析相機的影像串流。此分析會推斷出環境光的幾個關鍵屬性：

• 整體亮度與色彩：它判斷光線的主要強度和色偏。這個房間是被冷白色的螢光燈明亮地照亮，還是被溫暖的橘色日落微弱地照亮？
• 光線方向性：雖然它無法精確定位每一個燈泡，但它可以判斷出最主要光源的大致方向。
• 環境表示：最重要的是，它生成一個來自所有方向光線的整體表示。

這些資訊隨後被封裝成高度優化、適用於即時 3D 圖形渲染的格式。此 API 提供的兩種主要數據格式是球諧函數（Spherical Harmonics）和一個反射立方體貼圖（Reflection Cubemap）。

API 數據的兩大關鍵組件

當您在 WebXR 會話中請求光照估計時，您會得到一個 `XRLightEstimate` 物件。這個物件包含您的渲染器將會使用的兩項關鍵數據。

1. 球諧函數（Spherical Harmonics, SH）用於漫反射光照

這可能是聽起來最複雜但卻是 API 中最根本重要的部分。簡單來說，球諧函數是一種用數學方式表示來自所有方向的低頻（即柔和且模糊）光照資訊的方法。可以把它想像成一個場景中整體環境光的高度壓縮、高效的摘要。

• 用途：它非常適合用來計算照射到物體上的漫反射光。漫反射光是從霧面物體（如木頭、石頭或未拋光的塑膠）表面均勻散射的光。SH 根據這些表面相對於環境光的方位，給予它們正確的顏色和陰影。
• 提供方式：API 以一個係數陣列（通常是一個包含 27 個值的 `Float32Array`，用於三階諧波）的形式提供 SH 數據。這些數字可以直接輸入到現代的基於物理的渲染（PBR）著色器中，著色器會用它們來計算霧面表面上每個像素的最終顏色。

2. 反射立方體貼圖（Reflection Cubemaps）用於鏡面反射光照

雖然球諧函數對霧面表面效果很好，但它們缺乏處理光亮表面所需的細節。這就是反射立方體貼圖發揮作用的地方。立方體貼圖是一種經典的電腦圖形學技術，由六個紋理組成，排列如立方體的六個面。它們共同構成了一個從單點出發的 360 度環境全景圖。

• 用途：立方體貼圖用於在鏡面（光亮）表面上創造清晰、細緻的反射。當您渲染一個金屬或有光澤的物體時，渲染引擎會使用立方體貼圖來確定其表面應該反射什麼。在一個虛擬的鍍鉻球上看到真實房間的逼真反射，是實現照片級真實感的一個主要因素。
• 提供方式：API 以 `XRReflectionCubeMap` 的形式提供，這是一個 `WebGLTexture` 物件，可以直接用作您 3D 場景中的環境貼圖。這個立方體貼圖會隨著使用者移動或光照條件的變化而由系統動態更新。

實作：將光照估計帶入您的 WebXR 應用

現在我們理解了理論，讓我們來看看將此功能整合到一個 WebXR 應用程式所需的高層次步驟。雖然完整的實作程式碼可能很複雜，且高度依賴您選擇的 3D 函式庫，但核心流程遵循一個一致的模式。

先決條件

• 對 WebXR 的基礎有紮實的理解，包括如何啟動會話和運行渲染循環。
• 熟悉基於 WebGL 的 3D 函式庫，如 Three.js 或 Babylon.js。這些函式庫抽象化了許多底層的複雜性。
• 相容的設備和瀏覽器。截至本文撰寫時，WebXR 光照估計在搭載 ARCore 的現代 Android 設備上的 Chrome 瀏覽器中支援最為穩健。
• HTTPS：與所有 WebXR 功能一樣，您的網站必須透過安全連接提供服務。

逐步整合（概念性）

以下是所需步驟的概念性演練。我們將在下一節討論特定函式庫的輔助工具。

第一步：請求 'light-estimation' 功能
除非您在創建 AR 會話時明確要求，否則您無法使用此 API。您可以在 `requestSession` 呼叫的 `requiredFeatures` 或 `optionalFeatures` 陣列中加入 `'light-estimation'` 來完成此操作。

const session = await navigator.xr.requestSession('immersive-ar', { requiredFeatures: ['hit-test', 'dom-overlay', 'light-estimation'] });

第二步：建立一個 XRLightProbe
一旦會話開始，您需要告知它您想要開始接收光照資訊。您可以為會話建立一個光探測器（light probe）來完成此操作。您也可以指定您偏好的反射貼圖格式。

const lightProbe = await session.requestLightProbe();

第三步：在渲染循環中存取光照數據
光照數據會隨著每一幀更新。在您的 `requestAnimationFrame` 渲染循環回呼函式（它會接收 `time` 和 `frame` 作為參數）內部，您可以為您的探測器獲取最新的估計值。

function onXRFrame(time, frame) {
// ... 獲取姿態等 ...

const lightEstimate = frame.getLightEstimate(lightProbe);

if (lightEstimate) {
// 我們有光照數據了！現在可以應用它。
applyLighting(lightEstimate);
}

// ... 渲染場景 ...
}
檢查 `lightEstimate` 是否存在很重要，因為系統可能需要幾幀的時間才能在會話開始後生成第一個估計值。

第四步：將數據應用到您的 3D 場景
這就是您的 3D 引擎發揮作用的地方。`lightEstimate` 物件包含了 `sphericalHarmonicsCoefficients` 和 `reflectionCubeMap`。

• 應用球諧函數：您可以將 `sphericalHarmonicsCoefficients` 陣列傳遞給您的 PBR 材質，通常是透過更新您 3D 引擎內的 `LightProbe` 物件。引擎的著色器隨後會使用這些數據來計算漫反射光照。
• 應用反射立方體貼圖：`reflectionCubeMap` 是一個 `WebGLTexture`。您需要使用會話的 `XRWebGLBinding` 來獲取一個您的渲染器可以使用的版本，然後將其設置為場景的全域環境貼圖。這將使所有具有金屬度或粗糙度值的 PBR 材質都能反射它。

特定引擎範例：Three.js 與 Babylon.js

值得慶幸的是，流行的 WebGL 函式庫處理了第四步中大部分的繁重工作，使開發者的流程變得更加直接。

Three.js 實作說明

Three.js 擁有一個出色的 `WebXRManager` 和一個專門的輔助類別，使得光照估計幾乎成為一個即插即用的功能。

關鍵是 XREstimatedLight 類別。您可以創建這個類別的一個實例並將其加入到您的場景中。在您的渲染循環中，您只需將 `xrFrame.getLightEstimate(lightProbe)` 的結果和 `lightProbe` 本身傳遞給該光源的 `update()` 方法。這個輔助類別會處理所有其他事情：

• 它包含一個 Three.js 的 `LightProbe` 物件，並自動用球諧函數係數更新其 `sh` 屬性。
• 它會自動用反射立方體貼圖更新 `scene.environment` 屬性。
• 當光照估計不可用時，它可以回退到預設的光照設定，確保流暢的體驗。

這種高層次的抽象意味著您可以專注於創建您的 3D 內容，讓 `XREstimatedLight` 來處理綁定紋理和更新著色器 uniform 的複雜性。

Babylon.js 實作說明

Babylon.js 也為其 `WebXRDefaultExperience` 輔助工具提供了一個高層次、基於功能的系統。

要啟用此功能，您只需存取功能管理器並按名稱啟用它：

const xr = await scene.createDefaultXRExperienceAsync({ /* options */ });
const lightEstimationFeature = xr.featuresManager.enableFeature(WebXRLightEstimation.Name, { /* options */ });

一旦啟用，此功能會自動：

• 管理 `XRLightProbe` 的創建和生命週期。
• 使用 API 提供的反射立方體貼圖更新場景的主要 `environmentTexture`。
• 提供對球諧函數係數的存取，Babylon 的 PBR 材質系統可以使用這些係數進行漫反射光照計算。
• 包含有用的可觀察對象（事件），如 `onLightEstimatedObservable`，您可以在新的光照數據到達時訂閱以執行自訂邏輯。

這種方法與 Three.js 類似，讓開發者只需幾行程式碼就能選擇使用這個進階功能，將其無縫整合到現有的 Babylon.js 渲染管線中。

當前技術的挑戰與限制

雖然 WebXR 光照估計是向前邁出的一大步，但我們必須以現實的態度來理解其目前的限制。

• 性能成本：持續分析相機影像、生成立方體貼圖和處理球諧函數會消耗大量的 CPU 和 GPU 資源。這是一個關鍵的性能考量，尤其是在以電池供電的行動裝置上。開發者必須在追求完美真實感與維持流暢、高幀率體驗之間取得平衡。
• 估計準確性：它的名字說明了一切——這是一個估計值。系統可能會被不尋常的光照條件、有許多彩色燈光的非常複雜的場景，或光線的極速變化所欺騙。它提供的是一個合理的近似值，而非物理上完美的測量。
• 設備和瀏覽器支援：此功能尚未普及。它對特定平台 AR 框架（如 ARCore）的依賴意味著它主要在運行 Chrome 的現代 Android 設備上可用。在 iOS 設備上的支援是廣泛採用的一個主要缺失環節。
• 無明確陰影：目前的 API 對於環境光和反射光非常出色，但沒有直接提供關於主要定向光源的資訊。這意味著它無法告訴您：「有一個強光從這個特定方向來」。因此，要從虛擬物件投射清晰、準確的即時陰影到真實世界表面，仍然需要額外的技術。開發者通常使用 SH 數據來推斷最亮光線的方向，並在他們的場景中放置一個標準的定向光，但這只是一種近似。

WebXR 光照的未來：下一步是什麼？

即時渲染和電腦視覺領域正以驚人的速度發展。沉浸式網頁的光照未來一片光明，有幾個令人興奮的進展即將到來。

改進的定向光與陰影 API

開發者社群經常提出的一個請求是，希望 API 能提供更多關於主要光源的明確數據，包括方向、顏色和強度。這樣的 API 將能輕而易舉地投射出物理上精確、邊緣銳利的陰影，這將是真實感的一大飛躍。這可以與 平面偵測 API 整合，將陰影投射到真實世界的地板和桌子上。

更高擬真度的環境貼圖

隨著行動處理器變得更加強大，我們可以期待系統能生成更高解析度、更高動態範圍（HDR）的反射立方體貼圖。這將帶來更生動、更細緻的反射，進一步模糊真實與虛擬之間的界線。

更廣泛的平台採用

最終目標是讓這些功能標準化，並在所有主流瀏覽器和設備上可用。隨著蘋果公司不斷發展其 AR 產品，我們希望 iOS 上的 Safari 最終能採用 WebXR 光照估計 API，將這些高擬真度的體驗帶給更廣大的全球使用者。

AI 驅動的場景理解

展望更遠的未來，機器學習的進步可能讓設備不僅僅是估計光線，而是能從語義上理解一個場景。設備或許能識別出「窗戶」、「燈」或「天空」，並利用這些知識來創建一個更準確、更穩健的光照模型，包含多個光源和複雜的陰影互動。

結論：為沉浸式網頁照亮前路

WebXR 光照估計不僅僅是一個漸進式的功能；它是網頁擴增實境未來的一項基礎技術。透過讓數位物件能被其物理環境真實地照亮，它將 AR 從一個新奇的噱頭提升為一個真正沉浸式和令人信服的媒介。

它彌合了經常讓 AR 體驗感覺脫節的感知差距。對於電子商務而言，這意味著顧客可以看到一盞金屬燈將如何真正地反映他們家中的光線。對於遊戲而言，這意味著角色感覺更加真實地存在並融入玩家的世界。對於教育而言，這意味著歷史文物能以先前在網頁瀏覽器中不可能達到的真實感來觀看。

雖然在性能和跨平台支援方面仍存在挑戰，但今天可用的工具，特別是與像 Three.js 和 Babylon.js 這樣強大的函式庫搭配使用時，已經使這項曾經複雜的技術變得異常地容易上手。我們鼓勵所有對沉浸式網頁感興趣的網頁開發者和創作者去探索 WebXR 光照估計 API。開始實驗，挑戰極限，並幫助為下一代面向全球使用者的真實感 AR 體驗照亮前路。