Night Drive Racing Game

A 3D racing game in a browser is usually one track or a short demo that is over after a few laps. This game, which calls itself Threejs-Punk Drive on the page, sets out to build a city a player can stay in. The city has its own map, four named highways, passing traffic, a set of missions and achievements, and a cast of characters who send the player messages.

The loading screen is a percentage ring on a black background, with small text underneath naming stages such as streaming meshes and tuning suspension. After the count finishes, the screen sits for several seconds showing only compiling shaders, the small programs the graphics card uses to draw the picture. A circular opening then reveals the scene, and the start screen appears after about 12 seconds. The start screen feels like looking out through a car window covered in raindrops, with the neon street outside out of focus. THREEJS PUNK sits in the middle with the line A rain-soaked city under neon, and an ENTER button below.

A click on ENTER brings up an incoming message. The sender is Nyx, a fixer, with her portrait on the left while the message types itself out letter by letter on the right. Nyx says the city crowns an owner every night and tonight the crown is up for grabs. To take it, the player has to run jobs for her crew, win Rio's street races, hunt down the Neon Sigils and earn rides nobody else can touch. A progress table under the message lists 17 jobs, 23 street races, 54 sigils and 7 cars, and its last row is the night itself.

The missions are handed out by several characters, and the rules are written out in the game's achievements panel. The dispatcher Pops sends cab and courier jobs, such as delivering a passenger within 1:02, carrying fragile cargo with damage kept under 60 percent, or making four drops against the clock. The drift streamer Lux asks for 2,500 to 5,000 drift points banked within a set area, and Rio holds every speed record in the city. The netrunner Hex sends the tips for the sigils and calls each one a shard of the old city code. There are 94 achievements in all, and the player's progress is saved in the browser, so it is still there next time.

The jobs and sigils are spread across the whole city, and pressing Tab opens a map of all of it. On the map the four highways are drawn in cyan, magenta, orange and green, and the jobs, races, sigils and garages are small icons. Clicking anywhere sets a waypoint, and back on the street a pink route appears on the minimap while the top of the screen reads turn left in 40 metres, 930 metres to go.

Away from the wheel, pressing F at a standstill gets the player out of the car and switches to walking in first person. On foot, a click lets the mouse turn the view, and a sigil is collected by walking into it. The bar along the top of the game has entries for the garage, the phone messages, achievements and the radio. The same bar has a button called Drive with friends, which copies an invite link so that up to four people can drive in the same city. Together they can sound their horns, flash their lights at each other or meet at a race's start line to set off at once.

Night Drive has only one kind of weather and one time of day, always a rainy night. The whole city sits in deep purple and black, and the bright parts are the magenta, cyan and violet of the neon signs plus the red strip of a car's tail lights. The soaked road reflects all of these colours a second time, so the ground glows as much as the walls.

The interface layer borrows its look from cyberpunk fiction. Almost all of its text is set in Orbitron, a wide geometric sans serif in capitals that reads like a futuristic instrument display. Panels have their corners cut off at an angle and translucent purple borders, most of the text is cyan, and missions and prompts are marked in bright yellow. Nyx's message switches to a monospaced face with a blinking yellow cursor, so it reads like a message arriving on a terminal screen.

While driving, the interface pushes its information into the corners and leaves the middle to the car and the road. A round speedometer sits in the bottom right, with revs from 0 to 8, the gear, the automatic gearbox and switches for traction control, anti-lock brakes and stability control. A round minimap sits in the bottom left with a phone message alert beside it, a large drift score jumps up at the top during a drift, and a row of key hints runs along the bottom. Buttons such as the garage and achievements stay hidden until the cursor moves to the top of the screen.

Players can also change the way they see the city. The settings offer six different looks for the city. The default Neon Noir has purple-leaning neon, Magenta Rain has a heavier pink glow, Silent Hill wraps the city in a pale grey fog, and Sin City drains it almost to black and white. Silent Hill and Sin City take their names from the horror game and the black-and-white film of the same names.

Up close, the buildings of the city are actually very simple. Many of them are plain blocks with a grid of windows on the walls, and most signs are flat panels stuck to the walls. Almost all of the richness in the picture comes from light, with glowing signs, reflecting roads and rain catching the light, so that from a distance it all adds up to a city that looks full of detail.

The garage is a separate scene in the game. A short PREPARING THE GARAGE screen comes first, and then a car stands on a wet, reflective floor beside a stats card listing the engine, the 0 to 100 km/h time, the top speed and the weight. The player's first car, the Quadra Turbo-R, is described as a rear-mid V8 and the car the city knows you by, and its card gives 3.4 seconds to 100 km/h and a top speed of 317 km/h.

Once the car is moving, the camera and the effects on screen all work to make the speed felt. The camera follows behind the car by default, and at speed the edges of the picture streak with motion blur while lights trail into halos. When the player holds Shift for nitro, a burst of orange flame shoots from the exhaust. Pressing C moves the camera to the bonnet, so the screen shows the hood and the road ahead.

