vibespire.ai / Low Beams /

how it's made

open the drive β†—

Vibespire presents

How Low Beams Is Made

There are two real lights in this forest and they are both bolted to the car. Everything you can see at night is either something the beams found, something glowing on its own account, or fog. The whole scene is built around that one constraint, and most of what looks expensive is not.

Both figures on this page run the engine's own classes.

The rule

One night, two temperatures

Every colour in this world belongs to one of two families. Everything the world owns is cold β€” moonlight, fog, mossy blacks, the blue-grey of the tarmac. Everything the car brings is warm β€” tungsten beams, amber halos, red taillights.

That is not a mood board, it is a working constraint. It means the eye can tell instantly what is lit by you and what is merely there, and it means every new object only has to answer one question: is this mine or the night's?

Fog does the rest of the heavy lifting. It swallows the far road, hides the edges of a drivable box only 672 by 624 metres, and β€” most usefully β€” gives the beams something to be brighter than. A pair of spotlights in clear air reads as two circles; the same pair in fog reads as headlights. The gloom slider moves fog.near from 45 down to 14 metres and fog.far from 205 to 60, and the night closes on you.

Rain is a second hand on the same knob: min(1, gloom + wet Γ— 0.45). A downpour shortens the world by exactly the amount the gloom slider would have.

The road

A graph before it is geometry

The road is data first: a hand-authored outer loop and two crossing backroads, twelve and seven control points each, given in metres.

Both backroads start and end on loop control points, and both pass through (0, 0). That is the whole junction system. Catmull-Rom passes exactly through its control points, so sharing a control point is the same thing as the roads meeting β€” no intersection maths, no trimming, no seams to reconcile. A disc of asphalt 9.2 metres in radius is dropped on each shared node to cover the join.

Those curves are sampled every 2.4 metres, and the samples are extruded into flat ribbons: a 12.6m gravel bed, an 8.6m asphalt ribbon on top of it, and dashed paint on top of that β€” with the dashes skipping any sample within reach of a junction, because road markings do not run through a crossing.

Everything else in the world is downstream of that skeleton. Trees ask it how far away the road is. Reflector posts are placed every 16 metres along it. Filling stations are placed on it, in a road-local frame where +z runs along the tarmac β€” authoring a forecourt against a compass bearing would be miserable; authoring it against β€œthe road” is how you actually think about it. Even the spawn point is a road sample.

Each sample carries its distance to the nearest junction. One number, computed once, and every later question about β€œis this near a crossing” is already answered.

show

The engine's own buildRoadNetwork, pickSites and scatterForest, plotted by this page.

Hands on

Try it

This is the world β€” the same simulation, the same light rig, the same grass and rain. It is steering itself by asking the road network where the tarmac is, which is the one thing on this page the showcase does not do; everything it is steering is the engine.

go
show

The actual Sim, HeadlightRig, grass, rain and ChaseCamera, imported by this page. The demo itself is drivable.

The light

Two spotlights and a great many lies

The beams are two genuine SpotLights with shadow maps, and the shadows are most of the atmosphere: trunks throw moving bars across the road as you pass them.

Dipped, each lamp runs at 1250 intensity over 120 metres with a 0.52-radian cone and its target aimed down at βˆ’1.4 metres and 19 ahead. High beams raise it to 2900 over 200 metres, narrow the cone to 0.42, and lift the target to +0.2 at 42 ahead β€” the same rig, four numbers apart. A third, wide, dim spotlight at intensity 200 fills the pool the two hotspots sit in.

Everything else about the light is fake, and cheerfully so. The visible cones are additive translucent geometry with vertex colours fading to black along their length, so a beam dissolves instead of ending in a bright ring. The halo on each lamp is a sprite. The shine on wet asphalt is a stretched additive smear under the car rather than a reflection pass β€” a second render for one puddle-coloured streak is not a good trade.

