Include WebGL context in render events for WebGL layers

src/ol/render.js

@@ -88,6 +88,10 @@ export function toContext(context, opt_options) {
  * @api
  */
 export function getVectorContext(event) {
+  if (!(event.context instanceof CanvasRenderingContext2D)) {
+    throw new Error('Only works for render events from Canvas 2D layers');
+  }
+
   // canvas may be at a different pixel ratio than frameState.pixelRatio
   const canvasPixelRatio = event.inversePixelTransform[0];
   const frameState = event.frameState;
@@ -107,6 +111,7 @@ export function getVectorContext(event) {
       frameState.viewState.projection
     );
   }
+
   return new CanvasImmediateRenderer(
     event.context,
     canvasPixelRatio,
@@ -127,7 +132,5 @@ export function getVectorContext(event) {
  * @api
  */
 export function getRenderPixel(event, pixel) {
-  const result = pixel.slice(0);
-  applyTransform(event.inversePixelTransform.slice(), result);
-  return result;
+  return applyTransform(event.inversePixelTransform, pixel.slice(0));
 }

src/ol/render/Event.js

@@ -10,7 +10,7 @@ class RenderEvent extends Event {
    * @param {import("../transform.js").Transform} [opt_inversePixelTransform] Transform for
    *     CSS pixels to rendered pixels.
    * @param {import("../PluggableMap.js").FrameState} [opt_frameState] Frame state.
-   * @param {?CanvasRenderingContext2D} [opt_context] Context.
+   * @param {?(CanvasRenderingContext2D|WebGLRenderingContext)} [opt_context] Context.
    */
   constructor(type, opt_inversePixelTransform, opt_frameState, opt_context) {
     super(type);
@@ -31,9 +31,10 @@ class RenderEvent extends Event {
     this.frameState = opt_frameState;
 
     /**
-     * Canvas context. Not available when the event is dispatched by the map. Only available
-     * when a Canvas renderer is used, null otherwise.
-     * @type {CanvasRenderingContext2D|null|undefined}
+     * Canvas context. Not available when the event is dispatched by the map. For Canvas 2D layers,
+     * the context will be the 2D rendering context.  For WebGL layers, the context will be the WebGL
+     * context.
+     * @type {CanvasRenderingContext2D|WebGLRenderingContext|undefined}
      * @api
      */
     this.context = opt_context;

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;
   }