Move zero-opacity check to StyleLayer subclasses

src/render/draw_background.js

@@ -18,7 +18,6 @@ function drawBackground(painter: Painter, sourceCache: SourceCache, layer: Style
 
     const pass = (!image && color[3] === 1 && opacity === 1) ? 'opaque' : 'translucent';
     if (painter.renderPass !== pass) return;
-    if (opacity === 0) return;
 
     gl.disable(gl.STENCIL_TEST);
 

src/render/draw_circle.js

@@ -12,7 +12,6 @@ module.exports = drawCircles;
 
 function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleStyleLayer, coords: Array<TileCoord>) {
     if (painter.renderPass !== 'translucent') return;
-    if (layer.paint['circle-opacity'] === 0 && layer.paint['circle-stroke-opacity'] === 0) return;
 
     const gl = painter.gl;
 

src/render/draw_fill.js

@@ -11,7 +11,6 @@ import type TileCoord from '../source/tile_coord';
 module.exports = drawFill;
 
 function drawFill(painter: Painter, sourceCache: SourceCache, layer: FillStyleLayer, coords: Array<TileCoord>) {
-    if (layer.paint['fill-opacity'] === 0) return;
     const gl = painter.gl;
     gl.enable(gl.STENCIL_TEST);
 

src/render/draw_fill_extrusion.js

@@ -15,8 +15,6 @@ import type TileCoord from '../source/tile_coord';
 module.exports = draw;
 
 function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLayer, coords: Array<TileCoord>) {
-    if (layer.paint['fill-extrusion-opacity'] === 0) return;
-
     if (painter.renderPass === '3d') {
         const gl = painter.gl;
 

src/render/draw_heatmap.js

@@ -14,7 +14,6 @@ module.exports = drawHeatmap;
 
 function drawHeatmap(painter: Painter, sourceCache: SourceCache, layer: HeatmapStyleLayer, coords: Array<TileCoord>) {
     if (painter.isOpaquePass) return;
-    if (layer.paint['heatmap-opacity'] === 0) return;
 
     const gl = painter.gl;
 

src/render/draw_line.js

@@ -11,7 +11,6 @@ import type TileCoord from '../source/tile_coord';
 
 module.exports = function drawLine(painter: Painter, sourceCache: SourceCache, layer: LineStyleLayer, coords: Array<TileCoord>) {
     if (painter.renderPass !== 'translucent') return;
-    if (layer.paint['line-opacity'] === 0) return;
     painter.setDepthSublayer(0);
     painter.depthMask(false);
 

src/render/draw_raster.js

@@ -12,7 +12,6 @@ module.exports = drawRaster;
 
 function drawRaster(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<TileCoord>) {
     if (painter.renderPass !== 'translucent') return;
-    if (layer.paint['raster-opacity'] === 0) return;
 
     const gl = painter.gl;
     const source = sourceCache.getSource();

src/render/draw_symbol.js

@@ -40,7 +40,8 @@ function drawSymbols(painter: Painter, sourceCache: SourceCache, layer: SymbolSt
     painter.setDepthSublayer(0);
     painter.depthMask(false);
 
-    if (layer.paint['icon-opacity'] !== 0) {
+    if (!layer.isPaintValueFeatureConstant('icon-opacity') ||
+        layer.getPaintValue('icon-opacity', { zoom: painter.transform.zoom }) !== 0) {
         drawLayerSymbols(painter, sourceCache, layer, coords, false,
             layer.paint['icon-translate'],
             layer.paint['icon-translate-anchor'],
@@ -50,7 +51,8 @@ function drawSymbols(painter: Painter, sourceCache: SourceCache, layer: SymbolSt
         );
     }
 
-    if (layer.paint['text-opacity'] !== 0) {
+    if (!layer.isPaintValueFeatureConstant('text-opacity') ||
+        layer.getPaintValue('text-opacity', { zoom: painter.transform.zoom }) !== 0) {
         drawLayerSymbols(painter, sourceCache, layer, coords, true,
             layer.paint['text-translate'],
             layer.paint['text-translate-anchor'],

src/style/style_layer.js

@@ -190,6 +190,7 @@ class StyleLayer extends Evented {
         if (this.minzoom && zoom < this.minzoom) return true;
         if (this.maxzoom && zoom >= this.maxzoom) return true;
         if (this.layout['visibility'] === 'none') return true;
+        if (this.isOpacityZero(zoom)) return true;
 
         return false;
     }
@@ -313,6 +314,10 @@ class StyleLayer extends Evented {
         return false;
     }
 
+    isOpacityZero(zoom: number) {
+        return false;
+    }
+
     resize(gl: WebGLRenderingContext) { // eslint-disable-line
         // noop
     }
@@ -327,8 +332,8 @@ const subclasses = {
     'fill-extrusion': require('./style_layer/fill_extrusion_style_layer'),
     'line': require('./style_layer/line_style_layer'),
     'symbol': require('./style_layer/symbol_style_layer'),
-    'background': StyleLayer,
-    'raster': StyleLayer
+    'background': require('./style_layer/background_style_layer'),
+    'raster': require('./style_layer/raster_style_layer')
 };
 
 StyleLayer.create = function(layer: LayerSpecification) {

src/style/style_layer/background_style_layer.js

@@ -0,0 +1,12 @@
+// @flow
+
+const StyleLayer = require('../style_layer');
+
+class BackgroundStyleLayer extends StyleLayer {
+    isOpacityZero(zoom: number) {
+        return super.isPaintValueZoomConstant('background-opacity') &&
+            super.getPaintValue('background-opacity', { zoom: zoom }) === 0;
+    }
+}
+
+module.exports = BackgroundStyleLayer;

src/style/style_layer/circle_style_layer.js

@@ -13,6 +13,15 @@ class CircleStyleLayer extends StyleLayer {
         return new CircleBucket(parameters);
     }
 
+    isOpacityZero(zoom: number) {
+        return super.isPaintValueFeatureConstant('circle-opacity') &&
+            super.getPaintValue('circle-opacity', { zoom: zoom }) === 0 &&
+            (super.isPaintValueFeatureConstant('circle-stroke-width') &&
+                super.getPaintValue('circle-stroke-width', { zoom: zoom }) === 0) ||
+            (super.isPaintValueFeatureConstant('circle-stroke-opacity') &&
+                super.getPaintValue('circle-stroke-opacity', { zoom: zoom }) === 0);
+    }
+
     queryRadius(bucket: Bucket): number {
         const circleBucket: CircleBucket = (bucket: any);
         return getMaximumPaintValue('circle-radius', this, circleBucket) +

src/style/style_layer/fill_extrusion_style_layer.js

@@ -23,6 +23,10 @@ class FillExtrusionStyleLayer extends StyleLayer {
         return new FillExtrusionBucket(parameters);
     }
 
+    isOpacityZero(zoom: number) {
+        return super.getPaintValue('fill-extrusion-opacity', { zoom: zoom }) === 0;
+    }
+
     queryRadius(): number {
         return translateDistance(this.paint['fill-extrusion-translate']);
     }

src/style/style_layer/fill_style_layer.js

@@ -66,6 +66,11 @@ class FillStyleLayer extends StyleLayer {
         return new FillBucket(parameters);
     }
 
+    isOpacityZero(zoom: number) {
+        return this.isPaintValueFeatureConstant('fill-opacity') &&
+            super.getPaintValue('fill-opacity', { zoom: zoom }) === 0;
+    }
+
     queryRadius(): number {
         return translateDistance(this.paint['fill-translate']);
     }

src/style/style_layer/heatmap_style_layer.js

@@ -18,6 +18,10 @@ class HeatmapStyleLayer extends StyleLayer {
         return new HeatmapBucket(options);
     }
 
+    isOpacityZero(zoom: number) {
+        return super.getPaintValue('heatmap-opacity', { zoom: zoom }) === 0;
+    }
+
     constructor(layer: LayerSpecification) {
         super(layer);
         this.colorRampData = new Uint8Array(256 * 4);

src/style/style_layer/line_style_layer.js

@@ -14,6 +14,11 @@ class LineStyleLayer extends StyleLayer {
         return new LineBucket(parameters);
     }
 
+    isOpacityZero(zoom: number) {
+        return super.isPaintValueFeatureConstant('line-opacity') &&
+            super.getPaintValue('line-opacity', { zoom: zoom }) === 0;
+    }
+
     queryRadius(bucket: Bucket): number {
         const lineBucket: LineBucket = (bucket: any);
         const width = getLineWidth(

src/style/style_layer/raster_style_layer.js

@@ -0,0 +1,11 @@
+// @flow
+
+const StyleLayer = require('../style_layer');
+
+class RasterStyleLayer extends StyleLayer {
+    isOpacityZero(zoom: number) {
+        return super.getPaintValue('raster-opacity', { zoom: zoom }) === 0;
+    }
+}
+
+module.exports = RasterStyleLayer;