Refactors per review

src/render/draw_background.js

@@ -16,8 +16,8 @@ function drawBackground(painter: Painter, sourceCache: SourceCache, layer: Style
     const image = layer.paint['background-pattern'];
     const opacity = layer.paint['background-opacity'];
 
-    const isOpaque = !image && color[3] === 1 && opacity === 1;
-    if (painter.isOpaquePass !== isOpaque) return;
+    const pass = (!image && color[3] === 1 && opacity === 1) ? 'opaque' : 'translucent';
+    if (painter.renderPass !== pass) return;
 
     gl.disable(gl.STENCIL_TEST);
 

src/render/draw_circle.js

@@ -11,7 +11,8 @@ import type TileCoord from '../source/tile_coord';
 module.exports = drawCircles;
 
 function drawCircles(painter: Painter, sourceCache: SourceCache, layer: CircleStyleLayer, coords: Array<TileCoord>) {
-    if (painter.isOpaquePass) return;
+    const pass = 'translucent';
+    if (painter.renderPass !== pass) return;
 
     const gl = painter.gl;
 

src/render/draw_fill.js

@@ -13,23 +13,22 @@ function drawFill(painter: Painter, sourceCache: SourceCache, layer: FillStyleLa
     const gl = painter.gl;
     gl.enable(gl.STENCIL_TEST);
 
-    const isOpaque =
-        !layer.paint['fill-pattern'] &&
+    const pass = (!layer.paint['fill-pattern'] &&
         layer.isPaintValueFeatureConstant('fill-color') &&
         layer.isPaintValueFeatureConstant('fill-opacity') &&
         layer.paint['fill-color'][3] === 1 &&
-        layer.paint['fill-opacity'] === 1;
+        layer.paint['fill-opacity'] === 1) ? 'opaque' : 'translucent';
 
     // Draw fill
-    if (painter.isOpaquePass === isOpaque) {
+    if (painter.renderPass === pass) {
         // Once we switch to earcut drawing we can pull most of the WebGL setup
         // outside of this coords loop.
         painter.setDepthSublayer(1);
         drawFillTiles(painter, sourceCache, layer, coords, drawFillTile);
     }
 
     // Draw stroke
-    if (!painter.isOpaquePass && layer.paint['fill-antialias']) {
+    if (painter.renderPass === 'translucent' && layer.paint['fill-antialias']) {
         painter.lineWidth(2);
         painter.depthMask(false);
 

src/render/draw_fill_extrusion.js

@@ -1,9 +1,13 @@
 // @flow
 
+const Buffer = require('../data/buffer');
+const VertexArrayObject = require('./vertex_array_object');
+const PosArray = require('../data/pos_array');
 const glMatrix = require('@mapbox/gl-matrix');
 const pattern = require('./pattern');
 const mat3 = glMatrix.mat3;
 const vec3 = glMatrix.vec3;
+const mat4 = glMatrix.mat4;
 
 import type Painter from './painter';
 import type SourceCache from '../source/source_cache';
@@ -13,18 +17,47 @@ import type TileCoord from '../source/tile_coord';
 module.exports = draw;
 
 function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLayer, coords: Array<TileCoord>) {
-    if (painter.isOpaquePass) return;
+    const gl = painter.gl;
+
+    if (painter.renderPass === '3d') {
+        gl.disable(gl.STENCIL_TEST);
+        gl.enable(gl.DEPTH_TEST);
+
+        painter.clearColor();
+        painter.depthMask(true);
+
+        for (let i = 0; i < coords.length; i++) {
+            drawExtrusion(painter, source, layer, coords[i]);
+        }
+    } else if (painter.renderPass === 'translucent') {
+        drawExtrusionTexture(painter, layer);
+    };
+}
+
+function drawExtrusionTexture(painter, layer) {
+    const renderedTexture = painter._prerenderedTextures[layer.id];
+    if (!renderedTexture) return;
 
     const gl = painter.gl;
+    const program = painter.useProgram('extrusionTexture');
+
     gl.disable(gl.STENCIL_TEST);
-    gl.enable(gl.DEPTH_TEST);
+    gl.disable(gl.DEPTH_TEST);
 
-    painter.clearColor();
-    painter.depthMask(true);
+    gl.activeTexture(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, renderedTexture.texture);
 
-    for (let i = 0; i < coords.length; i++) {
-        drawExtrusion(painter, source, layer, coords[i]);
-    }
+    gl.uniform1f(program.u_opacity, layer.paint['fill-extrusion-opacity']);
+    gl.uniform1i(program.u_image, 0);
+
+    const matrix = mat4.create();
+    mat4.ortho(matrix, 0, painter.width, painter.height, 0, 0, 1);
+    gl.uniformMatrix4fv(program.u_matrix, false, matrix);
+
+    gl.uniform2f(program.u_world, gl.drawingBufferWidth, gl.drawingBufferHeight);
+
+    renderedTexture.vao.bind(gl, program, renderedTexture.buffer);
+    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
 }
 
 function drawExtrusion(painter, source, layer, coord) {

src/render/draw_line.js

@@ -9,7 +9,8 @@ import type LineStyleLayer from '../style/style_layer/line_style_layer';
 import type TileCoord from '../source/tile_coord';
 
 module.exports = function drawLine(painter: Painter, sourceCache: SourceCache, layer: LineStyleLayer, coords: Array<TileCoord>) {
-    if (painter.isOpaquePass) return;
+    const pass = 'translucent';
+    if (painter.renderPass !== pass) return;
     painter.setDepthSublayer(0);
     painter.depthMask(false);
 

src/render/draw_raster.js

@@ -10,7 +10,8 @@ import type TileCoord from '../source/tile_coord';
 module.exports = drawRaster;
 
 function drawRaster(painter: Painter, sourceCache: SourceCache, layer: StyleLayer, coords: Array<TileCoord>) {
-    if (painter.isOpaquePass) return;
+    const pass = 'translucent';
+    if (painter.renderPass !== pass) return;
 
     const gl = painter.gl;
 

src/render/draw_symbol.js

@@ -16,7 +16,8 @@ import type TileCoord from '../source/tile_coord';
 module.exports = drawSymbols;
 
 function drawSymbols(painter: Painter, sourceCache: SourceCache, layer: SymbolStyleLayer, coords: Array<TileCoord>) {
-    if (painter.isOpaquePass) return;
+    const pass = 'translucent';
+    if (painter.renderPass !== pass) return;
 
     const drawAcrossEdges =
         !layer.layout['text-allow-overlap'] &&