Stellar Odyssey - Exploring the Wonder of the Cosmos
What It Is
Stellar Odyssey is an immersive 3D web experience that transports you to four breathtaking cosmic worlds. It's not a traditional website - it's a portal to explore the beauty of the universe through real-time 3D graphics.
The Inspiration
I built Stellar Odyssey from a simple question: "Can a website feel like stepping into another dimension?"
Inspired by the breathtaking images from the James Webb Space Telescope and my lifelong fascination with space, I wanted to create something that makes people stop and just look. Most websites are functional. I wanted one that's unforgettable.
The goal wasn't technical complexity - it was creating wonder. That's what the hackathon asked for, and that's exactly what I set out to build.
The Four Worlds
Cosmic Nebula - Drift through 20,000+ animated particles representing swirling interstellar gas, with pulsing stars and a geometric core.
Black Hole Event Horizon - Witness a gravitational singularity with triple-ring accretion disks and orbiting particles being pulled to their doom.
Crystal Cavern - Explore a mystical cave where 120+ glowing crystals pulse with cosmic energy around a central resonance orb.
Aurora Borealis - Dance beneath double layers of shimmering aurora curtains and ten thousand twinkling stars.
How I Built It
I used Three.js as the core 3D engine. Each world has its own custom GLSL shaders written from scratch to create unique visual effects - the swirling nebula, the distorted gravitational lensing of the black hole, the pulsing crystals, and the flowing aurora.
Post-processing (Unreal Bloom + Vignette) adds the cinematic glow that makes everything feel luminous and magical. The camera uses smooth easing transitions to glide between worlds.
Every object in the scene - stars, crystals, orb, moon, portal - is clickable and reveals its own piece of cosmic lore, turning exploration into a storytelling experience.
Challenges I Faced
- Performance vs. Beauty: Balancing 50,000+ particles without dropping frame rate. I optimized counts and shader math to keep a smooth 60 FPS.
- Shader Crafting: Hand-writing GLSL for the aurora and black hole was the hardest part. Getting the colors and motion just right took many iterations.
- Unified Design: Making four totally different worlds feel like one cohesive experience required careful color palette and UI design.
What I Learned
This project taught me advanced shader programming, particle system optimization, and the Three.js post-processing pipeline. But most importantly, I learned that the most memorable web experiences are built on feeling, not just function.
"The goal is not technical difficulty. The goal is to create the most memorable experience possible."
Log in or sign up for Devpost to join the conversation.