Optimize drawing solid backgrounds

js/render/draw_background.js

@@ -6,13 +6,16 @@ module.exports = drawBackground;
 
 function drawBackground(painter, sourceCache, layer) {
     const gl = painter.gl;
-    const transform = painter.transform;
-    const tileSize = transform.tileSize;
     const color = layer.paint['background-color'];
     const image = layer.paint['background-pattern'];
     const opacity = layer.paint['background-opacity'];
 
-    if (painter.isOpaquePass !== (!image && color[3] === 1)) return;
+    const isOpaque = !image && color[3] === 1 && opacity === 1;
+    if (painter.isOpaquePass !== isOpaque) return;
+
+    // if the background layer is bottommost and not patterned,
+    // we render it with gl.clearColor earlier
+    if (!image && painter.currentLayer === 0) return;
 
     gl.disable(gl.STENCIL_TEST);
 
@@ -31,6 +34,8 @@ function drawBackground(painter, sourceCache, layer) {
 
     gl.uniform1f(program.u_opacity, opacity);
 
+    const transform = painter.transform;
+    const tileSize = transform.tileSize;
     const coords = transform.coveringTiles({tileSize});
 
     for (const coord of coords) {

js/render/painter.js

@@ -118,7 +118,23 @@ class Painter {
      */
     clearColor() {
         const gl = this.gl;
-        gl.clearColor(0, 0, 0, 0);
+        const firstGroup = this.style._groups[0];
+        const background = firstGroup && firstGroup[0].type === 'background' ? firstGroup[0] : null;
+
+        // if the bottommost layer is a solid background, use its color for clearColor
+        // to avoid rendering with full quads later
+        if (background && !background.paint['background-pattern'] && !background.isHidden()) {
+            const color = background.paint['background-color'];
+            const opacity = background.paint['background-opacity'];
+            gl.clearColor(
+                color[0] * opacity,
+                color[1] * opacity,
+                color[2] * opacity,
+                color[3] * opacity);
+        } else {
+            gl.clearColor(0, 0, 0, 0);
+        }
+
         gl.clear(gl.COLOR_BUFFER_BIT);
     }
 

package.json

@@ -63,7 +63,7 @@
     "in-publish": "^2.0.0",
     "jsdom": "^9.4.2",
     "lodash.template": "^4.4.0",
-    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#232b9e423a61eec528d21e678d387b5aa133d5bb",
+    "mapbox-gl-test-suite": "mapbox/mapbox-gl-test-suite#9371755fa2f9ed00fe42c3b48ca2116711bf6058",
     "minifyify": "^7.0.1",
     "npm-run-all": "^3.0.0",
     "nyc": "^8.3.0",