摘要
- 一段没有借助游戏引擎、仅用JavaScript和Canvas写成单个HTML文件制作的ASCII 3D城市视频,在Hacker News上引发热议。
- 项目在网格化世界中运用光线投射技术,单靠字符和符号就表现出了透视感、深度和遮挡关系。
- 随后又推出了两支加入交通、室内场景和高层建筑的续篇视频,这个原型仍在持续进化。
在屏幕里行走的文字城市
一位开发者制作的“ASCII城市”视频在Hacker News上获得200多票推荐,引发热议。视频里既没有用到3D模型,也没有贴图或着色器。填满画面的只有字符、数字和符号,可建筑、道路、来往的车辆和行人的位置却都在实时移动。制作者在视频中解释道:“我想看看能不能做出一座让人感觉‘活着’的城市。”
光线投射,一项老技术的重现
这个原型的核心是光线投射技术。光线投射是一种3D渲染方式:从摄像机向网格发射光线,找出每条光线最先碰到的物体,再根据这个距离计算出透视感、大小和遮挡关系。在GPU驱动的3D引擎普及之前,早期的3D游戏就很喜欢用这种手法。这个项目把这项老技术重新翻了出来,只是把渲染结果从多边形换成了字符。
即便同样是搭建3D世界,不同项目的思路也大相径庭。正如《腾讯发布文本生成3D开放世界工具"Hy3D WorldClaw"》一文所提到的,近来3D世界生成的趋势是:只需输入文本提示,智能体工作流就能自动生成游戏所需的素材。而这次的ASCII城市正好走了一条相反的路——没有AI模型,也没有提示词,完全靠一位开发者手写的渲染逻辑,就搭建出了一个可以行走的世界。
引擎内部发生的事
根据视频中的说明,这套引擎以网格形式存储整个3D世界的数据。道路、建筑、树木、汽车、行人的位置,乃至建筑高度这类信息,都被塞进了这个网格里。每一帧,渲染器都会从摄像机所在位置朝多个方向发射光线,找出每条光线最先碰到的物体,再用这个距离来计算透视感、大小、深度以及是否被遮挡。同时,引擎还要处理汽车与行人的碰撞,以及决定各个物体在前后排列上的先后顺序。
计算出的结果不是用普通图形渲染,而是画成Canvas上的字符、数字和符号。近处的物体呈现为又大又亮的字符块,远处的物体则逐渐变小,并隐没进黑暗之中。
三支视频串联起来的更新
除了这次引发关注的视频之外,同一个项目还有另外两支视频。一支是打磨了交通流和细节表现的《ASCII City: Traffic and Detail Update》,另一支是加入室内空间、高度差和高层建筑的《ASCII City Update: Interiors, Elevation and Skyscrapers》。这个原型最初只是一条可以行走的街道,经过几轮更新之后,已经发展到能填充车流、建筑内部乃至垂直结构的程度。制作者在视频末尾表示,自己打算继续折腾这个原型。
编辑视角
如今关于打造3D世界的消息大多来自AI领域。用几行文字就能生成游戏素材的智能体工作流不断涌现,报道的重点也常常落在成果的规模和完成度上。但这次的ASCII城市从相反的方向吸引了眼球——没有一个AI模型,甚至连游戏引擎都没用,单靠JavaScript的Canvas和光线投射这种古老的数学方法,就做出了一个可以行走的世界。
过去想要跑起一个3D世界,光是安装引擎、配置素材库这些准备工作就得花不少时间。而这个原型证明,事情还有另一个极端的做法存在。只需打开一个HTML文件就能运行,这意味着部署和分享变得极其简单——对那些制作浏览器端原型、参加游戏节或做实验性网页艺术的开发者来说,这提供了一个实用的思路:不用背负沉重的引擎,也能做出有沉浸感的空间。对于想要快速验证想法的国内开发者或小团队而言,这种低依赖的渲染方式依然大有用处。
从制作者已经两次更新、陆续加入交通、室内、高层建筑等元素来看,下一步很可能会加入声音或NPC行为之类的内容。当AI不断提升3D世界生成的速度时,这类手写代码的项目也能同时引发关注,这本身就说明如今创作工具的版图已经变得多么宽广。
评论