skip pattern layer when pattern is missing

src/render/draw_background.js

@@ -21,6 +21,7 @@ function drawBackground(painter, sourceCache, layer) {
 
     let program;
     if (image) {
+        if (pattern.isPatternMissing(image, painter)) return;
         program = painter.useProgram('fillPattern', painter.basicFillProgramConfiguration);
         pattern.prepare(image, painter, program);
         painter.tileExtentPatternVAO.bind(gl, program, painter.tileExtentBuffer);

src/render/draw_fill.js

@@ -42,6 +42,8 @@ function drawFill(painter, sourceCache, layer, coords) {
 }
 
 function drawFillTiles(painter, sourceCache, layer, coords, drawFn) {
+    if (pattern.isPatternMissing(layer.paint['fill-pattern'], painter)) return;
+
     let firstTile = true;
     for (const coord of coords) {
         const tile = sourceCache.getTile(coord);

src/render/draw_fill_extrusion.js

@@ -151,6 +151,7 @@ function drawExtrusion(painter, source, layer, coord) {
     programConfiguration.setUniforms(gl, program, layer, {zoom: painter.transform.zoom});
 
     if (image) {
+        if (pattern.isPatternMissing(image, painter)) return;
         pattern.prepare(image, painter, program);
         pattern.setTile(tile, painter, program);
         gl.uniform1f(program.u_height_factor, -Math.pow(2, coord.z) / tile.tileSize / 8);

src/render/pattern.js

@@ -1,13 +1,27 @@
 'use strict';
 
+const assert = require('assert');
+
 const pixelsToTileUnits = require('../source/pixels_to_tile_units');
 
+/**
+ * Checks whether a pattern image is needed, and if it is, whether it is not loaded.
+ *
+ * @returns {boolean} true if a needed image is missing and rendering needs to be skipped.
+ */
+exports.isPatternMissing = function(image, painter) {
+    if (!image) return false;
+    const imagePosA = painter.spriteAtlas.getPosition(image.from, true);
+    const imagePosB = painter.spriteAtlas.getPosition(image.to, true);
+    return !imagePosA || !imagePosB;
+};
+
 exports.prepare = function (image, painter, program) {
     const gl = painter.gl;
 
     const imagePosA = painter.spriteAtlas.getPosition(image.from, true);
     const imagePosB = painter.spriteAtlas.getPosition(image.to, true);
-    if (!imagePosA || !imagePosB) return;
+    assert(imagePosA && imagePosB);
 
     gl.uniform1i(program.u_image, 0);
     gl.uniform2fv(program.u_pattern_tl_a, imagePosA.tl);

test/integration/render-tests/background-pattern/missing/style.json

@@ -0,0 +1,20 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {},
+  "sprite": "local://sprites/emerald",
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-pattern": "missing"
+      }
+    }
+  ]
+}

test/integration/render-tests/fill-extrusion-pattern/missing/style.json

@@ -0,0 +1,68 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "ignored": {
+        "js": "https://github.com/mapbox/mapbox-gl-js/issues/3327",
+        "native": "https://github.com/mapbox/mapbox-gl-js/issues/3327"
+      }
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "FeatureCollection",
+        "features": [
+          {
+            "type": "Feature",
+            "properties": {
+              "property": 20
+            },
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [ [ -0.0004, 0 ],
+                  [ -0.0002, 0.0002 ],
+                  [ 0.0000, 0 ],
+                  [ -0.0002, -0.0002 ],
+                  [ -0.0004, 0 ] ]
+              ]
+            }
+          },
+          {
+            "type": "Feature",
+            "properties": {
+              "property": 20
+            },
+            "geometry": {
+              "type": "Polygon",
+              "coordinates": [
+                [ [ -0.0000, -0.0002 ],
+                  [ -0.0000, 0.0002 ],
+                  [ 0.0003, 0.0002 ],
+                  [ 0.0003, -0.0002 ],
+                  [ -0.0000, -0.0002 ] ]
+              ]
+            }
+          }
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/emerald",
+  "pitch": 60,
+  "zoom": 18,
+  "layers": [
+    {
+      "id": "extrusion",
+      "type": "fill-extrusion",
+      "source": "geojson",
+      "paint": {
+        "fill-extrusion-pattern": "missing",
+        "fill-extrusion-height": 10
+      }
+    }
+  ]
+}

test/integration/render-tests/fill-pattern/missing/style.json

@@ -0,0 +1,53 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "width": 64,
+      "height": 64
+    }
+  },
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Polygon",
+        "coordinates": [
+          [
+            [
+              -10,
+              -10
+            ],
+            [
+              -10,
+              10
+            ],
+            [
+              10,
+              10
+            ],
+            [
+              10,
+              -10
+            ],
+            [
+              -10,
+              -10
+            ]
+          ]
+        ]
+      }
+    }
+  },
+  "sprite": "local://sprites/emerald",
+  "layers": [
+    {
+      "id": "fill",
+      "type": "fill",
+      "source": "geojson",
+      "paint": {
+        "fill-antialias": false,
+        "fill-pattern": "missing"
+      }
+    }
+  ]
+}