Adds support for arbitrary raster dem max zoom levels (#6103)

* Supports maxzoom in the hillshading

* rebase + update tests for #6059

src/render/draw_hillshade.js

@@ -17,6 +17,7 @@ function drawHillshade(painter: Painter, sourceCache: SourceCache, layer: Hillsh
     if (painter.renderPass !== 'offscreen' && painter.renderPass !== 'translucent') return;
 
     const context = painter.context;
+    const sourceMaxZoom = sourceCache.getSource().maxzoom;
 
     context.setDepthMode(painter.depthModeForSublayer(0, DepthMode.ReadOnly));
     context.setStencilMode(StencilMode.disabled);
@@ -25,7 +26,7 @@ function drawHillshade(painter: Painter, sourceCache: SourceCache, layer: Hillsh
     for (const tileID of tileIDs) {
         const tile = sourceCache.getTile(tileID);
         if (tile.needsHillshadePrepare && painter.renderPass === 'offscreen') {
-            prepareHillshade(painter, tile);
+            prepareHillshade(painter, tile, sourceMaxZoom);
             continue;
         } else if (painter.renderPass === 'translucent') {
             renderHillshade(painter, tile, layer);
@@ -95,7 +96,7 @@ function renderHillshade(painter, tile, layer) {
 
 // hillshade rendering is done in two steps. the prepare step first calculates the slope of the terrain in the x and y
 // directions for each pixel, and saves those values to a framebuffer texture in the r and g channels.
-function prepareHillshade(painter, tile) {
+function prepareHillshade(painter, tile, sourceMaxZoom) {
     const context = painter.context;
     const gl = context.gl;
     // decode rgba levels by using integer overflow to convert each Uint32Array element -> 4 Uint8Array elements.
@@ -154,6 +155,7 @@ function prepareHillshade(painter, tile) {
         gl.uniform1f(program.uniforms.u_zoom, tile.tileID.overscaledZ);
         gl.uniform2fv(program.uniforms.u_dimension, [tileSize * 2, tileSize * 2]);
         gl.uniform1i(program.uniforms.u_image, 1);
+        gl.uniform1f(program.uniforms.u_maxzoom, sourceMaxZoom);
 
         const buffer = painter.rasterBoundsBuffer;
         const vao = painter.rasterBoundsVAO;

src/shaders/hillshade_prepare.fragment.glsl

@@ -6,6 +6,7 @@ uniform sampler2D u_image;
 varying vec2 v_pos;
 uniform vec2 u_dimension;
 uniform float u_zoom;
+uniform float u_maxzoom;
 
 float getElevation(vec2 coord, float bias) {
     // Convert encoded elevation value to meters
@@ -48,16 +49,16 @@ void main() {
     // which can be reduced to: pow(2, 19.25619978527 - u_zoom)
     // we want to vertically exaggerate the hillshading though, because otherwise
     // it is barely noticeable at low zooms. to do this, we multiply this by some
-    // scale factor pow(2, (u_zoom - 14) * a) where a is an arbitrary value and 14 is the
-    // maxzoom of the tile source. here we use a=0.3 which works out to the
-    // expression below. see nickidlugash's awesome breakdown for more info
+    // scale factor pow(2, (u_zoom - u_maxzoom) * a) where a is an arbitrary value
+    // Here we use a=0.3 which works out to the expression below. see 
+    // nickidlugash's awesome breakdown for more info
     // https://github.com/mapbox/mapbox-gl-js/pull/5286#discussion_r148419556
     float exaggeration = u_zoom < 2.0 ? 0.4 : u_zoom < 4.5 ? 0.35 : 0.3;
 
     vec2 deriv = vec2(
         (c + f + f + i) - (a + d + d + g),
         (g + h + h + i) - (a + b + b + c)
-    ) /  pow(2.0, (u_zoom - 14.0) * exaggeration + 19.2562 - u_zoom);
+    ) /  pow(2.0, (u_zoom - u_maxzoom) * exaggeration + 19.2562 - u_zoom);
 
     gl_FragColor = clamp(vec4(
         deriv.x / 2.0 + 0.5,