One shadow setting has a note on it in the source telling you not to change it. These lamps sit 0.6m off the ground and shine along it, so every shadow lands at a grazing angle β€” textbook conditions for replacing a flat depth bias with normalBias. That was tried and measured by frame-differing a subject in and out of the beam: the textbook version came out four times weaker, 21 levels of darkening against 93. Grazing light is exactly where offsetting along the normal pushes the receiver out of its own shadow.

The rig also watches the damage model. Work a headlight loose and it flickers on its wires; tear it off and that half of the road simply stops existing. Nothing special implements that β€” the lamp asks the panel it is bolted to what state it is in.

The reflector posts have no light of their own. Each chip flares by dot product against the car's heading, which is exactly what a retroreflector does, and costs one multiply.

The forest

Three and a half thousand trees, and 48 of them are real

The woods are five low-poly variants in five InstancedMeshes. The whole forest costs five draw calls, and none of the trees are solid.

The scatter is rejection sampling with three rules. No trunk within 8.8 metres of a centreline β€” clear of the gravel with room for a crown to lean back over the asphalt. No trunk within 4.4 metres of another, checked against a spatial grid, because big trees need elbow room or the woods turn to mush. And an acceptance rate that falls with distance from the road: keep everything within 32 metres, 62% out to 90, and 38% beyond that. The beams only reach the first band, so that is where the density goes.

The pines are bare tapering poles. Their crowns used to be stacked cones, and once the billboard needle tufts could carry a canopy the cones were only a hard-edged triangle showing through the foliage that had replaced them. A grown pine tops fifteen metres, so the road runs through a canyon of trunks whose tops the beams never reach.

Then the part that makes it affordable to crash into. A pool of 48 cylinder colliders roams with the car, teleporting onto the trunks within 26 metres five times a second; unused ones are parked 60 metres underground. You can only hit a tree you could reach, so only those trees ever exist to the physics. Every collider wears the same 0.56m radius, sized to the average bole rather than to the tree it is standing on β€” fat enough that the car stops where the wood looks like it is.

Under the night paint the car is a full crash model: twenty-one pieces, panels denting vertex by vertex, latches giving, glass crazing then shattering, wheels tearing off. Pine trunks are unforgiving.

The green things

An endless sward that never moves

The verges and the tree crowns are the same object: camera-facing billboard cards on an instanced quad, swayed by two scrolling noise reads so that a gust travels across the field instead of every blade waving on its own clock.

Blading the whole map is pure waste, so a fixed lattice of 140 Γ— 140 cards β€” 19,600 of them β€” follows the car instead. The trick that makes that invisible is snapping the lattice origin to its own cell size, 0.45 metres. The field slides through the world in whole-cell jumps, and each card's jitter within its cell is hashed from the cell coordinate rather than from the instance id, so a blade keeps its identity as the lattice streams past it. Nothing appears to move, and there is no edge.

The materials are the interesting decision. Every card is a stock MeshLambertMaterial with only its vertex shader patched, through onBeforeCompile. The patch does the instancing, the billboard and the wind, then hands transformed and objectNormal back to three, which supplies the spotlights, the shadows, the fog and the tone mapping exactly as it does for everything else. A blade that lit itself would be the one thing in the scene the beams sweep over without touching.

A billboard has no honest normal, so each card claims one facing the camera and tilted skyward. The camera lives behind the car, which is where the beams come from too β€” so grass inside the light blazes and grass outside it stays black, which is the entire shot.

Patch order is not obvious and is written down in the source: three's color_vertex chunk runs before beginnormal_vertex, which runs before begin_vertex. So all the per-instance arithmetic lands in the uv_vertex slot β€” the first chunk in main() β€” and everything downstream just reads it.

The built world

At night a building is a light source first

Two filling stations and a one-street town stand on the road graph rather than at hand-picked coordinates, so they sit square to the tarmac and the forest is told to grow around them β€” sites are chosen before the scatter runs, because a station with four pines through its canopy is not a station.

The geometry is pure arithmetic in a road-local frame, with no three.js in the module at all. That is what lets the physics raise colliders from the same numbers the renderer draws, and lets the headless sanity check verify the layout.

