fix rendering for fill layers on top of raster layers

src/render/draw_raster.js

@@ -11,24 +11,27 @@ import type TileCoord from '../source/tile_coord';
 module.exports = drawRaster;
 
 function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterStyleLayer, coords: Array<TileCoord>) {
+    const zoom = painter.transform.zoom;
     if (painter.renderPass !== 'translucent') return;
-    if (layer.isOpacityZero(painter.transform.zoom)) return;
+    if (layer.isOpacityZero(zoom)) return;
 
     const gl = painter.gl;
     const source = sourceCache.getSource();
     const program = painter.useProgram('raster');
 
-    gl.disable(gl.DEPTH_TEST);
-    painter.depthMask(false);
+    gl.enable(gl.DEPTH_TEST);
+    painter.depthMask(layer.getPaintValue('raster-opacity', {zoom: zoom}) === 1);
+    // Change depth function to prevent double drawing in areas where tiles overlap.
+    gl.depthFunc(gl.LESS);
 
     gl.disable(gl.STENCIL_TEST);
 
     // Constant parameters.
-    gl.uniform1f(program.uniforms.u_brightness_low, layer.paint['raster-brightness-min']);
-    gl.uniform1f(program.uniforms.u_brightness_high, layer.paint['raster-brightness-max']);
-    gl.uniform1f(program.uniforms.u_saturation_factor, saturationFactor(layer.paint['raster-saturation']));
-    gl.uniform1f(program.uniforms.u_contrast_factor, contrastFactor(layer.paint['raster-contrast']));
-    gl.uniform3fv(program.uniforms.u_spin_weights, spinWeights(layer.paint['raster-hue-rotate']));
+    gl.uniform1f(program.uniforms.u_brightness_low, layer.getPaintValue('raster-brightness-min', {zoom: zoom}));
+    gl.uniform1f(program.uniforms.u_brightness_high, layer.getPaintValue('raster-brightness-max', {zoom: zoom}));
+    gl.uniform1f(program.uniforms.u_saturation_factor, saturationFactor(layer.getPaintValue('raster-saturation', {zoom: zoom})));
+    gl.uniform1f(program.uniforms.u_contrast_factor, contrastFactor(layer.getPaintValue('raster-contrast', {zoom: zoom})));
+    gl.uniform3fv(program.uniforms.u_spin_weights, spinWeights(layer.getPaintValue('raster-hue-rotate', {zoom: zoom})));
     gl.uniform1f(program.uniforms.u_buffer_scale, 1);
     gl.uniform1i(program.uniforms.u_image0, 0);
     gl.uniform1i(program.uniforms.u_image1, 1);
@@ -42,7 +45,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
         const tile = sourceCache.getTile(coord);
         const posMatrix = painter.transform.calculatePosMatrix(coord, sourceCache.getSource().maxzoom);
 
-        tile.registerFadeDuration(painter.style.animationLoop, layer.paint['raster-fade-duration']);
+        tile.registerFadeDuration(painter.style.animationLoop, layer.getPaintValue('raster-fade-duration', {zoom: zoom}));
 
         gl.uniformMatrix4fv(program.uniforms.u_matrix, false, posMatrix);
 
@@ -69,7 +72,7 @@ function drawRaster(painter: Painter, sourceCache: SourceCache, layer: RasterSty
         gl.uniform2fv(program.uniforms.u_tl_parent, parentTL || [0, 0]);
         gl.uniform1f(program.uniforms.u_scale_parent, parentScaleBy || 1);
         gl.uniform1f(program.uniforms.u_fade_t, fade.mix);
-        gl.uniform1f(program.uniforms.u_opacity, fade.opacity * layer.paint['raster-opacity']);
+        gl.uniform1f(program.uniforms.u_opacity, fade.opacity * layer.getPaintValue('raster-opacity', {zoom: zoom}));
 
 
         if (source instanceof ImageSource) {
@@ -121,7 +124,7 @@ function saturationFactor(saturation) {
 }
 
 function getFadeValues(tile, parentTile, sourceCache, layer, transform) {
-    const fadeDuration = layer.paint['raster-fade-duration'];
+    const fadeDuration = layer.getPaintValue('raster-fade-duration', {zoom: transform.zoom});
 
     if (fadeDuration > 0) {
         const now = Date.now();

test/integration/render-tests/regressions/mapbox-gl-js#5466/style.json

@@ -0,0 +1,85 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 512,
+      "height": 512,
+      "center": [0, 0],
+      "zoom": 1
+    }
+  },
+  "sources": {
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    },
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [
+                  [
+                    -58,
+                    1
+                  ],
+                  [
+                    26,
+                    1
+                  ],
+                  [
+                    26,
+                    47
+                  ],
+                  [
+                    -58,
+                    47
+                  ],
+                  [
+                    -58,
+                    1
+                  ]
+                ]
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "#fff"
+      }
+    },
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    },
+    {
+      "id": "fill",
+      "type": "fill",
+      "source": "geojson",
+      "paint": {
+        "fill-color": "red"
+      }
+    }
+  ]
+}