项目概述
2026 年 6 月，LayoutIt Studio 的 Agustín Capeletto 发布了 cssQuake——一个将 id Software 1996 年经典游戏《Quake》以纯 HTML/CSS 渲染的浏览器端口。项目上线后迅速登上 Hacker News 首页，获得超过 500 点投票和上百条讨论。
cssQuake 的核心依赖是 PolyCSS，一个基于 DOM 的 3D 渲染引擎。它不借助 WebGL 或 Canvas，而是将 Quake 的 BSP 关卡数据预处理为 JSON 和 PolyCSS 渲染包，然后在浏览器中用 CSS matrix3d() 变换将每个多边形定位为真实的 DOM 元素。墙壁、地板、敌人、道具——游戏场景中的每一个面都是一个可检查、可点击、可删除的 HTML 元素。
技术架构
cssQuake 将 Quake 的运行拆分为两个阶段。预处理阶段解析原始 BSP、WAD、MDL、LMP 和 QuakeC 数据，提取纹理、光照、实体属性和动画序列，生成浏览器可直接消费的 PNG 图片和 JSON 配置文件。运行时则由 TypeScript 接管游戏循环，管理玩家移动、碰撞检测、敌人状态、武器系统和 UI 状态，并将每一帧的变换结果写入 DOM。
PolyCSS 引擎本身支持 OBJ、glTF、GLB 和 VOX 等多种 3D 格式。每个三角形对应一个 DOM 节点，通过 transform: matrix3d(...) 在三维空间中定位，UV 纹理被打包进生成的图集精灵，由 CSS 背景定位完成贴图。浏览器的合成器线程负责处理 3D 图层的叠加和绘制。从开发者工具中可以直接选中任意一个多边形，修改其样式属性，甚至删除它——这在任何传统游戏引擎中都是不可想象的操作。
社区反应与核心争议
HN 讨论中最引人注目的评论来自 jedberg。他在 M1 Pro Mac 上运行 cssQuake 后观察到，Quake 在他 90 年代的 Pentium-133 PC 上跑得比在现代硬件上更流畅。这一观察迅速成为整个帖子的焦点。
后续讨论分化为两种观点。一种认为 cssQuake 的性能问题显而易见——CSS 从未被设计为 3D 游戏渲染管线，用烤面包机做肉饼自然不会有好结果。另一种观点则指出，30 年间硬件性能提升了数千倍，粗算之下 M1 Pro 的单核性能大约是 Pentium-133 的数百倍，理论上”蛮力”应当足以弥补任何优化缺失。现实却给出了相反的答案。
多位用户在 Firefox 上报告了 60fps 的流畅体验，而在 Safari/WebKit 上则普遍遭遇卡顿和画面撕裂。这种浏览器间的巨大差异进一步暗示，瓶颈在各浏览器对 CSS 3D 变换的实现深度和优化策略，硬件算力本身不是主因。
CSS 渲染管线的结构性瓶颈
cssQuake 无意中充当了一次 CSS 引擎的极限压力测试，暴露了浏览器架构中一个长期为人所知但鲜有如此直观对比的问题：CSS 渲染仍以单线程为主。
现代浏览器的渲染管线在理论上可以将 CSS 变换卸载到合成器线程甚至 GPU，从而与主线程的 JavaScript 并行执行。但在实践中，大量的 3D 多边形意味着海量的矩阵计算、图层管理和重绘指令。CSS 的盒模型继承、层叠上下文管理和 preserve-3d 的层级遍历都会产生可观的 CPU 开销。当场景中同时存在数百个带纹理的 matrix3d 元素时，浏览器的布局—绘制—合成流水线承受的压力远超设计预期。
这与原生 Quake 引擎的架构形成鲜明对比。John Carmack 在 1996 年使用的软件渲染器针对 BSP 空间划分做了极致优化，将不可见表面提前剔除，仅在屏幕空间绘制必要像素。CSS 引擎则必须维护完整的 DOM 树和 CSSOM，对每个元素进行样式计算和层叠解析，即使该元素最终被遮挡。
一条技术谱系的延续
cssQuake 并非孤例。2014 年，Keith Clark 用纯 CSS 3D 变换构建了一个第一人称迷宫引擎，无需一行 JavaScript。2025 年底，Niels Leenheer 发布了 cssDOOM，将《毁灭战士》以相同的 DOM+CSS 方式搬进浏览器。cssQuake 将这一探索推向了新高度——《Quake》的关卡几何复杂度远超《毁灭战士》，全 3D 的 BSP 世界对 CSS 变换的精度和数量提出了更高要求。
Leenheer 在看到 cssQuake 后公开表示认可，Capeletto 也回应称 cssQuake 是这一 CSS 3D 探索链条上的最新一环。这种建立在彼此工作之上的技术探索，构成了开源社区独特的实验文化。
意义与局限
cssQuake 的价值在揭示而非实用。它展示了 Web 平台在极端使用场景下的边界，让开发者直观感受到 CSS 渲染引擎的设计取舍。用 matrix3d 驱动一个完整的 3D 游戏关卡，这种”滥用”本身就是对平台能力的极限勘探。
从工程角度看，cssQuake 的构建过程同样提供了有价值的参考：BSP 数据的预处理管道、PolyCSS 的 DOM 抽象层、URL 参数作为轻量级控制台的设计，都体现了将游戏逻辑与声明式渲染解耦的系统性思考。
该项目代码以 GPL-2.0 许可证发布在 GitHub 上。游戏数据本身不包含在仓库中，预处理步骤需要用户提供 Quake 共享版或本地 PAK 文件。项目主页 cssquake.com 提供可直接游玩的在线版本，支持 URL 参数分享特定视角和关卡，并允许通过 iframe 嵌入其他页面。