网易首页 > 网易号 > 正文 申请入驻

德国雕塑家死后20年,他的几何美学被程序员复活成3D引擎

0
分享至


一个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的代码生成什么?一个建筑草图,一张算法海报,还是某种尚未命名的视觉语言?

特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
石宇奇领奖眼睛笑成一条线!距全满贯只差2冠 赛后称目标奥运夺金

石宇奇领奖眼睛笑成一条线!距全满贯只差2冠 赛后称目标奥运夺金

颜小白的篮球梦
2026-04-12 20:10:01
越扒瓜越大!外媒再曝全红婵被霸凌猛料,远不止言语辱骂这么简单

越扒瓜越大!外媒再曝全红婵被霸凌猛料,远不止言语辱骂这么简单

社会日日鲜
2026-04-10 10:38:17
13岁男孩被拦路钢丝绳割断气管,妈妈患白血病,雪上加霜家庭泪目

13岁男孩被拦路钢丝绳割断气管,妈妈患白血病,雪上加霜家庭泪目

天天热点见闻
2026-04-12 18:33:17
世锦赛战报:塔猜亚4-5,三冠王2-7,江俊4-4,外协19岁小将6-3

世锦赛战报:塔猜亚4-5,三冠王2-7,江俊4-4,外协19岁小将6-3

求球不落谛
2026-04-12 20:19:15
支持中国分裂,拒飞内地航线,歧视大陆游客的国泰航空,如今怎样

支持中国分裂,拒飞内地航线,歧视大陆游客的国泰航空,如今怎样

小莜读史
2025-12-15 21:00:06
56岁的王菲现身西藏,打扮的很高级,不愧是经常拜佛的人

56岁的王菲现身西藏,打扮的很高级,不愧是经常拜佛的人

乡野小珥
2026-04-11 01:30:53
洗碗机砸家反转!丈夫降薪扛,妻子卖金买苹果17月吃4次海底捞

洗碗机砸家反转!丈夫降薪扛,妻子卖金买苹果17月吃4次海底捞

深析古今
2026-01-10 13:58:59
王石发文辟谣被抓传闻:一切安好,造谣者交给法律,妻子田朴珺:造谣是不需要付出代价的吗?

王石发文辟谣被抓传闻:一切安好,造谣者交给法律,妻子田朴珺:造谣是不需要付出代价的吗?

极目新闻
2026-04-12 19:48:55
下个月开始,大多数老人或面临这“4大难关”,早了解早受益

下个月开始,大多数老人或面临这“4大难关”,早了解早受益

小谈食刻美食
2026-04-12 09:50:12
微信右上角“+”号点一下,谁把你删了一目了然!对方还蒙在鼓里

微信右上角“+”号点一下,谁把你删了一目了然!对方还蒙在鼓里

娱乐圈见解说
2026-04-12 17:59:09
卡塞米罗:林加德这种水平的球员加盟对巴甲是好事啊

卡塞米罗:林加德这种水平的球员加盟对巴甲是好事啊

懂球帝
2026-04-12 21:24:03
怎么会有如此颠倒黑白、罔顾历史的儿童读物?

怎么会有如此颠倒黑白、罔顾历史的儿童读物?

作家加野
2026-04-11 12:46:50
美智库:"俾路支解放武装"如何一步步成为中国的大麻烦?

美智库:"俾路支解放武装"如何一步步成为中国的大麻烦?

混沌录
2026-04-11 20:35:09
1987年,他按正军职离休6年,被改为正师待遇,要求来人给个说法

1987年,他按正军职离休6年,被改为正师待遇,要求来人给个说法

秀心文雅
2026-04-12 07:05:03
争议?王大雷开球听到裁判哨声后顺势倒地 万名河南球迷一起国骂

争议?王大雷开球听到裁判哨声后顺势倒地 万名河南球迷一起国骂

风过乡
2026-04-12 12:23:41
广东男篮91-85胜广厦,赛后评分:2人满分,4人及格,2人拉胯

广东男篮91-85胜广厦,赛后评分:2人满分,4人及格,2人拉胯

小李说球赛
2026-04-12 21:34:49
知名网站宣布:5月1日停止服务!用户超8000万,抓紧退费!很多人用过

知名网站宣布:5月1日停止服务!用户超8000万,抓紧退费!很多人用过

南方都市报
2026-04-11 20:29:45
对中国的制裁来了!意大利政府这次是打算明抢了!

对中国的制裁来了!意大利政府这次是打算明抢了!

达文西看世界
2026-04-12 13:49:52
68岁钢筋大爷:每月给搭伙老伴3500,因吃不上一顿可口的饭菜散伙

68岁钢筋大爷:每月给搭伙老伴3500,因吃不上一顿可口的饭菜散伙

施工员小天哥
2026-04-12 20:19:26
赛季结束后,广东男篮9人合同到期,谁会留下?谁会离开?

赛季结束后,广东男篮9人合同到期,谁会留下?谁会离开?

男足的小球童
2026-04-11 19:19:57
2026-04-12 22:11:00
灰度测试中
灰度测试中
生活正在重构,目前还在灰度测试阶段,暂不全量发布。
1215文章数 15关注度
往期回顾 全部

科技要闻

理想称遭恶意拉踩,东风日产:尊重同行

头条要闻

媒体:美伊面对面长谈20多小时无果 其实早有预兆

头条要闻

媒体:美伊面对面长谈20多小时无果 其实早有预兆

体育要闻

创造历史!五大联赛首位女性主教练诞生

娱乐要闻

赌王女儿何超蕸病逝,常年和乳癌斗争

财经要闻

美伊谈判破裂的三大症结

汽车要闻

焕新极氪007/007GT上市 限时19.39万起

态度原创

本地
手机
房产
公开课
军事航空

本地新闻

12吨巧克力有难,全网化身超级侦探添乱

手机要闻

曝苹果已解决iPhone Ultra折叠手机两大核心问题

房产要闻

土地供应突然暴跌!2026海口楼市,格局大变!

公开课

李玫瑾:为什么性格比能力更重要?

军事要闻

美国副总统万斯:美伊谈判未能达成协议

无障碍浏览 进入关怀版