diff --git a/examples/data/Butterfly.png b/examples/data/Butterfly.png
index ef37aaad4d..0a32d018ce 100644
Binary files a/examples/data/Butterfly.png and b/examples/data/Butterfly.png differ
diff --git a/examples/icon-sprite-webgl.js b/examples/icon-sprite-webgl.js
index fbddd00490..673006538e 100644
--- a/examples/icon-sprite-webgl.js
+++ b/examples/icon-sprite-webgl.js
@@ -1,4 +1,5 @@
 goog.require('ol.Feature');
+goog.require('ol.FeatureOverlay');
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.geom.Point');
@@ -29,6 +30,13 @@ var iconInfo = [{
   rotation: Math.PI / 3.0,
   scale: 1.5,
   size: [55, 86]
+}, {
+  offset: [212, 0],
+  opacity: 1.0,
+  rotateWithView: true,
+  rotation: 0.0,
+  scale: 1.0,
+  size: [44, 44]
 }];
 
 var i;
@@ -58,7 +66,7 @@ for (i = 0; i < featureCount; ++i) {
   feature = new ol.Feature(geometry);
   feature.setStyle(
       new ol.style.Style({
-        image: icons[i % iconCount]
+        image: icons[i % (iconCount - 1)]
       })
   );
   features[i] = feature;
@@ -86,3 +94,18 @@ var map = new ol.Map({
     zoom: 5
   })
 });
+
+var overlayFeatures = [];
+for (i = 0; i < featureCount; i += 30) {
+  var clone = features[i].clone();
+  clone.setStyle(null);
+  overlayFeatures.push(clone);
+}
+
+var featureOverlay = new ol.FeatureOverlay({
+  map: map,
+  style: new ol.style.Style({
+    image: icons[iconCount - 1]
+  }),
+  features: overlayFeatures
+});
diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js
index f093ba274f..5dbdcac643 100644
--- a/src/ol/renderer/webgl/webglmaprenderer.js
+++ b/src/ol/renderer/webgl/webglmaprenderer.js
@@ -24,7 +24,9 @@ goog.require('ol.layer.Vector');
 goog.require('ol.render.Event');
 goog.require('ol.render.EventType');
 goog.require('ol.render.webgl.Immediate');
+goog.require('ol.render.webgl.ReplayGroup');
 goog.require('ol.renderer.Map');
+goog.require('ol.renderer.vector');
 goog.require('ol.renderer.webgl.ImageLayer');
 goog.require('ol.renderer.webgl.Layer');
 goog.require('ol.renderer.webgl.TileLayer');
@@ -270,11 +272,29 @@ ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ =
     function(type, frameState) {
   var map = this.getMap();
   if (map.hasListener(type)) {
-    var context = this.getContext();
-    var render = new ol.render.webgl.Immediate(context, frameState.pixelRatio);
-    var composeEvent = new ol.render.Event(
-        type, map, render, null, frameState, null, context);
+    var context = this.context_;
+    var extent = frameState.extent;
+
+    var viewState = frameState.viewState;
+    var resolution = viewState.resolution;
+    var pixelRatio = frameState.pixelRatio;
+    var tolerance = ol.renderer.vector.getTolerance(resolution, pixelRatio);
+
+    var vectorContext = new ol.render.webgl.Immediate(context, pixelRatio);
+    var replayGroup = new ol.render.webgl.ReplayGroup(tolerance, extent);
+    var composeEvent = new ol.render.Event(type, map, vectorContext,
+        replayGroup, frameState, null, context);
     map.dispatchEvent(composeEvent);
+
+    replayGroup.finish(context);
+    if (!replayGroup.isEmpty()) {
+      var center = viewState.center;
+      var rotation = viewState.rotation;
+      var size = frameState.size;
+      replayGroup.replay(context, center, resolution, rotation, size, extent,
+          pixelRatio, {});
+    }
+    this.replayGroup = replayGroup;
   }
 };