Allow canvas reuse for WebGL layers

src/ol/PluggableMap.js

@@ -34,6 +34,7 @@ import {
   isEmpty,
 } from './extent.js';
 import {fromUserCoordinate, toUserCoordinate} from './proj.js';
+import {getUid} from './util.js';
 import {hasArea} from './size.js';
 import {listen, unlistenByKey} from './events.js';
 import {removeNode} from './dom.js';
@@ -60,6 +61,7 @@ import {removeNode} from './dom.js';
  * @property {!Object<string, Object<string, boolean>>} usedTiles UsedTiles.
  * @property {Array<number>} viewHints ViewHints.
  * @property {!Object<string, Object<string, boolean>>} wantedTiles WantedTiles.
+ * @property {string} mapId The id of the map.
  */
 
 /**
@@ -1469,6 +1471,7 @@ class PluggableMap extends BaseObject {
         viewState: viewState,
         viewHints: viewHints,
         wantedTiles: {},
+        mapId: getUid(this),
       };
       if (viewState.nextCenter && viewState.nextResolution) {
         const rotation = isNaN(viewState.nextRotation)

src/ol/layer/WebGLTile.js

@@ -255,9 +255,6 @@ function parseStyle(style, bandCount) {
  * property on the layer object; for example, setting `title: 'My Title'` in the
  * options means that `title` is observable, and has get/set accessors.
  *
- * **Important**: after removing a `WebGLTile` layer from your map, call `layer.dispose()`
- * to clean up underlying resources.
- *
  * @extends BaseTileLayer<import("../source/DataTile.js").default|import("../source/TileImage.js").default>
  * @api
  */

src/ol/renderer/webgl/Layer.js

@@ -1,6 +1,7 @@
 /**
  * @module ol/renderer/webgl/Layer
  */
+import LayerProperty from '../../layer/Property.js';
 import LayerRenderer from '../Layer.js';
 import RenderEvent from '../../render/Event.js';
 import RenderEventType from '../../render/EventType.js';
