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

Merge pull request #13461 from jahow/webgl-shape-renderer

Browse Source 
WebGL vector renderer for polygons, lines and points
This commit is contained in:
Olivier Guyot
2022-07-22 10:05:31 +02:00
committed by GitHub
parent e83ecdeb96 8aa8684d81
commit 7d56c56210
27 changed files with 3996 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

307
test/browser/spec/ol/render/webgl/BatchRenderer.test.js Normal file
View File

@@ -0,0 +1,307 @@
import Feature from '../../../../../../src/ol/Feature.js';
import LineString from '../../../../../../src/ol/geom/LineString.js';
import LineStringBatchRenderer from '../../../../../../src/ol/render/webgl/LineStringBatchRenderer.js';
import MixedGeometryBatch from '../../../../../../src/ol/render/webgl/MixedGeometryBatch.js';
import Point from '../../../../../../src/ol/geom/Point.js';
import PointBatchRenderer from '../../../../../../src/ol/render/webgl/PointBatchRenderer.js';
import Polygon from '../../../../../../src/ol/geom/Polygon.js';
import PolygonBatchRenderer from '../../../../../../src/ol/render/webgl/PolygonBatchRenderer.js';
import WebGLHelper from '../../../../../../src/ol/webgl/Helper.js';
import {FLOAT} from '../../../../../../src/ol/webgl.js';
import {WebGLWorkerMessageType} from '../../../../../../src/ol/render/webgl/constants.js';
import {
create as createTransform,
translate as translateTransform,
} from '../../../../../../src/ol/transform.js';
import {create as createWebGLWorker} from '../../../../../../src/ol/worker/webgl.js';
const POINT_VERTEX_SHADER = `precision mediump float;
void main(void) {}`;
const POINT_FRAGMENT_SHADER = `precision mediump float;
void main(void) {}`;
const SAMPLE_FRAMESTATE = {
viewState: {
center: [0, 10],
resolution: 1,
rotation: 0,
},
size: [10, 10],
};
describe('Batch renderers', function () {
let batchRenderer, helper, mixedBatch, worker, attributes;
beforeEach(function () {
helper = new WebGLHelper();
worker = createWebGLWorker();
attributes = [
{
name: 'test',
callback: function (feature, properties) {
return feature.get('test');
},
},
];
mixedBatch = new MixedGeometryBatch();
mixedBatch.addFeatures([
new Feature({
test: 1000,
geometry: new Point([10, 20]),
}),
new Feature({
test: 2000,
geometry: new Point([30, 40]),
}),
new Feature({
test: 3000,
geometry: new Polygon([
[
[10, 10],
[20, 10],
[30, 20],
[20, 40],
[10, 10],
],
]),
}),
new Feature({
test: 4000,
geometry: new LineString([
[100, 200],
[300, 400],
[500, 600],
]),
}),
]);
});
describe('PointBatchRenderer', function () {
beforeEach(function () {
batchRenderer = new PointBatchRenderer(
helper,
worker,
POINT_VERTEX_SHADER,
POINT_FRAGMENT_SHADER,
attributes
);
});
describe('constructor', function () {
it('generates the attributes list', function () {
expect(batchRenderer.attributes).to.eql([
{name: 'a_position', size: 2, type: FLOAT},
{name: 'a_index', size: 1, type: FLOAT},
{name: 'a_test', size: 1, type: FLOAT},
]);
});
});
describe('#rebuild', function () {
let rebuildCb;
beforeEach(function (done) {
sinon.spy(helper, 'flushBufferData');
rebuildCb = sinon.spy();
batchRenderer.rebuild(
mixedBatch.pointBatch,
SAMPLE_FRAMESTATE,
'Point',
rebuildCb
);
// wait for worker response for our specific message
worker.addEventListener('message', function (event) {
if (
event.data.type === WebGLWorkerMessageType.GENERATE_POINT_BUFFERS &&
event.data.renderInstructions.byteLength > 0
) {
done();
}
});
});
it('generates render instructions and updates buffers from the worker response', function () {
expect(Array.from(mixedBatch.pointBatch.renderInstructions)).to.eql([
2, 2, 1000, 6, 6, 2000,
]);
});
it('updates buffers', function () {
expect(
mixedBatch.pointBatch.verticesBuffer.getArray().length
).to.be.greaterThan(0);
expect(
mixedBatch.pointBatch.indicesBuffer.getArray().length
).to.be.greaterThan(0);
expect(helper.flushBufferData.calledTwice).to.be(true);
});
it('updates the instructions transform', function () {
expect(mixedBatch.pointBatch.renderInstructionsTransform).to.eql([
0.2, 0, 0, 0.2, 0, -2,
]);
});
it('calls the provided callback', function () {
expect(rebuildCb.calledOnce).to.be(true);
});
});
describe('#render (from parent)', function () {
let transform;
const offsetX = 12;
beforeEach(function () {
sinon.spy(helper, 'makeProjectionTransform');
sinon.spy(helper, 'useProgram');
sinon.spy(helper, 'bindBuffer');
sinon.spy(helper, 'enableAttributes');
sinon.spy(helper, 'drawElements');
transform = createTransform();
batchRenderer.render(
mixedBatch.pointBatch,
transform,
SAMPLE_FRAMESTATE,
offsetX
);
});
it('computes current transform', function () {
expect(helper.makeProjectionTransform.calledOnce).to.be(true);
});
it('includes the X offset in the transform used for rendering', function () {
const expected = helper.makeProjectionTransform(
SAMPLE_FRAMESTATE,
createTransform()
);
translateTransform(expected, offsetX, 0);
expect(transform).to.eql(expected);
});
it('computes sets up render parameters', function () {
expect(helper.useProgram.calledOnce).to.be(true);
expect(helper.enableAttributes.calledOnce).to.be(true);
expect(helper.bindBuffer.calledTwice).to.be(true);
});
it('renders elements', function () {
expect(helper.drawElements.calledOnce).to.be(true);
});
});
});
describe('LineStringBatchRenderer', function () {
beforeEach(function () {
batchRenderer = new LineStringBatchRenderer(
helper,
worker,
POINT_VERTEX_SHADER,
POINT_FRAGMENT_SHADER,
attributes
);
});
describe('constructor', function () {
it('generates the attributes list', function () {
expect(batchRenderer.attributes).to.eql([
{name: 'a_segmentStart', size: 2, type: FLOAT},
{name: 'a_segmentEnd', size: 2, type: FLOAT},
{name: 'a_parameters', size: 1, type: FLOAT},
{name: 'a_test', size: 1, type: FLOAT},
]);
});
});
describe('#rebuild', function () {
let rebuildCb;
beforeEach(function (done) {
sinon.spy(helper, 'flushBufferData');
rebuildCb = sinon.spy();
batchRenderer.rebuild(
mixedBatch.lineStringBatch,
SAMPLE_FRAMESTATE,
'LineString',
rebuildCb
);
// wait for worker response for our specific message
worker.addEventListener('message', function (event) {
if (
event.data.type ===
WebGLWorkerMessageType.GENERATE_LINE_STRING_BUFFERS &&
event.data.renderInstructions.byteLength > 0
) {
done();
}
});
});
it('generates render instructions and updates buffers from the worker response', function () {
expect(
Array.from(mixedBatch.lineStringBatch.renderInstructions)
).to.eql([
3000, 5, 2, 0, 4, 0, 6, 2, 4, 6, 2, 0, 4000, 3, 20, 38, 60, 78, 100,
118,
]);
});
it('updates buffers', function () {
expect(
mixedBatch.lineStringBatch.verticesBuffer.getArray().length
).to.be.greaterThan(0);
expect(
mixedBatch.lineStringBatch.indicesBuffer.getArray().length
).to.be.greaterThan(0);
expect(helper.flushBufferData.calledTwice).to.be(true);
});
it('calls the provided callback', function () {
expect(rebuildCb.calledOnce).to.be(true);
});
});
});
describe('PolygonBatchRenderer', function () {
beforeEach(function () {
batchRenderer = new PolygonBatchRenderer(
helper,
worker,
POINT_VERTEX_SHADER,
POINT_FRAGMENT_SHADER,
attributes
);
});
describe('constructor', function () {
it('generates the attributes list', function () {
expect(batchRenderer.attributes).to.eql([
{name: 'a_position', size: 2, type: FLOAT},
{name: 'a_test', size: 1, type: FLOAT},
]);
});
});
describe('#rebuild', function () {
let rebuildCb;
beforeEach(function (done) {
sinon.spy(helper, 'flushBufferData');
rebuildCb = sinon.spy();
batchRenderer.rebuild(
mixedBatch.polygonBatch,
SAMPLE_FRAMESTATE,
'Polygon',
rebuildCb
);
// wait for worker response for our specific message
worker.addEventListener('message', function (event) {
if (
event.data.type ===
WebGLWorkerMessageType.GENERATE_POLYGON_BUFFERS &&
event.data.renderInstructions.byteLength > 0
) {
done();
}
});
});
it('generates render instructions and updates buffers from the worker response', function () {
expect(Array.from(mixedBatch.polygonBatch.renderInstructions)).to.eql([
3000, 1, 5, 2, 0, 4, 0, 6, 2, 4, 6, 2, 0,
]);
});
it('updates buffers', function () {
expect(
mixedBatch.polygonBatch.verticesBuffer.getArray().length
).to.be.greaterThan(0);
expect(
mixedBatch.polygonBatch.indicesBuffer.getArray().length
).to.be.greaterThan(0);
expect(helper.flushBufferData.calledTwice).to.be(true);
});
it('calls the provided callback', function () {
expect(rebuildCb.calledOnce).to.be(true);
});
});
});
});

