Next-Gen WebGL 3D Spatial Universe: Reimagining the digital portfolio into a playful cosmic quest combining ancient mythos, tactile physics, and buttery 60 FPS performance.
What happens when an ancient Greek epic meets a modern WebGL playground?
The spark for this universe ignited on a cozy weekend right after watching an Odyssey movie adaptation. I was completely hooked by the grandeur of ancient Greek epic storytelling: courageous voyagers navigating uncharted celestial seas, Olympian gods towering among the stars, and the timeless beauty of Hellenic marble sculptures.
That fascination sent me straight down a creative rabbit hole, studying classical Greek art, the anatomical drama of mythological statues like Atlas bearing the heavens, and ancient architectural pillars.
Then came the 'aha!' moment: Why do digital design portfolios always have to be so serious, predictable, and flat? Why scroll down another beige resume page when you could invite people on a playful mythical voyage through the cosmos?
Instead of a static PDF, I spent a focused 1-month sprint building the 'Spatial Universe': an archipelago of floating celestial islands where visitors can pilot their own camera across space, discover project nodes tucked into classical ruins, and playfully interact with retro artifacts floating under warm amber (#ffd685) and cyan (#50a5ff) starlight.
Design Atmosphere Note: The universe is rendered in a permanent, theatrical dark mode without theme toggles. This highlights glowing emissive shaders, cosmic stardust, and dramatic marble rim lighting from start to finish.
Chapter 02· Engineering the Magic: Cinematic & Featherlight
Keeping the cosmos locked at 60 FPS so your laptop fan never sounds like a jet engine.
Building a full 3D universe inside a web browser is an absolute blast, but nobody enjoys a sluggish site that turns their phone into a hand warmer. Even the most stunning Greek statues and floating islands lose their charm if they stutter at 15 frames per second.
My challenge was to make something visually grand feel completely weightless, loading in under a second on any device. Here is the recipe behind the magic:
1. Extreme Geometry Diet:
Every 3D mesh (from the classical Atlas sculpture and marble pedestals to the floating CRT retro TV) was retopologized in Blender and crushed through Google Draco compression. We shed 75% of asset bulk without losing an ounce of sculptural detail.
2. Battery-Friendly Shaders:
Instead of piling on heavy multi-pass post-processing, I wrote lightweight custom GLSL shaders. The starry procedural sky and reactive water ripples calculate smoothly in a single GPU pass.
3. Playful Preloading:
While Three.js warms up in the background, visitors are greeted by dancing ember particles and a rotating monogram. No awkward white flashes; just a smooth, theatrical entrance into the cosmos.
“Great creative technology is like magic: the heavier the illusion on screen, the lighter and more effortless it should feel to the person holding the mouse.”
Chapter 03· Ideation to Launch Flow
A 1-month creative sprint from mythological sketches to live WebGL code.
01
Odyssey Inspiration & Classical Ideation
Fresh off studying Greek mythology and classical Hellenic statues, I sketched a mythical cosmos with 6 exploratory islands: About Me, Career Flashbacks, Selected Works, Milestones, Survival Toolkit, and Let's Connect.
02
Blender Sculpting & Draco Optimization
Hand-modeled classical marble ruins, an Atlas statue, and retro-futuristic props in Blender, compressing geometry with Google Draco for instant sub-second downloads.
03
Declarative 3D Stage & Celestial Shaders
Assembled the scene graph in React Three Fiber with custom GLSL sky scattering and dynamic water ripples that respond smoothly like a celestial Aegean sea.
04
Swooping Drone Camera Flight
Choreographed smooth parabolic camera trajectories between islands, pairing Lenis inertial scrolling with GSAP so gliding feels cinematic with zero motion sickness.
05
Playful Physics & Tactile Soundscape
Added a Matter.js 2D physics sandbox for bouncy interactive skill pills you can playfully toss around, paired with an ambient soundscape and a live audio visualizer toggle.
06
Global Edge Deployment in 1 Month
Constructed with Next.js App Router and deployed across Cloudflare Workers edge nodes. The entire experience went from wild sketch to live 60 FPS reality within 30 days.
Chapter 04· Real-World Impact & Reflections
Buttery 60 FPS motion, sub-second loads, and a portfolio people genuinely enjoy playing with.
Shipped live to the edge in just one month, this project proved that technical portfolios can be deeply playful without sacrificing engineering discipline.
Key Reflections:
• 100% Solo Passion Project: Built from scratch in 30 days, covering initial Odyssey-inspired ideation, Blender 3D sculpting, GLSL shader code, physics simulations, and cloud edge deployment.
• Playful First Impression: Visitors spend 4x longer exploring because interaction feels like a game rather than a resume review.
• Sub-Second Edge Delivery: Near-instant load times worldwide thanks to Cloudflare Workers edge nodes and aggressive Draco mesh compression.
• Rock-Solid 60 FPS: Silky smooth motion across laptops, high-refresh desktop monitors, and mobile touchscreens.
60 FPSRock-solid WebGL Render Frame Rate
< 0.8sLightning-Fast Time to Interactive (TTI)
1 MonthConcept-to-Launch Solo Sprint
75%Asset Payload Reduction via Draco
“
To me, art and engineering are not opposing forces. Art gives an experience its soul, while engineering ensures that soul moves effortlessly: instant, responsive, and without friction.
Muhammad Farid Laksmana
Fullstack Designer & Creative Developer
Motion Showcase· Interactive 3D & Gamification Systems
Gamification & Dynamic Node Systems Recording
3D Spatial Exploration & Island Navigation
Real-time camera glides between celestial waypoints, showcasing procedural skies, dynamic water ripples, and ambient lighting.
Gamified Interaction & Tactile Node Systems
Interactive waypoint triggers, smooth camera arc transitions, ambient soundscapes, and responsive WebGL inspect modals.
