一个纯网页的开放城市赛车游戏：Three.js + WebGPU 撑起 50+ 任务、多人联机与动态雨夜

来源：项目站 threejspunk.com · three.js 官方论坛原帖 · FWA 案例页 原文链接：https://www.threejspunk.com/

结论先行

巴西创意开发者 Anderson Mancini dos Santos 用 Three.js + WebGPU 做了一个浏览器里直接打开就能玩的开放城市赛车游戏 Night Drive Racing Game（项目名 ThreeJS Punk）：

  • 免费游玩，桌面端与移动端都能跑，不需要安装任何东西；
  • 一个巨大的城市、50+ 任务、多辆车、沿路可收集的道具、雨天街道漂移；
  • 技术栈是 WebGPU + TSL + GPUCompute + 自定义着色器 + 物理 + 动态雨 + 实时反射，其中一部分渲染技术是专门为这个作品开发的；
  • 2026-09-29 在 three.js 官方论坛发布，10 月初拿到 FWA of the Day（88 分，投票 4 天），10 月 14 日进入 Awwwards Nominee；
  • 10 月 2 日追加了免费多人联机——可以邀请朋友一起在线赛车。

作者对这件事的定性很直接："This is NOT a demo. It's a full racing game."（这不是 demo，这是一个完整的赛车游戏。）以及 "The goal was not to create another tech demo, but a game people can actually play and explore."

这个自我要求本身就是这条资讯里最有价值的部分。 浏览器 3D 领域从不缺惊艳的渲染演示，缺的是有人愿意把演示做成一个有任务、有玩法、能玩几个小时的东西。渲染技术的天花板和游戏的完成度，是两件不同的事——这个作品难得地把两件事同时做到了。

雨夜霓虹街道中的赛车：车尾灯拖出橙红色光带，湿滑路面映着紫色与青色的霓虹倒影，左下角是小地图、右下角是时速表 HUD

来源说明

本文的一手来源有三处：

  1. three.js 官方论坛原帖（discourse.threejs.org，2026-09-29 作者本人发帖，后续跟帖中有作者的多次直接回复）——这是信息量最大的来源，多人联机、后续计划、性能优化都是作者在跟帖里说的；
  2. FWA 案例页（thefwa.com）——官方项目描述与获奖数据；
  3. 项目站 threejspunk.com——作品本身。

作者背景来自 JS GameDev Summit 2023 的公开演讲介绍，以及作者本人在论坛的发言。

需要注意：官方与作者都没有公开任何性能数字——没有帧率、没有多边形数、没有 draw call、没有内存占用。本文所有关于"体量"的描述都来自官方文案与作者自述，不是实测结论。

要点解读

1. 它是什么：先看体量清单

FWA 案例页给的项目描述，逐条拆开看：

维度内容
类型免费游玩的赛车游戏（free-to-play racing game）
场景一座巨大的城市，可自由探索
内容量50+ 任务、多辆车、沿路收集物
玩法任务、漂移（雨天街道）、收集、换车
平台桌面端 + 移动端，浏览器直接打开
渲染真实感渲染、物理、反射
技术WebGPU、TSL、GPUCompute、自定义着色器

"50+ 任务"这个数字值得单独拿出来看。 它不是"50 个渲染 demo"，是 50 个游戏任务——这意味着背后有任务系统、状态管理、进度存档、UI 流程。这些是游戏工程，不是图形工程。 一个人把这两块都做完，是这个作品最被低估的地方。

本站整理的项目技术拆解图：左栏是项目规模（50+ 任务、巨大城市地图、多辆车与收集物、雨天漂移、桌面端+移动端、免费游玩），右栏是技术栈（WebGPU、TSL、GPUCompute、自定义着色器、物理系统、动态雨与实时反射）

2. 技术栈逐项拆解：TSL 和 GPUCompute 是什么

技术栈里有两个词对只熟悉 WebGL 的读者可能比较陌生，这里展开说：

技术是什么在这个项目里的作用
WebGPU浏览器的新一代图形与计算 API，替代 WebGL渲染后端。相比 WebGL 支持更现代的 GPU 特性，且原生支持计算着色器
TSL（Three.js Shading Language）three.js 的节点式着色器语言，用 JavaScript 语法写着色器，编译到 WGSL 或 GLSL写材质与效果，不必直接手写 WGSL，同时保留对渲染管线的细粒度控制
GPUCompute用计算着色器在 GPU 上做通用并行计算（不是画图）把原本在 CPU 上做的批量运算搬到 GPU，例如大量实例的更新、粒子、雨滴
自定义着色器官方描述为"为该体验专门开发的若干渲染技术"具体是哪些技术，官方没有逐一说明

为什么"TSL + GPUCompute"这个组合值得注意：WebGL 时代想做 GPU 通用计算很别扭（要靠 transform feedback 之类的绕法）；WebGPU 把计算着色器做成一等公民之后，渲染和计算第一次在浏览器里可以用同一套资源与管线来描述。TSL 则进一步把这件事拉到了 JavaScript 层面——不需要写 WGSL，也能吃到 WebGPU 的能力。这个项目的技术选型，基本踩在 three.js 当前最前沿的那条路上。

3. 作者是谁：一个巴西创意开发者

Anderson Mancini 是巴西的创意开发者，Neltix 创意工作室的创始人兼 CTO。他在 2023 年的 JS GameDev Summit 上做过一场《Game Development with Threejs》的分享，自述约四年前开始用 three.js，之前用 Macromedia Flash 做 3D 建模——Flash 退场之后，他把 3D 能力搬到了 Web 上。

"从 Flash 时代一路做到 WebGPU"这个履历线索，比任何技术清单都更能说明问题。 这类开发者的共同点是：对"在浏览器里做出有质感的东西"有长期的执念，而且经历过技术栈的多次换代。FWA 的记录显示这是他个人的第 2 个 FWA——不是偶然撞上一次。

