Explore showcase
Domain Expansion Exhibit
3D Modeler, Designer, Programmer · Apr – May 2026
Project4 / 13
Overview
At a glance
Computer graphics capstone focused on a “domain expansion” fantasy: cyclic rooms, procedural props, and shader-driven environment art. I owned a large share of runtime orchestration, shader integration, and graphics debugging.
Three.jsGLSLJavaScriptlil-gui✚
Open live demoFollow Link
View GitHubView GitHub
Features
- Infinite zoom-loop exhibition with continuous traversal.
- Cinematic intro transitioning into interactive zoom runtime.
- Additive sprite layers with thematic overlays.
- Procedural meshes and RNG loot pools.
- Animated shader sky and water.
- Runtime dev panel for isolation, scaling, shader tuning, and diagnostics.
- High/medium/low quality tiers.
Implementation
- Built runtime orchestrator in `main.js` to unify scene state, camera/control logic, mode transitions, and UI interaction.
- Implemented exponent-domain treadmill + queue rotation so domain traversal feels continuous.
- Controlled transparency/painter-order behavior via `renderOrder`, `depthWrite`, `alphaTest`, and per-material opacity mapping.
- Added `onBeforeCompile` shader injection for animated displacement while preserving PBR material fundamentals.
- Modularized project into domain factories, procedural generation units, and shader modules for better teammate parallelism.
- Added graphics presets and tuning hooks to reduce per-device performance instability.
Challenges
- Transparency and depth ordering were very difficult and required heavy manual intervention.
- Too many render/material state updates were happening per-frame, causing avoidable CPU/GPU churn.
- Instancing policy wasn’t enforced early, causing draw-call growth from repeated meshes/groups.
- Some generator paths likely introduced unnecessary per-object material allocation.
- Loading/error/retry handling for models/textures was weak.
- Performance stayed the largest bottleneck across development.
Reflection
- I’m proud of this idea and how far we pushed it creatively.
- I definitely brute-forced parts of render-state behavior frame-by-frame because I didn’t fully know cleaner solutions yet.
- Despite how much I tried, performance is still an obvious bottleneck. Some immediate ideas I can think of to help this is using InstanceMesh or BatchedMesh to reduce draw calls by GPU.
- Performance humbled me a lot and made me respect highly-optimized Three.js experiences way more.
- This was still one of my favorite projects because it let me apply game-design-level creativity to a non-game interactive piece, which is exactly why I enjoy graphics work.
Video
Domain Expansion Exhibit