A walkable ASCII cyberpunk city in one HTML file [video]

TL;DR：开发者用单个HTML文件和JavaScript canvas构建了一个可步行的ASCII赛博朋克城市，通过自定义3D引擎将城市渲染为ASCII字符。 ## 项目概述 这个项目旨在用纯粹的ASCII符号构建一座充满生命力的赛博朋克城市。最初的想法是创造一种体验，让用户仿佛漫步在一个由数据构成的世界里，而不仅仅是展示平面的图像效果。项目运行在一个为这个项目编写的迷你自定义引擎上，仅用JavaScript和canvas，所有代码都塞在单个HTML文件里，没有使用Unity或Unreal引擎，也没有三维模型、纹理或着色器。 ## 技术实现 ### 自定义引擎 整个系统的底层是一个基于网格的三维世界。城市储存着道路、建筑、树木、车辆、行人的位置信息，也包括建筑高度等数据。 ### 3D世界结构 这个3D世界基于网格结构，存储了城市中各种元素的位置和高度数据。每一帧，渲染器都会从摄像机视角向网格投射光线，找出每条光线首先击中的物体。 ### 渲染过程 渲染器利用距离来计算透视关系、物体大小、景深效果，以及判断哪些物体应该被其他物体遮挡。引擎还负责正确处理碰撞检测，确保车辆、行人以及其他特定物体之间前后的空间关系正确无误。所有这些都没有用常规的图形渲染，而是转化为canvas画布上的字母、数字和符号。 ## ASCII可视化 ### 近远物体处理 近处的物体由更大、更明亮的字符群构成。远处的物体则变得越来越小，并渐渐融入黑暗背景。简单来说，这是一个由字符方块构成的迷你3D城市，而你正透过一层ASCII字符的屏幕来观察它。 ## 未来计划 开发者表示会继续完善这个原型，并欢迎分享看法。 Source: [YouTube Video](https://www.youtube.com/watch?v=3YtygAx_C6A)