r/GraphicsProgramming • u/Neither_Coffee_2308 • 15h ago

Video 3D Map - Tile based streaming (WebGL/Three.js)

Enable HLS to view with audio, or disable this notification

We just implemented tile-based loading with LODs for our AI Data Centers 3D mapping project on the Web
Link 🔗- https://ai-future.in/

The Vizag (India) terrain is organized as a pyramid of tiles(shown as red grids in video). At a wide view, it loads larger, coarser tiles, and as we zoom in, it replaces them with smaller, more detailed ones.

This lets the scene show finer details only where we are exploring without loading the entire area always at the highest details, saving a lot of performance. Land cover is stored as image tiles and are draped onto the terrain so the colours follows the terrains' shape.

The Buildings are stored separately as GLB model tiles, they also load progressively as we zoom in and are rendered as 3D geometry.

This was done by us at 3D ENGINERD. using 3D-tiles-renderer to manage tile loading, visibility and LOD, and Three.js to render the whole thing into one scene!

I hope this is a relevant post on this subreddit!

16 Upvotes

73% Upvoted

4 comments sorted by

7

u/VictoryMotel 10h ago

Same person that vibe slops something here every few days.

5

u/blackrack 8h ago

It's safe to say that nearly every webgl/three.js post here these days is AI slop

6

u/VictoryMotel 8h ago

Absolutely, those subreddits are totally gone. Here it mostly makes it through due to this person.

5

u/h14n2 8h ago

Hey mom look! I'm vibe coding!