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

@@ -3,6 +3,7 @@
 const glMatrix = require('@mapbox/gl-matrix');
 const pattern = require('./pattern');
 const mat3 = glMatrix.mat3;
+const mat4 = glMatrix.mat4;
 const vec3 = glMatrix.vec3;
 
 import type Painter from './painter';
@@ -13,18 +14,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;
+ if (painter.renderPass === '3d') {
+ const gl = painter.gl;
+
+ 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'] &&