Fix some rendering issues with complex styling

src/ol/render/webgl/linestringreplay/index.js

@@ -495,7 +495,6 @@ ol.render.webgl.LineStringReplay.prototype.drawReplay = function(gl, context, sk
     gl.enable(gl.DEPTH_TEST);
     gl.depthMask(true);
     gl.depthFunc(gl.NOTEQUAL);
-    gl.clear(gl.DEPTH_BUFFER_BIT);
   }
 
   if (!ol.obj.isEmpty(skippedFeaturesHash)) {
@@ -512,11 +511,13 @@ ol.render.webgl.LineStringReplay.prototype.drawReplay = function(gl, context, sk
       nextStyle = this.styles_[i];
       this.setStrokeStyle_(gl, nextStyle[0], nextStyle[1], nextStyle[2]);
       this.drawElements(gl, context, start, end);
+      gl.clear(gl.DEPTH_BUFFER_BIT);
       end = start;
     }
   }
   if (!hitDetection) {
     gl.disable(gl.DEPTH_TEST);
+    gl.clear(gl.DEPTH_BUFFER_BIT);
     //Restore GL parameters.
     gl.depthMask(tmpDepthMask);
     gl.depthFunc(tmpDepthFunc);
@@ -551,6 +552,7 @@ ol.render.webgl.LineStringReplay.prototype.drawReplaySkipping_ = function(gl, co
       if (skippedFeaturesHash[featureUid]) {
         if (start !== end) {
           this.drawElements(gl, context, start, end);
+          gl.clear(gl.DEPTH_BUFFER_BIT);
         }
         end = featureStart;
       }
@@ -559,6 +561,7 @@ ol.render.webgl.LineStringReplay.prototype.drawReplaySkipping_ = function(gl, co
     }
     if (start !== end) {
       this.drawElements(gl, context, start, end);
+      gl.clear(gl.DEPTH_BUFFER_BIT);
     }
   }
 };

src/ol/render/webgl/polygonreplay/index.js

@@ -868,16 +868,6 @@ ol.render.webgl.PolygonReplay.prototype.shutDownProgram_ = function(gl, location
  * @inheritDoc
  */
 ol.render.webgl.PolygonReplay.prototype.drawReplay = function(gl, context, skippedFeaturesHash, hitDetection) {
-  //Save GL parameters.
-  var tmpDepthFunc = /** @type {number} */ (gl.getParameter(gl.DEPTH_FUNC));
-  var tmpDepthMask = /** @type {boolean} */ (gl.getParameter(gl.DEPTH_WRITEMASK));
-
-  if (!hitDetection) {
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthMask(true);
-    gl.depthFunc(gl.NOTEQUAL);
-  }
-
   if (!ol.obj.isEmpty(skippedFeaturesHash)) {
     this.drawReplaySkipping_(gl, context, skippedFeaturesHash);
   } else {
@@ -895,13 +885,6 @@ ol.render.webgl.PolygonReplay.prototype.drawReplay = function(gl, context, skipp
       end = start;
     }
   }
-  if (!hitDetection) {
-    gl.clear(gl.DEPTH_BUFFER_BIT);
-    gl.disable(gl.DEPTH_TEST);
-    //Restore GL parameters.
-    gl.depthMask(tmpDepthMask);
-    gl.depthFunc(tmpDepthFunc);
-  }
 };
 
 

src/ol/render/webgl/replay.js

@@ -253,12 +253,32 @@ ol.render.webgl.Replay.prototype.replay = function(context,
     opacity, skippedFeaturesHash,
     featureCallback, oneByOne, opt_hitExtent) {
   var gl = context.getGL();
+  var tmpStencil, tmpStencilFunc, tmpStencilMaskVal, tmpStencilRef, tmpStencilMask,
+      tmpStencilOpFail, tmpStencilOpPass, tmpStencilOpZFail;
 
   if (this.lineStringReplay) {
+    tmpStencil = gl.isEnabled(gl.STENCIL_TEST);
+    tmpStencilFunc = gl.getParameter(gl.STENCIL_FUNC);
+    tmpStencilMaskVal = gl.getParameter(gl.STENCIL_VALUE_MASK);
+    tmpStencilRef = gl.getParameter(gl.STENCIL_REF);
+    tmpStencilMask = gl.getParameter(gl.STENCIL_WRITEMASK);
+    tmpStencilOpFail = gl.getParameter(gl.STENCIL_FAIL);
+    tmpStencilOpPass = gl.getParameter(gl.STENCIL_PASS_DEPTH_PASS);
+    tmpStencilOpZFail = gl.getParameter(gl.STENCIL_PASS_DEPTH_FAIL);
+
+    gl.enable(gl.STENCIL_TEST);
+    gl.clear(gl.STENCIL_BUFFER_BIT);
+    gl.stencilMask(255);
+    gl.stencilFunc(gl.ALWAYS, 1, 255);
+    gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
+
     this.lineStringReplay.replay(context,
         center, resolution, rotation, size, pixelRatio,
         opacity, skippedFeaturesHash,
         featureCallback, oneByOne, opt_hitExtent);
+
+    gl.stencilMask(0);
+    gl.stencilFunc(gl.NOTEQUAL, 1, 255);
   }
 
   // bind the vertices buffer
@@ -308,6 +328,18 @@ ol.render.webgl.Replay.prototype.replay = function(context,
   // disable the vertex attrib arrays
   this.shutDownProgram_(gl, locations);
 
+  if (this.lineStringReplay) {
+    if (!tmpStencil) {
+      gl.disable(gl.STENCIL_TEST);
+    }
+    gl.clear(gl.STENCIL_BUFFER_BIT);
+    gl.stencilFunc(/** @type {number} */ (tmpStencilFunc),
+        /** @type {number} */ (tmpStencilRef), /** @type {number} */ (tmpStencilMaskVal));
+    gl.stencilMask(/** @type {number} */ (tmpStencilMask));
+    gl.stencilOp(/** @type {number} */ (tmpStencilOpFail),
+        /** @type {number} */ (tmpStencilOpZFail), /** @type {number} */ (tmpStencilOpPass));
+  }
+
   return result;
 };
 

src/ol/renderer/webgl/vectorlayer.js

@@ -299,7 +299,7 @@ ol.renderer.webgl.VectorLayer.prototype.renderFeature = function(feature, resolu
   }
   var loading = false;
   if (Array.isArray(styles)) {
-    for (var i = 0, ii = styles.length; i < ii; ++i) {
+    for (var i = styles.length - 1, ii = 0; i >= ii; --i) {
       loading = ol.renderer.vector.renderFeature(
           replayGroup, feature, styles[i],
           ol.renderer.vector.getSquaredTolerance(resolution, pixelRatio),