diff --git a/src/ol/renderer/webgl/webglmaprenderer.js b/src/ol/renderer/webgl/webglmaprenderer.js
index 34a08ee743..09bc869ff8 100644
--- a/src/ol/renderer/webgl/webglmaprenderer.js
+++ b/src/ol/renderer/webgl/webglmaprenderer.js
@@ -18,6 +18,8 @@ goog.require('ol.Tile');
 goog.require('ol.css');
 goog.require('ol.layer.Image');
 goog.require('ol.layer.Tile');
+goog.require('ol.render.Event');
+goog.require('ol.render.EventType');
 goog.require('ol.renderer.Map');
 goog.require('ol.renderer.webgl.ImageLayer');
 goog.require('ol.renderer.webgl.TileLayer');
@@ -224,6 +226,23 @@ ol.renderer.webgl.Map.prototype.createLayerRenderer = function(layer) {
 };
 
 
+/**
+ * @param {ol.render.EventType} type Event type.
+ * @param {ol.FrameState} frameState Frame state.
+ * @private
+ */
+ol.renderer.webgl.Map.prototype.dispatchComposeEvent_ =
+    function(type, frameState) {
+  var map = this.getMap();
+  var context = this.getContext();
+  if (map.hasListener(type)) {
+    var composeEvent = new ol.render.Event(
+        type, map, null, frameState, null, context);
+    map.dispatchEvent(composeEvent);
+  }
+};
+
+
 /**
  * @inheritDoc
  */
@@ -407,6 +426,7 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
   gl.viewport(0, 0, size[0], size[1]);
 
   context.bindBuffer(goog.webgl.ARRAY_BUFFER, this.arrayBuffer_);
+  this.dispatchComposeEvent_(ol.render.EventType.PRECOMPOSE, frameState);
 
   for (i = 0, ii = layersToDraw.length; i < ii; ++i) {
     layer = layersToDraw[i];
@@ -432,6 +452,8 @@ ol.renderer.webgl.Map.prototype.renderFrame = function(frameState) {
     frameState.animate = true;
   }
 
+  this.dispatchComposeEvent_(ol.render.EventType.POSTCOMPOSE, frameState);
+
   this.scheduleRemoveUnusedLayerRenderers(frameState);
 
 };