@scoova/mgl 1.0.0

package/src/data/bucket/circle_attributes.ts

@@ -0,0 +1,8 @@
+import {createLayout} from '../../util/struct_array';
+
+const layout = createLayout([
+    {name: 'a_pos', components: 2, type: 'Int16'}
+], 4);
+
+export default layout;
+export const {members, size, alignment} = layout;

package/src/data/bucket/circle_bucket.ts

@@ -0,0 +1,197 @@
+import {CircleLayoutArray} from '../array_types.g';
+
+import {members as layoutAttributes} from './circle_attributes';
+import {SegmentVector} from '../segment';
+import {ProgramConfigurationSet} from '../program_configuration';
+import {TriangleIndexArray} from '../index_array_type';
+import {loadGeometry} from '../load_geometry';
+import {toEvaluationFeature} from '../evaluation_feature';
+import {EXTENT} from '../extent';
+import {register} from '../../util/web_worker_transfer';
+import {EvaluationParameters} from '../../style/evaluation_parameters';
+
+import type {CanonicalTileID} from '../../source/tile_id';
+import type {
+    Bucket,
+    BucketParameters,
+    BucketFeature,
+    IndexedFeature,
+    PopulateParameters
+} from '../bucket';
+import type {CircleStyleLayer} from '../../style/style_layer/circle_style_layer';
+import type {HeatmapStyleLayer} from '../../style/style_layer/heatmap_style_layer';
+import type {Context} from '../../gl/context';
+import type {IndexBuffer} from '../../gl/index_buffer';
+import type {VertexBuffer} from '../../gl/vertex_buffer';
+import type Point from '@mapbox/point-geometry';
+import type {FeatureStates} from '../../source/source_state';
+import type {ImagePosition} from '../../render/image_atlas';
+import type {VectorTileLayer} from '@mapbox/vector-tile';
+
+function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
+    layoutVertexArray.emplaceBack(
+        (x * 2) + ((extrudeX + 1) / 2),
+        (y * 2) + ((extrudeY + 1) / 2));
+}
+
+/**
+ * @internal
+ * Circles are represented by two triangles.
+ *
+ * Each corner has a pos that is the center of the circle and an extrusion
+ * vector that is where it points.
+ */
+export class CircleBucket<Layer extends CircleStyleLayer | HeatmapStyleLayer> implements Bucket {
+    index: number;
+    zoom: number;
+    overscaling: number;
+    layerIds: Array<string>;
+    layers: Array<Layer>;
+    stateDependentLayers: Array<Layer>;
+    stateDependentLayerIds: Array<string>;
+
+    layoutVertexArray: CircleLayoutArray;
+    layoutVertexBuffer: VertexBuffer;
+
+    indexArray: TriangleIndexArray;
+    indexBuffer: IndexBuffer;
+
+    hasPattern: boolean;
+    programConfigurations: ProgramConfigurationSet<Layer>;
+    segments: SegmentVector;
+    uploaded: boolean;
+
+    constructor(options: BucketParameters<Layer>) {
+        this.zoom = options.zoom;
+        this.overscaling = options.overscaling;
+        this.layers = options.layers;
+        this.layerIds = this.layers.map(layer => layer.id);
+        this.index = options.index;
+        this.hasPattern = false;
+
+        this.layoutVertexArray = new CircleLayoutArray();
+        this.indexArray = new TriangleIndexArray();
+        this.segments = new SegmentVector();
+        this.programConfigurations = new ProgramConfigurationSet(options.layers, options.zoom);
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
+    }
+
+    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID) {
+        const styleLayer = this.layers[0];
+        const bucketFeatures: BucketFeature[] = [];
+        let circleSortKey = null;
+        let sortFeaturesByKey = false;
+
+        // Heatmap layers are handled in this bucket and have no evaluated properties, so we check our access
+        if (styleLayer.type === 'circle') {
+            circleSortKey = (styleLayer as CircleStyleLayer).layout.get('circle-sort-key');
+            sortFeaturesByKey = !circleSortKey.isConstant();
+        }
+
+        for (const {feature, id, index, sourceLayerIndex} of features) {
+            const needGeometry = this.layers[0]._featureFilter.needGeometry;
+            const evaluationFeature = toEvaluationFeature(feature, needGeometry);
+
+            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom), evaluationFeature, canonical)) continue;
+
+            const sortKey = sortFeaturesByKey ?
+                circleSortKey.evaluate(evaluationFeature, {}, canonical) :
+                undefined;
+
+            const bucketFeature: BucketFeature = {
+                id,
+                properties: feature.properties,
+                type: feature.type,
+                sourceLayerIndex,
+                index,
+                geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature),
+                patterns: {},
+                sortKey
+            };
+
+            bucketFeatures.push(bucketFeature);
+
+        }
+
+        if (sortFeaturesByKey) {
+            bucketFeatures.sort((a, b) => a.sortKey - b.sortKey);
+        }
+
+        for (const bucketFeature of bucketFeatures) {
+            const {geometry, index, sourceLayerIndex} = bucketFeature;
+            const feature = features[index].feature;
+
+            this.addFeature(bucketFeature, geometry, index, canonical);
+            options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);
+        }
+    }
+
+    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {[_: string]: ImagePosition}) {
+        if (!this.stateDependentLayers.length) return;
+        this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    }
+
+    isEmpty() {
+        return this.layoutVertexArray.length === 0;
+    }
+
+    uploadPending() {
+        return !this.uploaded || this.programConfigurations.needsUpload;
+    }
+
+    upload(context: Context) {
+        if (!this.uploaded) {
+            this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray, layoutAttributes);
+            this.indexBuffer = context.createIndexBuffer(this.indexArray);
+        }
+        this.programConfigurations.upload(context);
+        this.uploaded = true;
+    }
+
+    destroy() {
+        if (!this.layoutVertexBuffer) return;
+        this.layoutVertexBuffer.destroy();
+        this.indexBuffer.destroy();
+        this.programConfigurations.destroy();
+        this.segments.destroy();
+    }
+
+    addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID) {
+        for (const ring of geometry) {
+            for (const point of ring) {
+                const x = point.x;
+                const y = point.y;
+
+                // Do not include points that are outside the tile boundaries.
+                if (x < 0 || x >= EXTENT || y < 0 || y >= EXTENT) continue;
+
+                // this geometry will be of the Point type, and we'll derive
+                // two triangles from it.
+                //
+                // ┌─────────┐
+                // │ 3     2 │
+                // │         │
+                // │ 0     1 │
+                // └─────────┘
+
+                const segment = this.segments.prepareSegment(4, this.layoutVertexArray, this.indexArray, feature.sortKey);
+                const index = segment.vertexLength;
+
+                addCircleVertex(this.layoutVertexArray, x, y, -1, -1);
+                addCircleVertex(this.layoutVertexArray, x, y, 1, -1);
+                addCircleVertex(this.layoutVertexArray, x, y, 1, 1);
+                addCircleVertex(this.layoutVertexArray, x, y, -1, 1);
+
+                this.indexArray.emplaceBack(index, index + 1, index + 2);
+                this.indexArray.emplaceBack(index, index + 3, index + 2);
+
+                segment.vertexLength += 4;
+                segment.primitiveLength += 2;
+            }
+        }
+
+        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, {}, canonical);
+    }
+}
+
+register('CircleBucket', CircleBucket, {omit: ['layers']});

