Merge pull request #8977 from jahow/add-webgl-rendering-tests

Add WebGL rendering tests & improve the WebGLHelper API

rendering/cases/heatmap-layer/main.js

@@ -0,0 +1,44 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import XYZ from '../../../src/ol/source/XYZ';
+import {Heatmap as HeatmapLayer} from '../../../src/ol/layer';
+import VectorSource from '../../../src/ol/source/Vector';
+import KML from '../../../src/ol/format/KML';
+
+const vector = new HeatmapLayer({
+  source: new VectorSource({
+    url: '/data/2012_Earthquakes_Mag5.kml',
+    format: new KML({
+      extractStyles: false
+    })
+  }),
+  blur: 3,
+  radius: 3
+});
+
+vector.getSource().on('addfeature', function(event) {
+  const name = event.feature.get('name');
+  const magnitude = parseFloat(name.substr(2));
+  event.feature.set('weight', magnitude - 5);
+});
+
+const raster = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0
+  })
+});
+
+new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 0
+  })
+});
+
+render({
+  message: 'Heatmap layer renders properly using webgl'
+});

rendering/cases/webgl-points/main.js

@@ -0,0 +1,47 @@
+import Map from '../../../src/ol/Map.js';
+import View from '../../../src/ol/View.js';
+import TileLayer from '../../../src/ol/layer/Tile.js';
+import XYZ from '../../../src/ol/source/XYZ';
+import {Vector as VectorLayer} from '../../../src/ol/layer';
+import VectorSource from '../../../src/ol/source/Vector';
+import KML from '../../../src/ol/format/KML';
+import WebGLPointsLayerRenderer from '../../../src/ol/renderer/webgl/PointsLayer';
+
+class CustomLayer extends VectorLayer {
+  createRenderer() {
+    return new WebGLPointsLayerRenderer(this, {
+      sizeCallback: function() {
+        return 4;
+      }
+    });
+  }
+}
+
+const vector = new CustomLayer({
+  source: new VectorSource({
+    url: '/data/2012_Earthquakes_Mag5.kml',
+    format: new KML({
+      extractStyles: false
+    })
+  })
+});
+
+const raster = new TileLayer({
+  source: new XYZ({
+    url: '/data/tiles/satellite/{z}/{x}/{y}.jpg',
+    transition: 0
+  })
+});
+
+new Map({
+  layers: [raster, vector],
+  target: 'map',
+  view: new View({
+    center: [15180597.9736, 2700366.3807],
+    zoom: 2
+  })
+});
+
+render({
+  message: 'Points are rendered using webgl as 4px pixel squares'
+});

rendering/data/2012_Earthquakes_Mag5.kml

@@ -0,0 +1 @@
+../../examples/data/kml/2012_Earthquakes_Mag5.kml

rendering/test.js

@@ -356,7 +356,7 @@ if (require.main === module) {
     option('puppeteer-args', {
       describe: 'Additional args for Puppeteer',
       type: 'array',
-      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox'] : []
+      default: process.env.CI ? ['--no-sandbox', '--disable-setuid-sandbox', '--ignore-gpu-blacklist'] : []
     }).
     parse();