The Tetraphobia
The story behind The Tetraphobia
Inspired by Tetraphobia on Wikipedia
Built with Three.js WebGPURenderer · SSGINode · TRAANode · TSL (Three Shading Language)
Techniques Screen-Space Global Illumination · Temporal Reprojection Anti-Aliasing · MRT Pass · Click-to-Illuminate Interaction
Direction A sound shaped like death rewrote the architecture of cities
Result A building you can light up — except where you can’t
The Story
In Mandarin Chinese, the word for four — 四 (sì) — is nearly homophonous with the word for death — 死 (sǐ). This sonic coincidence has reshaped the physical architecture of entire cities. Buildings in Hong Kong, mainland China, Taiwan, Japan, and Korea routinely skip floor 4. Not just floor 4 — also 14, 24, 34, and the entire range of 40 through 49. A building nominally labeled “50 floors” may contain only 36 actual levels.
The practice extends far beyond architecture. Airlines skip row 4. Hospitals skip room 4 and bed 4. Nokia skipped from the 3 series directly to the 5 series. OnePlus skipped naming a phone “4.” South Korea’s national railroad omitted locomotive 4444. The Chinese military, interestingly, uses 4 freely in weapons designations — the Dongfeng-4 ICBM, the Type 094 submarine — as if the state is immune to the superstition its citizens observe.
What makes tetraphobia remarkable isn’t the fear itself, but its scale. Western triskaidekaphobia (fear of 13) occasionally produces a missing floor or row. Tetraphobia rewrites entire numbering systems across multiple countries, affecting billions of addresses, phone numbers, license plates, and building floors. A phonetic accident became infrastructure.
The Take
A miniature building floats in dark space — fifteen stories, cross-sectioned to reveal the rooms inside. Each floor is numbered on the shell. All rooms start dark.
Click a floor. A warm light fills the room — amber, terracotta, copper, rose. SSGI picks up the color and bleeds it through the thin floor plates into the rooms above and below. The building comes alive as you illuminate it, warm pools of indirect light connecting the floors into a chain.
Then you click floor 4. Nothing happens. The number is printed in red — a warning you didn’t notice until now. The room stays sealed. Dark. A void in the chain. Light from floor 3 cannot reach floor 5. The warmth stops at the gap.
Keep lighting floors. The pattern clarifies. Floor 14 is also sealed. The narrative reveals the connection: 四 (sì) and 死 (sǐ). Four and death. A homophone that became a structural absence. The building is beautiful and broken — a quarter of its addresses were never wired, because a word was too dangerous to say.
The Tech
WebGPU + SSGI + TRAA Pipeline
The second experience built on Three.js’s WebGPU renderer with the TSL node-based post-processing pipeline. The same SSGI + TRAA architecture proven in The Crosstalk, but applied to a completely different visual concept: architectural indirect illumination in an enclosed multi-room structure rather than colored objects in a white room.
Building Construction
The building is a programmatic assembly of 15 floor groups, each containing: a floor plate (BoxGeometry), three shell walls (left, right, back), and interior room surfaces (floor, ceiling, back wall, side walls) as separate PlaneGeometry meshes. Normal floors have five interior planes sharing a single cloned MeshStandardMaterial that starts dark (#12100e) and switches to a warm color when lit. Cursed floors (4 and 14) contain a solid dark fill block (#0c0a09) with red-tinted floor plates (#2a1510) — slightly smaller than the room cavity to prevent z-fighting with the shell walls.
Click-to-Illuminate Interaction
Raycasting against all building meshes determines which floor was clicked. The ray walks up the scene graph from the hit mesh to find the parent group’s floorIdx userData. When a normal floor is clicked, its point light intensity jumps from 0 to 10 and its interior material color changes from dark to the floor’s assigned warm color. Cursed floors are detected but rejected — the click triggers narrative text instead of illumination.
SSGI as Architectural GI
The key visual effect: when you light a room, SSGI picks up the warm color from the room’s interior surfaces and bleeds it through the floor plates into adjacent rooms. Lighting floors 3 and 5 creates warm pools above and below the dark gap at floor 4, making the void visually striking — cold shadow flanked by warm indirect light. The SSGI parameters match the official Three.js example: sliceCount: 2, stepCount: 8 (32 samples per pixel), with TRAA temporal accumulation for clean, stable output. No setPixelRatio call — rendering at 1x to keep the SSGI cost manageable.
Floor Number Labels
Each floor number is rendered to a 128×80 CanvasTexture using Barlow Condensed 600 weight, then applied to a small PlaneGeometry on the right wall exterior. Cursed floor labels render in red (rgba(120, 40, 40, 0.7)), normal floors in warm grey. The canvas-to-texture approach avoids loading a font file while keeping text sharp and readable.
Discovery-Based Narrative
The narrative system triggers on specific player discoveries rather than arbitrary thresholds. Clicking floor 4 reveals the Mandarin homophone. Lighting both floors 3 and 5 triggers a note about the light gap. Clicking floor 14 reveals the pattern extends beyond just 4. Further beats unfold as more floors are lit, culminating in a permanent closing line when all 13 illuminable floors are active.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.