Dispatch precompose and postcompose events for WebGL layers

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);
+    }
   }
 
   /**