ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #9562 from jahow/webgl-worker

Browse Source 
Optimize the WebGL points renderer using a worker
This commit is contained in:
Olivier Guyot
2019-06-06 08:48:29 +02:00
committed by GitHub
parent 9a49c91fdd e036767746
commit 9ae7256048
14 changed files with 732 additions and 314 deletions
Download Patch File Download Diff File Expand all files Collapse all files

290
test/spec/ol/renderer/webgl/layer.test.js
View File

@@ -1,5 +1,7 @@
import WebGLLayerRenderer, {getBlankTexture, pushFeatureToBuffer} from '../../../../../src/ol/renderer/webgl/Layer.js';
import WebGLArrayBuffer from '../../../../../src/ol/webgl/Buffer.js';
import WebGLLayerRenderer, {
getBlankTexture, POINT_INSTRUCTIONS_COUNT, POINT_VERTEX_STRIDE,
writePointFeatureInstructions, writePointFeatureToBuffers
} from '../../../../../src/ol/renderer/webgl/Layer.js';
import Layer from '../../../../../src/ol/layer/Layer.js';
@@ -28,111 +30,211 @@ describe('ol.renderer.webgl.Layer', function() {
});
describe('pushFeatureToBuffer', function() {
let vertexBuffer, indexBuffer;
describe('writePointFeatureInstructions', function() {
let instructions;
beforeEach(function() {
vertexBuffer = new WebGLArrayBuffer();
indexBuffer = new WebGLArrayBuffer();
instructions = new Float32Array(100);
});
it('does nothing if the feature has no geometry', function() {
const feature = {
type: 'Feature',
id: 'AFG',
properties: {
color: [0.5, 1, 0.2, 0.7],
size: 3
},
geometry: null
};
pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
expect(vertexBuffer.getArray().length).to.eql(0);
expect(indexBuffer.getArray().length).to.eql(0);
it('writes instructions corresponding to the given parameters', function() {
const baseIndex = 17;
writePointFeatureInstructions(instructions, baseIndex,
1, 2, 3, 4, 5, 6,
7, 8, true, [10, 11, 12, 13]);
expect(instructions[baseIndex + 0]).to.eql(1);
expect(instructions[baseIndex + 1]).to.eql(2);
expect(instructions[baseIndex + 2]).to.eql(3);
expect(instructions[baseIndex + 3]).to.eql(4);
expect(instructions[baseIndex + 4]).to.eql(5);
expect(instructions[baseIndex + 5]).to.eql(6);
expect(instructions[baseIndex + 6]).to.eql(7);
expect(instructions[baseIndex + 7]).to.eql(8);
expect(instructions[baseIndex + 8]).to.eql(1);
expect(instructions[baseIndex + 9]).to.eql(10);
expect(instructions[baseIndex + 10]).to.eql(11);
expect(instructions[baseIndex + 11]).to.eql(12);
expect(instructions[baseIndex + 12]).to.eql(13);
});
it('adds two triangles with the correct attributes for a point geometry', function() {
const feature = {
type: 'Feature',
id: 'AFG',
properties: {
color: [0.5, 1, 0.2, 0.7],
size: 3
},
geometry: {
type: 'Point',
coordinates: [-75, 47]
}
};
const attributePerVertex = 12;
pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
expect(vertexBuffer.getArray().length).to.eql(attributePerVertex * 4);
expect(indexBuffer.getArray().length).to.eql(6);
it('correctly chains writes', function() {
let baseIndex = 0;
baseIndex = writePointFeatureInstructions(instructions, baseIndex,
1, 2, 3, 4, 5, 6,
7, 8, true, [10, 11, 12, 13]);
baseIndex = writePointFeatureInstructions(instructions, baseIndex,
1, 2, 3, 4, 5, 6,
7, 8, true, [10, 11, 12, 13]);
writePointFeatureInstructions(instructions, baseIndex,
1, 2, 3, 4, 5, 6,
7, 8, true, [10, 11, 12, 13]);
expect(instructions[baseIndex + 0]).to.eql(1);
expect(instructions[baseIndex + 1]).to.eql(2);
expect(instructions[baseIndex + 2]).to.eql(3);
expect(instructions[baseIndex + 3]).to.eql(4);
expect(instructions[baseIndex + 4]).to.eql(5);
expect(instructions[baseIndex + 5]).to.eql(6);
expect(instructions[baseIndex + 6]).to.eql(7);
expect(instructions[baseIndex + 7]).to.eql(8);
expect(instructions[baseIndex + 8]).to.eql(1);
expect(instructions[baseIndex + 9]).to.eql(10);
expect(instructions[baseIndex + 10]).to.eql(11);
expect(instructions[baseIndex + 11]).to.eql(12);
expect(instructions[baseIndex + 12]).to.eql(13);
});
});
describe('writePointFeatureToBuffers', function() {
let vertexBuffer, indexBuffer, instructions, elementIndex;
beforeEach(function() {
vertexBuffer = new Float32Array(100);
indexBuffer = new Uint32Array(100);
instructions = new Float32Array(100);
elementIndex = 3;
writePointFeatureInstructions(instructions, elementIndex,
1, 2, 3, 4, 5, 6,
7, 8, true, [10, 11, 12, 13]);
});
it('correctly sets indices & coordinates for several features', function() {
const feature = {
type: 'Feature',
id: 'AFG',
properties: {
color: [0.5, 1, 0.2, 0.7],
size: 3
},
geometry: {
type: 'Point',
coordinates: [-75, 47]
}
};
const attributePerVertex = 12;
pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
pushFeatureToBuffer(vertexBuffer, indexBuffer, feature);
expect(vertexBuffer.getArray()[0]).to.eql(-75);
expect(vertexBuffer.getArray()[1]).to.eql(47);
expect(vertexBuffer.getArray()[0 + attributePerVertex]).to.eql(-75);
expect(vertexBuffer.getArray()[1 + attributePerVertex]).to.eql(47);
it('writes correctly to the buffers (without custom attributes)', function() {
const stride = POINT_VERTEX_STRIDE;
const positions = writePointFeatureToBuffers(instructions, elementIndex, vertexBuffer, indexBuffer);
// first point
expect(indexBuffer.getArray()[0]).to.eql(0);
expect(indexBuffer.getArray()[1]).to.eql(1);
expect(indexBuffer.getArray()[2]).to.eql(3);
expect(indexBuffer.getArray()[3]).to.eql(1);
expect(indexBuffer.getArray()[4]).to.eql(2);
expect(indexBuffer.getArray()[5]).to.eql(3);
expect(vertexBuffer[0]).to.eql(1);
expect(vertexBuffer[1]).to.eql(2);
expect(vertexBuffer[2]).to.eql(-3.5);
expect(vertexBuffer[3]).to.eql(-3.5);
expect(vertexBuffer[4]).to.eql(3);
expect(vertexBuffer[5]).to.eql(4);
expect(vertexBuffer[6]).to.eql(8);
expect(vertexBuffer[7]).to.eql(1);
expect(vertexBuffer[8]).to.eql(10);
expect(vertexBuffer[9]).to.eql(11);
expect(vertexBuffer[10]).to.eql(12);
expect(vertexBuffer[11]).to.eql(13);
// second point
expect(indexBuffer.getArray()[6]).to.eql(4);
expect(indexBuffer.getArray()[7]).to.eql(5);
expect(indexBuffer.getArray()[8]).to.eql(7);
expect(indexBuffer.getArray()[9]).to.eql(5);
expect(indexBuffer.getArray()[10]).to.eql(6);
expect(indexBuffer.getArray()[11]).to.eql(7);
expect(vertexBuffer[stride + 0]).to.eql(1);
expect(vertexBuffer[stride + 1]).to.eql(2);
expect(vertexBuffer[stride + 2]).to.eql(+3.5);
expect(vertexBuffer[stride + 3]).to.eql(-3.5);
expect(vertexBuffer[stride + 4]).to.eql(5);
expect(vertexBuffer[stride + 5]).to.eql(4);
expect(vertexBuffer[stride * 2 + 0]).to.eql(1);
expect(vertexBuffer[stride * 2 + 1]).to.eql(2);
expect(vertexBuffer[stride * 2 + 2]).to.eql(+3.5);
expect(vertexBuffer[stride * 2 + 3]).to.eql(+3.5);
expect(vertexBuffer[stride * 2 + 4]).to.eql(5);
expect(vertexBuffer[stride * 2 + 5]).to.eql(6);
expect(vertexBuffer[stride * 3 + 0]).to.eql(1);
expect(vertexBuffer[stride * 3 + 1]).to.eql(2);
expect(vertexBuffer[stride * 3 + 2]).to.eql(-3.5);
expect(vertexBuffer[stride * 3 + 3]).to.eql(+3.5);
expect(vertexBuffer[stride * 3 + 4]).to.eql(3);
expect(vertexBuffer[stride * 3 + 5]).to.eql(6);
expect(indexBuffer[0]).to.eql(0);
expect(indexBuffer[1]).to.eql(1);
expect(indexBuffer[2]).to.eql(3);
expect(indexBuffer[3]).to.eql(1);
expect(indexBuffer[4]).to.eql(2);
expect(indexBuffer[5]).to.eql(3);
expect(positions.indexPosition).to.eql(6);
expect(positions.vertexPosition).to.eql(stride * 4);
});
it('correctly adds custom attributes', function() {
const feature = {
type: 'Feature',
id: 'AFG',
properties: {
color: [0.5, 1, 0.2, 0.7],
custom: 4,
customString: '5',
custom2: 12.4,
customString2: 'abc'
},
geometry: {
type: 'Point',
coordinates: [-75, 47]
}
};
const attributePerVertex = 16;
pushFeatureToBuffer(vertexBuffer, indexBuffer, feature, ['custom', 'custom2', 'customString', 'customString2']);
expect(vertexBuffer.getArray().length).to.eql(attributePerVertex * 4);
expect(indexBuffer.getArray().length).to.eql(6);
expect(vertexBuffer.getArray()[12]).to.eql(4);
expect(vertexBuffer.getArray()[13]).to.eql(12.4);
expect(vertexBuffer.getArray()[14]).to.eql(5);
expect(vertexBuffer.getArray()[15]).to.eql(0);
it('writes correctly to the buffers (with custom attributes)', function() {
instructions[elementIndex + POINT_INSTRUCTIONS_COUNT] = 101;
instructions[elementIndex + POINT_INSTRUCTIONS_COUNT + 1] = 102;
instructions[elementIndex + POINT_INSTRUCTIONS_COUNT + 2] = 103;
const stride = POINT_VERTEX_STRIDE + 3;
const positions = writePointFeatureToBuffers(instructions, elementIndex, vertexBuffer, indexBuffer,
undefined, POINT_INSTRUCTIONS_COUNT + 3);
expect(vertexBuffer[0]).to.eql(1);
expect(vertexBuffer[1]).to.eql(2);
expect(vertexBuffer[2]).to.eql(-3.5);
expect(vertexBuffer[3]).to.eql(-3.5);
expect(vertexBuffer[4]).to.eql(3);
expect(vertexBuffer[5]).to.eql(4);
expect(vertexBuffer[6]).to.eql(8);
expect(vertexBuffer[7]).to.eql(1);
expect(vertexBuffer[8]).to.eql(10);
expect(vertexBuffer[9]).to.eql(11);
expect(vertexBuffer[10]).to.eql(12);
expect(vertexBuffer[11]).to.eql(13);
expect(vertexBuffer[12]).to.eql(101);
expect(vertexBuffer[13]).to.eql(102);
expect(vertexBuffer[14]).to.eql(103);
expect(vertexBuffer[stride + 12]).to.eql(101);
expect(vertexBuffer[stride + 13]).to.eql(102);
expect(vertexBuffer[stride + 14]).to.eql(103);
expect(vertexBuffer[stride * 2 + 12]).to.eql(101);
expect(vertexBuffer[stride * 2 + 13]).to.eql(102);
expect(vertexBuffer[stride * 2 + 14]).to.eql(103);
expect(vertexBuffer[stride * 3 + 12]).to.eql(101);
expect(vertexBuffer[stride * 3 + 13]).to.eql(102);
expect(vertexBuffer[stride * 3 + 14]).to.eql(103);
expect(indexBuffer[0]).to.eql(0);
expect(indexBuffer[1]).to.eql(1);
expect(indexBuffer[2]).to.eql(3);
expect(indexBuffer[3]).to.eql(1);
expect(indexBuffer[4]).to.eql(2);
expect(indexBuffer[5]).to.eql(3);
expect(positions.indexPosition).to.eql(6);
expect(positions.vertexPosition).to.eql(stride * 4);
});
it('correctly chains buffer writes', function() {
const stride = POINT_VERTEX_STRIDE;
let positions = writePointFeatureToBuffers(instructions, elementIndex, vertexBuffer, indexBuffer);
positions = writePointFeatureToBuffers(instructions, elementIndex, vertexBuffer, indexBuffer, positions);
positions = writePointFeatureToBuffers(instructions, elementIndex, vertexBuffer, indexBuffer, positions);
expect(vertexBuffer[0]).to.eql(1);
expect(vertexBuffer[1]).to.eql(2);
expect(vertexBuffer[2]).to.eql(-3.5);
expect(vertexBuffer[3]).to.eql(-3.5);
expect(vertexBuffer[stride * 4 + 0]).to.eql(1);
expect(vertexBuffer[stride * 4 + 1]).to.eql(2);
expect(vertexBuffer[stride * 4 + 2]).to.eql(-3.5);
expect(vertexBuffer[stride * 4 + 3]).to.eql(-3.5);
expect(vertexBuffer[stride * 8 + 0]).to.eql(1);
expect(vertexBuffer[stride * 8 + 1]).to.eql(2);
expect(vertexBuffer[stride * 8 + 2]).to.eql(-3.5);
expect(vertexBuffer[stride * 8 + 3]).to.eql(-3.5);
expect(indexBuffer[6 + 0]).to.eql(4);
expect(indexBuffer[6 + 1]).to.eql(5);
expect(indexBuffer[6 + 2]).to.eql(7);
expect(indexBuffer[6 + 3]).to.eql(5);
expect(indexBuffer[6 + 4]).to.eql(6);
expect(indexBuffer[6 + 5]).to.eql(7);
expect(indexBuffer[6 * 2 + 0]).to.eql(8);
expect(indexBuffer[6 * 2 + 1]).to.eql(9);
expect(indexBuffer[6 * 2 + 2]).to.eql(11);
expect(indexBuffer[6 * 2 + 3]).to.eql(9);
expect(indexBuffer[6 * 2 + 4]).to.eql(10);
expect(indexBuffer[6 * 2 + 5]).to.eql(11);
expect(positions.indexPosition).to.eql(6 * 3);
expect(positions.vertexPosition).to.eql(stride * 4 * 3);
});
});
describe('getBlankTexture', function() {

55
test/spec/ol/renderer/webgl/pointslayer.test.js
View File

@@ -1,12 +1,11 @@
import Feature from '../../../../../src/ol/Feature.js';
import Point from '../../../../../src/ol/geom/Point.js';
import LineString from '../../../../../src/ol/geom/LineString.js';
import VectorLayer from '../../../../../src/ol/layer/Vector.js';
import VectorSource from '../../../../../src/ol/source/Vector.js';
import WebGLPointsLayerRenderer from '../../../../../src/ol/renderer/webgl/PointsLayer.js';
import {get as getProjection} from '../../../../../src/ol/proj.js';
import Polygon from '../../../../../src/ol/geom/Polygon.js';
import ViewHint from '../../../../../src/ol/ViewHint.js';
import {POINT_VERTEX_STRIDE, WebGLWorkerMessageType} from '../../../../../src/ol/renderer/webgl/Layer.js';
describe('ol.renderer.webgl.PointsLayer', function() {
@@ -52,44 +51,46 @@ describe('ol.renderer.webgl.PointsLayer', function() {
projection: projection,
resolution: 1,
rotation: 0,
center: [10, 10]
center: [0, 0]
},
size: [256, 256],
size: [2, 2],
extent: [-100, -100, 100, 100]
};
});
it('calls WebGlHelper#prepareDraw', function() {
const spy = sinon.spy(renderer.helper_, 'prepareDraw');
const spy = sinon.spy(renderer.helper, 'prepareDraw');
renderer.prepareFrame(frameState);
expect(spy.called).to.be(true);
});
it('fills up a buffer with 2 triangles per point', function() {
it('fills up a buffer with 2 triangles per point', function(done) {
layer.getSource().addFeature(new Feature({
geometry: new Point([10, 20])
}));
renderer.prepareFrame(frameState);
const attributePerVertex = 12;
expect(renderer.verticesBuffer_.getArray().length).to.eql(4 * attributePerVertex);
expect(renderer.indicesBuffer_.getArray().length).to.eql(6);
});
it('ignores geometries other than points', function() {
layer.getSource().addFeature(new Feature({
geometry: new LineString([[10, 20], [30, 20]])
}));
layer.getSource().addFeature(new Feature({
geometry: new Polygon([[10, 20], [30, 20], [30, 10], [10, 20]])
geometry: new Point([30, 40])
}));
renderer.prepareFrame(frameState);
expect(renderer.verticesBuffer_.getArray().length).to.eql(0);
expect(renderer.indicesBuffer_.getArray().length).to.eql(0);
const attributePerVertex = POINT_VERTEX_STRIDE;
renderer.worker_.addEventListener('message', function(event) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
return;
}
expect(renderer.verticesBuffer_.getArray().length).to.eql(2 * 4 * attributePerVertex);
expect(renderer.indicesBuffer_.getArray().length).to.eql(2 * 6);
expect(renderer.verticesBuffer_.getArray()[0]).to.eql(10);
expect(renderer.verticesBuffer_.getArray()[1]).to.eql(20);
expect(renderer.verticesBuffer_.getArray()[4 * attributePerVertex + 0]).to.eql(30);
expect(renderer.verticesBuffer_.getArray()[4 * attributePerVertex + 1]).to.eql(40);
done();
});
});
it('clears the buffers when the features are gone', function() {
it('clears the buffers when the features are gone', function(done) {
const source = layer.getSource();
source.addFeature(new Feature({
geometry: new Point([10, 20])
@@ -100,9 +101,15 @@ describe('ol.renderer.webgl.PointsLayer', function() {
}));
renderer.prepareFrame(frameState);
const attributePerVertex = 12;
expect(renderer.verticesBuffer_.getArray().length).to.eql(4 * attributePerVertex);
expect(renderer.indicesBuffer_.getArray().length).to.eql(6);
renderer.worker_.addEventListener('message', function(event) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
return;
}
const attributePerVertex = 12;
expect(renderer.verticesBuffer_.getArray().length).to.eql(4 * attributePerVertex);
expect(renderer.indicesBuffer_.getArray().length).to.eql(6);
done();
});
});
it('rebuilds the buffers only when not interacting or animating', function() {