一个4KB的JavaScript文件，能把3D体素场景渲染成矢量图。开发者用德国雕塑家Erwin Heerich（1922–2004）的名字命名它——这位以混凝土几何体闻名的艺术家，生前大概想不到自己的美学会被写进代码。
heerich.js的核心逻辑很克制：在三维网格里堆叠、切割、镂空，最后投影成SVG。不是WebGL那种追求帧率的路线，它赌的是另一件事——矢量图能无限缩放、能被CSS操控、能直接塞进DOM。输出结果不是像素缓存，而是带语义的标记语言。
这种选择本身就有态度。当整个行业往实时渲染狂奔时，有人回头啃起了平面几何。
三行代码搭一个3D引擎
heerich.js的入口极简。new Heerich() 可以接受配置，也可以什么都不给——内部有一套默认值兜底。tile控制每个体素的像素尺寸，camera决定投影方式，style定义填充和描边。
引擎内置的投影叫"oblique"（斜二测），角度315度，距离25个单位。这种投影方式没有灭点，平行线保持平行，视觉上更像工程制图而非真实透视。Heerich本人晚年大量使用的混凝土模块，正是以类似逻辑堆叠的。
调用engine.toSVG()会返回字符串，直接扔进DOM就能渲染。引擎自动计算所有可见几何的包围盒，设置viewBox，可选padding。形状延伸到负坐标也不需要手动调整——这个细节省掉了很多调试时间。
需要原始边界数据的话，engine.getViewBoxBounds()返回{x, y, w, h}。对于需要响应式布局的场景，这个接口够用。
体素即雕塑：从方块到负空间
最基础的单元是addBox()。传入position和size，引擎在三维网格里标记对应位置的体素，赋予默认样式。6×4×3的方块，就是18个体素的实心矩形。
但Heerich的雕塑语言不止于堆积。他的混凝土结构常以"减法"定义空间——实体之间的缝隙、穿透的孔洞、被切除的体积。heerich.js复制了这套语法：通过布尔运算，可以用一个几何体去雕刻另一个。
想象你有一整块大理石，先切出大致轮廓，再挖掉内部通道。代码里的实现是叠加多个操作，最终投影时只渲染表层可见的体素。负空间获得了和实体同等的表达力。
这种"程序化凿子"的比喻来自文档本身。开发者显然熟悉雕塑的工作流程——不是从0开始建模，而是从原材料中逐步显现形态。
SVG的隐藏优势：DOM原住民
选择SVG而非Canvas或WebGL，heerich.js放弃的是帧率，换取的是架构层面的自由。SVG元素是DOM节点，意味着：
CSS可以直接作用于几何体。hover状态、过渡动画、媒体查询——不需要额外的渲染循环。一个@media (prefers-color-scheme: dark)就能切换整套配色。
事件委托自然生效。点击某个体素？就是普通的DOM事件，不需要射线检测或拾取计算。
无障碍支持相对完善。SVG支持title和desc标签，屏幕阅读器能解析结构化的图形语义。
分辨率无关。打印、高分屏、投影放大，不会看到锯齿。对于需要输出到物理媒介的场景（海报、出版物），这是硬性需求。
这些特性在游戏引擎里是奢侈品，在信息可视化、建筑示意、艺术装置领域却是基础设施。
为什么是现在：体素的复兴
体素（voxel）从未真正离开。Minecraft证明了低分辨率三维的感染力，MagicaVoxel让独立创作者有了趁手的工具，而神经辐射场（NeRF）和3D高斯溅射（3D Gaussian Splatting）正在模糊体素与点云的边界。
heerich.js的定位很精确：不做实时交互，不做物理模拟，专注静态构图的生成与输出。它适合的场景是——算法艺术、建筑草图、教学演示、需要印刷级精度的插图。
文档里的交互示例用滑块控制参数，引擎每帧清空重建。这种"暴力刷新"在复杂场景下性能堪忧，但对于探索参数空间、理解几何关系，足够直观。
Erwin Heerich本人在2004年去世，晚年作品以大型混凝土模块为主，强调材料质感与空间节奏的对话。heerich.js的命名是一种致敬，也是一种挪用——把雕塑家的形式语言翻译成程序接口，让使用者能以代码复现那种"堆叠与镂空"的美学。
一个有趣的对照：Heerich的实体雕塑需要数月浇筑、吊装、调整，而代码里的几何体在毫秒级生成。但两者的核心问题没变——如何在三维空间中安排实体与虚空，让观看者感知到结构本身的张力。
这个项目的技术栈极其精简。纯JavaScript，无依赖，源码可以直接阅读。对于想理解三维投影、体素数据结构、SVG生成的开发者，它是一个可触摸的参考实现。
文档最后留了一个开放的画廊界面，每个示例都是可交互的教程。从单个方块到复合结构，学习路径是渐进式的。没有视频讲解，没有API大全，只有代码和即时反馈。
这种呈现方式本身就在筛选用户：需要快速出图的设计师可能会转向更成熟的工具，而愿意啃源码、调参数的人，会发现heerich.js的约束恰恰是创造力的边界。
heerich.js的GitHub仓库没有星数统计，文档底部也没有版权声明。它像一件被放在公共工作台边的工具，用过的人自然知道该拿它做什么。
当3D引擎的默认设定越来越偏向"真实感渲染"时，heerich.js提醒了一件事：投影方式是一种选择，分辨率是一种选择，甚至"什么是三维"也是一种选择。德国雕塑家用混凝土追问过这些问题，现在轮到JavaScript了。
你会用4KB的代码生成什么？一个建筑草图，一张算法海报，还是某种尚未命名的视觉语言？
热门跟贴