The design rule is stated plainly and it changes everything: you never see a wall out here. You see a lit rectangle floating in the fog, and only much later the wall it was cut into. So the buildings are built inside out β€” emissive panels for every window and sign, which cost no light at all and are the only thing visible from a distance; additive pools on the ground so the light lands somewhere instead of the windows hovering over nothing; and halos that deliberately ignore the fog, because mist scatters light toward you and a sodium lamp in weather should bloom rather than dim.

Only two real lights exist for the whole built world, and they roam to whatever you are nearest. Faking all of it would leave the car pitch black under a blazing canopy, which is the one thing the eye does notice.

Not every window is lit. A street where all of them glow reads as a showroom.

Rain is the only system here that touches every other one. A single wet value drives the streaks, the sheen on the asphalt, how hard the fog closes in, how flat the grass lies, and how solid the beam cones read.

The streaks are instanced quads in a box that travels with the camera, leaning on the same wind vector the grass leans on β€” so a squall crosses the verge, the crowns and the air together instead of three systems weathering independently. Each drop asks whether it is standing inside the headlight cone and brightens if it is, which is why the beams pick rain out of the dark ahead of you and lose it at the edges.

That question settles an old debt. The visible cones are additive geometry pretending to be light hanging in air. In rain there genuinely is something up there for light to catch β€” so the cones thicken with the weather, and the fake becomes the point.

The rest of the dark is kept company cheaply: fireflies are points with per-vertex colour, ground mist is a handful of additive sprites drifting almost imperceptibly, and pairs of amber eyes catch the beams between the trunks, blink, and relocate somewhere ahead of you when you get close β€” so the woods always seem to be watching.

The rain box is centred a few metres ahead of the camera rather than on it. The drops worth seeing are the ones between you and the road.

The bill

What this approach costs

Almost everything here is a cheat chosen deliberately over the expensive correct thing. Most of them hold because it is night and there is fog. A few would not survive daylight for a second.

There are no volumetrics. The beam cones are geometry. They do not occlude, they do not scatter, and a tree standing inside one does not carve a shaft out of it. In dry air that is visible if you look for it; the rain slider exists partly because water in the air is the condition under which the cheat is true.

Only 48 trees exist to the physics, and they are all the same tree. Every collider is a 0.56m cylinder regardless of the trunk it stands on, so a sapling stops you like a redwood and a boulder is a cylinder. Drive fast enough in a straight line and you could in principle outrun the five-times-a-second reassignment.

The map is 672 by 624 metres and admits it. Invisible walls sit deep in the woods, the fog hides the edge, and the road is a closed loop, so the world has no elsewhere. Everything about the atmosphere is tuned to keep you from noticing that.

The road is flat. The centrelines have no elevation, the ground is one plane, and the ribbons are laid at fixed heights. No hills, no camber, no crest to come over β€” which is a real loss for a forest backroad, and the price of a road that is two-dimensional data.

The grass claims a normal it does not have. Each card faces the camera and tilts skyward, which is right only because the camera and the beams live in roughly the same place. Put a second light source anywhere else in the world and the sward would light wrongly.

Buildings are lit, not shaded. Emissive panels do not illuminate anything; the two roaming real lights and a set of additive pools stand in for a whole street's worth of lighting. Walk close enough to a lit window and the sill it should be spilling over stays dark.

The whole night is a small number of honest tricks agreeing with each other about what you are allowed to see. Turn the gloom to zero in the figure above and every one of them shows.

Open the drive β†—

Marcin β€” creator of vibespire.ai

About

Hi, I'm Marcin.

I build these experiments whenever something sparks my curiosity β€” a paper, a game, the way grass bends in the wind, the smallest everyday things. Inspiration shows up, and I chase it into a little living world you can open in a browser.

vibespire is where those experiments live. Poke at them, break them, read how they're made β€” and if something sparks an idea for you too, say hello.