Allow canvas reuse for WebGL layers

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();