package/src/data/bucket/fill_attributes.ts

@@ -0,0 +1,8 @@
+import {createLayout} from '../../util/struct_array';
+
+const layout = createLayout([
+    {name: 'a_pos', components: 2, type: 'Int16'}
+], 4);
+
+export default layout;
+export const {members, size, alignment} = layout;

package/src/data/bucket/fill_bucket.test.ts

@@ -0,0 +1,95 @@
+
+import fs from 'fs';
+import path from 'path';
+import Protobuf from 'pbf';
+import {VectorTile} from '@mapbox/vector-tile';
+import Point from '@mapbox/point-geometry';
+import {SegmentVector} from '../segment';
+import {FillBucket} from './fill_bucket';
+import {FillStyleLayer} from '../../style/style_layer/fill_style_layer';
+import {LayerSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {EvaluationParameters} from '../../style/evaluation_parameters';
+import {ZoomHistory} from '../../style/zoom_history';
+import {BucketFeature, BucketParameters} from '../bucket';
+
+// Load a fill feature from fixture tile.
+const vt = new VectorTile(new Protobuf(fs.readFileSync(path.resolve(__dirname, '../../../test/unit/assets/mbsv5-6-18-23.vector.pbf'))));
+const feature = vt.layers.water.feature(0);
+
+function createPolygon(numPoints) {
+    const points = [];
+    for (let i = 0; i < numPoints; i++) {
+        points.push(new Point(2048 + 256 * Math.cos(i / numPoints * 2 * Math.PI), 2048 + 256 * Math.sin(i / numPoints * 2 * Math.PI)));
+    }
+    return points;
+}
+
+test('FillBucket', () => {
+    expect(() => {
+        const layer = new FillStyleLayer({id: 'test', type: 'fill', layout: {}} as LayerSpecification);
+        layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, undefined);
+
+        const bucket = new FillBucket({layers: [layer]} as BucketParameters<FillStyleLayer>);
+
+        bucket.addFeature({} as BucketFeature, [[
+            new Point(0, 0),
+            new Point(10, 10)
+        ]], undefined, undefined, undefined);
+
+        bucket.addFeature({} as BucketFeature, [[
+            new Point(0, 0),
+            new Point(10, 10),
+            new Point(10, 20)
+        ]], undefined, undefined, undefined);
+
+        bucket.addFeature(feature as any, feature.loadGeometry(), undefined, undefined, undefined);
+    }).not.toThrow();
+});
+
+test('FillBucket segmentation', () => {
+    // Stub MAX_VERTEX_ARRAY_LENGTH so we can test features
+    // breaking across array groups without tests taking a _long_ time.
+    Object.defineProperty(SegmentVector, 'MAX_VERTEX_ARRAY_LENGTH', {value: 256});
+
+    const layer = new FillStyleLayer({
+        id: 'test',
+        type: 'fill',
+        layout: {},
+        source: 'source',
+        paint: {
+            'fill-color': ['to-color', ['get', 'foo'], '#000']
+        }
+    } as LayerSpecification);
+    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, undefined);
+
+    const bucket = new FillBucket({layers: [layer]} as BucketParameters<FillStyleLayer>);
+
+    // first add an initial, small feature to make sure the next one starts at
+    // a non-zero offset
+    bucket.addFeature({} as BucketFeature, [createPolygon(10)], undefined, undefined, undefined);
+
+    // add a feature that will break across the group boundary
+    bucket.addFeature({} as BucketFeature, [
+        createPolygon(128),
+        createPolygon(128)
+    ], undefined, undefined, undefined);
+
+    // Each polygon must fit entirely within a segment, so we expect the
+    // first segment to include the first feature and the first polygon
+    // of the second feature, and the second segment to include the
+    // second polygon of the second feature.
+    expect(bucket.layoutVertexArray).toHaveLength(266);
+    expect(bucket.segments.get()[0]).toEqual({
+        vertexOffset: 0,
+        vertexLength: 138,
+        primitiveOffset: 0,
+        primitiveLength: 134
+    });
+    expect(bucket.segments.get()[1]).toEqual({
+        vertexOffset: 138,
+        vertexLength: 128,
+        primitiveOffset: 134,
+        primitiveLength: 126
+    });
+
+});

