<18MB
Per zone budget
Designing lightweight 3D worlds
Exploring methods to create expansive, immersive 3D environments for web browsers,balancing visual richness with performance constraints through smart asset management and portal-based streaming.
Intro
reating 3D worlds for the web presents unique challenges. Unlike native applications, web-based 3D must account for bandwidth limitations, browser capabilities, and the expectation of instant loading.
This project explores techniques for building worlds that feel rich and detailed while remaining lightweight and performant across devices and network conditions. Every decision was made with performance budgets in mind,the goal was to create worlds that load quickly and run smoothly even on mid-range devices.
Hard limits, by design
Every decision started here. Before a single asset was created, three numbers defined what was possible.
<2s
Initial load time
60fps
Target frame rate
These aren't aspirational targets,they're hard constraints that shaped every modelling decision, every texture choice, every lighting approach. Building to a budget forces clarity.
Zone-based architecture
The world is structured as interconnected zones rather than a single continuous space. Each zone is self-contained and loads independently, allowing players to explore large environments without hammering their device or the network.
Zone-Based Architecture
World divided into manageable chunks. Load boundaries trigger asset streaming silently in the background as players move through space.
Progressive Loading
Assets load as users approach them. Distant zones are represented by low-poly imposters until the player gets close enough to warrant the full detail.
Shared Resources
Reuse textures and meshes across similar zones. A single grass texture atlas serves all outdoor environments,loaded once, referenced everywhere.
Culling Systems
Only render what's visible. Occlusion culling removes geometry behind walls and terrain, dramatically reducing draw calls per frame.
Concept to deployment
Concept & Blocking
Rough geometry sketches establish scale, flow, and spatial relationships before any real assets are introduced. Zone boundaries are defined at this stage. Concept sketches and geometry blocking explore overall spatial ideas,scale, proportion, where the player's eye should travel.
Asset Creation & Optimisation
Low-poly modelling with texture baking captures fine surface detail without the geometry cost. Each mesh has multiple LOD levels. Texture atlasing reduces draw calls. Everything is built with the 18MB ceiling in mind.
Before optimization
After optimization
Lighting & Atmosphere
Baked lighting eliminates real-time shadow cost. Atmosphere layers,fog, ambient occlusion, light probes,add depth without runtime expense. The night scenes demanded a different approach: emissive materials and carefully placed point lights, each one justified by the performance budget.
World in the Making...
Timelapse showing different elements appearing and gradually creating a complete world.
Nine environments, one standard
Each world built to the same performance specification,different themes, different atmospheres, identical discipline.
Medieval Castle
A European medieval town square with fire particles, ambient crowd audio, and a central cathedral. Portal boundaries define four distinct sub-zones,the market, the keep, the outer walls, and the cathedral interior. Performance metrics: 16.4MB · stable 60fps.
Egypt Oasis
Sand instancing handles the desert floor at near-zero geometry cost. Obelisks and pyramid structures use shared stone texture atlases. Distance fog compresses the horizon and hides the LOD transitions naturally. Performance metrics: 14.8MB · stable 60fps.
BYC Marina
A yacht club marina with a water shader that reads as ocean without simulating it. Vessel LODs switch at 40m, 80m, and 150m. The dock is the social spine,designed wide enough for crowds, detailed enough to reward close inspection. Performance metrics: 15.9MB · stable 60fps.
World 04–06,Further Environments
Underwater World
Crystal Mine
Myx City
What this project proved
Scalability
The zone architecture scales to unlimited world expansion. New environments are added without touching existing ones or impacting load time. The workflow is modular by design.
Performance
All nine worlds hit the <18MB / 60fps target on mid-range devices. No exceptions, no asterisks. The budget was a forcing function that made every world more considered.
Accessibility
Rich 3D experiences accessible from any browser, on any network. No app install, no GPU requirement. The web constraint,the hardest one,turned out to be the most important one to solve.
These projects proved that the web constraint,the hardest one to work within,produced better, more considered worlds than an unconstrained approach would have. The budget wasn't a limitation. It was the brief.