Wormhole Generator
Interactive 3D wormhole visualisation with real-time GLSL shaders, bloom post-processing, and theme-reactive colours. Renders orbiting crystals, vortex rings, and energy particles in a contained WebGL scene.
OVERVIEW
A real-time 3D wormhole visualisation built with Three.js and custom GLSL shaders. The scene features a portal core with animated fresnel effects, concentric vortex rings, orbiting octahedral crystals, helical dimensional streams, and hundreds of energy particles, all rendered with bloom post-processing for a cinematic glow.
ARCHITECTURE
The rendering stack combines Three.js scene primitives, custom shader materials, and an UnrealBloomPass post-processing chain. A TypeScript scene controller owns lifecycle and animation concerns, while a thin React wrapper handles mount, resize, visibility, and theme updates from CSS custom properties.
FUNCTIONALITY
- Custom GLSL vertex and fragment shaders for the portal core and space distortion envelope
- Bloom post-processing via UnrealBloomPass for cinematic light bleed
- Theme-reactive colours that read CSS custom properties and update in real time
- IntersectionObserver-based lifecycle that pauses rendering when scrolled off-screen
- Non-drifting particle system using base-position offset with sine oscillation
- Full resource disposal on unmount to prevent WebGL context leaks
HOW IT WORKS
On mount, the React wrapper creates the scene, camera, renderer, frame buffers, and geometry. Each frame, shader uniforms and particle offsets are advanced with delta time before rendering through bloom. Theme and mode changes are observed from the DOM and remapped to Three.js colours in real time.
OUTCOMES
- Delivers an interactive 3D portal scene that gives the portfolio a memorable first impression
- Lets visitors inspect a cinematic WebGL object rather than only watch a static animation
- Creates long-running ambient motion that feels polished during browsing
- Adapts to the current theme so the visual belongs to the surrounding page