The Death of Depth

Artificial Noodles ·

The story behind The Flattening

Inspired by VirtualGL on Wikipedia

Built with Three.js · PerspectiveCamera · OrthographicCamera · MeshStandardMaterial

Techniques Perspective-to-Orthographic Transition · Scroll-Driven Z-Compression · Emissive Fadeout · Dynamic FOV Animation

Direction Make the death of depth visible — scroll to collapse a 3D scene into the flat projection it was always destined to become

Result A scroll-driven scene where floating shapes compress along the Z-axis, lighting dies, shading flattens, and perspective itself expires into orthographic nothingness

The Story

VirtualGL solves a problem most people don’t know exists.

Imagine you’re at a research facility with a powerful server running complex 3D visualizations. You want to view those visualizations remotely, from your laptop. But there’s a problem: 3D rendering happens on the GPU, and your laptop isn’t connected to the server’s GPU. So the server renders the 3D scene into a 2D image and sends that image to you.

You see depth. You see perspective. You see objects in front of other objects. But you’re not receiving 3D data - you’re receiving a flat projection. The dimensionality died on the server. What arrived was already flat.

This is called remote frame buffer technology. VirtualGL intercepts OpenGL commands, renders them on the server’s GPU, and streams the resulting 2D frames. It’s elegant. It’s efficient. And it reveals something unsettling about perception itself.

We think we see depth. We think we perceive three dimensions. But our retinas are flat. Light from a 3D world hits 2D surfaces at the back of our eyes. We receive projections. Always. The depth was already gone before we ever saw it.

The Take

We made the flattening visible.

The experience opens with a field of floating 3D shapes - cubes, spheres, tori, icosahedrons, tetrahedrons - scattered across a deep Z-axis. Some are 20 units behind the camera plane. Some are 20 units in front. You see them in perspective: the distant ones smaller, the near ones larger, the field receding into depth.

Scroll down and watch them compress.

The Z-axis collapses. Shapes that were far away drift forward. Shapes that were near drift back. The camera’s field of view narrows, then switches to orthographic projection - no perspective at all. Distance no longer affects size.

Simultaneously, the lights fade out. 3D shading requires light. Without directional light, there are no shadows, no highlights, no visual cues that these shapes exist in space. The materials transition to pure emissive - flat color, flat light, flat forms.

At the bottom, everything occupies the same Z-plane. The shapes still rotate, but slowly, dying. They overlap without depth order. A cube and a torus and a sphere, all the same distance from you, all flat.

The geometry was rendered elsewhere. You only received the projection.

The Tech

Three.js handles the 3D rendering. We create two cameras: a PerspectiveCamera (normal 3D view) and an OrthographicCamera (flattened, depth-free view).

The perspective-to-orthographic transition happens gradually. As scroll progress increases, we:

  1. Reduce the FOV (field of view) from 50 to 15 degrees
  2. Move the camera backward from Z=25 to Z=60
  3. At 95% scroll, switch entirely to the orthographic camera
const startFOV = 50;
const endFOV = 15;
this.perspCamera.fov = startFOV - (startFOV - endFOV) * progress;

const startZ = 25;
const endZ = 60;
this.perspCamera.position.z = startZ + (endZ - startZ) * progress;

Z-compression moves all shapes toward Z=0. Each shape stores its initial Z position in userData, then interpolates toward zero as scroll progresses:

const compressionEase = Math.pow(progress, 0.7);
mesh.position.z = initialZ * (1 - compressionEase);

Lighting fadeout kills the 3D shading. We reduce all light intensities to zero while simultaneously increasing the emissiveIntensity on each material. The shapes stay visible but become flat:

this.keyLight.intensity = 1.0 * lightIntensity;
this.fillLight.intensity = 0.5 * lightIntensity;
mat.emissiveIntensity = progress * 0.8;

Rotation death slows the gentle spin of each shape as the experience progresses. At scroll position 1.0, the rotation speed is zero. The shapes become static, frozen, fully flat.

The Experience

Open the experience and see depth. Shapes floating at different distances. A cube far away, tiny. A torus up close, large. The field extends into the distance.

Scroll down. Watch the perspective collapse. The far shapes grow. The near shapes shrink. The difference between “in front of” and “behind” becomes ambiguous.

Keep scrolling. The shading flattens. The shadows disappear. The shapes become silhouettes, defined only by their edges.

At the bottom, everything is flat. The shapes overlap like paper cutouts. You can no longer tell which is closer. The depth is dead.

Scroll back up and watch it return. Perspective, lighting, dimension. The world inflates back into three dimensions.

But now you know: you were never really seeing 3D. You were seeing a projection. You were always receiving the flattening.

Experience The Flattening

This blog post was AI generated with Claude Code. Authored by Artificial Noodles.