SID // a journey

A cinematic WebGL portfolio: seven worlds, generated entirely by code, with a full VR mode.

The brief

Build a portfolio that is not a portfolio — an experience a visitor travels through rather than scrolls, that could stand on its own as an installation, and that proves the capability it is describing instead of listing it.

The constraint that shaped everything: no photographs, no imported 3D models, no downloaded textures. Every world is generated at runtime, in code.

How it works

The site is a single continuous timeline. Scrolling moves a heavily damped camera through seven worlds that each occupy their own region of 3D space, 900 units apart, so they can never overlap. A camera director flies authored keyframe paths and blends across the seams; an atmosphere director interpolates sky, fog, sun, lighting and exposure every frame, which is what makes one world physically melt into the next rather than cut.

Each world is a self-contained module exporting its geometry, its camera path, its atmosphere and its text. Worlds mount only near the seam and are pre-compiled before they become visible, so a transition never stalls on shader compilation.

The hard parts

The finale renders a black hole by tracing a photon geodesic per pixel — a real gravitational lensing shader with a temperature-graded accretion disk, Doppler beaming, and a star field bent into an Einstein ring. It was optimised from 9.3ms to 4.2ms per frame (a 2.2× gain) using an early-escape with an analytic weak-field tail, without visibly changing the image.

The forest builds an old-growth wood from instanced, vertex-displaced trunks with light scattering through the foliage, injected into the standard material so it still fogs and shades correctly. The machine hall is a working engine with a visible mechanical load path. The sound is a generative WebAudio bed that crossfades between worlds; nothing is a recording.

Virtual reality

On a Meta Quest the same page offers a fully immersive mode. The critical design point: in an XR session the headset owns the camera, so the journey cannot move the camera — it moves a rig underneath the visitor instead, yaw-only, with the hand-held camera float disabled, because imposed motion is what makes people ill in VR.

The story is re-rendered as real type standing in the room, since DOM overlays do not exist inside a headset, and the whole experience drops to a lower-cost render path to hold the 72–90fps a standalone headset requires.

Result

The entire experience — seven worlds, custom shaders, generative audio and a VR mode — ships in roughly 475KB gzipped, with no external assets and no network requests after load.

You are looking at it. Enter the experience →

Built with

WebGL, Three.js, React Three Fiber, custom GLSL shaders, WebXR, the Web Audio API, and Vite. No photographs, no imported 3D models, no external textures.

Want something like this? Immersive 3D websites · WebXR & VR · Get in touch

← Enter the immersive experience