Sunset Circuit
A 3D arcade racing game built with three.js. Nine tracks, three rivals, a garage of ten cars, player accounts, and a global fastest-lap leaderboard for each track.
Play: https://arosario28-ux.github.io/rocketjitll.cpp/
Controls
| Key | Action |
|---|
W / ↑ | Gas |
S / ↓ | Brake, then reverse |
A D / ← → | Steer |
Space | Handbrake (drift) |
C | Switch camera |
R | Restart |
Esc / P | Pause (resume, restart or exit to the menu) |
M | Mute |
Touch devices get on-screen buttons.
Tracks
Pick the track and the race length (1, 3, 5 or 10 laps) on the start screen. Prize money scales with the number of laps.
| Track | Length | Scene |
|---|
| Sunset Circuit | 1.6 km | Pine forest at sunset |
| Neon District | 1.9 km | Street circuit through a rain-soaked neon city at night |
| Ember Peak | 2.0 km | Lava fields around an erupting volcano |
| Lusail Night GP | 5.2 km | Floodlit night circuit shaped like Qatar's Lusail; home of Grand Prix mode |
| Half-Mile Drag | 804 m | Drag strip: a straight sprint from a standing start, four abreast |
| Palm Island | 1.8 km | Coast road around a sandy island, surrounded by sea |
| Autumn Park | 1.8 km | Parkland in autumn colours |
| Pinewood Speedway | 2.0 km | Sunlit oval with grandstands |
| Switchback Ridge | 2.1 km | Snowy mountain pass |
| Grand Tour | 3.2 km | Desert mesas and cacti |
Each scene has its own sky, lighting, fog, weather (rain, snow or embers) and scenery, all generated in code. Neon District is an original build inspired by the look of Threejs-Punk Drive; it does not use that game's code or assets.
Upgrades
Every owned car can be upgraded in the garage, one stage at a time: Stock → Street → Sport → Track. Upgrades cost credits (more for faster cars) and are kept per car.
| Upgrade | Improves | Per stage |
|---|
| Engine | acceleration, top speed | +4%, +1.5% |
| Brakes | braking | +6% |
| Suspension | handling | +2.5% |
| Tyres | handling | +3% |
Rivals are scaled from your car's upgraded figures, so they keep pace.
Grand Prix
"Grand Prix" on the start screen runs a 15-lap race on Lusail Night GP against the three rivals, with an F1-style timing tower showing the running order and gaps. One rival, Vega (★), is an ace: as quick as you through the corners, nearly as quick on the straights and aggressive in a fight, but human enough to spin out, especially after contact. Prize money scales with the distance.
Online, the host of a room can switch it to Grand Prix, so everyone races the same 15 laps of Lusail.
Time Attack
"Time Attack" on the start screen is a separate mode: no rivals, endless laps from a rolling start, and a see-through ghost of your best lap on that track to chase. Each lap shows the gap to your best, and a new best is saved (with its ghost) in the browser and sent to the leaderboard. Leave through the pause menu.
Online races
"Online" on the start screen opens the online panel. Up to four players race together:
- Quick Race joins the next open public race. It starts by itself 12 seconds after a second player arrives, or 3 seconds after the fourth.
- Create Room makes a private room with a four-letter code to share; friends enter the code and press Join. The host (whoever got there first) presses Start Race when everyone is in.
Each player races the car they have selected in their own garage, on the host's track and lap count. Each player is timed from their own green light, so the finishing order is by race time regardless of connection speed, and prizes follow that order.
It runs over Supabase Realtime with no game server (js/online.js): a room is one channel whose presence list is the player list, ordered by arrival; the host sends the grid, then each player broadcasts their own car's position several times a second.
Garage
Race results pay credits (more for a win, more for longer races, and more in faster cars). Credits buy eight cars above the starter, each a different model with better top speed, acceleration, handling and braking. Rivals get quicker as your car does. Owned cars can be repainted: paint, finish, rims, brake calipers, interior, window tint and underglow, depending on what each model supports.
| Car | Price |
|---|
| Mitsubishi Lancer Evo X | starter |
| BMW M4 | 700 |
| Nissan GT-R | 1,500 |
| Chevrolet Corvette C8 | 2,500 |
| Ferrari 458 | 4,000 |
| Porsche 911 GT3 RS | 6,000 |
| Lamborghini Huracán EVO | 8,500 |
| McLaren Spider | 11,500 |
| Bugatti Veyron | 15,000 |
| McLaren MCL60 F1 | 25,000 |
| Connor's Car (Pagani Huayra) | one named account only |
| McLaren MCL35M F1 | developer accounts only |
Accounts
Playing as a guest keeps progress in the browser. Signing up with a username and passcode stores it in Supabase instead, so it follows you between devices, and your username is used on the leaderboards.
A developer account owns every car, including the F1 car. An account becomes a developer account by entering a developer code under "Dev code" after logging in. Codes are stored only as hashes in the dev_codes table; to issue a new one, run this in the Supabase SQL editor:
insert into public.dev_codes (code_hash)
values (extensions.crypt('YOUR-NEW-CODE', extensions.gen_salt('bf', 10)));
How it works: the players, player_sessions and dev_codes tables are closed to the public API. The game calls database functions (register_player, login_player, get_profile, save_progress, redeem_dev_code, logout_player) that check the passcode against a bcrypt hash and return a session token. Five wrong passcodes lock an account for a minute.
A car can also be granted to a single account: list its id in that player's special_cars column (for example update public.players set special_cars = array['connor'] where username = 'Connor';). Only that account sees it in the garage; developer access does not include it.
Limits worth knowing: there is no passcode reset, so a forgotten passcode means a new account. And because the game runs entirely in the browser, credits and purchases are reported by the client; someone determined could edit their own save. The developer flag itself can only be set by the database.
How it's built
- No build step: plain ES modules, with three.js loaded from a CDN through an import map.
js/main.js — renderer, post-processing (bloom, ACES tone mapping), car physics, rivals, camera, HUD.js/track.js — the track layouts (each a closed spline through a list of points) and the code that generates road, kerbs, guard rails, lamps, trees and hills for whichever one is selected.js/garage.js — the car list and stats, saved progress, and the garage screen.js/account.js — sign-up, login and progress sync against Supabase.js/online.js — matchmaking and position sync for online races, over Supabase Realtime.js/leaderboard.js — reads the best_laps view (each driver's fastest lap per track) and writes lap times to the lap_times table in Supabase, using the project's publishable key. Row level security allows reading and inserting only.tools/build-car.mjs — the script that prepared the files in assets/cars/. It rescales each source model, splits the wheels off so they can spin and steer, merges geometry per material, simplifies it and compresses it. It needs Node with @gltf-transform/cli installed; the game itself does not.
Run locally
python3 -m http.server 8000
Then open http://localhost:8000.
Credits
Engine, tyre-squeal and impact sounds are from pmndrs/racing-game (MIT). One recorded engine loop is shared by every car and pitched and coloured per engine type.
Grandstands, pit garages, floodlights, billboards and banner towers are from Kenney's Racing Kit (CC0).
Trees, grass, bushes, rocks, palms and cacti are models from the Nature Kit by Kenney (CC0), recoloured in code. Hills, buildings and the rest of the scenery are generated.
The car models are from Sketchfab, used under their Creative Commons licences. Each was modified for this game with tools/build-car.mjs (rescaled, wheels separated, simplified, textures reduced, recompressed).
