Projecting the Expendable
The story behind The Squad
Inspired by Holography on Wikipedia
Built with Three.js · ShaderMaterial · GLTFLoader · EffectComposer · fal.ai (Flux Pro, BiRefNet, Trellis-2)
Techniques Custom Scanline Shader · Holographic Post-Processing
Direction Build a holographic character select screen where AI-generated soldiers materialize as unstable light projections with real scanline interference artifacts
Result Four soldiers rendered as flickering holograms on a glowing platform, each with signature color and scanline distortion, navigable by keyboard or touch
The Story
Holography promised us something remarkable. A technique to record light itself—not just an image, but the complete wavefront, preserving depth and parallax. Dennis Gabor invented it in 1948. He won a Nobel Prize for it in 1971.
But the hologram’s cultural legacy isn’t scientific visualization or data storage. It’s the flickering blue ghost. The unstable projection. The tactical display showing troops as disposable chess pieces.
Science fiction gave us the holographic soldier before military contractors could. Shimmering figures materialized on command tables, briefing rooms, and targeting systems. Always rendered in cyan. Always corrupted by scanlines. Always slightly unreal.
The Take
The character select screen is a strange ritual.
You’re choosing who lives and who dies. Who takes point. Who bleeds first. In military sci-fi, the squad is always exactly four people—the minimum viable unit for narrative tension. The tank, the damage dealer, the infiltrator, the healer. Rock-paper-scissors with casualties.
We built a holographic roster display. Four soldiers materialize on a platform, rendered as light interference patterns—which is technically what a hologram is. The scanlines aren’t decoration. They’re artifacts of the projection medium itself, the horizontal sweep of coherent light trying and failing to maintain stability.
Each soldier has a color. Cyan for the heavy. Magenta for the tech specialist. Red for the assassin. Green for the medic. These aren’t arbitrary—they’re the corners of a color space, maximum visual separation for minimum cognitive load. You need to identify your unit at a glance when everything’s exploding.
The instability is the point. These projections flicker because they’re disposable. You’re selecting one to send into danger, knowing you might be selecting another tomorrow.
The Tech
Three.js renders the isometric viewport. The orthographic camera creates the tactical display aesthetic—no perspective distortion, everything readable at any angle.
The characters were generated through a fal.ai pipeline:
- Flux Pro Ultra created the 2D character concepts
- BiRefNet v2 removed backgrounds
- Trellis-2 converted the images to 3D GLB models
The scanline shader is the visual core. It’s not a post-processing effect—it’s baked into the character materials themselves. Each fragment samples its screen-space Y position and applies a sine-wave darkening pattern with randomized distortion. The glitch bands are pseudo-random, seeded by time, creating the impression of coherent light struggling to cohere.
Brightness normalization was critical. The AI-generated textures came out wildly inconsistent—some characters near-black, others blown out. The shader applies selective shadow lifting (darker textures get boosted, bright ones get compressed) to achieve visual parity across the roster.
The ring light uses Three.js Color.lerp() to interpolate between character colors during transitions. The scale animation—shrinking during exit, growing during entrance—reinforces the holographic “powering down / powering up” metaphor.
Text transitions animate per-letter, each character stretching horizontally as it exits right—a nod to the horizontal scan of CRT displays and holographic projection systems.
The Experience
Use arrow keys or the navigation buttons. Each soldier materializes from below, spinning into position while the ring light transitions to their signature color.
Watch the scanlines. They’re not uniform—random bands of distortion sweep through, intensity varying per-line. It’s the visual language of unstable technology, of projections running on insufficient power, of images that might collapse at any moment.
On mobile, the entire scene scales to fit. The isometric camera adjusts its frustum based on viewport dimensions—larger on portrait orientations to ensure the full figure remains visible.
The soldiers rotate slowly. Not because they’re showing off, but because holographic displays typically rotate their subject to give operators a complete view. You’re assessing assets before deployment.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.