PolyCSS: 不使用 WebGL 將 3D 網格渲染帶入 DOM

多年來，網頁 3D 圖形的標準一直是 WebGL（以及現在的 WebGPU），為渲染複雜場景提供了高效能的管線。然而，這些技術在獨立的 canvas 上下文中運行，將 3D 物件與文件物件模型（DOM）的其他部分隔離開來。PolyCSS 通過實現一個將多邊形網格直接渲染為 HTML 元素的 3D 引擎來改變這一範式。

通過利用 CSS matrix3d(...) 轉換，PolyCSS 允許開發者將 3D 幾何圖形視為 DOM 的一部分。這意味著 3D 面可以像使用標準網頁佈局的工具一樣進行樣式設定、互動和操作，為 UI 設計和互動式敘事開闢了新的可能性。

How PolyCSS Works: The DOM as a Renderer

與傳統在 canvas 上繪製像素的 3D 引擎不同，PolyCSS 將每個可見的多邊形發射為 DOM 中的葉元素。為了保持效能，引擎會根據多邊形的屬性動態選擇最有效的 CSS 原生元素：

  • Solid Rectangles/Quads: 使用 <b> 元素配合 background: currentColor 以獲得最大的穩定性。
  • Triangles and Beveled Solids: 使用 <u> 元素並利用 corner-shape 或 border-width 作為備選方案。
  • Complex Solid Polygons: 在瀏覽器支持的情況下，使用具有 border-shape: polygon(...) 的 <i> 元素。
  • Textured/Unsupported Shapes: 使用 <s> 元素，通過 background-image 映射壓縮紋理圖集的一塊區域。

一旦選擇了原生元素，引擎就會應用 matrix3d 轉換來在 3D 空間中定位和旋轉該元素。這種方法有效地將瀏覽器的佈局引擎轉變為一個 3D 柵格化器。

Core Features and Capabilities

PolyCSS 設計得非常靈活，為幾種行業標準格式和現代前端框架提供了支持。

Model Support

引擎可以解析並渲染各種 3D 格式，包括：

  • OBJ + MTL: 完全支持材質和 map_Kd 紋理。
  • glTF / GLB: 支持嵌入式圖像和 UV 座標。
  • MagicaVoxel (.vox): 專門為體素數據優化的快速路徑。
  • Primitives: 內置生成方塊、球體、圓環、圓柱體和柏拉圖多面體。

Framework Integration

PolyCSS 為不同的開發環境提供了專用套件：

  • Vanilla JS: 通過 @layoutit/polycss 提供自定義元素和指令式 API。
  • React: 通過 @layoutit/polycss-react 使用基於組件的模型，包含 <PolyCamera>, <PolyScene>, 和 <PolyMesh>。
  • Vue 3: 通過 @layoutit/polycss-vue 提供類似的組件化架構。

Advanced Tooling

該庫最獨特的特性之一是 Snapshot Export。使用 exportPolySceneSnapshot()，開發者可以克隆渲染後的場景，將所有 CSS 和圖像資產內聯為 base64 data URIs，並移除運行時腳本。結果是一個獨立的 HTML 文檔，可以在不要求客戶端瀏覽器加載 PolyCSS 庫的情況下顯示 3D 場景。

Technical Trade-offs: DOM vs. WebGL

與任何架構選擇一樣，使用 DOM 進行 3D 渲染涉及顯著的權衡。主要的限制是掛載的葉元素數量；因為每個多邊形都是一個 DOM 節點，高多邊形數量的模型不可避免地會導致效能下降。

在 Hacker News 社群中，這引發了關於該方法效用性的辯論。一位用戶質疑了在 WebGL 高效能的情況下進行該項目的必要性：

But why not use WebGL? It's widely available, more efficient, and can render at a much higher quality.

雖然 WebGL 在高保真遊戲或複雜模擬方面客觀上更優越，但 PolyCSS 的價值在於 DOM 集成。因為每個多邊形都是一個真實的 HTML 元素，開發者可以直接將標準 DOM 事件（如 onClick）附加到 3D 模型特定面上的特定面。這允許實現一種細粒度的互動和無障礙性，這在基於 canvas 的系統中很難實現，因為在 canvas 中，你必須手動執行光線投射來確定點擊了哪個物件。

Conclusion

PolyCSS 與其說說是 Three.js 的替代品，不如說是一個專門為希望將 3D 幾何圖形與傳統網頁佈局融合的開發者提供的專門工具。無論是為了創建基於 CSS 的體素編輯器還是地形生成器，它證明了瀏覽器的 CSS 引擎不僅僅能夠處理 2D 方塊。

Sources