Fix incorrect rendering caused by drawing symbols across edges

fixes #2092

Author: Lucas Wojciechowski

js/render/draw_background.js

@@ -74,7 +74,6 @@ function drawBackground(painter, source, layer) {
         gl.drawArrays(gl.TRIANGLE_STRIP, 0, painter.tileExtentBuffer.itemCount);
     }
 
-    gl.enable(gl.STENCIL_TEST);
     gl.stencilMask(0x00);
     gl.stencilFunc(gl.EQUAL, 0x80, 0x80);
 }

js/render/draw_circle.js

@@ -64,6 +64,4 @@ function drawCircles(painter, source, layer, coords) {
             gl.drawElements(gl.TRIANGLES, count, gl.UNSIGNED_SHORT, elementOffset);
         }
     }
-
-    gl.enable(gl.STENCIL_TEST);
 }

js/render/draw_collision_debug.js

@@ -38,6 +38,4 @@ function drawCollisionDebug(painter, source, layer, coords) {
         );
 
     }
-
-    gl.disable(gl.STENCIL_TEST);
 }

js/render/draw_debug.js

@@ -19,6 +19,7 @@ function drawDebug(painter, source, coords) {
 function drawDebugTile(painter, source, coord) {
     var gl = painter.gl;
 
+    gl.disable(gl.STENCIL_TEST);
     gl.lineWidth(1 * browser.devicePixelRatio);
 
     var posMatrix = painter.calculatePosMatrix(coord, source.maxzoom);

js/render/draw_fill.js

@@ -7,6 +7,7 @@ module.exports = draw;
 
 function draw(painter, source, layer, coords) {
     var gl = painter.gl;
+    gl.enable(gl.STENCIL_TEST);
 
     var color = util.premultiply(layer.paint['fill-color'], layer.paint['fill-opacity']);
     var image = layer.paint['fill-pattern'];

js/render/draw_line.js

@@ -25,6 +25,7 @@ module.exports = function drawLine(painter, source, layer, coords) {
     if (!hasData) return;
 
     var gl = painter.gl;
+    gl.enable(gl.STENCIL_TEST);
 
     // don't draw zero-width lines
     if (layer.paint['line-width'] <= 0) return;

js/render/draw_raster.js

@@ -72,8 +72,6 @@ function drawRasterTile(painter, source, layer, coord) {
     gl.vertexAttribPointer(shader.a_pos,         2, gl.SHORT, false, 8, 0);
     gl.vertexAttribPointer(shader.a_texture_pos, 2, gl.SHORT, false, 8, 4);
     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-
-    gl.enable(gl.STENCIL_TEST);
 }
 
 function spinWeights(angle) {

js/render/draw_symbol.js

@@ -16,13 +16,15 @@ function drawSymbols(painter, source, layer, coords) {
 
     var gl = painter.gl;
 
+    // Disable the stencil test so that labels aren't clipped to tile boundaries.
+    //
+    // Layers with features that may be drawn overlapping aren't clipped. These
+    // layers are sorted in the y direction, and to draw the correct ordering near
+    // tile edges the icons are included in both tiles and clipped when drawing.
     if (drawAcrossEdges) {
-        // Disable the stencil test so that labels aren't clipped to tile boundaries.
-        //
-        // Layers with features that may be drawn overlapping aren't clipped. These
-        // layers are sorted in the y direction, and to draw the correct ordering near
-        // tile edges the icons are included in both tiles and clipped when drawing.
         gl.disable(gl.STENCIL_TEST);
+    } else {
+        gl.enable(gl.STENCIL_TEST);
     }
 
     painter.setDepthSublayer(0);
@@ -57,12 +59,9 @@ function drawSymbols(painter, source, layer, coords) {
         drawSymbol(painter, layer, posMatrix, tile, elementGroups.glyph, 'text', true, false);
     }
 
-    drawCollisionDebug(painter, source, layer, coords);
-
-    if (drawAcrossEdges) {
-        gl.enable(gl.STENCIL_TEST);
-    }
     gl.enable(gl.DEPTH_TEST);
+
+    drawCollisionDebug(painter, source, layer, coords);
 }
 
 var defaultSizes = {

js/render/painter.js

@@ -192,6 +192,7 @@ Painter.prototype._renderTileClippingMasks = function(coords, sourceMaxZoom) {
     gl.colorMask(false, false, false, false);
     this.depthMask(false);
     gl.disable(gl.DEPTH_TEST);
+    gl.enable(gl.STENCIL_TEST);
 
     // Only write clipping IDs to the last 5 bits. The first three are used for drawing fills.
     gl.stencilMask(0xF8);