Allow canvas reuse for WebGL layers

test/browser/spec/ol/renderer/webgl/Layer.test.js

@@ -1,12 +1,19 @@
+import DataTileSource from '../../../../../../src/ol/source/DataTile.js';
 import Layer from '../../../../../../src/ol/layer/Layer.js';
+import Map from '../../../../../../src/ol/Map.js';
+import TileLayer from '../../../../../../src/ol/layer/WebGLTile.js';
+import VectorLayer from '../../../../../../src/ol/layer/Vector.js';
+import VectorSource from '../../../../../../src/ol/source/Vector.js';
+import View from '../../../../../../src/ol/View.js';
 import WebGLLayerRenderer, {
   colorDecodeId,
   colorEncodeId,
   getBlankImageData,
   writePointFeatureToBuffers,
 } from '../../../../../../src/ol/renderer/webgl/Layer.js';
+import {getUid} from '../../../../../../src/ol/util.js';
 
-describe('ol.renderer.webgl.Layer', function () {
+describe('ol/renderer/webgl/Layer', function () {
   describe('constructor', function () {
     let target;
 
@@ -226,4 +233,205 @@ describe('ol.renderer.webgl.Layer', function () {
       expect(decoded).to.eql(91612);
     });
   });
+
+  describe('context sharing', () => {
+    let target;
+    beforeEach(() => {
+      target = document.createElement('div');
+      target.style.width = '256px';
+      target.style.height = '256px';
+      document.body.appendChild(target);
+    });
+
+    afterEach(() => {
+      document.body.removeChild(target);
+    });
+
+    function getWebGLLayer(className) {
+      return new TileLayer({
+        className: className,
+        source: new DataTileSource({
+          loader(z, x, y) {
+            return Promise.resolve(new ImageData(256, 256));
+          },
+        }),
+      });
+    }
+
+    function getCanvasLayer(className) {
+      return new VectorLayer({
+        className: className,
+        source: new VectorSource(),
+      });
+    }
+
+    function expectCacheKeyMatches(layer, key) {
+      expect(layer.getRenderer().helper.canvasCacheKeyMatches(key)).to.be(true);
+    }
+
+    function dispose(map) {
+      map.setLayers([]);
+      map.setTarget(null);
+    }
+
+    it('allows sequences of WebGL layers to share a canvas', () => {
+      const layer1 = getWebGLLayer();
+      const layer2 = getWebGLLayer();
+      const layer3 = getWebGLLayer();
+      const layer4 = getCanvasLayer();
+      const layer5 = getCanvasLayer();
+      const layer6 = getWebGLLayer();
+
+      const map = new Map({
+        target: target,
+        layers: [layer1, layer2, layer3, layer4, layer5, layer6],
+        view: new View({
+          center: [0, 0],
+          zoom: 0,
+        }),
+      });
+
+      map.renderSync();
+
+      const mapId = getUid(map);
+
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer2, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer3, `map/${mapId}/group/0`);
+      // layer4 and layer5 cannot be grouped
+      expectCacheKeyMatches(layer6, `map/${mapId}/group/1`);
+
+      dispose(map);
+    });
+
+    it('does not group layers with different className', () => {
+      const layer1 = getWebGLLayer();
+      const layer2 = getWebGLLayer();
+      const layer3 = getWebGLLayer('foo');
+      const layer4 = getWebGLLayer('foo');
+      const layer5 = getWebGLLayer();
+
+      const map = new Map({
+        target: target,
+        layers: [layer1, layer2, layer3, layer4, layer5],
+        view: new View({
+          center: [0, 0],
+          zoom: 0,
+        }),
+      });
+
+      map.renderSync();
+
+      const mapId = getUid(map);
+
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer2, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer3, `map/${mapId}/group/1`);
+      expectCacheKeyMatches(layer4, `map/${mapId}/group/1`);
+      expectCacheKeyMatches(layer5, `map/${mapId}/group/2`);
+
+      dispose(map);
+    });
+
+    it('collapses groups when a layer is removed', () => {
+      const layer1 = getWebGLLayer();
+      const layer2 = getWebGLLayer('foo');
+      const layer3 = getWebGLLayer();
+
+      const map = new Map({
+        target: target,
+        layers: [layer1, layer2, layer3],
+        view: new View({
+          center: [0, 0],
+          zoom: 0,
+        }),
+      });
+
+      map.renderSync();
+
+      const mapId = getUid(map);
+
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer2, `map/${mapId}/group/1`);
+      expectCacheKeyMatches(layer3, `map/${mapId}/group/2`);
+
+      map.removeLayer(layer2);
+      map.renderSync();
+
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      expect(layer2.getRenderer().helper).to.be(undefined);
+      expectCacheKeyMatches(layer3, `map/${mapId}/group/0`);
+
+      dispose(map);
+    });
+
+    it('regroups when layer order changes', () => {
+      const layer1 = getWebGLLayer();
+      const layer2 = getWebGLLayer();
+      const layer3 = getCanvasLayer();
+      const layer4 = getWebGLLayer();
+
+      const map = new Map({
+        target: target,
+        layers: [layer1, layer2, layer3, layer4],
+        view: new View({
+          center: [0, 0],
+          zoom: 0,
+        }),
+      });
+
+      map.renderSync();
+
+      const mapId = getUid(map);
+
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer2, `map/${mapId}/group/0`);
+      // layer3 cannot be grouped
+      expectCacheKeyMatches(layer4, `map/${mapId}/group/1`);
+
+      map.removeLayer(layer2);
+      map.addLayer(layer2);
+      map.renderSync();
+
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      // layer3 cannot be grouped
+      expectCacheKeyMatches(layer4, `map/${mapId}/group/1`);
+      expectCacheKeyMatches(layer2, `map/${mapId}/group/1`);
+
+      dispose(map);
+    });
+
+    it('changes groups based on z-index', () => {
+      const layer1 = getWebGLLayer();
+      const layer2 = getWebGLLayer('foo');
+      const layer3 = getWebGLLayer();
+
+      const map = new Map({
+        target: target,
+        layers: [layer1, layer2, layer3],
+        view: new View({
+          center: [0, 0],
+          zoom: 0,
+        }),
+      });
+
+      map.renderSync();
+
+      const mapId = getUid(map);
+
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer2, `map/${mapId}/group/1`);
+      expectCacheKeyMatches(layer3, `map/${mapId}/group/2`);
+
+      layer1.setZIndex(1);
+      map.renderSync();
+
+      expectCacheKeyMatches(layer2, `map/${mapId}/group/0`);
+      expectCacheKeyMatches(layer3, `map/${mapId}/group/1`);
+      expectCacheKeyMatches(layer1, `map/${mapId}/group/1`);
+
+      dispose(map);
+    });
+  });
 });