Three.js From Zero · Article s12-08
Holographic Shaders — Bruno Simon + Ektogamat synthesis
Holographic Shaders — Bruno Simon + Ektogamat synthesis is Article s12-08 of Three.js From Zero, a MasterAllArts free interactive lesson for artists learning creative 3D on the web.
Holograms are a genre. The visual cue stack is stable now: scanlines, rim emphasis, emission, chroma shift, and some kind of interrupted signal behavior. This article turns that genre memory into a reusable recipe.
1. Why this article exists
Research tagged this as popular and still underexplained. It is one of those effects people keep rebuilding from fragments instead of learning as a pattern.
2. What we are building in the demo
- A hero object with layered emissive and fresnel response.
- A line-based breakup so the material feels transmitted, not opaque.
- A restrained glitch toggle to show where the effect becomes gimmicky.
3. Live demo
The demo below is a compact study model, not a full production system. The goal is to make the article’s mental model tactile: what changes, what matters, and what you would keep when the codebase graduates into a real project.
4. Implementation sketch
float rim = pow(1.0 - max(dot(normalize(vNormal), normalize(vView)), 0.0), 2.5);
float scan = sin(vWorldPos.y * lineScale + time * speed) * 0.5 + 0.5;
vec3 holo = base * (0.4 + rim + scan * glow);5. Production notes
Useful companion articles from earlier seasons:
What usually goes wrong first:
- Flat additive blue is not enough.
- Glitch should punctuate the material, not drown it.
- The silhouette still needs to read under all the effects.
6. Takeaways
- A good hologram is mostly cue selection and restraint.
- Rim and scanline structure do more than arbitrary noise.
- The effect should still communicate the underlying form cleanly.