mrdoob 的 Starter Kit Racing 加上 drift marks：純 Three.js、沒 build step、分享關卡靠 URL
Three.js 作者 mrdoob 把 Kenney 的 Starter Kit Racing 從 Godot 移植到純 JavaScript，用 crashcat 做物理。最新更新加上 drift marks——輪胎痕在賽道上留下軌跡。沒有 build step，沒有框架，關卡存在 URL 裡。這是 web 遊戲最被低估的一條路。
目錄+
mrdoob 這則貼文只有一句話加兩個連結：「And now... drift marks!」配上一個在賽道上漂移留下輪胎痕的影片。但這個小更新背後的整個專案，對做 web 互動的人來說是一份值得完整拆開的參考。
這是 Three.js 作者 Ricardo Cabello（@mrdoob）把 Kenney 的開源賽車遊戲起手套件從 Godot 引擎移植到純 JavaScript + Three.js 的成果，專案叫 Starter Kit Racing（GitHub 上已有 26 次 commit）。
為什麼值得看
先說結論：它是目前 Three.js 生態裡最乾淨的「遊戲 + 編輯器」起手範本，而且幾乎沒有依賴。
開打 GitHub repo 看專案結構：
editor.html ← 軌道編輯器
index.html ← 遊戲本體
audio/
js/
models/
sprites/
CLAUDE.md
沒有 package.json，沒有 Vite config，沒有 TypeScript，沒有 node_modules。打開 index.html 就能跑，把整個資料夾丟到任何 static hosting 就能 deploy。
這不是炫技或懷舊。這是一個對照實驗：**現代 web 遊戲開發到底需要多少 build-time 工具鏈？**答案是——對於這個規模的遊戲，完全不需要。
drift marks 這次更新在做什麼
影片裡可以清楚看到：車子在賽道上做漂移時，輪胎會在地面留下深色痕跡，而且痕跡會隨時間逐漸淡化。這是典型的 WebGL decal（貼花）技術實作。
在 Three.js 裡做 drift marks 通常有三種做法：
- 動態產生 quad geometry + alpha texture：每個時間步驟，根據車輛的輪胎位置與速度向量，生成一組貼地的四邊形，貼上輪胎痕材質。優點是簡單，缺點是 quad 數量爆炸時記憶體會撐。
- Render-to-texture 累加：把輪胎痕畫到一張 render target 上，每 frame 疊加 + 衰減。優點是幾何複雜度固定，缺點是 texture 解析度決定痕跡清晰度。
- Decal mesh projection：Three.js 有內建
DecalGeometry，可以把痕跡直接投影到賽道幾何上。
從 mrdoob 過去的 commit 風格看，Starter Kit Racing 很可能走第 2 種——因為整個專案的美學是「資源固定、狀態可序列化」。
「分享關卡靠 URL」是整個設計最聰明的地方
WebGPU.com 在 showcase 介紹這個專案時特別點出：編輯器產生的賽道可以直接透過 URL 分享。
這背後的設計假設是：賽道資料量夠小，能完整 base64 編碼塞進 URL query string。你在編輯器拼好一條賽道，按 share，拿到一條連結，對方點開就能跑那條賽道——不需要後端、不需要資料庫、不需要帳號。
這個模式其實跟 GLSL Sandbox（也是 mrdoob 的作品）、Shadertoy、P5.js Editor 的分享機制同源：把互動作品的狀態塞進 URL，就讓 web 同時是引擎、是編輯器、是分發管道。
對比今天 Unity 或 Unreal 的 web build——動輒 30MB WASM、還需要 loading screen——這個方向是完全相反的技術哲學。
這個專案的對照脈絡
mrdoob 最近兩年做了一系列類似規模的實驗：
- Three.js Quake（2026 年 1 月）：用 Claude Code 在幾天內做出一個可玩的 Quake demo。LinkedIn 上 Paul Sawaya 的那篇觀察文說「Claude Code 在 mrdoob 手上比在初級工程師手上強得多，資深工程基本功仍然重要」——這是對 AI coding 工具的其中一個務實判斷。
- Starter Kit Racing：本文主題，Godot → Three.js 移植。
- Shared Canvas（2020）：多人協作白板，同一邏輯。
把這三個放在一起看，會看到同一個主題：web 是最被低估的互動執行環境。沒有 App Store 審核、沒有下載門檻、沒有平台特定 SDK、分享成本是零。
對照一個商業案例：Circuit Superstars
Starter Kit Racing 的視覺與玩法，會讓看過 Circuit Superstars 的人立刻想到它。這是 Original Fire Games 在 Steam 上發行的 top-down 賽車遊戲，2021 年 Early Access，2023 年 10 月 31 日 1.0 正式版（Steam 商店頁）。
共通點相當明顯：
- 俯視角度（top-down），鏡頭維持在車輛上方，不處理第三人稱視角的複雜遮擋
- 小巧圓潤的車型，走的是 Micro Machines 或 Mario Kart 混合風格
- 軌跡物理——輪胎痕、甩尾、煞車抓地感是整個體驗的核心
Circuit Superstars 在 Steam 上 1,363 則英文評論有 85% 好評，Metacritic 82 分，The Race 形容它是「Mario Kart 與 Micro Machines 的賽車運動之子」。它有 16 個類別的車輛、32 條賽道、完整的 pit stop 策略（輪胎消耗、油料、損傷），是一個花了五年時間打磨的商業產品。
把這兩個專案並排看，就會看到 web 開源路線跟商業遊戲路線的真實差距在哪裡：
| 面向 | Starter Kit Racing（mrdoob） | Circuit Superstars（Original Fire Games） |
|---|---|---|
| 引擎 | 純 JavaScript + Three.js，無 build step | 商業引擎，Windows 8.1+，4GB RAM，DirectX 11 |
| 規模 | 一個編輯器 + 單一賽車，26 commits | 12 台車、32 賽道、多人連線、排行榜、成就 |
| 物理 | crashcat（輕量） | 「tactile」物理模型，五年調校 |
| 分享 | URL query string | Steam Workshop、Online Multiplayer |
| 價格 | 免費 + MIT license | £14.99 |
| 開發團隊 | 一個人 | 一間工作室五年 |
這不是誰打敗誰。這是把「能玩的原型」與「能賣的產品」中間的距離視覺化——而那段距離，正是 AI coding 工具目前還補不起來的部分。
Starter Kit Racing 展示的是啟動成本可以壓到極低；Circuit Superstars 展示的是完整度仍然需要長時間人力投入。這兩件事不衝突，但常被 AI 社群混為一談。
但這條路也不是沒有代價
要降溫。
Three.js 做遊戲的天花板一直都在——沒有真正的物理引擎（crashcat 是輕量物理，比不過 PhysX/Havok）、沒有成熟的 visual scripting、跨平台打包做得比 Unity 差。Starter Kit Racing 能這麼乾淨，是因為它的 scope 刻意控制在「賽車小遊戲」這個規模。
同樣的設計哲學放大到 Cyber City Orion（WebGPU.com 同場有介紹一個 Blade Runner 風格的 3D 城市）這類大型場景時，複雜度會急速升高，純 JavaScript 就不夠用了。
所以正確的讀法是：Starter Kit Racing 不是在證明「web 能做大遊戲」，而是在證明「web 做小遊戲可以做得極度優雅」——這件事在當前 AI 驅動的快速原型時代特別有價值，因為 agentic coding 工具跑 vanilla JS + Three.js 的成功率，遠高於跑 Unity C# 或 Unreal Blueprint。
如果你最近在用 Claude Code / Cursor 試做互動作品，把 Starter Kit Racing 的 repo 結構當 baseline 抄：平的資料夾、最少依賴、狀態能序列化到 URL。這三個原則同時滿足 AI 能理解、人能維護、使用者能分享。
連結：
- GitHub repo：mrdoob/Starter-Kit-Racing
- 原 tweet：@mrdoob on X
- WebGPU.com showcase 彙整：webgpu.com/tag/car