Show HN: PolyCSS —— 一个不依赖 WebGL 的纯 CSS 3D 引擎

背景

在 Web 3D 开发领域，WebGL 及其上层封装库（如 Three.js）长期占据主导地位。然而，WebGL 的渲染管线复杂，且需要浏览器提供专门的图形硬件加速支持，这在某些轻量级场景、老旧设备或需要极致 DOM 可访问性的应用中显得过于沉重。

PolyCSS 是一个由 Layoutit 团队开发的开源项目，它提出了一种截然不同的思路：利用现代 CSS 的 matrix3d(...) 变换能力，直接在 DOM 元素上构建 3D 多边形网格（Polygon Mesh）。这意味着它完全避开了 WebGL 和 Canvas，仅通过 HTML 元素和 CSS 样式来实现 3D 渲染。该项目已在 Hacker News 上引发关注，旨在为 Web 开发者提供一种更轻量、更易于调试且与 DOM 生态无缝集成的 3D 解决方案。

核心内容

PolyCSS 的核心功能是将 3D 模型（如 OBJ、MTL、GLB 和 VOX 格式）转换为真实的 HTML 元素，并通过 CSS 矩阵变换在 3D 空间中呈现。它支持颜色、纹理、光照、阴影、形状定义以及动画效果，并原生兼容 React、Vue 或原生 JavaScript 开发环境。

安装与集成

PolyCSS 提供了针对不同技术栈的包管理支持：

• Vanilla JS: npm install @layoutit/polycss
• React: npm install @layoutit/polycss-react
• Vue: npm install @layoutit/polycss-vue

此外，开发者也可以通过 CDN 直接加载其自定义元素（Custom Elements），例如使用 <poly-camera>、<poly-scene> 等标签快速构建场景。

组件架构

PolyCSS 采用组件化设计，主要包含以下核心组件：

• PolyCamera: 控制视角。默认使用正交投影（Orthographic），也可切换为透视投影（PerspectiveCamera）。通过 rotX/rotY 控制旋转角度，zoom 控制缩放，target 控制平移，distance 控制推拉镜头。
• PolyScene: 管理场景光照和纹理图集（Atlas）选项。支持 directionalLight（平行光）和 ambientLight（环境光），并可通过 textureLighting 选择“烘焙”或“动态”光照模式。
• PolyMesh: 负责加载或接收多边形数据。支持通过 src 属性加载 .obj、.gltf、.glb 或 .vox 文件，也可通过 polygons 属性直接传入预解析的几何数据。
• 控制器: 提供多种交互方式，包括 PolyOrbitControls（拖拽旋转、滚轮缩放）、PolyMapControls（地图式平移优先）、PolyFirstPersonControls（第一人称键盘/指针导航）以及 PolyTransformControls（变换手柄）。

渲染机制与性能优化

由于 PolyCSS 基于 DOM 渲染，其性能主要受限于挂载的叶子节点数量和浏览器需要绘制的纹理图集面积。为了优化性能，渲染器采取了以下策略：

1. 最小化 DOM 节点: 每个可见的多边形对应一个叶子元素。渲染器会选择成本最低的 CSS 原语来表示多边形，然后使用 matrix3d(...) 将其放置在 3D 空间中。
2. 智能元素选择:
   • <b> 标签：用于实心矩形和稳定的四边形，利用 background: currentColor。
   • <u> 标签：用于稳定的三角形和倒角实体，利用 corner-shape，必要时回退到 border-width 三角形。
   • <i> 标签：当浏览器支持时，使用 border-shape: polygon(...) 裁剪实心多边形。
   • <s> 标签：用于映射打包的纹理图集切片（background-image），作为纹理或不受支持形状的回退方案。
3. 纹理图集（Texture Atlas）: 对于有纹理或不规则几何体，仅在必要时使用图集切片，以减少重绘开销。

数据导出与快照功能

PolyCSS 提供了一个独特的 exportPolySceneSnapshot 函数，能够将当前的 3D 场景导出为独立的 HTML 文档。该函数会：

• 克隆当前的 DOM 结构。
• 仅注入该快照所需的 PolyCSS CSS 样式。
• 将 CSS url(...) 引用的图片资产内联为 data:image/...;base64,... 格式。
• 剥离脚本和内联事件处理器。
• 返回一个无需 PolyCSS 运行时依赖的独立 HTML 字符串。

这对于生成静态 3D 预览或嵌入邮件/文档非常有用。如果资产无法内联，函数会抛出 PolySceneSnapshotError。

支持的格式与几何体

• 模型格式: OBJ + MTL（含 map_Kd 纹理和 UV 坐标）、glTF / GLB（含嵌入图像和 TEXCOORD_0）、MagicaVoxel .vox（支持快速体素路径）。
• 原生几何体: 支持生成盒子、平面、环、球体、圆环、圆柱、圆锥以及柏拉图立体。

关键要点

• 零 WebGL 依赖: 完全基于 DOM 和 CSS 3D 变换，无需图形硬件加速，降低了运行环境的门槛。
• 原生 DOM 集成: 3D 对象即为真实的 HTML 元素，可以直接绑定 DOM 事件（如 onClick），便于调试和样式定制。
• 多框架支持: 提供 Vanilla、React 和 Vue 的官方封装，API 设计保持一致。
• 高性能优化策略: 通过智能选择 CSS 原语（如 <b>, <u>, <i>, <s>）和纹理图集技术，平衡了渲染质量与 DOM 节点数量。
• 静态导出能力: 支持将动态场景导出为包含内联资源的独立 HTML 文件，便于分发和展示。
• 丰富的控制器: 内置轨道、地图、第一人称和变换控制器，满足多种交互需求。
• 开源协议: 采用 MIT 许可证，允许商业和私人自由使用。

意义与影响

PolyCSS 的出现为 Web 3D 开发提供了另一种范式。虽然它在处理超大规模复杂场景时可能不如 WebGL 高效，但在以下场景中具有显著优势：

1. 轻量级可视化: 对于简单的 3D 展示、数据可视化或教育演示，PolyCSS 避免了引入重型图形库的开销，加载速度更快。
2. SEO 与可访问性: 由于内容存在于 DOM 中，搜索引擎爬虫可以更容易地索引 3D 内容，屏幕阅读器也能更好地处理场景结构。
3. 调试友好: 开发者可以使用标准的浏览器开发者工具直接检查和修改 3D 元素的样式和属性，无需切换到 WebGL 调试器。
4. 兼容性与嵌入: 其导出独立 HTML 的能力使其非常适合嵌入到不支持复杂脚本的邮件客户端、文档系统或老旧浏览器环境中。

PolyCSS 并非旨在取代 WebGL，而是作为其补充，丰富了 Web 开发者的工具箱，特别是在需要 DOM 原生交互和轻量级部署的场景中。