空間網路新紀元： visionOS 如何透過 HTML <model> 與沉浸式媒體重塑 Safari 體驗

從平面到空間的 Web 進化

在過去的數十年間，Web 開發的核心始終圍繞著二維平面。從最早的純文字到 <img> 標籤帶來的圖像革命，開發者一直在努力於扁平的螢幕上模擬真實感。然而，隨著空間運算（Spatial Computing）時代的到來，我們正在見證 Web 經歷一場必然的進化。

WWDC 2025 針對 visionOS 中的 Safari 帶來了突破性的更新，正式將 Web 體驗從「平面」推向「空間」。這不僅僅是視覺上的增強，更是開發範式的轉移。我們必須理解這不只是在網頁上「放一個 3D 圖」，而是利用原生渲染與系統深度整合，將網站內容提升到下一個維度。

全新 HTML <model> 標籤實現原生立體渲染

在 visionOS 的 Safari 中，最受矚目的更新莫過於 <model> 元素的正式落地。雖然這項標籤早在幾年前就已向網頁標準組織提案，但今年它正式成為 visionOS Safari 的預設功能。

與傳統使用 JavaScript 函式庫（如 Three.js）在 2D Canvas 上模擬 3D 不同，<model> 標籤提供的是原生立體渲染（Stereoscopic Rendering）。這意味著使用者能真實感知到物體的深度感，並能透過移動位置來觀察模型不同的角度。

關鍵佈局原則：虛擬空間的開口

一個重要的技術細節是：<model> 永遠渲染在網頁平面之後。開發者應將其視為網頁上的一個「窗戶」，通往後方的虛擬空間。這種設計防止了模型在捲動時意外地「穿透」出網頁表面，確保了空間 UI 的穩定性。

基本用法範例：

<!-- 使用類似 picture 的結構提供最佳相容性 -->
<model>
  <source src="product_vision.usdz" type="model/vnd.usdz+zip">
  <!-- Fallback: 當瀏覽器不支持時顯示 2D 圖片 -->
  <img src="product_flat.jpg" alt="產品 2D 預覽">
<model>

USDZ 工作流與精準的空間單位轉換

<model> 標籤原生支援 USDZ 格式。在產出資產時，開發者有以下路徑：

• 行動端捕捉：使用 iPhone 的 Reality Composer 或 Object Capture API 將實體掃描成模型
• 專業工具：Reality Composer Pro（推薦用於檢查空間效果）、Blender、Houdini 或 Maya
• 優化策略：使用 macOS 內建的「預覽程式」匯出壓縮貼圖

開發者必備的後向相容性與 UX 處理

身為資深開發者，應避免使用脆弱的 User Agent 偵測（User Agent Sniffing），這在未來極易出錯。我們應堅持功能檢測（Feature Detection）原則。

ready Promise 與載入體驗 USDZ 檔案動輒超過 10MB，為了避免使用者因載入延遲而離開頁面，應利用 ready 屬性實作載入指示器。

// 正確的功能檢測
if (window.HTMLModelElement) {
    const model = document.querySelector('model');
    
    // 顯示 Loading Indicator
    showSpinner();

    model.ready.then(() => {
        hideSpinner();
        console.log("模型已完全載入並準備就緒");
    }).catch(err => {
        showRetryButton();
        console.error("載入失敗", err);
    });
}

CSS 融合、環境照明（IBL）與高階視覺技巧

要讓 3D 模型與網頁 UI 完美融合，不能僅僅是把它放上去，還需要透過 CSS 與照明技術進行深度調校。

1. specular Highlight（鏡面高光）技巧：除了使用 backdrop-filter 製作磨砂玻璃效果，建議在面板邊緣加上微弱的 linear-gradient。這能模擬面板邊緣的厚度與反光，增加立體層次感，讓模型在面板後方的穿透視覺更為真實
2. 環境照明 (IBL)：透過 environmentmap 屬性指定 .exr 或 .hdr 格式檔案。強烈建議避免使用 JPEG，因為 JPEG 無法表現跨越多個數量級的亮度變化，會讓模型看起來平淡無光；而 OpenEXR 格式則能提供真實且強烈的反射光點

<model src="luxury_watch.usdz" 
       environmentmap="studio_pro.exr"
       style="background-color: transparent; position: absolute;">
</model>

互動控制與矩陣轉置的「Gotchas」

<model> 提供了預設的互動模式 stagemode="orbit"，允許使用者在網頁內旋轉模型（僅限 Y 軸旋轉與微幅垂直傾斜）。若需更精準的控制，可操作 entityTransform 屬性。

技術限制警告：

entityTransform 接收一個 DOMMatrix，但它僅支援均等縮放（Uniform Scaling）、旋轉（Rotation）與平移（Translation）。如果你嘗試賦予一個包含「剪切 Shearing」或非均等縮放的矩陣，系統將會拋出錯誤。

動畫與時序控制：

開發者可以將模型的動畫時間軸與網頁捲動綁定，利用 currentTime 屬性（單位為秒）來精確跳轉到動畫的特定幀，例如隨著頁面下捲同步開啟產品的內部構造。

沉浸式媒體與 APMP 投影技術

除了 3D 模型，Safari 對於沉浸式影片的支持也大幅提升。

• Spatial Video & APMP：支持 Apple Projected Media Profile。這項技術的價值在於它包含了精確的相機投影元數據。在 180 度或全景影片播放時，APMP 能確保邊緣處的直線依然保持筆直，消除傳統 360 度影片常見的邊緣扭曲
• 自動化空間標記：在 visionOS 2.4+ 中，只要在 <img> 標籤加上 controls 屬性，瀏覽器會自動為空間相片加上「空間勳章 Badge」，使用者點擊即可透過全螢幕 API 進入沉浸式觀影模式

前瞻預覽：網頁環境 Website Environments

這是一項位於 visionOS 2.4 Feature Flags 中的實驗性功能。它允許網站打破瀏覽器視窗的邊界，定義整個使用者的虛擬背景。

透過 <link rel="spatial-backdrop">，網站可以將使用者帶入自定義的空間，例如潛水裝備網站可以將背景設為深海環境。這不僅是視覺的替換，更是一種深度的品牌敘事。

<!-- 需手動開啟 visionOS 2.4 Safari 特徵旗標 -->
<link rel="spatial-backdrop" href="deep_sea_env.usdz">

親手構建空間 Web 的未來

空間網路不再是遙遠的願景。透過 HTML 模型、精準的空間轉換、沉浸式媒體、以及自定義網頁環境，Web 開發者現在就能在瀏覽器內創造前所未有的深度體驗。

我們不應僅滿足於內容的呈現，更應思考如何利用這些工具解決 2D 介面的限制。