Hypsometric Tint from terrain-RGB tiles

[NathanMOlson]

Resolves #5666 (Hypsometric Tint from terrain-RGB tiles).

Demo here: https://nathanmolson.github.io/color_relief

The shader uses a binary search to find the adjacent color stops from the color ramp, which means that larger color palettes take longer to render (O(log(n))).

While #5742 passes the color ramp to the shader using uniforms, this PR passes the color ramp to the shader using textures. This ensures that at least 64 color stops will be supported on all hardware. You can see the difference between these two approaches here.

The elevation stops are packed into an RGBA value using the raster DEM encoding scheme. This means that the minimum distance between stops is set by the quantization of the DEM data (0.1m for mapbox encoding, 1/256 m for terrarium).

Examples:

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

[NathanMOlson]

Do you have an example available that shows the performance when modifying the ramp? I have users who wish to set the high and low breakpoints when they inspect zoomed-in areas.

@larsmaxfield I haven't added any support for dynamically modifying the ramp. Can you tell me more about how you would expect to use that? Would you be using map.setStyle() to modify the ramp? or some other mechanism?

[larsmaxfield]

I would expect to modify the ramp similar to how I can change existing layer paint properties. For example, to tighten the range of a monochrome colorramp via map.setPaintProperty():

const monochrome = [
  "interpolate",
  ["linear"],
  ["elevation"],
  0.0, 'black',
  0.1, 'black',
  3000, 'white',
  3001, 'white'
];

...

monochrome[5] = 2000;  // Tighten range from 0.1–3000 to 2000–2100
monochrome[7] = 2100;
map.setPaintProperty('hyspometric-layer', 'color-relief-color': monochrome);

Or is this already possible?

[larsmaxfield]

User-wise the essential idea is:

My users specifically are inspecting painting heightmaps. They want to see height difference in local areas where the change is very small compared to the full data range.

For mapping, I can imagine a dynamic colorramp could help give an impression of flood level.

[NathanMOlson]

@larsmaxfield I've added the capability to modify the colorramp dynamically using map.setPaintProperty(). In my testing, it happens "instantaneously". Thanks for this suggestion, I think it has really made this feature better.

My demo now uses map.setPaintProperty() to change between colorramps (previously it was removing the layer and adding a new one). I think this PR will now 100% support your use case. Check it out and let me know what you think.

[larsmaxfield]

Excellent. And indeed very fast. Thank you!

[HarelM]

Added a few comments:
@mwilsnd feel free to review as this is your suggestion about using texture I believe.

[mwilsnd]

Looking good, thanks for taking the time to make these changes! I'm hopeful our days having to consider WebGL 1 are numbered, I encourage you to join the discussion about this at our next Web meeting.

I'll defer final approval to @HarelM.

[HarelM]

Looks good overall. Added a final question but approved otherwise...