LightTrails

Options

period 8

2 to 60 s, good: 6 to 16

Seconds before everything is back where it started. Every trail covers a whole number of road lengths in this time, which is what makes it loop, so this is also the traffic speed: shorter is faster.

trails 260

4 to 600, good: 80 to 260

How many streaks, across both carriageways, split evenly between the two directions. It has to be high, because the road is seen end on: the trails are spread through depth, and only the nearest third are more than a couple of pixels wide. Below about 60 it is a quiet road at three in the morning, which is a different and quite good picture.

lanes 3

1 to 6, good: 2 to 4

Lanes each way. More lanes spread the traffic sideways and fill the frame; one lane each way is a country road and leaves a lot of night.

length 18

2 to 120, good: 14 to 48

The longest a streak gets, in road units. Each trail takes a random share of this, so it sets the spread as well as the maximum. Long is a slow shutter: the streaks start to overlap and the road turns into continuous ribbons.

weight 0.34

0.04 to 2, good: 0.2 to 0.6

How thick a streak is. Thin reads as a distant motorway seen from a bridge; thick reads as being down among the traffic.

reach 190

30 to 200, good: 120 to 195

How far down the road you can see before the fog takes it. The one that decides whether there is any depth: too far and the road ends in a hard line of lights sitting on nothing.

away #ff2d2d

css colour

Tail lights, going away from you. Red because that is what the back of a car is, and the moment you make both streams the same colour the whole thing stops being a road.

toward #fff2d0

css colour

Headlights, coming toward you. Warm white rather than pure: a headlight is a filament or a slightly blue LED, and pure white next to pure red reads as a test card.

night #07070c

css colour

The night behind it, and also what the fog fades into, so the two are the same value on purpose. A fog colour that differs from the background leaves a visible band where the road ends.

height 5.5

0.5 to 40, good: 3 to 12

How high the camera sits above the road. Low is in the traffic and the lanes overlap into a tangle; high is a bridge, and the lanes separate into readable lines. This is the biggest single change to how it looks.

lens 62

20 to 110 deg, good: 40 to 80

How wide an angle the camera takes in. Narrow compresses the road and piles the distant traffic up, which is what a long lens does and is most of the look of the photographs this comes from.

seed 3

1 to 9999

Seed for the traffic: which lane each trail is in, how long it is, and how fast it goes. The same seed gives the same road.

maxDpr 2

1 to 3

Device pixel ratio ceiling. Thin bright streaks on a dark ground alias badly, so this is worth leaving at 2.

reducedMotionTime 2

0 to 60 s

The single frame shown when the user prefers reduced motion. Any moment works: a still of this is a long-exposure photograph, which is what it was imitating in the first place.

What it needs

Category

Backdrops, an effect

Dependencies

three@>=0.160.0

Browser

WEBGL2

Frame budget

~0.8 ms · 1 context

Pinned to

v0.13.0

• One stretched box drawn many times with an InstancedMesh, each copy running down its own lane. The idea is from a Codrops article by Daniel Velasquez, which took it from an Akira poster
• Two directions, two colours. Tail lights going away are red and headlights coming toward you are white. One colour in one direction is a tunnel of stripes; the pair of opposing streams is what says motorway
• The oncoming ones cross the frame much faster, because their speed and yours add up. That difference does most of the work and it comes free from pointing them the other way
• The trails are different lengths. A real exposure is as long as the shutter was open and as fast as the car was going, so no two streaks match; equal lengths read as a conveyor belt
• Each trail covers a whole number of road lengths in one period, so its position is a mod of a function of t with no running total in it, and after one period everything is exactly where it started. Choosing speeds freely looks identical and never repeats, so the recording jumps on its last frame
• A box rather than a plane. Seen from a low camera a flat streak disappears whenever it is edge on, which makes the traffic flicker
• three's own fog rather than a hand-written fade. It is per-vertex, which is enough here because a trail is long: its two ends are far enough apart for the fog to differ along it, so a streak fades out along its own length
• Without the fog the road ends in a hard line of lights sitting on nothing and the frame has no depth at all
• One draw call for the whole road. The per-frame work is a scale and a position for each trail, which at the default 260 is nothing
• The fog is three's, so it costs a few instructions in the stock shader rather than a pass of its own
• Cost is linear in `trails`, and 400 is still comfortable. The limit you will hit first is that the road stops reading as traffic and starts reading as a solid sheet of light

Concept credit: A road of instanced light trails running in two directions into fog, from the Codrops article High-speed Light Trails in Three.js, which took it from an Akira poster, by Daniel Velasquez, Codrops. The implementation here is written from scratch.