Three.js From Zero · Article s12-08
S12-08 Holographic Shaders
Skip to demo
Season 12 · S12-08 · Specialized Production Patterns
Holographic Shaders — Bruno Simon + Ektogamat synthesis
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.
renderingshaderportfolio
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.
booting...
Season 12 is deliberately less single-vertical than Season 11. The throughline is still applied production: every demo is framed as a pattern you could reuse in paid work.
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.