PolyCSS: 无需 WebGL 将 3D 网格渲染引入 DOM

多年来，Web 上的 3D 图形标准一直是 WebGL（以及现在的 WebGPU），为渲染复杂场景提供了高性能流水线。然而，这些技术在独立的 canvas 上下文中运行，将 3D 对象与文档对象模型（DOM）的其他部分隔离开来。PolyCSS 通过实现一种直接将多边形网格渲染为 HTML 元素的 3D 引擎改变了这一范式。

通过利用 CSS matrix3d(...) 变换，PolyCSS 允许开发者将 3D 几何体视为 DOM 的一部分。这意味着 3D 面可以被样式化、进行交互并使用与标准 Web 布局相同的工具进行操作，为 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 数据 URI，并剥离运行时脚本。其结果是一个独立的 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 系统中，你必须手动执行射线检测（ray-casting）来确定点击了哪个对象。

Conclusion

PolyCSS 与其说是 Three.js 的替代品，不如说是为那些想要将 3D 几何体与传统 Web 布局融合的开发者提供的专用工具。无论是用于创建基于 CSS 的体素编辑器还是地形生成器，它都证明了浏览器的 CSS 引擎能够胜任远不止 2D 方块的工作。

Sources