Include WebGL context in render events for WebGL layers

src/ol/renderer/webgl/Layer.js

@@ -5,6 +5,10 @@ import LayerRenderer from '../Layer.js';
 import RenderEvent from '../../render/Event.js';
 import RenderEventType from '../../render/EventType.js';
 import WebGLHelper from '../../webgl/Helper.js';
+import {
+  compose as composeTransform,
+  create as createTransform,
+} from '../../transform.js';
 
 /**
  * @enum {string}
@@ -58,6 +62,14 @@ class WebGLLayerRenderer extends LayerRenderer {
 
     const options = opt_options || {};
 
+    /**
+     * The transform for viewport CSS pixels to rendered pixels.  This transform is only
+     * set before dispatching rendering events.
+     * @private
+     * @type {import("../../transform.js").Transform}
+     */
+    this.inversePixelTransform_ = createTransform();
+
     /**
      * @type {WebGLHelper}
      * @protected
@@ -84,32 +96,50 @@ class WebGLLayerRenderer extends LayerRenderer {
 
   /**
    * @param {import("../../render/EventType.js").default} type Event type.
+   * @param {WebGLRenderingContext} context The rendering context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
    * @private
    */
-  dispatchRenderEvent_(type, frameState) {
+  dispatchRenderEvent_(type, context, frameState) {
     const layer = this.getLayer();
     if (layer.hasListener(type)) {
-      // RenderEvent does not get a context or an inversePixelTransform, because WebGL allows much less direct editing than Canvas2d does.
-      const event = new RenderEvent(type, null, frameState, null);
+      composeTransform(
+        this.inversePixelTransform_,
+        0,
+        0,
+        frameState.pixelRatio,
+        -frameState.pixelRatio,
+        0,
+        0,
+        -frameState.size[1]
+      );
+
+      const event = new RenderEvent(
+        type,
+        this.inversePixelTransform_,
+        frameState,
+        context
+      );
       layer.dispatchEvent(event);
     }
   }
 
   /**
+   * @param {WebGLRenderingContext} context The rendering context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
    * @protected
    */
-  preRender(frameState) {
-    this.dispatchRenderEvent_(RenderEventType.PRERENDER, frameState);
+  preRender(context, frameState) {
+    this.dispatchRenderEvent_(RenderEventType.PRERENDER, context, frameState);
   }
 
   /**
+   * @param {WebGLRenderingContext} context The rendering context.
    * @param {import("../../PluggableMap.js").FrameState} frameState Frame state.
    * @protected
    */
-  postRender(frameState) {
-    this.dispatchRenderEvent_(RenderEventType.POSTRENDER, frameState);
+  postRender(context, frameState) {
+    this.dispatchRenderEvent_(RenderEventType.POSTRENDER, context, frameState);
   }
 }
 

src/ol/renderer/webgl/PointsLayer.js

@@ -411,7 +411,8 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
    * @return {HTMLElement} The rendered element.
    */
   renderFrame(frameState) {
-    this.preRender(frameState);
+    const gl = this.helper.getGL();
+    this.preRender(gl, frameState);
 
     const renderCount = this.indicesBuffer_.getSize();
     this.helper.drawElements(0, renderCount);
@@ -429,7 +430,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
       this.hitRenderTarget_.clearCachedData();
     }
 
-    this.postRender(frameState);
+    this.postRender(gl, frameState);
 
     return canvas;
   }

src/ol/renderer/webgl/TileLayer.js

@@ -292,7 +292,8 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
    * @return {HTMLElement} The rendered element.
    */
   renderFrame(frameState) {
-    this.preRender(frameState);
+    const gl = this.helper.getGL();
+    this.preRender(gl, frameState);
 
     const viewState = frameState.viewState;
     const layerState = frameState.layerStatesArray[frameState.layerIndex];
@@ -386,8 +387,6 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
       .map(Number)
       .sort(numberSafeCompareFunction);
 
-    const gl = this.helper.getGL();
-
     const centerX = viewState.center[0];
     const centerY = viewState.center[1];
 
@@ -509,7 +508,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
 
     frameState.postRenderFunctions.push(postRenderFunction);
 
-    this.postRender(frameState);
+    this.postRender(gl, frameState);
     return canvas;
   }