package/src/data/bucket/fill_bucket.ts

@@ -0,0 +1,228 @@
+import {FillLayoutArray} from '../array_types.g';
+
+import {members as layoutAttributes} from './fill_attributes';
+import {SegmentVector} from '../segment';
+import {ProgramConfigurationSet} from '../program_configuration';
+import {LineIndexArray, TriangleIndexArray} from '../index_array_type';
+import earcut from 'earcut';
+import {classifyRings} from '@maplibre/maplibre-gl-style-spec';
+const EARCUT_MAX_RINGS = 500;
+import {register} from '../../util/web_worker_transfer';
+import {hasPattern, addPatternDependencies} from './pattern_bucket_features';
+import {loadGeometry} from '../load_geometry';
+import {toEvaluationFeature} from '../evaluation_feature';
+import {EvaluationParameters} from '../../style/evaluation_parameters';
+
+import type {CanonicalTileID} from '../../source/tile_id';
+import type {
+    Bucket,
+    BucketParameters,
+    BucketFeature,
+    IndexedFeature,
+    PopulateParameters
+} from '../bucket';
+import type {FillStyleLayer} from '../../style/style_layer/fill_style_layer';
+import type {Context} from '../../gl/context';
+import type {IndexBuffer} from '../../gl/index_buffer';
+import type {VertexBuffer} from '../../gl/vertex_buffer';
+import type Point from '@mapbox/point-geometry';
+import type {FeatureStates} from '../../source/source_state';
+import type {ImagePosition} from '../../render/image_atlas';
+import type {VectorTileLayer} from '@mapbox/vector-tile';
+
+export class FillBucket implements Bucket {
+    index: number;
+    zoom: number;
+    overscaling: number;
+    layers: Array<FillStyleLayer>;
+    layerIds: Array<string>;
+    stateDependentLayers: Array<FillStyleLayer>;
+    stateDependentLayerIds: Array<string>;
+    patternFeatures: Array<BucketFeature>;
+
+    layoutVertexArray: FillLayoutArray;
+    layoutVertexBuffer: VertexBuffer;
+
+    indexArray: TriangleIndexArray;
+    indexBuffer: IndexBuffer;
+
+    indexArray2: LineIndexArray;
+    indexBuffer2: IndexBuffer;
+
+    hasPattern: boolean;
+    programConfigurations: ProgramConfigurationSet<FillStyleLayer>;
+    segments: SegmentVector;
+    segments2: SegmentVector;
+    uploaded: boolean;
+
+    constructor(options: BucketParameters<FillStyleLayer>) {
+        this.zoom = options.zoom;
+        this.overscaling = options.overscaling;
+        this.layers = options.layers;
+        this.layerIds = this.layers.map(layer => layer.id);
+        this.index = options.index;
+        this.hasPattern = false;
+        this.patternFeatures = [];
+
+        this.layoutVertexArray = new FillLayoutArray();
+        this.indexArray = new TriangleIndexArray();
+        this.indexArray2 = new LineIndexArray();
+        this.programConfigurations = new ProgramConfigurationSet(options.layers, options.zoom);
+        this.segments = new SegmentVector();
+        this.segments2 = new SegmentVector();
+        this.stateDependentLayerIds = this.layers.filter((l) => l.isStateDependent()).map((l) => l.id);
+    }
+
+    populate(features: Array<IndexedFeature>, options: PopulateParameters, canonical: CanonicalTileID) {
+        this.hasPattern = hasPattern('fill', this.layers, options);
+        const fillSortKey = this.layers[0].layout.get('fill-sort-key');
+        const sortFeaturesByKey = !fillSortKey.isConstant();
+        const bucketFeatures: BucketFeature[] = [];
+
+        for (const {feature, id, index, sourceLayerIndex} of features) {
+            const needGeometry = this.layers[0]._featureFilter.needGeometry;
+            const evaluationFeature = toEvaluationFeature(feature, needGeometry);
+
+            if (!this.layers[0]._featureFilter.filter(new EvaluationParameters(this.zoom), evaluationFeature, canonical)) continue;
+
+            const sortKey = sortFeaturesByKey ?
+                fillSortKey.evaluate(evaluationFeature, {}, canonical, options.availableImages) :
+                undefined;
+
+            const bucketFeature: BucketFeature = {
+                id,
+                properties: feature.properties,
+                type: feature.type,
+                sourceLayerIndex,
+                index,
+                geometry: needGeometry ? evaluationFeature.geometry : loadGeometry(feature),
+                patterns: {},
+                sortKey
+            };
+
+            bucketFeatures.push(bucketFeature);
+        }
+
+        if (sortFeaturesByKey) {
+            bucketFeatures.sort((a, b) => a.sortKey - b.sortKey);
+        }
+
+        for (const bucketFeature of bucketFeatures) {
+            const {geometry, index, sourceLayerIndex} = bucketFeature;
+
+            if (this.hasPattern) {
+                const patternFeature = addPatternDependencies('fill', this.layers, bucketFeature, this.zoom, options);
+                // pattern features are added only once the pattern is loaded into the image atlas
+                // so are stored during populate until later updated with positions by tile worker in addFeatures
+                this.patternFeatures.push(patternFeature);
+            } else {
+                this.addFeature(bucketFeature, geometry, index, canonical, {});
+            }
+
+            const feature = features[index].feature;
+            options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);
+        }
+    }
+
+    update(states: FeatureStates, vtLayer: VectorTileLayer, imagePositions: {
+        [_: string]: ImagePosition;
+    }) {
+        if (!this.stateDependentLayers.length) return;
+        this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+    }
+
+    addFeatures(options: PopulateParameters, canonical: CanonicalTileID, imagePositions: {
+        [_: string]: ImagePosition;
+    }) {
+        for (const feature of this.patternFeatures) {
+            this.addFeature(feature, feature.geometry, feature.index, canonical, imagePositions);
+        }
+    }
+
+    isEmpty() {
+        return this.layoutVertexArray.length === 0;
+    }
+
+    uploadPending(): boolean {
+        return !this.uploaded || this.programConfigurations.needsUpload;
+    }
+    upload(context: Context) {
+        if (!this.uploaded) {
+            this.layoutVertexBuffer = context.createVertexBuffer(this.layoutVertexArray, layoutAttributes);
+            this.indexBuffer = context.createIndexBuffer(this.indexArray);
+            this.indexBuffer2 = context.createIndexBuffer(this.indexArray2);
+        }
+        this.programConfigurations.upload(context);
+        this.uploaded = true;
+    }
+
+    destroy() {
+        if (!this.layoutVertexBuffer) return;
+        this.layoutVertexBuffer.destroy();
+        this.indexBuffer.destroy();
+        this.indexBuffer2.destroy();
+        this.programConfigurations.destroy();
+        this.segments.destroy();
+        this.segments2.destroy();
+    }
+
+    addFeature(feature: BucketFeature, geometry: Array<Array<Point>>, index: number, canonical: CanonicalTileID, imagePositions: {
+        [_: string]: ImagePosition;
+    }) {
+        for (const polygon of classifyRings(geometry, EARCUT_MAX_RINGS)) {
+            let numVertices = 0;
+            for (const ring of polygon) {
+                numVertices += ring.length;
+            }
+
+            const triangleSegment = this.segments.prepareSegment(numVertices, this.layoutVertexArray, this.indexArray);
+            const triangleIndex = triangleSegment.vertexLength;
+
+            const flattened = [];
+            const holeIndices = [];
+
+            for (const ring of polygon) {
+                if (ring.length === 0) {
+                    continue;
+                }
+
+                if (ring !== polygon[0]) {
+                    holeIndices.push(flattened.length / 2);
+                }
+
+                const lineSegment = this.segments2.prepareSegment(ring.length, this.layoutVertexArray, this.indexArray2);
+                const lineIndex = lineSegment.vertexLength;
+
+                this.layoutVertexArray.emplaceBack(ring[0].x, ring[0].y);
+                this.indexArray2.emplaceBack(lineIndex + ring.length - 1, lineIndex);
+                flattened.push(ring[0].x);
+                flattened.push(ring[0].y);
+
+                for (let i = 1; i < ring.length; i++) {
+                    this.layoutVertexArray.emplaceBack(ring[i].x, ring[i].y);
+                    this.indexArray2.emplaceBack(lineIndex + i - 1, lineIndex + i);
+                    flattened.push(ring[i].x);
+                    flattened.push(ring[i].y);
+                }
+
+                lineSegment.vertexLength += ring.length;
+                lineSegment.primitiveLength += ring.length;
+            }
+
+            const indices = earcut(flattened, holeIndices);
+
+            for (let i = 0; i < indices.length; i += 3) {
+                this.indexArray.emplaceBack(
+                    triangleIndex + indices[i],
+                    triangleIndex + indices[i + 1],
+                    triangleIndex + indices[i + 2]);
+            }
+
+            triangleSegment.vertexLength += numVertices;
+            triangleSegment.primitiveLength += indices.length / 3;
+        }
+        this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions, canonical);
+    }
+}
+
+register('FillBucket', FillBucket, {omit: ['layers', 'patternFeatures']});

package/src/data/bucket/fill_extrusion_attributes.ts

@@ -0,0 +1,13 @@
+import {createLayout} from '../../util/struct_array';
+
+const layout = createLayout([
+    {name: 'a_pos',          components: 2, type: 'Int16'},
+    {name: 'a_normal_ed',    components: 4, type: 'Int16'},
+], 4);
+
+export const centroidAttributes = createLayout([
+    {name: 'a_centroid', components: 2, type: 'Int16'}
+], 4);
+
+export default layout;
+export const {members, size, alignment} = layout;