WebGL rendering for maps

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.

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.

• plan_oblique.pdf^[1] describes the projection and the reasons for using it.
• Plan Oblique Europe^[2] is a demo using a map of Europe {link broken as of 2023}

I discovered through timing and profiling that the bottlenecks are:

• 540ms simplex noise - this is something I could precompute
• 90ms mesh creation - this is something I could precompute
• 70ms noisy edge creation - this is something I could partially precompute
• 60ms map generation - already reasonably optimized
• 90ms map drawing - could be optimized

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.