另据第三方设计资讯站 Peek Paper 的记录（2026-09-30），这个项目的实时 WebGPU / Three.js / TSL 部分由 Anderson Mancini 与 Sunag 共同完成。Sunag 是 three.js 社区里 TSL 的核心开发者之一——如果这条记录属实，那这个项目的 TSL 用法大概率是"贴近作者本人意图"的用法，而不是摸索出来的野路子。该协作信息来自第三方站点，官方页面未单独列出，请以官方为准。

4. 发布之后：多人联机与后续计划

这是从 three.js 论坛跟帖里挖到的、其他报道基本没提的部分：

时间事件来源
2026-09-29作者在 three.js 官方论坛发帖发布作品论坛原帖
2026-09-29有用户反馈"在我公司配置的笔记本上也跑得很好"，作者回"我花了很多时间做优化"论坛跟帖
2026-10-02作者发帖：多人联机已上线，免费，可邀请朋友一起比赛论坛跟帖
2026-10-07作者回应玩家反馈：正在加更多车辆与带动画的 NPC，并计划再做一张雨天白天的城市地图论坛跟帖

多人联机的实现方式，作者说得也很实在：当被问及是否自建了服务器时，作者回答 "I'm using CloudFlare service for that, for now"（目前用的是 Cloudflare 的服务）。

"for now"这两个字很关键。 它说明联机部分是在一个托管服务上快速跑起来的，不是自研的实时同步架构。这对想抄这条路的人是个有用的提示：先把多人跑通，架构以后再说——这是独立开发者该有的优先级排序。

另外，玩家反馈里出现了一条负面意见——"玩久了有点重复，NPC 如果有配音会好很多，挑战也需要更丰富"。作者认真回应了并给出了具体计划。一个作品被认真对待的迹象，往往不在发布稿里，而在作者怎么回复批评。

5. 官方没有公开的数据

必须把这一节写出来，因为很多转发会把"技术栈"直接等同于"性能"：

  • 没有帧率：桌面端、移动端各跑多少帧，没有任何数字；
  • 没有场景规模数据：城市有多大、多少面数、多少 draw call，都没说；
  • 没有内存占用：浏览器内存上限是这类项目的老大难，官方未提及；
  • 没有移动端的具体表现：只说了"支持移动端"，没给机型或体验描述；
  • 唯一的性能旁证是一条用户反馈：一位用户在论坛说"在我公司配置的笔记本上也能跑得很好"。这是单个用户的定性反馈，不是可复现的测试。

本站判断

第一，这是"WebGPU 能承载什么"的一个可验证样本，而不是又一次炫技。 站内 62 篇 WebGPU 教程讲的都是单项技术——管线、缓冲区、纹理、计算着色器。这个作品回答的是另一个问题：把这些技术全用上，能撑起多大一个东西。 答案是"一座城市、50 多个任务、还能加多人联机"。这个答案比任何 benchmark 都有说服力。

第二，它把浏览器 3D 的瓶颈位置往前推了一格。 过去讨论浏览器 3D，核心问题是"跑不跑得动"。这个项目的瓶颈明显已经不在渲染——而在内容量和玩法深度（玩家抱怨的是"任务重复"，不是"卡顿"）。当玩家的批评从性能转向内容，说明技术这条线基本过关了。 这是整个 Web 3D 领域都该注意的信号。

第三，一个人 + TSL/GPUCompute，工具链成熟度已经到了可以做完整游戏的程度。 作者是创意工作室的 CTO，有 3D 建模与 Flash 时代的底子，但他不是一支引擎团队。他能做出这个体量，一半靠自己，另一半靠 three.js 这几年的演进——TSL 让着色器不用手写 WGSL，GPUCompute 让并行计算有了正当路径。这两件事在 WebGL 时代都要费很大劲。

第四，对做数字孪生和可视化交付的人，这套技术组合值得直接对照。 这个项目用到的东西——城市级场景、实时反射、动态天气、移动端可用、浏览器直开——和智慧城市可视化项目的需求清单高度重合。它证明的不只是"游戏能做"，而是"一个浏览器里的大场景，可以做到实时反射和动态雨的程度"。这是给客户看 Demo 时可以引用的公开案例。

第五，但要克制外推。 没有帧率、没有硬件配置、没有场景规模数据，就不能说"WebGPU 跑城市级场景没问题"。能确定的是"有人做到了"，不能确定的是"在什么条件下、什么设备上、多大场景"。把它当方向确认，不当性能承诺。

第六，最后说一句关于"作品"这件事。 作者那句 "not another tech demo" 是有分量的。浏览器 3D 圈子里，每年都有大量视觉效果惊艳、但打开五分钟后不知道该干什么的演示。能把东西做完、让人玩下去，是一种比渲染技巧更稀缺的能力。 对以交付为生的人来说，这个作品的真正启示在这里。

参考来源

  1. 项目站（作品本体）：https://www.threejspunk.com/
  2. three.js 官方论坛原帖（2026-09-29，作者本人发布，跟帖含作者对多人联机、优化与后续计划的回复）：https://discourse.threejs.org/t/free-game-cyberpunk-inspired-game-realistic-graphics/94779
  3. FWA 案例页（官方项目描述与获奖数据，88 分 / 4 天，Credits: Anderson Mancini dos Santos）：https://thefwa.com/cases/night-drive-racing-game
  4. 作者背景：JS GameDev Summit 2023 演讲《Game Development with Threejs》讲者介绍（Neltix 创始人兼 CTO）
  5. 第三方记录：Peek Paper《Threejs-Punk Drive》（2026-09-30，提及 TSL 部分与 Sunag 协作，未经官方确认）