08
NeoWorlder 3D Web Viewer
Three.js · React Three Fiber · WebGLLead developer
25–30
Active world tiles
This case study covers the standalone web viewer, not the complete NeoWorlder project.
01Context
A browser-based viewer for a large streamed 3D world, built on React Three Fiber and Three.js.
A world too large to load has to arrive progressively, and a browser gives you far less memory and far less patience than a native client. The engineering here is about what is resident, at what detail, at any moment.
02My Ownership
Web Architecture
LOD Strategy
Streaming Strategy
Browser Navigation
Browser Performance
Asset Delivery
03Engineering Scope
Viewer architecture
- Web architecture
- Browser navigation
Large-world handling
- LOD strategy
- Streaming strategy
Delivery and performance
- Asset delivery (GLB, KTX2)
- Browser performance
04Streaming a Large World
- Camera / Navigation
- Tile Selection
- Streaming
- LOD Resolution
- WebGL Render
- Asset Delivery
- Browser Budget
05What Is Resident, and at What Detail
The viewer keeps roughly 25–30 world tiles active at a time. That number is the whole design: it is what the browser can hold while staying navigable, and everything else (which tiles are chosen, when they stream, what detail they arrive at) resolves against it.
Asset format does much of the work. GLB carries the geometry and KTX2 gives GPU-compressed textures that can be uploaded without an expensive decode step, which matters far more on the web than in a native client where memory is cheaper.
06Scale
25–30
Active world tiles
The viewer holds roughly 25–30 world tiles active at once, with LOD and streaming resolving against that budget as the camera moves through the world.
07Outcome
A working browser-based viewer for the streamed world.
08Visual Evidence
NeoWorlder 3D Web Viewer case study: Affaf Imran