DYSTOPIA 已上线 🌧

一座被雨水浸透的黑色电影风格赛博城市，你可以驾驶、飞行和探索，直接在浏览器中通过 WebGPU 运行。无需安装，无需下载。

▶ https://dystopia-noir.netlify.app

━━ 你要做什么 ━━
你驾驶 SABLE 巡逻，这是一架飞行旋翼机，拥有完整的第一或第三人称驾驶舱。驾驶它，飞行它，把它停在路边。然后放出 KITE，你的无人机，用于近距离观察和探索。

无人机扫描仪几乎能识别所有东西：空中汽车（车牌、飞行员、乘客）、机器人（操作员、任务、固件）、建筑（楼层、租户）、商店、交通信号灯、火车、树木。

━━ 城市 ━━
完全程序化生成，并随着你飞行在你周围流式加载，横跨 4 公里。八个区域，每个都有自己的街头生活：
市中心 · 尖塔区 · 歌舞伎霓虹市场 · 堆栈区 · 交通枢纽 · 南方货运区 · 运河区 · 黑港

• 将 KITE 飞到一扇亮着灯的窗户前，绘制的内部会变成实时 3D 房间，平面图与建筑实际匹配
• 直接飞进科瓦尔斯基酒吧的门或卡莱尔酒店大堂：真实建筑内的真实室内，没有加载画面
• 空中交通按车道飞行。公交车驶入 SKY-STOP 平台，出租车在亮灯的入口放下乘客，货车在装卸口停靠，MPD 巡逻车拦截汽车，且它们都不会阻塞后方车道
• 在地面上，仿生人和机器人道路车队遵守信号灯，并在路口排队：垃圾车抬起路边垃圾桶，重型爬行者由护航无人机伴随移动
• 货运火车配有可运行的平交道口，港口配有可运行的起重机

━━ 视觉风格 ━━
想象《第五元素》遇上《罪恶之城》。低调的黑色夜晚，形态由光线定义，雨水覆盖一切。电影级调色加上漫画小说黑色模式（纸白色、极少色彩）。湿漉漉的街道、路灯光晕、近处阴影，没有任何突兀之处：每个 LOD 变化都是抖动交叉淡化。

━━ 技术内幕 ━━
• three.js r186 · WebGPURenderer · TSL 节点着色器
• Rapier 物理 · Vite · TypeScript
• 确定性生成：每个城市街区都是 (i, j, seed) 的纯函数，在 Web Workers 中构建，并分层流式加载（体量 → 细节 → 物理 → 湿润）
• 预先编译约 630 条渲染管线：启动后 0 次着色器编译，因此游戏中不会卡顿

━━ 仍是开发中 ━━
计划是继续推进细节，完成所有建筑的可探索室内（已经有一些），然后完善游戏部分。

在配备独立 GPU 的桌面版 Chrome 或 Edge 上体验最佳（需要 WebGPU）。所有内容都会预先加载，因此游戏中不会卡顿，所以请给它一分钟启动时间。

#threejs #WebGPU #gamedev #indiedev #cyberpunk #noir #procedural #creativecoding #Claude (#Opus 5.5)

@guidorosso @RyanSael 👀