763
test/browser/spec/ol/render/webgl/MixedGeometryBatch.test.js Normal file
View File

@@ -0,0 +1,763 @@
import Feature from '../../../../../../src/ol/Feature.js';
import GeometryCollection from '../../../../../../src/ol/geom/GeometryCollection.js';
import LineString from '../../../../../../src/ol/geom/LineString.js';
import LinearRing from '../../../../../../src/ol/geom/LinearRing.js';
import MixedGeometryBatch from '../../../../../../src/ol/render/webgl/MixedGeometryBatch.js';
import MultiLineString from '../../../../../../src/ol/geom/MultiLineString.js';
import MultiPoint from '../../../../../../src/ol/geom/MultiPoint.js';
import MultiPolygon from '../../../../../../src/ol/geom/MultiPolygon.js';
import Point from '../../../../../../src/ol/geom/Point.js';
import Polygon from '../../../../../../src/ol/geom/Polygon.js';
import {getUid} from '../../../../../../src/ol/index.js';
describe('MixedGeometryBatch', function () {
let mixedBatch;
beforeEach(() => {
mixedBatch = new MixedGeometryBatch();
});
describe('#addFeatures', () => {
let features, spy;
beforeEach(() => {
features = [new Feature(), new Feature(), new Feature()];
spy = sinon.spy(mixedBatch, 'addFeature');
mixedBatch.addFeatures(features);
});
it('calls addFeature for each feature', () => {
expect(spy.callCount).to.be(3);
expect(spy.args[0][0]).to.be(features[0]);
expect(spy.args[1][0]).to.be(features[1]);
expect(spy.args[2][0]).to.be(features[2]);
});
});
describe('features with Point geometries', () => {
let geometry1, feature1, geometry2, feature2;
beforeEach(() => {
geometry1 = new Point([0, 1]);
feature1 = new Feature({
geometry: geometry1,
prop1: 'abcd',
prop2: 'efgh',
});
geometry2 = new Point([2, 3]);
feature2 = new Feature({
geometry: geometry2,
prop3: '1234',
prop4: '5678',
});
});
describe('#addFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
});
it('puts the geometries in the point batch', () => {
const keys = Object.keys(mixedBatch.pointBatch.entries);
const uid1 = getUid(feature1);
const uid2 = getUid(feature2);
expect(keys).to.eql([uid1, uid2]);
expect(mixedBatch.pointBatch.entries[uid1]).to.eql({
feature: feature1,
flatCoordss: [[0, 1]],
});
expect(mixedBatch.pointBatch.entries[uid2]).to.eql({
feature: feature2,
flatCoordss: [[2, 3]],
});
});
it('computes the geometries count', () => {
expect(mixedBatch.pointBatch.geometriesCount).to.be(2);
});
it('leaves other batches untouched', () => {
expect(Object.keys(mixedBatch.polygonBatch.entries)).to.have.length(0);
expect(Object.keys(mixedBatch.lineStringBatch.entries)).to.have.length(
0
);
});
});
describe('#changeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
});
describe('modifying geometry and props', () => {
beforeEach(() => {
feature1.set('prop1', 'changed');
geometry1.setCoordinates([100, 101]);
mixedBatch.changeFeature(feature1);
});
it('updates the modified properties and geometry in the point batch', () => {
const entry = mixedBatch.pointBatch.entries[getUid(feature1)];
expect(entry.feature.get('prop1')).to.eql('changed');
});
it('keeps geometry count the same', () => {
expect(mixedBatch.pointBatch.geometriesCount).to.be(2);
});
});
describe('changing the geometry', () => {
let newGeom;
beforeEach(() => {
newGeom = new Point([40, 41]);
feature1.setGeometry(newGeom);
mixedBatch.changeFeature(feature1);
});
it('updates the geometry in the point batch', () => {
const entry = mixedBatch.pointBatch.entries[getUid(feature1)];
expect(entry.flatCoordss).to.eql([[40, 41]]);
});
it('keeps geometry count the same', () => {
expect(mixedBatch.pointBatch.geometriesCount).to.be(2);
});
});
});
describe('#removeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
mixedBatch.removeFeature(feature1);
});
it('clears the entry related to this feature', () => {
const keys = Object.keys(mixedBatch.pointBatch.entries);
expect(keys).to.not.contain(getUid(feature1));
});
it('recompute geometry count', () => {
expect(mixedBatch.pointBatch.geometriesCount).to.be(1);
});
});
});
describe('features with LineString geometries', () => {
let geometry1, feature1, geometry2, feature2;
beforeEach(() => {
geometry1 = new LineString([
[0, 1],
[2, 3],
[4, 5],
[6, 7],
]);
feature1 = new Feature({
geometry: geometry1,
prop1: 'abcd',
prop2: 'efgh',
});
geometry2 = new LineString([
[8, 9],
[10, 11],
[12, 13],
]);
feature2 = new Feature({
geometry: geometry2,
prop3: '1234',
prop4: '5678',
});
});
describe('#addFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
});
it('puts the geometries in the linestring batch', () => {
const keys = Object.keys(mixedBatch.lineStringBatch.entries);
const uid1 = getUid(feature1);
const uid2 = getUid(feature2);
expect(keys).to.eql([uid1, uid2]);
expect(mixedBatch.lineStringBatch.entries[uid1]).to.eql({
feature: feature1,
flatCoordss: [[0, 1, 2, 3, 4, 5, 6, 7]],
verticesCount: 4,
});
expect(mixedBatch.lineStringBatch.entries[uid2]).to.eql({
feature: feature2,
flatCoordss: [[8, 9, 10, 11, 12, 13]],
verticesCount: 3,
});
});
it('computes the aggregated metrics on all geoms', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(7);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(2);
});
it('leaves other batches untouched', () => {
expect(Object.keys(mixedBatch.polygonBatch.entries)).to.have.length(0);
expect(Object.keys(mixedBatch.pointBatch.entries)).to.have.length(0);
});
});
describe('#changeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
});
describe('modifying geometry and props', () => {
beforeEach(() => {
feature1.set('prop1', 'changed');
geometry1.appendCoordinate([100, 101]);
geometry1.appendCoordinate([102, 103]);
mixedBatch.changeFeature(feature1);
});
it('updates the modified properties and geometry in the linestring batch', () => {
const entry = mixedBatch.lineStringBatch.entries[getUid(feature1)];
expect(entry.feature.get('prop1')).to.eql('changed');
expect(entry.verticesCount).to.eql(6);
expect(entry.flatCoordss).to.eql([
[0, 1, 2, 3, 4, 5, 6, 7, 100, 101, 102, 103],
]);
});
it('updates the aggregated metrics on all geoms', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(9);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(2);
});
});
describe('changing the geometry', () => {
let newGeom;
beforeEach(() => {
newGeom = new LineString([
[40, 41],
[42, 43],
]);
feature1.setGeometry(newGeom);
mixedBatch.changeFeature(feature1);
});
it('updates the geometry in the linestring batch', () => {
const entry = mixedBatch.lineStringBatch.entries[getUid(feature1)];
expect(entry.flatCoordss).to.eql([[40, 41, 42, 43]]);
});
it('updates the aggregated metrics on all geoms', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(5);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(2);
});
});
});
describe('#removeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
mixedBatch.removeFeature(feature1);
});
it('clears the entry related to this feature', () => {
const keys = Object.keys(mixedBatch.lineStringBatch.entries);
expect(keys).to.not.contain(getUid(feature1));
});
it('updates the aggregated metrics on all geoms', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(3);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(1);
});
});
});
describe('features with Polygon geometries', () => {
let geometry1, feature1, geometry2, feature2;
beforeEach(() => {
geometry1 = new Polygon([
[
[0, 1],
[2, 3],
[4, 5],
[6, 7],
],
[
[20, 21],
[22, 23],
[24, 25],
],
]);
feature1 = new Feature({
geometry: geometry1,
prop1: 'abcd',
prop2: 'efgh',
});
geometry2 = new Polygon([
[
[8, 9],
[10, 11],
[12, 13],
],
[
[30, 31],
[32, 33],
[34, 35],
],
[
[40, 41],
[42, 43],
[44, 45],
[46, 47],
],
]);
feature2 = new Feature({
geometry: geometry2,
prop3: '1234',
prop4: '5678',
});
});
describe('#addFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
});
it('puts the polygons in the polygon batch', () => {
const keys = Object.keys(mixedBatch.polygonBatch.entries);
const uid1 = getUid(feature1);
const uid2 = getUid(feature2);
expect(keys).to.eql([uid1, uid2]);
expect(mixedBatch.polygonBatch.entries[uid1]).to.eql({
feature: feature1,
flatCoordss: [[0, 1, 2, 3, 4, 5, 6, 7, 20, 21, 22, 23, 24, 25]],
verticesCount: 7,
ringsCount: 2,
ringsVerticesCounts: [[4, 3]],
});
expect(mixedBatch.polygonBatch.entries[uid2]).to.eql({
feature: feature2,
flatCoordss: [
[
8, 9, 10, 11, 12, 13, 30, 31, 32, 33, 34, 35, 40, 41, 42, 43, 44,
45, 46, 47,
],
],
verticesCount: 10,
ringsCount: 3,
ringsVerticesCounts: [[3, 3, 4]],
});
});
it('computes the aggregated metrics on all polygons', () => {
expect(mixedBatch.polygonBatch.verticesCount).to.be(17);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(2);
expect(mixedBatch.polygonBatch.ringsCount).to.be(5);
});
it('puts the linear rings in the linestring batch', () => {
const keys = Object.keys(mixedBatch.lineStringBatch.entries);
expect(keys).to.eql([getUid(feature1), getUid(feature2)]);
expect(mixedBatch.lineStringBatch.entries[getUid(feature1)]).to.eql({
feature: feature1,
flatCoordss: [
[0, 1, 2, 3, 4, 5, 6, 7],
[20, 21, 22, 23, 24, 25],
],
verticesCount: 7,
});
expect(mixedBatch.lineStringBatch.entries[getUid(feature2)]).to.eql({
feature: feature2,
flatCoordss: [
[8, 9, 10, 11, 12, 13],
[30, 31, 32, 33, 34, 35],
[40, 41, 42, 43, 44, 45, 46, 47],
],
verticesCount: 10,
});
});
it('computes the aggregated metrics on all linestrings', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(17);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(5);
});
it('leaves point batch untouched', () => {
expect(Object.keys(mixedBatch.pointBatch.entries)).to.have.length(0);
});
});
describe('#changeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
});
describe('modifying geometry and props', () => {
beforeEach(() => {
feature1.set('prop1', 'changed');
geometry1.appendLinearRing(
new LinearRing([
[201, 202],
[203, 204],
[205, 206],
[207, 208],
])
);
mixedBatch.changeFeature(feature1);
});
it('updates the modified properties and geometry in the polygon batch', () => {
const entry = mixedBatch.polygonBatch.entries[getUid(feature1)];
expect(entry.feature.get('prop1')).to.eql('changed');
expect(entry.verticesCount).to.eql(11);
expect(entry.ringsCount).to.eql(3);
expect(entry.ringsVerticesCounts).to.eql([[4, 3, 4]]);
});
it('updates the aggregated metrics on all geoms', () => {
expect(mixedBatch.polygonBatch.verticesCount).to.be(21);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(2);
expect(mixedBatch.polygonBatch.ringsCount).to.be(6);
});
});
describe('changing the geometry', () => {
let newGeom;
beforeEach(() => {
newGeom = new Polygon([
[
[201, 202],
[203, 204],
[205, 206],
[207, 208],
],
]);
feature1.setGeometry(newGeom);
mixedBatch.changeFeature(feature1);
});
it('updates the geometry in the polygon batch', () => {
const entry = mixedBatch.polygonBatch.entries[getUid(feature1)];
expect(entry.feature).to.be(feature1);
expect(entry.verticesCount).to.eql(4);
expect(entry.ringsCount).to.eql(1);
expect(entry.ringsVerticesCounts).to.eql([[4]]);
expect(entry.flatCoordss).to.eql([
[201, 202, 203, 204, 205, 206, 207, 208],
]);
});
it('updates the aggregated metrics on all geoms', () => {
expect(mixedBatch.polygonBatch.verticesCount).to.be(14);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(2);
expect(mixedBatch.polygonBatch.ringsCount).to.be(4);
});
});
});
describe('#removeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
mixedBatch.removeFeature(feature1);
});
it('clears the entry related to this feature', () => {
const keys = Object.keys(mixedBatch.polygonBatch.entries);
expect(keys).to.not.contain(getUid(feature1));
});
it('updates the aggregated metrics on all geoms', () => {
expect(mixedBatch.polygonBatch.verticesCount).to.be(10);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(1);
expect(mixedBatch.polygonBatch.ringsCount).to.be(3);
});
});
});
describe('feature with nested geometries (collection, multi)', () => {
let feature, geomCollection, multiPolygon, multiPoint, multiLine;
beforeEach(() => {
multiPoint = new MultiPoint([
[101, 102],
[201, 202],
[301, 302],
]);
multiLine = new MultiLineString([
[
[0, 1],
[2, 3],
[4, 5],
[6, 7],
],
[
[8, 9],
[10, 11],
[12, 13],
],
]);
multiPolygon = new MultiPolygon([
[
[
[0, 1],
[2, 3],
[4, 5],
[6, 7],
],
[
[20, 21],
[22, 23],
[24, 25],
],
],
[
[
[8, 9],
[10, 11],
[12, 13],
],
[
[30, 31],
[32, 33],
[34, 35],
],
[
[40, 41],
[42, 43],
[44, 45],
[46, 47],
],
],
]);
geomCollection = new GeometryCollection([
multiPolygon,
multiLine,
multiPoint,
]);
feature = new Feature({
geometry: geomCollection,
prop3: '1234',
prop4: '5678',
});
});
describe('#addFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature);
});
it('puts the polygons in the polygon batch', () => {
const uid = getUid(feature);
expect(mixedBatch.polygonBatch.entries[uid]).to.eql({
feature: feature,
flatCoordss: [
[0, 1, 2, 3, 4, 5, 6, 7, 20, 21, 22, 23, 24, 25],
[
8, 9, 10, 11, 12, 13, 30, 31, 32, 33, 34, 35, 40, 41, 42, 43, 44,
45, 46, 47,
],
],
verticesCount: 17,
ringsCount: 5,
ringsVerticesCounts: [
[4, 3],
[3, 3, 4],
],
});
});
it('puts the polygon rings and linestrings in the linestring batch', () => {
const uid = getUid(feature);
expect(mixedBatch.lineStringBatch.entries[uid]).to.eql({
feature: feature,
flatCoordss: [
[0, 1, 2, 3, 4, 5, 6, 7],
[20, 21, 22, 23, 24, 25],
[8, 9, 10, 11, 12, 13],
[30, 31, 32, 33, 34, 35],
[40, 41, 42, 43, 44, 45, 46, 47],
[0, 1, 2, 3, 4, 5, 6, 7],
[8, 9, 10, 11, 12, 13],
],
verticesCount: 24,
});
});
it('puts the points in the linestring batch', () => {
const uid = getUid(feature);
expect(mixedBatch.pointBatch.entries[uid]).to.eql({
feature: feature,
flatCoordss: [
[101, 102],
[201, 202],
[301, 302],
],
});
});
it('computes the aggregated metrics on all polygons', () => {
expect(mixedBatch.polygonBatch.verticesCount).to.be(17);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(2);
expect(mixedBatch.polygonBatch.ringsCount).to.be(5);
});
it('computes the aggregated metrics on all linestring', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(24);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(7);
});
it('computes the aggregated metrics on all points', () => {
expect(mixedBatch.pointBatch.geometriesCount).to.be(3);
});
});
describe('#changeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature);
});
describe('modifying geometry', () => {
beforeEach(() => {
multiLine.appendLineString(
new LineString([
[500, 501],
[502, 503],
[504, 505],
[506, 507],
])
);
multiPolygon.appendPolygon(
new Polygon([
[
[201, 202],
[203, 204],
[205, 206],
[207, 208],
[209, 210],
],
])
);
mixedBatch.changeFeature(feature);
});
it('updates the geometries in the polygon batch', () => {
const entry = mixedBatch.polygonBatch.entries[getUid(feature)];
expect(entry).to.eql({
feature: feature,
flatCoordss: [
[0, 1, 2, 3, 4, 5, 6, 7, 20, 21, 22, 23, 24, 25],
[
8, 9, 10, 11, 12, 13, 30, 31, 32, 33, 34, 35, 40, 41, 42, 43,
44, 45, 46, 47,
],
[201, 202, 203, 204, 205, 206, 207, 208, 209, 210],
],
verticesCount: 22,
ringsCount: 6,
ringsVerticesCounts: [[4, 3], [3, 3, 4], [5]],
});
});
it('updates the geometries in the linestring batch', () => {
const entry = mixedBatch.lineStringBatch.entries[getUid(feature)];
expect(entry).to.eql({
feature: feature,
flatCoordss: [
[0, 1, 2, 3, 4, 5, 6, 7],
[20, 21, 22, 23, 24, 25],
[8, 9, 10, 11, 12, 13],
[30, 31, 32, 33, 34, 35],
[40, 41, 42, 43, 44, 45, 46, 47],
[201, 202, 203, 204, 205, 206, 207, 208, 209, 210],
[0, 1, 2, 3, 4, 5, 6, 7],
[8, 9, 10, 11, 12, 13],
[500, 501, 502, 503, 504, 505, 506, 507],
],
verticesCount: 33,
});
});
it('updates the aggregated metrics on the polygon batch', () => {
expect(mixedBatch.polygonBatch.verticesCount).to.be(22);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(3);
expect(mixedBatch.polygonBatch.ringsCount).to.be(6);
});
it('updates the aggregated metrics on the linestring batch', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(33);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(9);
});
});
describe('changing the geometry', () => {
beforeEach(() => {
feature.setGeometry(
new Polygon([
[
[201, 202],
[203, 204],
[205, 206],
[207, 208],
],
])
);
mixedBatch.changeFeature(feature);
});
it('updates the geometries in the polygon batch', () => {
const entry = mixedBatch.polygonBatch.entries[getUid(feature)];
expect(entry).to.eql({
feature: feature,
flatCoordss: [[201, 202, 203, 204, 205, 206, 207, 208]],
verticesCount: 4,
ringsCount: 1,
ringsVerticesCounts: [[4]],
});
});
it('updates the geometries in the linestring batch', () => {
const entry = mixedBatch.lineStringBatch.entries[getUid(feature)];
expect(entry).to.eql({
feature: feature,
flatCoordss: [[201, 202, 203, 204, 205, 206, 207, 208]],
verticesCount: 4,
});
});
it('updates the aggregated metrics on the polygon batch', () => {
expect(mixedBatch.polygonBatch.verticesCount).to.be(4);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(1);
expect(mixedBatch.polygonBatch.ringsCount).to.be(1);
});
it('updates the aggregated metrics on the linestring batch', () => {
expect(mixedBatch.lineStringBatch.verticesCount).to.be(4);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(1);
});
it('updates the aggregated metrics on the point batch', () => {
const keys = Object.keys(mixedBatch.pointBatch.entries);
expect(keys).to.not.contain(getUid(feature));
expect(mixedBatch.pointBatch.geometriesCount).to.be(0);
});
});
});
describe('#removeFeature', () => {
beforeEach(() => {
mixedBatch.addFeature(feature);
mixedBatch.removeFeature(feature);
});
it('clears all entries in the polygon batch', () => {
const keys = Object.keys(mixedBatch.polygonBatch.entries);
expect(keys).to.have.length(0);
expect(mixedBatch.polygonBatch.verticesCount).to.be(0);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(0);
expect(mixedBatch.polygonBatch.ringsCount).to.be(0);
});
it('clears all entries in the linestring batch', () => {
const keys = Object.keys(mixedBatch.lineStringBatch.entries);
expect(keys).to.have.length(0);
expect(mixedBatch.lineStringBatch.verticesCount).to.be(0);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(0);
});
it('clears all entries in the point batch', () => {
const keys = Object.keys(mixedBatch.pointBatch.entries);
expect(keys).to.have.length(0);
expect(mixedBatch.pointBatch.geometriesCount).to.be(0);
});
});
});
describe('#clear', () => {
beforeEach(() => {
const feature1 = new Feature(
new Polygon([
[
[201, 202],
[203, 204],
[205, 206],
[207, 208],
],
])
);
const feature2 = new Feature(new Point([201, 202]));
mixedBatch.addFeature(feature1);
mixedBatch.addFeature(feature2);
mixedBatch.clear();
});
it('clears polygon batch', () => {
expect(Object.keys(mixedBatch.polygonBatch.entries)).to.have.length(0);
expect(mixedBatch.polygonBatch.geometriesCount).to.be(0);
expect(mixedBatch.polygonBatch.verticesCount).to.be(0);
expect(mixedBatch.polygonBatch.ringsCount).to.be(0);
});
it('clears linestring batch', () => {
expect(Object.keys(mixedBatch.lineStringBatch.entries)).to.have.length(0);
expect(mixedBatch.lineStringBatch.geometriesCount).to.be(0);
expect(mixedBatch.lineStringBatch.verticesCount).to.be(0);
});
it('clears point batch', () => {
expect(Object.keys(mixedBatch.pointBatch.entries)).to.have.length(0);
expect(mixedBatch.pointBatch.geometriesCount).to.be(0);
});
});
});

