我一直在开发一款名为《无尽博物馆》的浏览器游戏,它将维基百科文章变成可以自由漫步的房间。其中的链接化作通往其他文章的门,你可以在博物馆里闲逛,或者尝试用最短路径穿梭于两个主题之间。游戏使用TypeScript和three.js构建,我认为其中连接房间时遇到的一些问题可能会引起大家的兴趣。

没有合理的方式将所有房间整合到一栋建筑中。一篇文章可能链接到数百篇其他文章,而沿着几个链接前进,又可能绕回你曾去过的房间。因此房间之间重叠相当严重,只要你看不到不该看的房间,这倒也无伤大雅。

当前房间正常绘制,然后每个相邻房间通过其门洞利用模板缓冲区进行渲染。首先我会标记门洞的可见部分,然后重置该区域内的深度缓冲,这样当前房间就不会阻碍下一个房间的绘制。每个目标房间都会被移动和旋转,使其入口与门对齐,这样我就可以使用同一个摄像机。

遗憾的是,隐藏其他房间并不能阻止你撞上它们的墙壁。最初我以每个门洞周围的半径为基准,决定何时激活下一个房间的碰撞检测。对于小门来说,这个方法效果尚可,但较大的拱门可能会激活一面墙,从而阻挡其他完全不同的出口。现在我会检查玩家到门洞的距离以及其在门洞开口中的位置,使碰撞区域更贴近你实际穿越的位置。

竞速模式也遇到了单独的问题。维基百科的链接数据包含来自导航栏和其他页面部分的链接,而这些链接并不一定会被房间生成器使用。这意味着我可能找到一条需要某个不存在的门的两篇文章之间的路径。现在,自定义竞速在启动前会逐条检查每个步骤是否经过解析后的文章链接,如果连接缺失,会尝试短距离绕行。

我在博客里写了更多实现细节,包括房间布局、传送门渲染和加载工作:

从维基百科生成可漫步的博物馆

很高兴在这里深入探讨其中的任何细节。