Updates to hillshade shader to improve opaque hillshade styling (#5870)

* updates to hillshade shader to improve opaque hillshade styling * remove zenith/polar, clean up shader comments * update render tests for shader updates * simplify and rename debug page * add small allowable diff for failing test
mapbox · Dec 21, 2017 · a0a3286 · a0a3286
1 parent 2124161
commit a0a3286
Show file tree

Hide file tree

Showing 34 changed files with 68 additions and 87 deletions.
diff --git a/debug/hillshade.html b/debug/hillshade.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='/dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
+
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/cjaudgl840gn32rnrepcb9b9g', // the outdoors-v10 style but without Hillshade layers
+    center: [-119.5591, 37.715],
+    zoom: 9
+});
+
+map.on('load', function () {
+    map.addSource('dem', {
+        "type": "raster-dem",
+        "url": "mapbox://mapbox.terrain-rgb"
+    });
+    map.addLayer({
+        "id": "hillshading",
+        "source": "dem",
+        "type": "hillshade"
+    // insert below waterway-river-canal-shadow;
+    // where hillshading sits in the Mapbox Outdoors style
+    }, 'waterway-river-canal-shadow');
+});
+
+</script>
+</body>
+</html>
diff --git a/debug/terrain-rendering.html b/debug/terrain-rendering.html
diff --git a/src/render/draw_hillshade.js b/src/render/draw_hillshade.js
@@ -37,10 +37,9 @@ function drawHillshade(painter: Painter, sourceCache: SourceCache, layer: Hillsh
 
 function setLight(program, painter, layer) {
     let azimuthal = layer.paint.get('hillshade-illumination-direction') * (Math.PI / 180);
-    const zenith = 30 * (Math.PI / 180);
     // modify azimuthal angle by map rotation if light is anchored at the viewport
     if (layer.paint.get('hillshade-illumination-anchor') === 'viewport')  azimuthal -= painter.transform.angle;
-    painter.context.gl.uniform3f(program.uniforms.u_light, layer.paint.get('hillshade-exaggeration'), azimuthal, zenith);
+    painter.context.gl.uniform2f(program.uniforms.u_light, layer.paint.get('hillshade-exaggeration'), azimuthal);
 
 }
 

diff --git a/src/shaders/hillshade.fragment.glsl b/src/shaders/hillshade.fragment.glsl
@@ -2,7 +2,7 @@ uniform sampler2D u_image;
 varying vec2 v_pos;
 
 uniform vec2 u_latrange;
-uniform vec3 u_light;
+uniform vec2 u_light;
 uniform vec4 u_shadow;
 uniform vec4 u_highlight;
 uniform vec4 u_accent;
@@ -14,22 +14,36 @@ void main() {
 
     vec2 deriv = ((pixel.rg * 2.0) - 1.0);
 
-    // we multiply the slope by a scale factor based on the cosin of the pixel's approximate latitude
+    // We divide the slope by a scale factor based on the cosin of the pixel's approximate latitude
+    // to account for mercator projection distortion. see #4807 for details
     float scaleFactor = cos(radians((u_latrange[0] - u_latrange[1]) * (1.0 - v_pos.y) + u_latrange[1]));
-    float slope = atan(1.25 * length(deriv)) / scaleFactor;
+    // We also multiply the slope by an arbitrary z-factor of 1.25
+    float slope = atan(1.25 * length(deriv) / scaleFactor);
     float aspect = deriv.x != 0.0 ? atan(deriv.y, -deriv.x) : PI / 2.0 * (deriv.y > 0.0 ? 1.0 : -1.0);
 
     float intensity = u_light.x;
     // We add PI to make this property match the global light object, which adds PI/2 to the light's azimuthal
     // position property to account for 0deg corresponding to north/the top of the viewport in the style spec
     // and the original shader was written to accept (-illuminationDirection - 90) as the azimuthal.
     float azimuth = u_light.y + PI;
-    float polar = u_light.z;
 
-    float accent = cos(slope);
-    vec4 accent_color = intensity * clamp((1.0 - accent) * 2.0, 0.0, 1.0) * u_accent;
+    // We scale the slope exponentially based on intensity, using a calculation similar to
+    // the exponential interpolation function in the style spec:
+    // https://github.com/mapbox/mapbox-gl-js/blob/master/src/style-spec/expression/definitions/interpolate.js#L217-L228
+    // so that higher intensity values create more opaque hillshading.
+    float base = 1.875 - intensity * 1.75;
+    float maxValue = 0.5 * PI;
+    float scaledSlope = intensity != 0.5 ? ((pow(base, slope) - 1.0) / (pow(base, maxValue) - 1.0)) * maxValue : slope;
+
+    // The accent color is calculated with the cosine of the slope while the shade color is calculated with the sine
+    // so that the accent color's rate of change eases in while the shade color's eases out.
+    float accent = cos(scaledSlope);
+    // We multiply both the accent and shade color by a clamped intensity value
+    // so that intensities >= 0.5 do not additionally affect the color values
+    // while intensity values < 0.5 make the overall color more transparent.
+    vec4 accent_color = (1.0 - accent) * u_accent * clamp(intensity * 2.0, 0.0, 1.0);
     float shade = abs(mod((aspect + azimuth) / PI + 0.5, 2.0) - 1.0);
-    vec4 shade_color = mix(u_shadow, u_highlight, shade) * slope * sin(polar) * mix(0.0, 2.0, intensity);
+    vec4 shade_color = mix(u_shadow, u_highlight, shade) * sin(scaledSlope) * clamp(intensity * 2.0, 0.0, 1.0);
     gl_FragColor = accent_color * (1.0 - shade_color.a) + shade_color;
 
 #ifdef OVERDRAW_INSPECTOR

diff --git a/...render-tests/combinations/background-opaque--hillshade-translucent/expected.png b/...render-tests/combinations/background-opaque--hillshade-translucent/expected.png
diff --git a/...r-tests/combinations/background-translucent--hillshade-translucent/expected.png b/...r-tests/combinations/background-translucent--hillshade-translucent/expected.png
diff --git a/...ender-tests/combinations/circle-translucent--hillshade-translucent/expected.png b/...ender-tests/combinations/circle-translucent--hillshade-translucent/expected.png
diff --git a/...sts/combinations/fill-extrusion-translucent--hillshade-translucent/expected.png b/...sts/combinations/fill-extrusion-translucent--hillshade-translucent/expected.png
diff --git a/...ation/render-tests/combinations/fill-opaque--hillshade-translucent/expected.png b/...ation/render-tests/combinations/fill-opaque--hillshade-translucent/expected.png
diff --git a/.../render-tests/combinations/fill-translucent--hillshade-translucent/expected.png b/.../render-tests/combinations/fill-translucent--hillshade-translucent/expected.png
diff --git a/...nder-tests/combinations/heatmap-translucent--hillshade-translucent/expected.png b/...nder-tests/combinations/heatmap-translucent--hillshade-translucent/expected.png
diff --git a/...r-tests/combinations/hillshade-translucent--background-translucent/expected.png b/...r-tests/combinations/hillshade-translucent--background-translucent/expected.png
diff --git a/...ender-tests/combinations/hillshade-translucent--circle-translucent/expected.png b/...ender-tests/combinations/hillshade-translucent--circle-translucent/expected.png
diff --git a/...sts/combinations/hillshade-translucent--fill-extrusion-translucent/expected.png b/...sts/combinations/hillshade-translucent--fill-extrusion-translucent/expected.png
diff --git a/...ation/render-tests/combinations/hillshade-translucent--fill-opaque/expected.png b/...ation/render-tests/combinations/hillshade-translucent--fill-opaque/expected.png
diff --git a/.../render-tests/combinations/hillshade-translucent--fill-translucent/expected.png b/.../render-tests/combinations/hillshade-translucent--fill-translucent/expected.png
diff --git a/...nder-tests/combinations/hillshade-translucent--heatmap-translucent/expected.png b/...nder-tests/combinations/hillshade-translucent--heatmap-translucent/expected.png
diff --git a/...er-tests/combinations/hillshade-translucent--hillshade-translucent/expected.png b/...er-tests/combinations/hillshade-translucent--hillshade-translucent/expected.png
diff --git a/...gration/render-tests/combinations/hillshade-translucent--hillshade-translucent/style.json b/...gration/render-tests/combinations/hillshade-translucent--hillshade-translucent/style.json
@@ -3,7 +3,8 @@
   "metadata": {
     "test": {
       "width": 64,
-      "height": 64
+      "height": 64,
+      "diff": 0.002
     }
   },
   "center": [

diff --git a/.../render-tests/combinations/hillshade-translucent--line-translucent/expected.png b/.../render-tests/combinations/hillshade-translucent--line-translucent/expected.png
diff --git a/...ender-tests/combinations/hillshade-translucent--raster-translucent/expected.png b/...ender-tests/combinations/hillshade-translucent--raster-translucent/expected.png
diff --git a/...ender-tests/combinations/hillshade-translucent--symbol-translucent/expected.png b/...ender-tests/combinations/hillshade-translucent--symbol-translucent/expected.png
diff --git a/.../render-tests/combinations/line-translucent--hillshade-translucent/expected.png b/.../render-tests/combinations/line-translucent--hillshade-translucent/expected.png
diff --git a/...ender-tests/combinations/raster-translucent--hillshade-translucent/expected.png b/...ender-tests/combinations/raster-translucent--hillshade-translucent/expected.png
diff --git a/...ender-tests/combinations/symbol-translucent--hillshade-translucent/expected.png b/...ender-tests/combinations/symbol-translucent--hillshade-translucent/expected.png
diff --git a/test/integration/render-tests/hillshade-accent-color/default/expected.png b/test/integration/render-tests/hillshade-accent-color/default/expected.png
diff --git a/test/integration/render-tests/hillshade-accent-color/literal/expected.png b/test/integration/render-tests/hillshade-accent-color/literal/expected.png
diff --git a/test/integration/render-tests/hillshade-accent-color/zoom-function/expected.png b/test/integration/render-tests/hillshade-accent-color/zoom-function/expected.png
diff --git a/test/integration/render-tests/hillshade-highlight-color/default/expected.png b/test/integration/render-tests/hillshade-highlight-color/default/expected.png
diff --git a/test/integration/render-tests/hillshade-highlight-color/literal/expected.png b/test/integration/render-tests/hillshade-highlight-color/literal/expected.png
diff --git a/test/integration/render-tests/hillshade-highlight-color/zoom-function/expected.png b/test/integration/render-tests/hillshade-highlight-color/zoom-function/expected.png
diff --git a/test/integration/render-tests/hillshade-shadow-color/default/expected.png b/test/integration/render-tests/hillshade-shadow-color/default/expected.png
diff --git a/test/integration/render-tests/hillshade-shadow-color/literal/expected.png b/test/integration/render-tests/hillshade-shadow-color/literal/expected.png
diff --git a/test/integration/render-tests/hillshade-shadow-color/zoom-function/expected.png b/test/integration/render-tests/hillshade-shadow-color/zoom-function/expected.png