WebGL rendering for maps

 from Red Blob Games
17 Oct 2017

The HTML version of mapgen2 has a canvas-based renderer. On this page I’m going to experiment with WebGL-based rendering, primarily for a future mapgen4, but using mapgen2 maps for now. Put ?seed=12345 in the URL to change the seed to 12345.

(slow) (green+red channels are 16-bit elevation; blue channel is 8-bit moisture)

I gave myself two weeks to work on these. Things I got working: aspect-based lighting (lower d) vs diffuse lighting (higher d), rivers and lakes look etched into landscape, noise effects on elevation/moisture/shading, “plan oblique” approximation (set rotate_x = 3.5 and scale_z = 1.2, then try changing rotate_z), and outline shading (only visible when changing rotate_x). The implementation renders elevation/moisture/water/noise to textures, then combines these channels in a separate pass.

I discovered through timing and profiling that the bottlenecks are:

Plan oblique didn’t give me everything I wanted. I think the problem is that mapgen2 generates one big mountain but I want hundreds of small peaks. Mapgen4 doesn’t produce that either. I think I need to use simplex noise on the geometry, by subdividing each triangle into lots of small ones and then applying noise to the vertices. That’s an experiment for another day.

The outlines turned out better than expected. Try changing rotate_x to 3.5, outline_depth to 4, slope to 10, flat to 10, scale_z to 1, then change rotate_z. Also try d = 40, distort_a = 0, noise_a = 0

I also liked: d = 0.6, f = 0, distort_a = 0.01, distort_f = 2, noise_a = 1, noise_f = 10, slope = 10, flat = 10, c = 0.35, d = 8, rotate_x = 3.7, ouline_depth = 3, outline_strength = 21, outline_threshold = 0.3 (sorry about two different variables named d)

Related reading: subdividing map triangles into GL triangles to get the “eroded” look.

Random note about GLSL: I’m encoding the elevation in a texture, but textures have 8 bits per channel, and I ended up with terraces like the ones IQ shows here[3]. I ended up putting 8 more bits into a second channel, but didn’t implement the workaround he shows.

Email me , or tweet @redblobgames, or comment: