---
title: "Vibe GP"
url: "https://aigamehub.app/zh-tw/games/vibe-gp-019ad9"
source: "https://github.com/bhouston/vibe-gp"
source_type: "github"
play_url: "https://vibe-gp.ben3d.ca"
platform: "both"
login_required: false
pricing: "free"
origin: "original"
ai_tools: []
game_languages: ["en"]
author: "bhouston"
author_handle: "bhouston"
category: "動作"
categories: ["action", "simulation"]
tags: ["F1", "WebGPU", "browser", "procedural", "racing", "three.js"]
added: "2026-11-06T06:09:49.308Z"
updated: "2026-11-06T06:09:49.308Z"
locale: "zh-tw"
content_locale: "zh-tw"
---

# Vibe GP

一款瀏覽器上的 F1 風格賽車遊戲，賽車與賽道以程式碼手工打造並採程序化生成，收錄 2026 年 Formula 1 賽曆賽道與 Imola。

## Description

Vibe GP 是一款以 three.js 和 WebGPURenderer 打造的小型 F1 風格賽車遊戲。所有賽車與賽道幾何都在程式碼中手工建構，表面細節則採程序化生成。玩家可從 Test Oval、2026 年 Formula 1 賽曆上的賽道，以及 Imola 中選擇，再以鍵盤或觸控操作進行比賽。設定包括循跡控制、ABS、車損、攝影機模式與前翼變更；手機會有觸控操作與較輕量的場景。

## Original post

F1-style racing game built with three.js WebGPURenderer and TSL node materials

Topics: f1, formula1, game, race, three, vibe-coding

# Vibe GP [![Vibe GP: an orange open-wheel race car on the starting grid of a street circuit](public/og-image.jpg)](https://vibe-gp.ben3d.ca) A small F1-style racing game built with [three.js](https://threejs.org/) using `WebGPURenderer` and node-based (TSL) materials. All track and car geometry is built by hand in code, and all surface detail is procedural (no textures or models). **Play it at [vibe-gp.ben3d.ca](https://vibe-gp.ben3d.ca).** ## Running ```sh pnpm install pnpm dev ``` Then open http://localhost:5173 and pick a circuit: the Test Oval, every circuit on the 2026 Formula 1 calendar, and Imola. A browser with WebGPU support is recommended; three.js falls back to WebGL2 otherwise. ## Circuits Every real circuit is built from OpenStreetMap's centreline and pit lane, with its real height profile: | | | | --- | --- | | 2026 calendar | Albert Park, Shanghai, Suzuka, Bahrain*, Jeddah*, Miami, Montreal, Monaco, Barcelona-Catalunya, Red Bull Ring, Silverstone, Spa-Francorchamps, Hungaroring, Zandvoort, Monza, Madring, Baku, Marina Bay, Circuit of the Americas, Hermanos Rodriguez, Interlagos, Las Vegas, Lusail, Yas Marina | | Also | Imola (last raced in 2025) | \* On the published 2026 calendar, but cancelled in March 2026. Suzuka's figure of eight crosses over itself: the back straight runs over the section after Degner on a bridge. Sections more than 4 m apart in height don't squeeze each other's walls or collide with each other's barriers, and a concrete deck carries the upper road. ## Controls | Key | Action | | --- | --- | | W / ↑ | Throttle | | S / ↓ | Brake / reverse | | A D / ← → | Steer | | C | Cycle camera (chase, far, T-cam, driver, TV); the side mirrors work in every view | | F | Change the front wing at the next pit stop (on / off; also on the HUD) | | R | Reset to the grid | | Esc | Back to the track selector | On a phone or tablet the game shows touch controls (steering pad, gas, brake, menu, camera, reset); phones play in landscape. Tyre and front wing choices are keyboard or desktop HUD only. Touch devices also get a lighter scene (`src/quality.js`): no crowd, half the trees and no mirror views. Add `?quality=full` or `?quality=mobile` to the URL to force either one. The gear in the top-right corner opens **Settings**: traction control (traction, stability & steering assists), ABS, damage on / off (off also repairs the car), music and sound effects. Settings are saved between sessions. ## Project layout - `src/geometry.js`: hand-built geometry helpers (rings, walls, boxes, lofts, tubes, wheels) - `src/materials.js`: TSL node materials and the sky - `src/tracks/*.js`: track definitions (centreline control points in metres, start line first, in racing direction); most are generated by `scripts/import-track.mjs` - `scripts/circuits.mjs`: the real circuits' import settings (OSM relation, official length, direction, kerb colours, scenery, elevation source and calibration) - `src/trackPath.js`: centreline sampling, kerbs, wall cleara