@mapwhit/tilerenderer 0.47.1

package/src/data/bucket/circle_attributes.js

@@ -0,0 +1,5 @@
+const { createLayout } = require('../../util/struct_array');
+
+const layout = createLayout([{ name: 'a_pos', components: 2, type: 'Int16' }], 4);
+
+module.exports = layout;

package/src/data/bucket/circle_bucket.js

@@ -0,0 +1,118 @@
+const { CircleLayoutArray } = require('../array_types');
+
+const { members: layoutAttributes } = require('./circle_attributes');
+const SegmentVector = require('../segment');
+const { ProgramConfigurationSet } = require('../program_configuration');
+const { TriangleIndexArray } = require('../index_array_type');
+const loadGeometry = require('../load_geometry');
+const EXTENT = require('../extent');
+const { register } = require('../../util/web_worker_transfer');
+const EvaluationParameters = require('../../style/evaluation_parameters');
+
+function addCircleVertex(layoutVertexArray, x, y, extrudeX, extrudeY) {
+  layoutVertexArray.emplaceBack(x * 2 + (extrudeX + 1) / 2, y * 2 + (extrudeY + 1) / 2);
+}
+
+/**
+ * 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.
+ * @private
+ */
+class CircleBucket {
+  constructor(options) {
+    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(layoutAttributes, options.layers, options.zoom);
+  }
+
+  populate(features, options) {
+    for (const { feature, index, sourceLayerIndex } of features) {
+      if (this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) {
+        const geometry = loadGeometry(feature);
+        this.addFeature(feature, geometry, index);
+        options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);
+      }
+    }
+  }
+
+  update(states, vtLayer, imagePositions) {
+    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) {
+    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, geometry, index) {
+    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);
+        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, {});
+  }
+}
+
+register('CircleBucket', CircleBucket, { omit: ['layers'] });
+
+module.exports = CircleBucket;

package/src/data/bucket/fill_attributes.js

@@ -0,0 +1,5 @@
+const { createLayout } = require('../../util/struct_array');
+
+const layout = createLayout([{ name: 'a_pos', components: 2, type: 'Int16' }], 4);
+
+module.exports = layout;

package/src/data/bucket/fill_bucket.js

@@ -0,0 +1,166 @@
+const { FillLayoutArray } = require('../array_types');
+
+const { members: layoutAttributes } = require('./fill_attributes');
+const SegmentVector = require('../segment');
+const { ProgramConfigurationSet } = require('../program_configuration');
+const { LineIndexArray, TriangleIndexArray } = require('../index_array_type');
+const earcut = require('earcut');
+const classifyRings = require('../../util/classify_rings');
+const assert = require('assert');
+const EARCUT_MAX_RINGS = 500;
+const { register } = require('../../util/web_worker_transfer');
+const { hasPattern, addPatternDependencies } = require('./pattern_bucket_features');
+const loadGeometry = require('../load_geometry');
+const EvaluationParameters = require('../../style/evaluation_parameters');
+
+class FillBucket {
+  constructor(options) {
+    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 FillLayoutArray();
+    this.indexArray = new TriangleIndexArray();
+    this.indexArray2 = new LineIndexArray();
+    this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
+    this.segments = new SegmentVector();
+    this.segments2 = new SegmentVector();
+  }
+
+  populate(features, options) {
+    this.features = [];
+    this.hasPattern = hasPattern('fill', this.layers, options);
+
+    for (const { feature, index, sourceLayerIndex } of features) {
+      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+
+      const geometry = loadGeometry(feature);
+
+      const patternFeature = {
+        sourceLayerIndex,
+        index,
+        geometry,
+        properties: feature.properties,
+        type: feature.type,
+        patterns: {}
+      };
+
+      if (typeof feature.id !== 'undefined') {
+        patternFeature.id = feature.id;
+      }
+
+      if (this.hasPattern) {
+        this.features.push(addPatternDependencies('fill', this.layers, patternFeature, this.zoom, options));
+      } else {
+        this.addFeature(patternFeature, geometry, index, {});
+      }
+
+      options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index);
+    }
+  }
+
+  update(states, vtLayer, imagePositions) {
+    if (!this.stateDependentLayers.length) return;
+    this.programConfigurations.updatePaintArrays(states, vtLayer, this.stateDependentLayers, imagePositions);
+  }
+
+  addFeatures(options, imagePositions) {
+    for (const feature of this.features) {
+      const { geometry } = feature;
+      this.addFeature(feature, geometry, feature.index, imagePositions);
+    }
+  }
+
+  isEmpty() {
+    return this.layoutVertexArray.length === 0;
+  }
+
+  uploadPending() {
+    return !this.uploaded || this.programConfigurations.needsUpload;
+  }
+  upload(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, geometry, index, imagePositions) {
+    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);
+      assert(indices.length % 3 === 0);
+
+      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);
+  }
+}
+
+register('FillBucket', FillBucket, { omit: ['layers', 'features'] });
+
+module.exports = FillBucket;

