DailyJS

Rendering Large Terrain in WebGL

Alex R. Young

Subscribe

@dailyjs

Facebook

Google+

graphics webgl

Rendering Large Terrain in WebGL

Posted by Alex R. Young on .
Featured

graphics webgl

Rendering Large Terrain in WebGL

Posted by Alex R. Young on .

Rendering large terrains by Felix Palmer is a tutorial that demonstrates how to render terrain with a variable level of detail. There's a demo and the source is on GitHub. It's built with three.js, and is based on a paper on level-of-detail distribution.

Terrain

A simple way to do better is to split our plane into tiles of differing sizes, but of constant vertex count. So for example, each tile contains 64×64 vertices, but sometimes these vertices are stretched over an area corresponding to a large distant area, while for nearby areas, the tiles are smaller.

The code uses GLSL, but the main app/ JavaScript code is all neatly organised with RequireJS, so it's surprisingly easy to navigate and understand. The tutorial blog post also makes some of these difficult ideas more accessible, so I thoroughly recommend checking it out.