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

test/rendering/cases/webgl-mixed-layers/main.js

@@ -0,0 +1,84 @@
+import DataTile from '../../../../src/ol/source/DataTile.js';
+import KML from '../../../../src/ol/format/KML.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 XYZ from '../../../../src/ol/source/XYZ.js';
+import {Circle as CircleStyle, Fill, Style} from '../../../../src/ol/style.js';
+
+const labelCanvasSize = 256;
+
+const labelCanvas = document.createElement('canvas');
+labelCanvas.width = labelCanvasSize;
+labelCanvas.height = labelCanvasSize;
+
+const labelContext = labelCanvas.getContext('2d');
+labelContext.textAlign = 'center';
+labelContext.font = '16px sans-serif';
+const labelLineHeight = 16;
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0,
+      }),
+    }),
+    new VectorLayer({
+      opacity: 0.5,
+      source: new VectorSource({
+        url: '/data/2012_Earthquakes_Mag5.kml',
+        format: new KML({
+          extractStyles: false,
+        }),
+      }),
+      style: new Style({
+        image: new CircleStyle({
+          radius: 3,
+          fill: new Fill({
+            color: 'orange',
+          }),
+        }),
+      }),
+    }),
+    new TileLayer({
+      source: new DataTile({
+        loader: function (z, x, y) {
+          const half = labelCanvasSize / 2;
+
+          labelContext.clearRect(0, 0, labelCanvasSize, labelCanvasSize);
+
+          labelContext.fillStyle = 'white';
+          labelContext.fillText(`z: ${z}`, half, half - labelLineHeight);
+          labelContext.fillText(`x: ${x}`, half, half);
+          labelContext.fillText(`y: ${y}`, half, half + labelLineHeight);
+
+          labelContext.strokeStyle = 'white';
+          labelContext.lineWidth = 2;
+          labelContext.strokeRect(0, 0, labelCanvasSize, labelCanvasSize);
+
+          const data = labelContext.getImageData(
+            0,
+            0,
+            labelCanvasSize,
+            labelCanvasSize
+          ).data;
+          return Promise.resolve(new Uint8Array(data.buffer));
+        },
+        transition: 0,
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [15180597.9736, 2700366.3807],
+    zoom: 2,
+  }),
+});
+
+render({
+  message: 'a mix of WebGL and Canvas layers are rendered',
+});

test/rendering/cases/webgl-multiple-layers/main.js

@@ -0,0 +1,82 @@
+import DataTile from '../../../../src/ol/source/DataTile.js';
+import KML from '../../../../src/ol/format/KML.js';
+import Map from '../../../../src/ol/Map.js';
+import PointsLayer from '../../../../src/ol/layer/WebGLPoints.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import VectorSource from '../../../../src/ol/source/Vector.js';
+import View from '../../../../src/ol/View.js';
+import XYZ from '../../../../src/ol/source/XYZ.js';
+
+const labelCanvasSize = 256;
+
+const labelCanvas = document.createElement('canvas');
+labelCanvas.width = labelCanvasSize;
+labelCanvas.height = labelCanvasSize;
+
+const labelContext = labelCanvas.getContext('2d');
+labelContext.textAlign = 'center';
+labelContext.font = '16px sans-serif';
+const labelLineHeight = 16;
+
+new Map({
+  layers: [
+    new TileLayer({
+      source: new XYZ({
+        url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+        transition: 0,
+      }),
+    }),
+    new PointsLayer({
+      opacity: 0.5,
+      source: new VectorSource({
+        url: '/data/2012_Earthquakes_Mag5.kml',
+        format: new KML({
+          extractStyles: false,
+        }),
+      }),
+      style: {
+        symbol: {
+          symbolType: 'circle',
+          size: 6,
+          color: 'orange',
+        },
+      },
+    }),
+    new TileLayer({
+      source: new DataTile({
+        loader: function (z, x, y) {
+          const half = labelCanvasSize / 2;
+
+          labelContext.clearRect(0, 0, labelCanvasSize, labelCanvasSize);
+
+          labelContext.fillStyle = 'white';
+          labelContext.fillText(`z: ${z}`, half, half - labelLineHeight);
+          labelContext.fillText(`x: ${x}`, half, half);
+          labelContext.fillText(`y: ${y}`, half, half + labelLineHeight);
+
+          labelContext.strokeStyle = 'white';
+          labelContext.lineWidth = 2;
+          labelContext.strokeRect(0, 0, labelCanvasSize, labelCanvasSize);
+
+          const data = labelContext.getImageData(
+            0,
+            0,
+            labelCanvasSize,
+            labelCanvasSize
+          ).data;
+          return Promise.resolve(new Uint8Array(data.buffer));
+        },
+        transition: 0,
+      }),
+    }),
+  ],
+  target: 'map',
+  view: new View({
+    center: [15180597.9736, 2700366.3807],
+    zoom: 2,
+  }),
+});
+
+render({
+  message: 'multiple WebGL layers are rendered',
+});