Scroll-Driven 3D Worlds: Three.js + GSAP Optimizations
Use Three.js for 3D scenes, GSAP ScrollTrigger/Observer for unified input, and WebGL optimizations like KTX2 textures, GPU instancing, and Draco compression to hit 144 FPS on desktop and steady rates on mobile.
Immersive 3D Architecture with Scroll as Camera Control
Replace traditional page grids with a continuous 3D environment where scroll drives camera paths, object animations, and text reveals, creating a 'walking through a space' feel. Use Three.js for all 3D rendering, Blender for modeling/scene baking, and GSAP's ScrollTrigger + Observer for input handling that unifies mouse, touch, and trackpad into smooth, camera-like motion. Avoid raw scroll events; Observer ensures consistent progression across devices. Each section becomes a composed scene—e.g., hero with underwater-lit architecture fading taglines on scroll—mapping user input directly to environmental shifts. This approach took 3 months of building after 5 years accumulating skills via cloning/breaking open-source repos, not tutorials, forcing practical mastery.
For project pages, skip fades: trigger unique transitions like a tesseract unfolding (4D shape expansion/dissolution) to reveal content, making projects feel like 'emerging places' within the world. Implement snap-scroll for locked scene beats using Observer thresholds, velocities, and easing—tune aggressively to avoid rubber-banding while preserving mid-scroll fluidity.
WebGL Performance: From Crawl to 144 FPS
Prioritize GPU efficiency over asset size alone: switch PNG/JPG to KTX2/Basis Universal textures for direct GPU decompression, slashing memory use and enabling smooth mid-range hardware playback. Apply GPU instancing to repeated elements (blocks, pillars, debris)—one draw call replaces hundreds, boosting from 30 to 144 FPS. Use Draco compression on GLTF exports from Blender to cut file sizes dramatically without quality loss.
For mobile, run atmospheric shaders on low-res render targets then composite; dynamically cull off-frustum geometry using known camera paths, skipping LOD tiers to save memory. Result: 144 FPS capable hardware, steady mobile framerates via disciplined per-asset/draw call scrutiny. Low-res custom shaders and Basis ensure no user-noticeable drops.
Crafted Shaders and Audio for Perceptual Depth
Build screen-pinned overlays like contact menus in NDC: in vertex shader, set gl_Position = vec4(position.xy, 0.0, 1.0) to bypass 3D projection/modelView matrices, pinning quads regardless of camera motion. For 'Ink Bleed' transition, drive expansion with fBM simplex noise: float noise = fbm(vUv * 4.0 - uTime * 0.4); scaled by hover/click uniforms. Amplify noise on click (dynamicNoise = noise * (0.8 + uClick * 1.5)) for splashing edges; soften dynamically (softness = 1.2 + (uClick * 1.0)) in smoothstep for motion blur intuition—idle crisp, expanding blurry like real ink.
Integrate custom audio (e.g., 'Vanity' by Hevel): toggle-only, apply lowpass filter on project open to muffle as if entering adjacent room, lifting on close. Reinforces spatial continuity—projects as 'rooms,' not page swaps.
High-Impact Sequences Demand Custom Rigging
For narrative peaks like a fracturing rose-to-lava scene: model breaking floors in Blender with multi-angle fracture sculpting; run dual particle systems (soft petal drift vs. fast embers) in tight budget. Swap scroll modes dynamically—free continuous to snap-block—via Observer state machine for beat-by-beat progression. Rig astronaut with 4 blended states (falling, walking forward/back, idle) using custom crossfade curves timed to snaps, eliminating pops. Every technique serves message weight: use environment to underscore personal themes without compromising craft.