Hologram

A practice exercise from the Three.js Journey course, to recreate the look of a sci-fi hologram with a single material: rising stripes, glowing edges, transparency and small glitches. I modelled the TIE fighter for this exercise.

The model uses a custom ShaderMaterial with additive blending and both sides visible. In the fragment shader, horizontal stripes rise over time and combine with a Fresnel term that lights up the edges; a falloff towards the centre leaves the body almost transparent:

float stripes = pow(mod((vPosition.y - uTime * 0.25) * 8.0, 2.0), 2.0);
float fresnel = pow(dot(viewDirection, normal) + 1.0, 2.0);
float holographic = (fresnel * stripes + fresnel * 1.25) * smoothstep(0.8, 0.0, fresnel);

In the vertex shader, every time the model turns back to face the viewer, a wave travels up its height and offsets the vertices by a pseudo-random value: the hologram’s glitch.

The model hovers with Drei’s Float and turns randomly every few seconds before facing front again. The emitter is a twelve-sided emissive wireframe cylinder spinning in place, and the light cone uses Anderson Mancini’s FakeGlowMaterial, with a glow that follows the model’s height. With audio on, background music plays and each glitch triggers one of four electric zaps chosen at random.

Exercise based on the Hologram lesson from Three.js Journey. TIE fighter model: my own. FakeGlowMaterial by Anderson Mancini. Sound effects by henrikcederblad (Freesound) and Little Robot Sound Factory (ZapSplat), licensed CC BY 4.0.