Rendering large terrains in WebGL

Talk overview

1. Crash course on WebGL shaders
2. Basic approach to problem
3. Using a recursive tile pattern
4. Using a dynamic mesh
5. Questions? Feel free to ask during talk too!

Talk is based on blog post that can be found on www.pheelicks.com

WebGL graphics pipeline

1. Geometry is defined in JavaScript and sent to GPU
2. Vertex shader is invoked on every vertex, allowing it to be moved
3. Fragment (pixel) shader is invoked on each pixel to be drawn

In this talk we'll be looking at the geometry and the vertex shader

Let the graphics card do the work!

Simple grid approach

• Just have a uniform grid of points across the entire map
• Pros:
  • Simple
• Cons:
  • Not enough detail in the foreground
  • Too much detail in in the background

Arrange tiles in concentric shells

Arrange tiles in concentric shells

Moving around the terrain

• Terrain geometry is static relative to camera
• Data underlying visulazation is changing
• Terrain data is "flowing" through the vertices
• If we do not have enough vertices, terrain will "shake"

How to fix shaking

• Snap each vertex to a grid, such that the grid spacing is equal to the vertex spacing
• Snapping will be inperceptable as vertices are equally spaced
• There's just one problem...

Seams between layers

• By fixing the shaking we've introduced seams between the layers
• Seams appear because each shell is snapping to a grid of different resolution
• How to fix?

Morphing grid snapping between layers

• Over a short distance between shells, gradually morph the grid to snap to

Questions?

http://www.github.com/felixpalmer/lod-terrain

http://felixpalmer.github.io/lod-terrain/

Felix Palmer | @pheeelicks | www.pheelicks.com