477
test/browser/spec/ol/render/webgl/utils.test.js Normal file
View File

@@ -0,0 +1,477 @@
import {
colorDecodeId,
colorEncodeId,
getBlankImageData,
writeLineSegmentToBuffers,
writePointFeatureToBuffers,
writePolygonTrianglesToBuffers,
} from '../../../../../../src/ol/render/webgl/utils.js';
import {
compose as composeTransform,
create as createTransform,
makeInverse as makeInverseTransform,
} from '../../../../../../src/ol/transform.js';
describe('webgl render utils', function () {
describe('writePointFeatureToBuffers', function () {
let vertexBuffer, indexBuffer, instructions;
beforeEach(function () {
vertexBuffer = new Float32Array(100);
indexBuffer = new Uint32Array(100);
instructions = new Float32Array(100);
instructions.set([0, 0, 0, 0, 10, 11]);
});
it('writes correctly to the buffers (without custom attributes)', function () {
const stride = 3;
const positions = writePointFeatureToBuffers(
instructions,
4,
vertexBuffer,
indexBuffer,
0
);
expect(vertexBuffer[0]).to.eql(10);
expect(vertexBuffer[1]).to.eql(11);
expect(vertexBuffer[2]).to.eql(0);
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(10);
expect(vertexBuffer[stride * 2 + 1]).to.eql(11);
expect(vertexBuffer[stride * 2 + 2]).to.eql(2);
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);
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('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
);
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[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[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 * 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);
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 () {
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(10);
expect(vertexBuffer[1]).to.eql(11);
expect(vertexBuffer[2]).to.eql(0);
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(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);
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('writeLineSegmentToBuffers', function () {
let vertexArray, indexArray, instructions;
let instructionsTransform, invertInstructionsTransform;
beforeEach(function () {
vertexArray = [];
indexArray = [];
instructions = new Float32Array(100);
instructionsTransform = createTransform();
invertInstructionsTransform = createTransform();
composeTransform(instructionsTransform, 0, 0, 10, 20, 0, -50, 200);
makeInverseTransform(invertInstructionsTransform, instructionsTransform);
});
describe('isolated segment', function () {
beforeEach(function () {
instructions.set([0, 0, 0, 2, 5, 5, 25, 5]);
writeLineSegmentToBuffers(
instructions,
4,
6,
null,
null,
vertexArray,
indexArray,
[],
instructionsTransform,
invertInstructionsTransform
);
});
it('generates a quad for the segment', function () {
expect(vertexArray).to.have.length(20);
expect(vertexArray).to.eql([
5, 5, 25, 5, 0, 5, 5, 25, 5, 100000000, 5, 5, 25, 5, 200000000, 5, 5,
25, 5, 300000000,
]);
expect(indexArray).to.have.length(6);
expect(indexArray).to.eql([0, 1, 2, 1, 3, 2]);
});
});
describe('isolated segment with custom attributes', function () {
beforeEach(function () {
instructions.set([888, 999, 2, 5, 5, 25, 5]);
writeLineSegmentToBuffers(
instructions,
3,
5,
null,
null,
vertexArray,
indexArray,
[888, 999],
instructionsTransform,
invertInstructionsTransform
);
});
it('adds custom attributes in the vertices buffer', function () {
expect(vertexArray).to.have.length(28);
expect(vertexArray).to.eql([
5, 5, 25, 5, 0, 888, 999, 5, 5, 25, 5, 100000000, 888, 999, 5, 5, 25,
5, 200000000, 888, 999, 5, 5, 25, 5, 300000000, 888, 999,
]);
});
it('does not impact indices array', function () {
expect(indexArray).to.have.length(6);
});
});
describe('segment with a point coming before it, join angle < PI', function () {
beforeEach(function () {
instructions.set([2, 5, 5, 25, 5, 5, 20]);
writeLineSegmentToBuffers(
instructions,
1,
3,
5,
null,
vertexArray,
indexArray,
[],
instructionsTransform,
invertInstructionsTransform
);
});
it('generate the correct amount of vertices', () => {
expect(vertexArray).to.have.length(20);
});
it('correctly encodes the join angle', () => {
expect(vertexArray[4]).to.eql(2356);
expect(vertexArray[9]).to.eql(100002356);
expect(vertexArray[14]).to.eql(200002356);
expect(vertexArray[19]).to.eql(300002356);
});
it('does not impact indices array', function () {
expect(indexArray).to.have.length(6);
});
});
describe('segment with a point coming before it, join angle > PI', function () {
beforeEach(function () {
instructions.set([2, 5, 5, 25, 5, 5, -10]);
writeLineSegmentToBuffers(
instructions,
1,
3,
5,
null,
vertexArray,
indexArray,
[],
instructionsTransform,
invertInstructionsTransform
);
});
it('generate the correct amount of vertices', () => {
expect(vertexArray).to.have.length(20);
});
it('correctly encodes the join angle', () => {
expect(vertexArray[4]).to.eql(7069);
expect(vertexArray[9]).to.eql(100007069);
expect(vertexArray[14]).to.eql(200007069);
expect(vertexArray[19]).to.eql(300007069);
});
it('does not impact indices array', function () {
expect(indexArray).to.have.length(6);
});
});
describe('segment with a point coming after it, join angle < PI', function () {
beforeEach(function () {
instructions.set([2, 5, 5, 25, 5, 5, 20]);
writeLineSegmentToBuffers(
instructions,
1,
3,
null,
5,
vertexArray,
indexArray,
[],
instructionsTransform,
invertInstructionsTransform
);
});
it('generate the correct amount of vertices', () => {
expect(vertexArray).to.have.length(20);
});
it('correctly encodes the join angle', () => {
expect(vertexArray[4]).to.eql(88870000);
expect(vertexArray[9]).to.eql(188870000);
expect(vertexArray[14]).to.eql(288870000);
expect(vertexArray[19]).to.eql(388870000);
});
it('does not impact indices array', function () {
expect(indexArray).to.have.length(6);
});
});
describe('segment with a point coming after it, join angle > PI', function () {
beforeEach(function () {
instructions.set([2, 5, 5, 25, 5, 25, -10]);
writeLineSegmentToBuffers(
instructions,
1,
3,
null,
5,
vertexArray,
indexArray,
[],
instructionsTransform,
invertInstructionsTransform
);
});
it('generate the correct amount of vertices', () => {
expect(vertexArray).to.have.length(20);
});
it('correctly encodes join angles', () => {
expect(vertexArray[4]).to.eql(23560000);
expect(vertexArray[9]).to.eql(123560000);
expect(vertexArray[14]).to.eql(223560000);
expect(vertexArray[19]).to.eql(323560000);
});
it('does not impact indices array', function () {
expect(indexArray).to.have.length(6);
});
});
});
describe('writePolygonTrianglesToBuffers', function () {
let vertexArray, indexArray, instructions, newIndex;
beforeEach(function () {
vertexArray = [];
indexArray = [];
instructions = new Float32Array(100);
});
describe('polygon with a hole', function () {
beforeEach(function () {
instructions.set([
0, 0, 0, 2, 6, 5, 0, 0, 10, 0, 15, 6, 10, 12, 0, 12, 0, 0, 3, 3, 5, 1,
7, 3, 5, 5, 3, 3,
]);
newIndex = writePolygonTrianglesToBuffers(
instructions,
3,
vertexArray,
indexArray,
0
);
});
it('generates triangles correctly', function () {
expect(vertexArray).to.have.length(22);
expect(vertexArray).to.eql([
0, 0, 10, 0, 15, 6, 10, 12, 0, 12, 0, 0, 3, 3, 5, 1, 7, 3, 5, 5, 3, 3,
]);
expect(indexArray).to.have.length(24);
expect(indexArray).to.eql([
4, 0, 9, 7, 10, 0, 1, 2, 3, 3, 4, 9, 7, 0, 1, 3, 9, 8, 8, 7, 1, 1, 3,
8,
]);
});
it('correctly returns the new index', function () {
expect(newIndex).to.eql(28);
});
});
describe('polygon with a hole and custom attributes', function () {
beforeEach(function () {
instructions.set([
0, 0, 0, 1234, 2, 6, 5, 0, 0, 10, 0, 15, 6, 10, 12, 0, 12, 0, 0, 3, 3,
5, 1, 7, 3, 5, 5, 3, 3,
]);
newIndex = writePolygonTrianglesToBuffers(
instructions,
3,
vertexArray,
indexArray,
1
);
});
it('generates triangles correctly', function () {
expect(vertexArray).to.have.length(33);
expect(vertexArray).to.eql([
0, 0, 1234, 10, 0, 1234, 15, 6, 1234, 10, 12, 1234, 0, 12, 1234, 0, 0,
1234, 3, 3, 1234, 5, 1, 1234, 7, 3, 1234, 5, 5, 1234, 3, 3, 1234,
]);
expect(indexArray).to.have.length(24);
expect(indexArray).to.eql([
4, 0, 9, 7, 10, 0, 1, 2, 3, 3, 4, 9, 7, 0, 1, 3, 9, 8, 8, 7, 1, 1, 3,
8,
]);
});
it('correctly returns the new index', function () {
expect(newIndex).to.eql(29);
});
});
});
describe('getBlankImageData', function () {
it('creates a 1x1 white texture', function () {
const texture = getBlankImageData();
expect(texture.height).to.eql(1);
expect(texture.width).to.eql(1);
expect(texture.data[0]).to.eql(255);
expect(texture.data[1]).to.eql(255);
expect(texture.data[2]).to.eql(255);
expect(texture.data[3]).to.eql(255);
});
});
describe('colorEncodeId and colorDecodeId', function () {
it('correctly encodes and decodes ids', function () {
expect(colorDecodeId(colorEncodeId(0))).to.eql(0);
expect(colorDecodeId(colorEncodeId(1))).to.eql(1);
expect(colorDecodeId(colorEncodeId(123))).to.eql(123);
expect(colorDecodeId(colorEncodeId(12345))).to.eql(12345);
expect(colorDecodeId(colorEncodeId(123456))).to.eql(123456);
expect(colorDecodeId(colorEncodeId(91612))).to.eql(91612);
expect(colorDecodeId(colorEncodeId(1234567890))).to.eql(1234567890);
});
it('correctly reuses array', function () {
const arr = [];
expect(colorEncodeId(123, arr)).to.be(arr);
});
it('is compatible with Uint8Array storage', function () {
const encoded = colorEncodeId(91612);
const typed = Uint8Array.of(
encoded[0] * 255,
encoded[1] * 255,
encoded[2] * 255,
encoded[3] * 255
);
const arr = [
typed[0] / 255,
typed[1] / 255,
typed[2] / 255,
typed[3] / 255,
];
const decoded = colorDecodeId(arr);
expect(decoded).to.eql(91612);
});
});
});

206
test/browser/spec/ol/renderer/webgl/Layer.test.js
View File

@@ -6,12 +6,7 @@ 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 WebGLLayerRenderer from '../../../../../../src/ol/renderer/webgl/Layer.js';
import {getUid} from '../../../../../../src/ol/util.js';
describe('ol/renderer/webgl/Layer', function () {
@@ -36,205 +31,6 @@ describe('ol/renderer/webgl/Layer', function () {
});
});
describe('writePointFeatureToBuffers', function () {
let vertexBuffer, indexBuffer, instructions;
beforeEach(function () {
vertexBuffer = new Float32Array(100);
indexBuffer = new Uint32Array(100);
instructions = new Float32Array(100);
instructions.set([0, 0, 0, 0, 10, 11]);
});
it('writes correctly to the buffers (without custom attributes)', function () {
const stride = 3;
const positions = writePointFeatureToBuffers(
instructions,
4,
vertexBuffer,
indexBuffer,
0
);
expect(vertexBuffer[0]).to.eql(10);
expect(vertexBuffer[1]).to.eql(11);
expect(vertexBuffer[2]).to.eql(0);
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(10);
expect(vertexBuffer[stride * 2 + 1]).to.eql(11);
expect(vertexBuffer[stride * 2 + 2]).to.eql(2);
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);
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('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
);
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[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[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 * 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);
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 () {
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(10);
expect(vertexBuffer[1]).to.eql(11);
expect(vertexBuffer[2]).to.eql(0);
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(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);
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('getBlankImageData', function () {
it('creates a 1x1 white texture', function () {
const texture = getBlankImageData();
expect(texture.height).to.eql(1);
expect(texture.width).to.eql(1);
expect(texture.data[0]).to.eql(255);
expect(texture.data[1]).to.eql(255);
expect(texture.data[2]).to.eql(255);
expect(texture.data[3]).to.eql(255);
});
});
describe('colorEncodeId and colorDecodeId', function () {
it('correctly encodes and decodes ids', function () {
expect(colorDecodeId(colorEncodeId(0))).to.eql(0);
expect(colorDecodeId(colorEncodeId(1))).to.eql(1);
expect(colorDecodeId(colorEncodeId(123))).to.eql(123);
expect(colorDecodeId(colorEncodeId(12345))).to.eql(12345);
expect(colorDecodeId(colorEncodeId(123456))).to.eql(123456);
expect(colorDecodeId(colorEncodeId(91612))).to.eql(91612);
expect(colorDecodeId(colorEncodeId(1234567890))).to.eql(1234567890);
});
it('correctly reuses array', function () {
const arr = [];
expect(colorEncodeId(123, arr)).to.be(arr);
});
it('is compatible with Uint8Array storage', function () {
const encoded = colorEncodeId(91612);
const typed = Uint8Array.of(
encoded[0] * 255,
encoded[1] * 255,
encoded[2] * 255,
encoded[3] * 255
);
const arr = [
typed[0] / 255,
typed[1] / 255,
typed[2] / 255,
typed[3] / 255,
];
const decoded = colorDecodeId(arr);
expect(decoded).to.eql(91612);
});
});
describe('context sharing', () => {
let target;
beforeEach(() => {

22
test/browser/spec/ol/renderer/webgl/PointsLayer.test.js
View File

@@ -8,7 +8,7 @@ import View from '../../../../../../src/ol/View.js';
import ViewHint from '../../../../../../src/ol/ViewHint.js';
import WebGLPointsLayer from '../../../../../../src/ol/layer/WebGLPoints.js';
import WebGLPointsLayerRenderer from '../../../../../../src/ol/renderer/webgl/PointsLayer.js';
import {WebGLWorkerMessageType} from '../../../../../../src/ol/renderer/webgl/Layer.js';
import {WebGLWorkerMessageType} from '../../../../../../src/ol/render/webgl/constants.js';
import {
compose as composeTransform,
create as createTransform,
@@ -156,7 +156,7 @@ describe('ol/renderer/webgl/PointsLayer', function () {
const attributePerVertex = 3;
renderer.worker_.addEventListener('message', function (event) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_POINT_BUFFERS) {
return;
}
expect(renderer.verticesBuffer_.getArray().length).to.eql(
@@ -192,7 +192,7 @@ describe('ol/renderer/webgl/PointsLayer', function () {
const attributePerVertex = 8;
renderer.worker_.addEventListener('message', function (event) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_POINT_BUFFERS) {
return;
}
if (!renderer.hitVerticesBuffer_.getArray()) {
@@ -231,7 +231,7 @@ describe('ol/renderer/webgl/PointsLayer', function () {
renderer.prepareFrame(frameState);
renderer.worker_.addEventListener('message', function (event) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_BUFFERS) {
if (event.data.type !== WebGLWorkerMessageType.GENERATE_POINT_BUFFERS) {
return;
}
const attributePerVertex = 3;
@@ -627,14 +627,14 @@ describe('ol/renderer/webgl/PointsLayer', function () {
beforeEach(function () {
source = new VectorSource({
features: new GeoJSON().readFeatures({
'type': 'FeatureCollection',
'features': [
type: 'FeatureCollection',
features: [
{
'type': 'Feature',
'properties': {},
'geometry': {
'type': 'Point',
'coordinates': [13, 52],
type: 'Feature',
properties: {},
geometry: {
type: 'Point',
coordinates: [13, 52],
},
},
],

104
test/browser/spec/ol/webgl/helper.test.js
View File

@@ -57,6 +57,16 @@ const INVALID_FRAGMENT_SHADER = `
gl_FragColor = vec4(oops, 1.0, 1.0, 1.0);
}`;
const SAMPLE_FRAMESTATE = {
size: [100, 150],
viewState: {
rotation: 0.4,
resolution: 2,
center: [10, 20],
zoom: 3,
},
};
describe('ol/webgl/WebGLHelper', function () {
let h;
afterEach(function () {
@@ -117,7 +127,10 @@ describe('ol/webgl/WebGLHelper', function () {
u_test4: createTransform(),
},
});
h.useProgram(h.getProgram(FRAGMENT_SHADER, VERTEX_SHADER));
h.useProgram(
h.getProgram(FRAGMENT_SHADER, VERTEX_SHADER),
SAMPLE_FRAMESTATE
);
h.prepareDraw({
pixelRatio: 2,
size: [50, 80],
@@ -142,6 +155,16 @@ describe('ol/webgl/WebGLHelper', function () {
h.uniformLocations_[DefaultUniform.OFFSET_SCALE_MATRIX]
).not.to.eql(undefined);
expect(h.uniformLocations_[DefaultUniform.TIME]).not.to.eql(undefined);
expect(h.uniformLocations_[DefaultUniform.ZOOM]).not.to.eql(undefined);
expect(h.uniformLocations_[DefaultUniform.RESOLUTION]).not.to.eql(
undefined
);
expect(h.uniformLocations_[DefaultUniform.SIZE_PX]).not.to.eql(
undefined
);
expect(h.uniformLocations_[DefaultUniform.PIXEL_RATIO]).not.to.eql(
undefined
);
});
it('has processed uniforms', function () {
@@ -164,7 +187,7 @@ describe('ol/webgl/WebGLHelper', function () {
h = new WebGLHelper();
p = h.getProgram(FRAGMENT_SHADER, VERTEX_SHADER);
h.useProgram(p);
h.useProgram(p, SAMPLE_FRAMESTATE);
});
it('has saved the program', function () {
@@ -209,34 +232,30 @@ describe('ol/webgl/WebGLHelper', function () {
});
describe('#makeProjectionTransform', function () {
let frameState;
beforeEach(function () {
h = new WebGLHelper();
frameState = {
size: [100, 150],
viewState: {
rotation: 0.4,
resolution: 2,
center: [10, 20],
},
};
});
it('gives out the correct transform', function () {
const scaleX = 2 / frameState.size[0] / frameState.viewState.resolution;
const scaleY = 2 / frameState.size[1] / frameState.viewState.resolution;
const scaleX =
2 /
SAMPLE_FRAMESTATE.size[0] /
SAMPLE_FRAMESTATE.viewState.resolution;
const scaleY =
2 /
SAMPLE_FRAMESTATE.size[1] /
SAMPLE_FRAMESTATE.viewState.resolution;
const given = createTransform();
const expected = createTransform();
scaleTransform(expected, scaleX, scaleY);
rotateTransform(expected, -frameState.viewState.rotation);
rotateTransform(expected, -SAMPLE_FRAMESTATE.viewState.rotation);
translateTransform(
expected,
-frameState.viewState.center[0],
-frameState.viewState.center[1]
-SAMPLE_FRAMESTATE.viewState.center[0],
-SAMPLE_FRAMESTATE.viewState.center[1]
);
h.makeProjectionTransform(frameState, given);
h.makeProjectionTransform(SAMPLE_FRAMESTATE, given);
expect(given.map((val) => val.toFixed(15))).to.eql(
expected.map((val) => val.toFixed(15))
@@ -377,7 +396,8 @@ describe('ol/webgl/WebGLHelper', function () {
void main(void) {
gl_Position = vec4(u_test, attr3, 0.0, 1.0);
}`
)
),
SAMPLE_FRAMESTATE
);
});
@@ -404,4 +424,50 @@ describe('ol/webgl/WebGLHelper', function () {
expect(spy.getCall(2).args[4]).to.eql(5 * bytesPerFloat);
});
});
describe('#applyFrameState', function () {
let stubMatrix, stubFloat, stubVec2, stubTime;
beforeEach(function () {
stubTime = sinon.stub(Date, 'now');
stubTime.returns(1000);
h = new WebGLHelper();
stubMatrix = sinon.stub(h, 'setUniformMatrixValue');
stubFloat = sinon.stub(h, 'setUniformFloatValue');
stubVec2 = sinon.stub(h, 'setUniformFloatVec2');
stubTime.returns(2000);
h.applyFrameState({...SAMPLE_FRAMESTATE, pixelRatio: 2});
});
afterEach(function () {
stubTime.restore();
});
it('sets the default uniforms according the frame state', function () {
expect(stubMatrix.getCall(0).args).to.eql([
DefaultUniform.OFFSET_SCALE_MATRIX,
[
0.9210609940028851, -0.3894183423086505, 0, 0, 0.3894183423086505,
0.9210609940028851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
],
]);
expect(stubMatrix.getCall(1).args).to.eql([
DefaultUniform.OFFSET_ROTATION_MATRIX,
[
0.9210609940028851, -0.3894183423086505, 0, 0, 0.3894183423086505,
0.9210609940028851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1,
],
]);
expect(stubFloat.getCall(0).args).to.eql([DefaultUniform.TIME, 1]);
expect(stubFloat.getCall(1).args).to.eql([DefaultUniform.ZOOM, 3]);
expect(stubFloat.getCall(2).args).to.eql([DefaultUniform.RESOLUTION, 2]);
expect(stubFloat.getCall(3).args).to.eql([DefaultUniform.PIXEL_RATIO, 2]);
expect(stubVec2.getCall(0).args).to.eql([
DefaultUniform.SIZE_PX,
[100, 150],
]);
});
});
});

164
test/browser/spec/ol/worker/webgl.test.js
View File

@@ -1,10 +1,14 @@
import {WebGLWorkerMessageType} from '../../../../../src/ol/renderer/webgl/Layer.js';
import {WebGLWorkerMessageType} from '../../../../../src/ol/render/webgl/constants.js';
import {create} from '../../../../../src/ol/worker/webgl.js';
import {create as createTransform} from '../../../../../src/ol/transform.js';
describe('ol/worker/webgl', function () {
let worker;
beforeEach(function () {
worker = create();
worker.addEventListener('error', function (error) {
expect().fail(error.message);
});
});
afterEach(function () {
@@ -15,35 +19,145 @@ describe('ol/worker/webgl', function () {
});
describe('messaging', function () {
describe('GENERATE_BUFFERS', function () {
it('responds with buffer data', function (done) {
worker.addEventListener('error', function (error) {
expect().fail(error.message);
});
worker.addEventListener('message', function (event) {
expect(event.data.type).to.eql(
WebGLWorkerMessageType.GENERATE_BUFFERS
);
expect(event.data.renderInstructions.byteLength).to.greaterThan(0);
expect(event.data.indexBuffer.byteLength).to.greaterThan(0);
expect(event.data.vertexBuffer.byteLength).to.greaterThan(0);
expect(event.data.testInt).to.be(101);
expect(event.data.testString).to.be('abcd');
done();
});
const instructions = new Float32Array(10);
describe('GENERATE_POINT_BUFFERS', function () {
let responseData;
beforeEach(function (done) {
const renderInstructions = Float32Array.from([0, 10, 111, 20, 30, 222]);
const id = Math.floor(Math.random() * 10000);
const message = {
type: WebGLWorkerMessageType.GENERATE_BUFFERS,
renderInstructions: instructions,
customAttributesCount: 0,
type: WebGLWorkerMessageType.GENERATE_POINT_BUFFERS,
renderInstructions,
customAttributesCount: 1,
testInt: 101,
testString: 'abcd',
id,
};
responseData = null;
worker.postMessage(message);
worker.addEventListener('message', function (event) {
if (event.data.id === id) {
responseData = event.data;
done();
}
});
});
it('responds with info passed in the message', function () {
expect(responseData.type).to.eql(
WebGLWorkerMessageType.GENERATE_POINT_BUFFERS
);
expect(responseData.renderInstructions.byteLength).to.greaterThan(0);
expect(responseData.testInt).to.be(101);
expect(responseData.testString).to.be('abcd');
});
it('responds with buffer data', function () {
const indices = Array.from(new Uint32Array(responseData.indexBuffer));
const vertices = Array.from(
new Float32Array(responseData.vertexBuffer)
);
expect(indices).to.eql([0, 1, 3, 1, 2, 3, 4, 5, 7, 5, 6, 7]);
expect(vertices).to.eql([
0, 10, 0, 111, 0, 10, 1, 111, 0, 10, 2, 111, 0, 10, 3, 111, 20, 30, 0,
222, 20, 30, 1, 222, 20, 30, 2, 222, 20, 30, 3, 222,
]);
});
});
describe('GENERATE_LINE_STRING_BUFFERS', function () {
let responseData;
beforeEach(function (done) {
const renderInstructions = Float32Array.from([
111, 4, 20, 30, 40, 50, 6, 7, 80, 90,
]);
const id = Math.floor(Math.random() * 10000);
const renderInstructionsTransform = createTransform();
const message = {
type: WebGLWorkerMessageType.GENERATE_LINE_STRING_BUFFERS,
renderInstructions,
customAttributesCount: 1,
testInt: 101,
testString: 'abcd',
id,
renderInstructionsTransform,
};
responseData = null;
worker.postMessage(message);
worker.addEventListener('message', function (event) {
if (event.data.id === id) {
responseData = event.data;
done();
}
});
});
it('responds with info passed in the message', function () {
expect(responseData.type).to.eql(
WebGLWorkerMessageType.GENERATE_LINE_STRING_BUFFERS
);
expect(responseData.renderInstructions.byteLength).to.greaterThan(0);
expect(responseData.testInt).to.be(101);
expect(responseData.testString).to.be('abcd');
});
it('responds with buffer data', function () {
const indices = Array.from(new Uint32Array(responseData.indexBuffer));
const vertices = Array.from(
new Float32Array(responseData.vertexBuffer)
);
expect(indices).to.eql([
0, 1, 2, 1, 3, 2, 4, 5, 6, 5, 7, 6, 8, 9, 10, 9, 11, 10,
]);
expect(vertices).to.eql([
20, 30, 40, 50, 1750000, 111, 20, 30, 40, 50, 101750000, 111, 20, 30,
40, 50, 201750000, 111, 20, 30, 40, 50, 301750016, 111, 40, 50, 6, 7,
93369248, 111, 40, 50, 6, 7, 193369248, 111, 40, 50, 6, 7, 293369248,
111, 40, 50, 6, 7, 393369248, 111, 6, 7, 80, 90, 89, 111, 6, 7, 80,
90, 100000088, 111, 6, 7, 80, 90, 200000096, 111, 6, 7, 80, 90,
300000096, 111,
]);
});
});
describe('GENERATE_POLYGON_BUFFERS', function () {
let responseData;
beforeEach(function (done) {
const renderInstructions = Float32Array.from([
1234, 2, 6, 5, 0, 0, 10, 0, 15, 6, 10, 12, 0, 12, 0, 0, 3, 3, 5, 1, 7,
3, 5, 5, 3, 3,
]);
const id = Math.floor(Math.random() * 10000);
const message = {
type: WebGLWorkerMessageType.GENERATE_POLYGON_BUFFERS,
renderInstructions,
customAttributesCount: 1,
testInt: 101,
testString: 'abcd',
id,
};
responseData = null;
worker.postMessage(message);
worker.addEventListener('message', function (event) {
if (event.data.id === id) {
responseData = event.data;
done();
}
});
});
it('responds with info passed in the message', function () {
expect(responseData.type).to.eql(
WebGLWorkerMessageType.GENERATE_POLYGON_BUFFERS
);
expect(responseData.renderInstructions.byteLength).to.greaterThan(0);
expect(responseData.testInt).to.be(101);
expect(responseData.testString).to.be('abcd');
});
it('responds with buffer data', function () {
const indices = Array.from(new Uint32Array(responseData.indexBuffer));
const vertices = Array.from(
new Float32Array(responseData.vertexBuffer)
);
expect(indices).to.have.length(24);
expect(vertices).to.have.length(33);
});
});
});