@@ -84,6 +85,8 @@ class WebGLLayerRenderer extends LayerRenderer {
      * @protected
      */
     this.helper;
+
+    layer.addChangeListener(LayerProperty.MAP, this.removeHelper_.bind(this));
   }
 
   removeHelper_() {
@@ -99,18 +102,48 @@ class WebGLLayerRenderer extends LayerRenderer {
    * @return {boolean} Layer is ready to be rendered.
    */
   prepareFrame(frameState) {
-    if (!this.helper && !!this.getLayer().getSource()) {
-      this.helper = new WebGLHelper({
-        postProcesses: this.postProcesses_,
-        uniforms: this.uniforms_,
-      });
-
-      const className = this.getLayer().getClassName();
-      if (className) {
-        this.helper.getCanvas().className = className;
+    if (this.getLayer().getSource()) {
+      let incrementGroup = true;
+      let groupNumber = -1;
+      let className;
+      for (let i = 0, ii = frameState.layerStatesArray.length; i < ii; i++) {
+        const layer = frameState.layerStatesArray[i].layer;
+        const renderer = layer.getRenderer();
+        if (!(renderer instanceof WebGLLayerRenderer)) {
+          incrementGroup = true;
+          continue;
+        }
+        const layerClassName = layer.getClassName();
+        if (incrementGroup || layerClassName !== className) {
+          groupNumber += 1;
+          incrementGroup = false;
+        }
+        className = layerClassName;
+        if (renderer === this) {
+          break;
+        }
       }
 
-      this.afterHelperCreated();
+      const canvasCacheKey =
+        'map/' + frameState.mapId + '/group/' + groupNumber;
+
+      if (!this.helper || !this.helper.canvasCacheKeyMatches(canvasCacheKey)) {
+        if (this.helper) {
+          this.helper.dispose();
+        }
+
+        this.helper = new WebGLHelper({
+          postProcesses: this.postProcesses_,
+          uniforms: this.uniforms_,
+          canvasCacheKey: canvasCacheKey,
+        });
+
+        if (className) {
+          this.helper.getCanvas().className = className;
+        }
+
+        this.afterHelperCreated();
+      }
     }
 
     return this.prepareFrameInternal(frameState);

src/ol/renderer/webgl/PointsLayer.js

@@ -453,12 +453,6 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     this.helper.finalizeDraw(frameState);
     const canvas = this.helper.getCanvas();
 
-    const layerState = frameState.layerStatesArray[frameState.layerIndex];
-    const opacity = layerState.opacity;
-    if (opacity !== parseFloat(canvas.style.opacity)) {
-      canvas.style.opacity = String(opacity);
-    }
-
     if (this.hitDetectionEnabled_) {
       this.renderHitDetection(frameState);
       this.hitRenderTarget_.clearCachedData();

src/ol/renderer/webgl/TileLayer.js

@@ -195,12 +195,6 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
      * @private
      */
     this.tileTextureCache_ = new LRUCache(cacheSize);
-
-    /**
-     * @type {number}
-     * @private
-     */
-    this.renderedOpacity_ = NaN;
   }
 
   afterHelperCreated() {
@@ -318,7 +312,6 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     this.preRender(gl, frameState);
 
     const viewState = frameState.viewState;
-    const layerState = frameState.layerStatesArray[frameState.layerIndex];
     const extent = getRenderExtent(frameState, frameState.extent);
     const tileLayer = this.getLayer();
     const tileSource = tileLayer.getSource();
@@ -505,12 +498,6 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
 
     const canvas = this.helper.getCanvas();
 
-    const opacity = layerState.opacity;
-    if (this.renderedOpacity_ !== opacity) {
-      canvas.style.opacity = String(opacity);
-      this.renderedOpacity_ = opacity;
-    }
-
     const tileTextureCache = this.tileTextureCache_;
     while (tileTextureCache.canExpireCache()) {
       const tileTexture = tileTextureCache.pop();

src/ol/source/Raster.js

@@ -16,6 +16,7 @@ import {assign} from '../obj.js';
 import {createCanvasContext2D} from '../dom.js';
 import {create as createTransform} from '../transform.js';
 import {equals, getCenter, getHeight, getWidth} from '../extent.js';
+import {getUid} from '../util.js';
 
 let hasImageData = true;
 try {
@@ -646,6 +647,7 @@ class RasterSource extends ImageSource {
       }),
       viewHints: [],
       wantedTiles: {},
+      mapId: getUid(this),
     };
 
     this.setAttributions(function (frameState) {

src/ol/webgl/Helper.js

@@ -97,6 +97,7 @@ export const AttributeType = {
  * @property {Object<string,UniformValue>} [uniforms] Uniform definitions; property names must match the uniform
  * names in the provided or default shaders.
  * @property {Array<PostProcessesOptions>} [postProcesses] Post-processes definitions
+ * @property {string} [canvasCacheKey] The cache key for the canvas.
  */
 
 /**
@@ -107,6 +108,78 @@ export const AttributeType = {
  * @private
  */
 
+/**
+ * @typedef {Object} CanvasCacheItem
+ * @property {HTMLCanvasElement} canvas Canvas element.
+ * @property {number} users The count of users of this canvas.
+ */
+
+/**
+ * @type {Object<string,CanvasCacheItem>}
+ */
+const canvasCache = {};
+
+/**
+ * @param {string} key The cache key for the canvas.
+ * @return {string} The shared cache key.
+ */
+function getSharedCanvasCacheKey(key) {
+  return 'shared/' + key;
+}
+
+let uniqueCanvasCacheKeyCount = 0;
+
+/**
+ * @return {string} The unique cache key.
+ */
+function getUniqueCanvasCacheKey() {
+  const key = 'unique/' + uniqueCanvasCacheKeyCount;
+  uniqueCanvasCacheKeyCount += 1;
+  return key;
+}
+
+/**
+ * @param {string} key The cache key for the canvas.
+ * @return {HTMLCanvasElement} The canvas.
+ */
+function getCanvas(key) {
+  let cacheItem = canvasCache[key];
+  if (!cacheItem) {
+    const canvas = document.createElement('canvas');
+    canvas.style.position = 'absolute';
+    canvas.style.left = '0';
+    cacheItem = {users: 0, canvas};
+    canvasCache[key] = cacheItem;
+  }
+
+  cacheItem.users += 1;
+  return cacheItem.canvas;
+}
+
+/**
+ * @param {string} key The cache key for the canvas.
+ */
+function releaseCanvas(key) {
+  const cacheItem = canvasCache[key];
+  if (!cacheItem) {
+    return;
+  }
+
+  cacheItem.users -= 1;
+  if (cacheItem.users > 0) {
+    return;
+  }
+
+  const canvas = cacheItem.canvas;
+  const gl = getContext(canvas);
+  const extension = gl.getExtension('WEBGL_lose_context');
+  if (extension) {
+    extension.loseContext();
+  }
+
+  delete canvasCache[key];
+}
+
 /**
  * @classdesc
  * This class is intended to provide low-level functions related to WebGL rendering, so that accessing
@@ -248,13 +321,19 @@ class WebGLHelper extends Disposable {
     this.boundHandleWebGLContextRestored_ =
       this.handleWebGLContextRestored.bind(this);
 
+    /**
+     * @private
+     * @type {string}
+     */
+    this.canvasCacheKey_ = options.canvasCacheKey
+      ? getSharedCanvasCacheKey(options.canvasCacheKey)
+      : getUniqueCanvasCacheKey();
+
     /**
      * @private
      * @type {HTMLCanvasElement}
      */
-    this.canvas_ = document.createElement('canvas');
-    this.canvas_.style.position = 'absolute';
-    this.canvas_.style.left = '0';
+    this.canvas_ = getCanvas(this.canvasCacheKey_);
 
     /**
      * @private
@@ -368,6 +447,14 @@ class WebGLHelper extends Disposable {
     this.startTime_ = Date.now();
   }
 
+  /**
+   * @param {string} canvasCacheKey The canvas cache key.
+   * @return {boolean} The provided key matches the one this helper was constructed with.
+   */
+  canvasCacheKeyMatches(canvasCacheKey) {
+    return this.canvasCacheKey_ === getSharedCanvasCacheKey(canvasCacheKey);
+  }
+
   /**
    * Get a WebGL extension.  If the extension is not supported, null is returned.
    * Extensions are cached after they are enabled for the first time.
@@ -443,10 +530,8 @@ class WebGLHelper extends Disposable {
       this.boundHandleWebGLContextRestored_
     );
 
-    const extension = this.gl_.getExtension('WEBGL_lose_context');
-    if (extension) {
-      extension.loseContext();
-    }
+    releaseCanvas(this.canvasCacheKey_);
+
     delete this.gl_;
     delete this.canvas_;
   }
@@ -481,6 +566,7 @@ class WebGLHelper extends Disposable {
 
     gl.clearColor(0.0, 0.0, 0.0, 0.0);
     gl.clear(gl.COLOR_BUFFER_BIT);
+
     gl.enable(gl.BLEND);
     gl.blendFunc(
       gl.ONE,

src/ol/webgl/PostProcessingPass.js

@@ -22,11 +22,12 @@ const DEFAULT_FRAGMENT_SHADER = `
   precision mediump float;
    
   uniform sampler2D u_image;
+  uniform float u_opacity;
    
   varying vec2 v_texCoord;
    
   void main() {
-    gl_FragColor = texture2D(u_image, v_texCoord);
+    gl_FragColor = texture2D(u_image, v_texCoord) * u_opacity;
   }
 `;
 
@@ -86,11 +87,12 @@ const DEFAULT_FRAGMENT_SHADER = `
  *   precision mediump float;
  *
  *   uniform sampler2D u_image;
+ *   uniform float u_opacity;
  *
  *   varying vec2 v_texCoord;
  *
  *   void main() {
- *     gl_FragColor = texture2D(u_image, v_texCoord);
+ *     gl_FragColor = texture2D(u_image, v_texCoord) * u_opacity;
  *   }
  *   ```
  *
@@ -148,6 +150,10 @@ class WebGLPostProcessingPass {
       this.renderTargetProgram_,
       'u_screenSize'
     );
+    this.renderTargetOpacityLocation_ = gl.getUniformLocation(
+      this.renderTargetProgram_,
+      'u_opacity'
+    );
     this.renderTargetTextureLocation_ = gl.getUniformLocation(
       this.renderTargetProgram_,
       'u_image'
@@ -258,8 +264,6 @@ class WebGLPostProcessingPass {
     gl.bindTexture(gl.TEXTURE_2D, this.renderTargetTexture_);
 
     // render the frame buffer to the canvas
-    gl.clearColor(0.0, 0.0, 0.0, 0.0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
     gl.enable(gl.BLEND);
     gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
     gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
@@ -279,6 +283,9 @@ class WebGLPostProcessingPass {
     gl.uniform2f(this.renderTargetUniformLocation_, size[0], size[1]);
     gl.uniform1i(this.renderTargetTextureLocation_, 0);
 
+    const opacity = frameState.layerStatesArray[frameState.layerIndex].opacity;
+    gl.uniform1f(this.renderTargetOpacityLocation_, opacity);
+
     this.applyUniforms(frameState);
 
     gl.drawArrays(gl.TRIANGLES, 0, 6);