Drifting is the main thing the game asks a player to get a feel for. When the player holds Space to pull the handbrake in a turn, the tail swings out and a drift score immediately appears at the top of the screen. The current angle is shown beside it, such as SUPER DRIFT 52°, and keeping the drift going multiplies the score with a combo. When a drift ends, the score is banked and the screen reads BANKED, while hitting a wall halfway reads DRIFT LOST and the points for that run are gone. Holding W and Space together at a standstill enters launch control, and the screen reads LAUNCH CONTROL. According to the in-game guide, holding Shift then sweeps a needle across the dial, and letting go in the green zone launches the car.

Driving around the city averages 60 frames per second. Over nearly a minute of continuous driving, frames slower than 32 milliseconds made up at most three in a thousand, and the slowest single frame took about a tenth of a second.

With the reduced motion setting turned on in the operating system, Nyx's message appears in full at once instead of typing itself out. The radio and the drift score have matching rules as well, but they apply only to the interface text. They cannot reach the rain, the motion blur or the light trails drawn on the canvas, so the picture while driving is the same as everyone else's.

Night Drive draws its picture with the WebGPU renderer of the 3D library three.js. WebGPU is the newer graphics interface in browsers, which lets a web page use the graphics card more directly. The game's About page therefore asks for the latest Chrome or Edge with WebGPU support and recommends a dedicated graphics card and 16 GB of memory, and on phones it shows an on-screen joystick. The shaders are written in TSL, three.js's own shading language, and the About page says every reflection, droplet and glow in the picture is calculated live this way. The car physics runs on Rapier, a physics engine compiled to WebAssembly, a program format that runs at high speed in the browser. The models and textures use compressed formats and are unpacked in the browser after downloading.

Before entering the city, a first visit downloads about 32 MB, and 18.5 MB of that is 3D models. The largest is the city's building kit, 6.4 MB in a single file, and the player's first car is about 2.6 MB. The other cars weigh 1 to 1.8 MB each and are downloaded one by one once the start screen is up. The layer of puddles on the ground uses three textures of about 1 MB each, and the light of the sky comes from a 1 MB panoramic image. After the player enters the city, the game also downloads the rain and thunder ambience, another 4 MB or so, and after that no new files are downloaded while driving.

The site starts quickly, but getting into the city takes a while. The server returns its first byte in 25 to 33 milliseconds, and the browser draws its first content in 0.57 to 0.6 seconds, both far better than Google's recommended 0.8 and 1.8 seconds. What it draws then, though, is only the loading ring. The start screen does not appear until about 12 to 15 seconds. Loading includes about ten long tasks, pieces of script that each hold the browser for more than 50 milliseconds so the page cannot respond. Together they add up to about 2.7 seconds with the longest at 1.25 seconds, mostly during the seconds spent compiling shaders.

The picture holds 60 frames per second thanks to a finely tuned quality system. The default top setting draws at 85 percent of the screen resolution, then scales up to full screen and sharpens. The game checks its frame rate every second and lowers the resolution automatically when it falls behind, and the ADJUSTING PERFORMANCE badge that flashes in the bottom left at the start appears to be this adjustment at work. The city draws only buildings and roads within 1,300 metres and culls in advance anything hidden behind nearer buildings. Road reflections are drawn at half resolution, and the reflection of the city on the car body comes from a small environment texture that updates one of its sides only every few frames. The medium setting first turns off the raindrops on the lens. The low setting also turns off the rain on the car body, the car's reflections and ambient occlusion, which is the soft shadow that settles into corners and gaps. It leaves the road reflecting only lights and cuts the traffic from 28 cars to 20.

Part of the game's sound is generated live. The engine is not a recorded loop but is produced by a synthesiser and a sampler running together on the browser's audio thread, which lets it change continuously with the revs. The NEON FM radio plays a set of synthwave tracks credited on screen to the stock music site Pixabay, and players can set the music and car volumes separately.

Driving with friends runs over a WebSocket connection, a channel the browser keeps open to a server. When the visitor has not invited anyone, the page does not open this connection while loading.

The whole game can be played from the keyboard, which is natural for a game driven by keys. Pressing Tab on the start screen puts focus on the ENTER button, Enter goes in, Enter again on the message screen starts driving, and standard gamepads are supported too. The focus outline, however, is the browser's default one-pixel dark line, which almost disappears against the dark scene. The whole city is drawn on a single canvas, so a screen reader can reach only the interface buttons and text, and a few of those controls have no names.

Night Drive took 88 points on the FWA from 26 votes, filed under games. The team's description on the FWA calls it a free racing game built with Three.js and WebGPU that runs on desktop and mobile. The big city, more than 50 missions, drifting in the rain, collecting items and multiple cars that the description lists all have a counterpart in the game's interface.

Anderson Mancini's FWA profile says he has made more than 400 digital marketing projects since 2005 and later turned his focus to 3D on the web with Three.js. The FWA credits him alone, while the game's start screen and About page name both Anderson Mancini and Sunag.