← #799

一个 ASCII 字符的 3D 渲染引擎

文章摘要

glyphcss 是一个把 3D 模型转换成 ASCII 艺术的渲染库，它把整个 3D 场景渲染为单个 HTML <pre> 元素中的纯文本。与常见的 WebGL 或 Canvas 方案不同，glyphcss 完全走的是基于 CPU 的光栅化路线：它加载 3D 网格文件（支持 OBJ、glTF、GLB、STL，以及 MagicaVoxel 的 VOX 格式），然后把每一个多边形投影到一个 cols × rows 的字符网格中进行填充，每一帧只向 textContent 写入一个字符串。

这种实现思路最大的特点是极度轻量和可检查性：页面中不存在为每个多边形创建的 DOM 节点，只有一段文本输出。无论模型多复杂，输出尺寸只取决于网格分辨率——作者举例说，一个约 150×50 字符的网格输出大约只有 10 KB，而画廊里的源模型文件本身往往有 300 KB 左右。ASCII 的渲染是从网格实时计算出来的。

在功能层面，glyphcss 支持多种 3D 文件格式，能处理 UV 贴图和材质颜色；可以在原生 JavaScript、React、Vue 乃至终端环境中使用。它提供了自定义 Web 组件（如 <glyph-scene>、<glyph-mesh>）、一套命令式 API，以及各框架的专用绑定。它还支持可选的”热点”（hotspots）功能，允许在特定的 3D 锚点上绑定点击/悬停事件，这些交互元素以绝对定位的 DOM 元素呈现，并使用语义化 HTML（如 role="button"）来保证可访问性。作者刻意不使用 GPU 渲染，把这当作一种自我设定的创意约束。

HN 评论精华

smalltorch（209 赞）：盛赞这个引擎的明暗着色处理非常出色，能有效营造出视觉上的纵深感和立体感，这是整个演示中最受好评的部分。
khazhoux：为这个项目辩护，认为它的价值在于”酷”而非实用性。这是一个把美学和趣味放在首位的爱好项目，不必用实用主义的标准去苛求。
Retr0id：从技术角度提出批评，指出由于完全用 CPU 渲染、不走 WebGL，在桌面端会出现 CPU 占用被打满（CPU pegging）的问题。
关于”不用 WebGL”的设计选择引发了不少争论。支持者认为这是有意为之的创意约束，并且带来了实际好处，比如对远程桌面（remote desktop）环境的良好兼容性——纯文本输出在低带宽场景下天然友好。也有人建议折中方案：用 WebGL 做渲染计算，但仍把结果输出到 <pre> 标签中，以获得性能提升。
Jesse__ 报告了移动端交互冻结的问题，据称作者随后已修复。
评论区还出现了关于 AI 辅助开发的元讨论：有人注意到项目的 AGENTS.md 文件中有不鼓励标注 Claude 署名的提示，由此引发了对爱好项目中 AI 使用与披露规范的讨论。
deftio 请求增加命令行版本，作者（apresmoi）回应称正在开发一个控制台版本。