package/src/data/bucket/fill_extrusion_attributes.js

@@ -0,0 +1,11 @@
+const { createLayout } = require('../../util/struct_array');
+
+const layout = createLayout(
+  [
+    { name: 'a_pos', components: 2, type: 'Int16' },
+    { name: 'a_normal_ed', components: 4, type: 'Int16' }
+  ],
+  4
+);
+
+module.exports = layout;

package/src/data/bucket/fill_extrusion_bucket.js

@@ -0,0 +1,247 @@
+const { FillExtrusionLayoutArray } = require('../array_types');
+
+const { members: layoutAttributes } = require('./fill_extrusion_attributes');
+const SegmentVector = require('../segment');
+const { ProgramConfigurationSet } = require('../program_configuration');
+const { TriangleIndexArray } = require('../index_array_type');
+const EXTENT = require('../extent');
+const earcut = require('earcut');
+const {
+  VectorTileFeature: { types: vectorTileFeatureTypes }
+} = require('@mapbox/vector-tile');
+const classifyRings = require('../../util/classify_rings');
+const assert = require('assert');
+const EARCUT_MAX_RINGS = 500;
+const { register } = require('../../util/web_worker_transfer');
+const { hasPattern, addPatternDependencies } = require('./pattern_bucket_features');
+const loadGeometry = require('../load_geometry');
+const EvaluationParameters = require('../../style/evaluation_parameters');
+
+const FACTOR = 2 ** 13;
+
+function addVertex(vertexArray, x, y, nx, ny, nz, t, e) {
+  vertexArray.emplaceBack(
+    // a_pos
+    x,
+    y,
+    // a_normal_ed: 3-component normal and 1-component edgedistance
+    Math.floor(nx * FACTOR) * 2 + t,
+    ny * FACTOR * 2,
+    nz * FACTOR * 2,
+    // edgedistance (used for wrapping patterns around extrusion sides)
+    Math.round(e)
+  );
+}
+
+class FillExtrusionBucket {
+  constructor(options) {
+    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 FillExtrusionLayoutArray();
+    this.indexArray = new TriangleIndexArray();
+    this.programConfigurations = new ProgramConfigurationSet(layoutAttributes, options.layers, options.zoom);
+    this.segments = new SegmentVector();
+  }
+
+  populate(features, options) {
+    this.features = [];
+    this.hasPattern = hasPattern('fill-extrusion', this.layers, options);
+
+    for (const { feature, index, sourceLayerIndex } of features) {
+      if (!this.layers[0]._featureFilter(new EvaluationParameters(this.zoom), feature)) continue;
+
+      const geometry = loadGeometry(feature);
+
+      const patternFeature = {
+        sourceLayerIndex,
+        index,
+        geometry,
+        properties: feature.properties,
+        type: feature.type,
+        patterns: {}
+      };
+
+      if (typeof feature.id !== 'undefined') {
+        patternFeature.id = feature.id;
+      }
+
+      if (this.hasPattern) {
+        this.features.push(addPatternDependencies('fill-extrusion', this.layers, patternFeature, this.zoom, options));
+      } else {
+        this.addFeature(patternFeature, geometry, index, {});
+      }
+
+      options.featureIndex.insert(feature, geometry, index, sourceLayerIndex, this.index, true);
+    }
+  }
+
+  addFeatures(options, imagePositions) {
+    for (const feature of this.features) {
+      const { geometry } = feature;
+      this.addFeature(feature, geometry, feature.index, imagePositions);
+    }
+  }
+
+  update(states, vtLayer, imagePositions) {
+    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) {
+    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, geometry, index, imagePositions) {
+    for (const polygon of classifyRings(geometry, EARCUT_MAX_RINGS)) {
+      let numVertices = 0;
+      for (const ring of polygon) {
+        numVertices += ring.length;
+      }
+      let segment = this.segments.prepareSegment(4, this.layoutVertexArray, this.indexArray);
+
+      for (const ring of polygon) {
+        if (ring.length === 0) {
+          continue;
+        }
+
+        if (isEntirelyOutside(ring)) {
+          continue;
+        }
+
+        let edgeDistance = 0;
+
+        for (let p = 0; p < ring.length; p++) {
+          const p1 = ring[p];
+
+          if (p >= 1) {
+            const p2 = ring[p - 1];
+
+            if (!isBoundaryEdge(p1, p2)) {
+              if (segment.vertexLength + 4 > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
+                segment = this.segments.prepareSegment(4, this.layoutVertexArray, this.indexArray);
+              }
+
+              const perp = p1.sub(p2)._perp()._unit();
+              const dist = p2.dist(p1);
+              if (edgeDistance + dist > 32768) edgeDistance = 0;
+
+              addVertex(this.layoutVertexArray, p1.x, p1.y, perp.x, perp.y, 0, 0, edgeDistance);
+              addVertex(this.layoutVertexArray, p1.x, p1.y, perp.x, perp.y, 0, 1, edgeDistance);
+
+              edgeDistance += dist;
+
+              addVertex(this.layoutVertexArray, p2.x, p2.y, perp.x, perp.y, 0, 0, edgeDistance);
+              addVertex(this.layoutVertexArray, p2.x, p2.y, perp.x, perp.y, 0, 1, edgeDistance);
+
+              const bottomRight = segment.vertexLength;
+
+              // ┌──────┐
+              // │ 0  1 │ Counter-clockwise winding order.
+              // │      │ Triangle 1: 0 => 2 => 1
+              // │ 2  3 │ Triangle 2: 1 => 2 => 3
+              // └──────┘
+              this.indexArray.emplaceBack(bottomRight, bottomRight + 2, bottomRight + 1);
+              this.indexArray.emplaceBack(bottomRight + 1, bottomRight + 2, bottomRight + 3);
+
+              segment.vertexLength += 4;
+              segment.primitiveLength += 2;
+            }
+          }
+        }
+      }
+
+      if (segment.vertexLength + numVertices > SegmentVector.MAX_VERTEX_ARRAY_LENGTH) {
+        segment = this.segments.prepareSegment(numVertices, this.layoutVertexArray, this.indexArray);
+      }
+
+      //Only triangulate and draw the area of the feature if it is a polygon
+      //Other feature types (e.g. LineString) do not have area, so triangulation is pointless / undefined
+      if (vectorTileFeatureTypes[feature.type] !== 'Polygon') {
+        continue;
+      }
+
+      const flattened = [];
+      const holeIndices = [];
+      const triangleIndex = segment.vertexLength;
+
+      for (const ring of polygon) {
+        if (ring.length === 0) {
+          continue;
+        }
+
+        if (ring !== polygon[0]) {
+          holeIndices.push(flattened.length / 2);
+        }
+
+        for (let i = 0; i < ring.length; i++) {
+          const p = ring[i];
+
+          addVertex(this.layoutVertexArray, p.x, p.y, 0, 0, 1, 1, 0);
+
+          flattened.push(p.x);
+          flattened.push(p.y);
+        }
+      }
+
+      const indices = earcut(flattened, holeIndices);
+      assert(indices.length % 3 === 0);
+
+      for (let j = 0; j < indices.length; j += 3) {
+        // Counter-clockwise winding order.
+        this.indexArray.emplaceBack(
+          triangleIndex + indices[j],
+          triangleIndex + indices[j + 2],
+          triangleIndex + indices[j + 1]
+        );
+      }
+
+      segment.primitiveLength += indices.length / 3;
+      segment.vertexLength += numVertices;
+    }
+
+    this.programConfigurations.populatePaintArrays(this.layoutVertexArray.length, feature, index, imagePositions);
+  }
+}
+
+register('FillExtrusionBucket', FillExtrusionBucket, { omit: ['layers', 'features'] });
+
+module.exports = FillExtrusionBucket;
+
+function isBoundaryEdge(p1, p2) {
+  return (p1.x === p2.x && (p1.x < 0 || p1.x > EXTENT)) || (p1.y === p2.y && (p1.y < 0 || p1.y > EXTENT));
+}
+
+function isEntirelyOutside(ring) {
+  return (
+    ring.every(p => p.x < 0) ||
+    ring.every(p => p.x > EXTENT) ||
+    ring.every(p => p.y < 0) ||
+    ring.every(p => p.y > EXTENT)
+  );
+}

package/src/data/bucket/heatmap_bucket.js

@@ -0,0 +1,12 @@
+const CircleBucket = require('./circle_bucket');
+
+const { register } = require('../../util/web_worker_transfer');
+
+class HeatmapBucket extends CircleBucket {
+  // Needed for flow to accept omit: ['layers'] below, due to
+  // https://github.com/facebook/flow/issues/4262
+}
+
+register('HeatmapBucket', HeatmapBucket, { omit: ['layers'] });
+
+module.exports = HeatmapBucket;

package/src/data/bucket/line_attributes.js

@@ -0,0 +1,11 @@
+const { createLayout } = require('../../util/struct_array');
+
+const layout = createLayout(
+  [
+    { name: 'a_pos_normal', components: 4, type: 'Int16' },
+    { name: 'a_data', components: 4, type: 'Uint8' }
+  ],
+  4
+);
+
+module.exports = layout;