Wormhole Generator

OVERVIEW

A real-time 3D wormhole visualization 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 colors 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 colors in real time.

OUTCOMES

• Delivers an interactive hero experience with adaptive quality controls across desktop and mobile.
• Maintains visual stability over long sessions through non-drifting particle math.
• Prevents context leaks with explicit disposal of geometry, materials, and post-processing resources.