Day and night in one shader
A custom material mixes the day and night images by how much each point faces the sun. City lights come from the night image, and the oceans catch a soft sun glint using a water mask.
- Client
- Rixes Studio (own R&D)
- Type
- Motion study 001
- Services
- Three.js, WebGL shaders, Motion design, 3D
- Built with
- Three.js r170, GLSL, GSAP, NASA imagery
- Status
- Live
- Year
- 2026
[THE BRIEF]
Show what real-time 3D can do for a brand, without asking the visitor to download a video. One scene, one story, small enough to load on a phone.
[THE STORY]
A film, made of code.
Most “3D intros” on the web are a rendered video wearing a costume. This one is not. The planet, the clouds, the stars, the sunset line and the light arcs are all drawn by the visitor's graphics chip, thirty frames or more every second, from three image files and about 700 lines of code.
That matters for clients. A live scene can react to the pointer, change copy with the story, be paused, replayed and explored, and it can show your own data: your cities, your stores, your customers. A video can only be watched.
We built it as a study for ourselves first, so every choice could be made for the picture and not for a deadline. The same building blocks now go into product viewers and hero scenes for client sites.
By the numbers
[THE BUILD]
Small on purpose.
- Length
- 30 slooping, four chapters
- Video files
- 0every frame is rendered live
- Textures
- 3day, night and water mask, about 1.8 MB
- Stars
- 7,000each with its own size and twinkle
- Light arcs
- 9New Delhi to nine cities
The four chapters
[THE STORY BEATS]
One timeline drives the camera, the sun, the copy and the effects.
- 00:0001 · Orbit
The camera starts far out and eases in while the day and night line sweeps across the planet. Headline: “Motion that feels like film.”
- 00:0602 · Descent
A fast, smooth dive onto India. A latitude and longitude grid fades in, then a light beam and pulsing rings mark New Delhi.
- 00:1203 · Reach
Nine arcs of light draw from Delhi to Dubai, Singapore, London, Berlin, Tokyo, New York, Toronto, Sydney and San Francisco. Markers pop at each end.
- 00:2004 · Signal
A wave spreads across the globe and turns the city lights from warm orange to the studio's emerald. The call to action appears, then the camera pulls back and the loop restarts.
What is inside
[ELEMENTS]
Six pieces, each one a few dozen lines.
Clouds with no image
Clouds are made from layered noise inside a shader. They drift slowly, thin out as the camera gets close, and glow orange along the sunset line.
Atmosphere and glare
A slightly larger sphere, drawn from the inside with additive blending, gives the blue rim of air. A canvas-drawn sprite adds the sun's glare.
7,000 twinkling stars
One draw call. Every star has its own size, colour and twinkle phase, and the field turns a little as the globe turns.
Light arcs
Each route is a curved tube lifted above the surface. A shader reveals it along its length with a bright moving head and a fading tail.
Bloom
A post-processing pass makes bright things glow: the arcs, the markers and the sun. It is the difference between “3D” and “film”.
[HOW IT WAS BUILT]
No build step and no bundler. One HTML file, three images, two libraries loaded from a CDN.
Three.js r170GLSL shadersEffectComposerUnrealBloomPassGSAP timelineNASA Blue MarbleNASA Black MarbleImport maps
[CONTROLS AND CARE]
- ExploreTake the camera
Pause the film and drag to rotate, scroll or pinch to zoom. Press Explore again and the film resumes from the chapter you were in.
- PhonesLighter on small screens
The pixel density is capped lower on phones, and the globe moves up to leave room for the headline.
- AccessRespects reduced motion
If the visitor asks their device for less motion, the pointer parallax is turned off and the film plays at three-quarter speed.
- FallbackHonest when WebGL is missing
If the browser cannot run WebGL, the page says so in plain words instead of showing a blank screen.
Read the build notes
[THE ARTICLE]
The full walk-through, with the shader code.
Where it stands
Live and public. The nine cities are placeholders for now; for a client they become real stores, offices or customer locations.
Let's talk
Have a project like this?
Tell us about your project and we will tell you how we would approach it.
