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

Merge pull request #9994 from jahow/add-webgl-layer-type

Browse Source 
Add a new layer type: WebGLPointsLayer
This commit is contained in:
Olivier Guyot
2019-09-26 14:55:09 +02:00
committed by GitHub
parent 14a9002ee2 7da3b60061
commit 607f2f0746
20 changed files with 1366 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/spec/ol/renderer/webgl/layer.test.js
+56 -142
View File
@@ -1,8 +1,8 @@
import WebGLLayerRenderer, {
colorDecodeId,
colorEncodeId,
getBlankImageData, POINT_INSTRUCTIONS_COUNT, POINT_VERTEX_STRIDE,
writePointFeatureInstructions, writePointFeatureToBuffers
getBlankImageData,
writePointFeatureToBuffers
} from '../../../../../src/ol/renderer/webgl/Layer.js';
import Layer from '../../../../../src/ol/layer/Layer.js';
@@ -32,111 +32,36 @@ describe('ol.renderer.webgl.Layer', function() {
});
describe('writePointFeatureInstructions', function() {
let instructions;
beforeEach(function() {
instructions = new Float32Array(100);
});
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('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;
let vertexBuffer, indexBuffer, instructions;
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]);
instructions.set([0, 0, 0, 0, 10, 11]);
});
it('writes correctly to the buffers (without custom attributes)', function() {
const stride = POINT_VERTEX_STRIDE;
const positions = writePointFeatureToBuffers(instructions, elementIndex, vertexBuffer, indexBuffer);
const stride = 3;
const positions = writePointFeatureToBuffers(instructions, 4, vertexBuffer, indexBuffer, 0);
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[0]).to.eql(10);
expect(vertexBuffer[1]).to.eql(11);
expect(vertexBuffer[2]).to.eql(0);
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 + 0]).to.eql(10);
expect(vertexBuffer[stride + 1]).to.eql(11);
expect(vertexBuffer[stride + 2]).to.eql(1);
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 * 2 + 0]).to.eql(10);
expect(vertexBuffer[stride * 2 + 1]).to.eql(11);
expect(vertexBuffer[stride * 2 + 2]).to.eql(2);
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(vertexBuffer[stride * 3 + 0]).to.eql(10);
expect(vertexBuffer[stride * 3 + 1]).to.eql(11);
expect(vertexBuffer[stride * 3 + 2]).to.eql(3);
expect(indexBuffer[0]).to.eql(0);
expect(indexBuffer[1]).to.eql(1);
@@ -149,43 +74,34 @@ describe('ol.renderer.webgl.Layer', function() {
expect(positions.vertexPosition).to.eql(stride * 4);
});
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;
it('writes correctly to the buffers (with 2 custom attributes)', function() {
instructions.set([0, 0, 0, 0, 0, 0, 0, 0, 10, 11, 12, 13]);
const stride = 5;
const positions = writePointFeatureToBuffers(instructions, 8, vertexBuffer, indexBuffer, 2);
const stride = POINT_VERTEX_STRIDE + 3;
const positions = writePointFeatureToBuffers(instructions, elementIndex, vertexBuffer, indexBuffer,
undefined, POINT_INSTRUCTIONS_COUNT + 3);
expect(vertexBuffer[0]).to.eql(10);
expect(vertexBuffer[1]).to.eql(11);
expect(vertexBuffer[2]).to.eql(0);
expect(vertexBuffer[3]).to.eql(12);
expect(vertexBuffer[4]).to.eql(13);
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[stride + 0]).to.eql(10);
expect(vertexBuffer[stride + 1]).to.eql(11);
expect(vertexBuffer[stride + 2]).to.eql(1);
expect(vertexBuffer[stride + 3]).to.eql(12);
expect(vertexBuffer[stride + 4]).to.eql(13);
expect(vertexBuffer[12]).to.eql(101);
expect(vertexBuffer[13]).to.eql(102);
expect(vertexBuffer[14]).to.eql(103);
expect(vertexBuffer[stride * 2 + 0]).to.eql(10);
expect(vertexBuffer[stride * 2 + 1]).to.eql(11);
expect(vertexBuffer[stride * 2 + 2]).to.eql(2);
expect(vertexBuffer[stride * 2 + 3]).to.eql(12);
expect(vertexBuffer[stride * 2 + 4]).to.eql(13);
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(vertexBuffer[stride * 3 + 0]).to.eql(10);
expect(vertexBuffer[stride * 3 + 1]).to.eql(11);
expect(vertexBuffer[stride * 3 + 2]).to.eql(3);
expect(vertexBuffer[stride * 3 + 3]).to.eql(12);
expect(vertexBuffer[stride * 3 + 4]).to.eql(13);
expect(indexBuffer[0]).to.eql(0);
expect(indexBuffer[1]).to.eql(1);
@@ -199,25 +115,23 @@ describe('ol.renderer.webgl.Layer', function() {
});
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);
instructions.set([10, 11, 20, 21, 30, 31]);
const stride = 3;
let positions = writePointFeatureToBuffers(instructions, 0, vertexBuffer, indexBuffer, 0);
positions = writePointFeatureToBuffers(instructions, 2, vertexBuffer, indexBuffer, 0, positions);
positions = writePointFeatureToBuffers(instructions, 4, vertexBuffer, indexBuffer, 0, 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[0]).to.eql(10);
expect(vertexBuffer[1]).to.eql(11);
expect(vertexBuffer[2]).to.eql(0);
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 * 4 + 0]).to.eql(20);
expect(vertexBuffer[stride * 4 + 1]).to.eql(21);
expect(vertexBuffer[stride * 4 + 2]).to.eql(0);
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(vertexBuffer[stride * 8 + 0]).to.eql(30);
expect(vertexBuffer[stride * 8 + 1]).to.eql(31);
expect(vertexBuffer[stride * 8 + 2]).to.eql(0);
expect(indexBuffer[6 + 0]).to.eql(4);
expect(indexBuffer[6 + 1]).to.eql(5);
test/spec/ol/renderer/webgl/pointslayer.test.js
+113 -9
View File
@@ -5,8 +5,8 @@ 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 ViewHint from '../../../../../src/ol/ViewHint.js';
import {POINT_VERTEX_STRIDE, WebGLWorkerMessageType} from '../../../../../src/ol/renderer/webgl/Layer.js';
import {create as createTransform, compose as composeTransform} from '../../../../../src/ol/transform.js';
import {WebGLWorkerMessageType} from '../../../../../src/ol/renderer/webgl/Layer.js';
import {compose as composeTransform, create as createTransform} from '../../../../../src/ol/transform.js';
const baseFrameState = {
viewHints: [],
@@ -21,6 +21,54 @@ const baseFrameState = {
pixelRatio: 1
};
const simpleVertexShader = `
precision mediump float;
uniform mat4 u_projectionMatrix;
uniform mat4 u_offsetScaleMatrix;
attribute vec2 a_position;
attribute float a_index;
void main(void) {
mat4 offsetMatrix = u_offsetScaleMatrix;
float offsetX = a_index == 0.0 || a_index == 3.0 ? -2.0 : 2.0;
float offsetY = a_index == 0.0 || a_index == 1.0 ? -2.0 : 2.0;
vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);
gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;
}`;
const simpleFragmentShader = `
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}`;
// these shaders support hit detection
// they have a built-in size value of 4
const hitVertexShader = `
precision mediump float;
uniform mat4 u_projectionMatrix;
uniform mat4 u_offsetScaleMatrix;
attribute vec2 a_position;
attribute float a_index;
attribute vec4 a_hitColor;
varying vec4 v_hitColor;
void main(void) {
mat4 offsetMatrix = u_offsetScaleMatrix;
float offsetX = a_index == 0.0 || a_index == 3.0 ? -2.0 : 2.0;
float offsetY = a_index == 0.0 || a_index == 1.0 ? -2.0 : 2.0;
vec4 offsets = offsetMatrix * vec4(offsetX, offsetY, 0.0, 0.0);
gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0) + offsets;
v_hitColor = a_hitColor;
}`;
const hitFragmentShader = `
precision mediump float;
varying vec4 v_hitColor;
void main(void) {
gl_FragColor = v_hitColor;
}`;
describe('ol.renderer.webgl.PointsLayer', function() {
describe('constructor', function() {
@@ -42,7 +90,10 @@ describe('ol.renderer.webgl.PointsLayer', function() {
const layer = new VectorLayer({
source: new VectorSource()
});
const renderer = new WebGLPointsLayerRenderer(layer);
const renderer = new WebGLPointsLayerRenderer(layer, {
vertexShader: simpleVertexShader,
fragmentShader: simpleFragmentShader
});
expect(renderer).to.be.a(WebGLPointsLayerRenderer);
});
@@ -55,7 +106,12 @@ describe('ol.renderer.webgl.PointsLayer', function() {
layer = new VectorLayer({
source: new VectorSource()
});
renderer = new WebGLPointsLayerRenderer(layer);
renderer = new WebGLPointsLayerRenderer(layer, {
vertexShader: simpleVertexShader,
fragmentShader: simpleFragmentShader,
hitVertexShader: hitVertexShader,
hitFragmentShader: hitFragmentShader
});
frameState = Object.assign({
size: [2, 2],
extent: [-100, -100, 100, 100]
@@ -77,7 +133,7 @@ describe('ol.renderer.webgl.PointsLayer', function() {
}));
renderer.prepareFrame(frameState);
const attributePerVertex = POINT_VERTEX_STRIDE;
const attributePerVertex = 3;
renderer.worker_.addEventListener('message', function(event) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
@@ -94,6 +150,35 @@ describe('ol.renderer.webgl.PointsLayer', function() {
});
});
it('fills up the hit render buffer with 2 triangles per point', function(done) {
layer.getSource().addFeature(new Feature({
geometry: new Point([10, 20])
}));
layer.getSource().addFeature(new Feature({
geometry: new Point([30, 40])
}));
renderer.prepareFrame(frameState);
const attributePerVertex = 8;
renderer.worker_.addEventListener('message', function(event) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
return;
}
if (!renderer.hitVerticesBuffer_.getArray()) {
return;
}
expect(renderer.hitVerticesBuffer_.getArray().length).to.eql(2 * 4 * attributePerVertex);
expect(renderer.indicesBuffer_.getArray().length).to.eql(2 * 6);
expect(renderer.hitVerticesBuffer_.getArray()[0]).to.eql(10);
expect(renderer.hitVerticesBuffer_.getArray()[1]).to.eql(20);
expect(renderer.hitVerticesBuffer_.getArray()[4 * attributePerVertex + 0]).to.eql(30);
expect(renderer.hitVerticesBuffer_.getArray()[4 * attributePerVertex + 1]).to.eql(40);
done();
});
});
it('clears the buffers when the features are gone', function(done) {
const source = layer.getSource();
source.addFeature(new Feature({
@@ -109,7 +194,7 @@ describe('ol.renderer.webgl.PointsLayer', function() {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
return;
}
const attributePerVertex = 12;
const attributePerVertex = 3;
expect(renderer.verticesBuffer_.getArray().length).to.eql(4 * attributePerVertex);
expect(renderer.indicesBuffer_.getArray().length).to.eql(6);
done();
@@ -162,9 +247,10 @@ describe('ol.renderer.webgl.PointsLayer', function() {
})
});
renderer = new WebGLPointsLayerRenderer(layer, {
sizeCallback: function() {
return 4;
}
vertexShader: simpleVertexShader,
fragmentShader: simpleFragmentShader,
hitVertexShader: hitVertexShader,
hitFragmentShader: hitFragmentShader
});
});
@@ -254,4 +340,22 @@ describe('ol.renderer.webgl.PointsLayer', function() {
});
});
describe('#disposeInternal', function() {
it('terminates the worker and calls dispose on the helper', function() {
const layer = new VectorLayer({
source: new VectorSource()
});
const renderer = new WebGLPointsLayerRenderer(layer, {
vertexShader: simpleVertexShader,
fragmentShader: simpleFragmentShader
});
const spyHelper = sinon.spy(renderer.helper, 'disposeInternal');
const spyWorker = sinon.spy(renderer.worker_, 'terminate');
renderer.disposeInternal();
expect(spyHelper.called).to.be(true);
expect(spyWorker.called).to.be(true);
});
});
});