Dispatch precompose and postcompose events for WebGL layers

src/ol/render/EventType.js

@@ -21,16 +21,18 @@ export default {
   POSTRENDER: 'postrender',
 
   /**
-   * Triggered before layers are rendered.
-   * The event object will not have a `context` set.
+   * Triggered before layers are composed.  When dispatched by the map, the event object will not have
+   * a `context` set.  When dispatched by a layer, the event object will have a `context` set.  Only
+   * WebGL layers currently dispatch this event.
    * @event module:ol/render/Event~RenderEvent#precompose
    * @api
    */
   PRECOMPOSE: 'precompose',
 
   /**
-   * Triggered after all layers are rendered.
-   * The event object will not have a `context` set.
+   * Triggered after layers are composed.  When dispatched by the map, the event object will not have
+   * a `context` set.  When dispatched by a layer, the event object will have a `context` set.  Only
+   * WebGL layers currently dispatch this event.
    * @event module:ol/render/Event~RenderEvent#postcompose
    * @api
    */

src/ol/renderer/webgl/Layer.js

@@ -88,6 +88,45 @@ class WebGLLayerRenderer extends LayerRenderer {
     this.helper;
 
     layer.addChangeListener(LayerProperty.MAP, this.removeHelper_.bind(this));
+
+    this.dispatchPreComposeEvent = this.dispatchPreComposeEvent.bind(this);
+    this.dispatchPostComposeEvent = this.dispatchPostComposeEvent.bind(this);
+  }
+
+  /**
+   * @param {WebGLRenderingContext} context The WebGL rendering context.
+   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+   * @protected
+   */
+  dispatchPreComposeEvent(context, frameState) {
+    const layer = this.getLayer();
+    if (layer.hasListener(RenderEventType.PRECOMPOSE)) {
+      const event = new RenderEvent(
+        RenderEventType.PRECOMPOSE,
+        undefined,
+        frameState,
+        context
+      );
+      layer.dispatchEvent(event);
+    }
+  }
+
+  /**
+   * @param {WebGLRenderingContext} context The WebGL rendering context.
+   * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
+   * @protected
+   */
+  dispatchPostComposeEvent(context, frameState) {
+    const layer = this.getLayer();
+    if (layer.hasListener(RenderEventType.POSTCOMPOSE)) {
+      const event = new RenderEvent(
+        RenderEventType.POSTCOMPOSE,
+        undefined,
+        frameState,
+        context
+      );
+      layer.dispatchEvent(event);
+    }
   }
 
   /**

src/ol/renderer/webgl/PointsLayer.js

@@ -450,7 +450,11 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
 
     const renderCount = this.indicesBuffer_.getSize();
     this.helper.drawElements(0, renderCount);
-    this.helper.finalizeDraw(frameState);
+    this.helper.finalizeDraw(
+      frameState,
+      this.dispatchPreComposeEvent,
+      this.dispatchPostComposeEvent
+    );
     const canvas = this.helper.getCanvas();
 
     if (this.hitDetectionEnabled_) {

src/ol/renderer/webgl/TileLayer.js

@@ -552,7 +552,11 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
       }
     }
 
-    this.helper.finalizeDraw(frameState);
+    this.helper.finalizeDraw(
+      frameState,
+      this.dispatchPreComposeEvent,
+      this.dispatchPostComposeEvent
+    );
 
     const canvas = this.helper.getCanvas();
 

src/ol/webgl/Helper.js

@@ -637,15 +637,25 @@ class WebGLHelper extends Disposable {
   /**
    * Apply the successive post process passes which will eventually render to the actual canvas.
    * @param {import("../PluggableMap.js").FrameState} frameState current frame state
-   * @api
+   * @param {function(WebGLRenderingContext, import("../PluggableMap.js").FrameState):void} [preCompose] Called before composing.
+   * @param {function(WebGLRenderingContext, import("../PluggableMap.js").FrameState):void} [postCompose] Called before composing.
    */
-  finalizeDraw(frameState) {
+  finalizeDraw(frameState, preCompose, postCompose) {
     // apply post processes using the next one as target
-    for (let i = 0; i < this.postProcessPasses_.length; i++) {
-      this.postProcessPasses_[i].apply(
-        frameState,
-        this.postProcessPasses_[i + 1] || null
-      );
+    for (let i = 0, ii = this.postProcessPasses_.length; i < ii; i++) {
+      if (i === ii - 1) {
+        this.postProcessPasses_[i].apply(
+          frameState,
+          null,
+          preCompose,
+          postCompose
+        );
+      } else {
+        this.postProcessPasses_[i].apply(
+          frameState,
+          this.postProcessPasses_[i + 1]
+        );
+      }
     }
   }
 

src/ol/webgl/PostProcessingPass.js

@@ -250,9 +250,11 @@ class WebGLPostProcessingPass {
    * Render to the next postprocessing pass (or to the canvas if final pass).
    * @param {import("../PluggableMap.js").FrameState} frameState current frame state
    * @param {WebGLPostProcessingPass} [nextPass] Next pass, optional
+   * @param {function(WebGLRenderingContext, import("../PluggableMap.js").FrameState):void} [preCompose] Called before composing.
+   * @param {function(WebGLRenderingContext, import("../PluggableMap.js").FrameState):void} [postCompose] Called before composing.
    * @api
    */
-  apply(frameState, nextPass) {
+  apply(frameState, nextPass, preCompose, postCompose) {
     const gl = this.getGL();
     const size = frameState.size;
 
@@ -288,7 +290,13 @@ class WebGLPostProcessingPass {
 
     this.applyUniforms(frameState);
 
+    if (preCompose) {
+      preCompose(gl, frameState);
+    }
     gl.drawArrays(gl.TRIANGLES, 0, 6);
+    if (postCompose) {
+      postCompose(gl, frameState);
+    }
   }
 
   /**