@mapwhit/tilerenderer 0.47.2 → 0.49.0

package/build/min/package.json

@@ -1,3 +1,3 @@
 {
-  "version": "0.47.1"
+  "version": "0.48.0"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapwhit/tilerenderer",
   "description": "A WebGL interactive maps library",
-  "version": "0.47.2",
+  "version": "0.49.0",
   "main": "src/index.js",
   "license": "BSD-3-Clause",
   "repository": {
@@ -11,7 +11,6 @@
   "dependencies": {
     "@mapbox/gl-matrix": "^0.0.1",
     "@mapbox/point-geometry": "^0.1.0",
-    "@mapbox/shelf-pack": "^3.0.0",
     "@mapbox/tiny-sdf": "^1.1.0",
     "@mapbox/unitbezier": "^0.0.0",
     "@mapbox/vector-tile": "^1.3.1",
@@ -24,6 +23,8 @@
     "earcut": "^2.0.3",
     "geojson-vt": "^3.1.2",
     "grid-index": "^1.1.0",
+    "murmurhash-js": "^1.0.0",
+    "potpack": "^1.0.1",
     "quickselect": "^2.0.0",
     "supercluster": "^2.0.1",
     "tinyqueue": "^1.1.0"

package/src/data/array_types.js

@@ -513,6 +513,68 @@ class StructArrayLayout2i2ui3ul3ui2f2ub40 extends StructArray {
 StructArrayLayout2i2ui3ul3ui2f2ub40.prototype.bytesPerElement = 40;
 register('StructArrayLayout2i2ui3ul3ui2f2ub40', StructArrayLayout2i2ui3ul3ui2f2ub40);
 
+/**
+ * Implementation of the StructArray layout:
+ * [0]: Int16[4]
+ * [8]: Uint16[9]
+ * [28]: Uint32[1]
+ *
+ * @private
+ */
+class StructArrayLayout4i9ui1ul32 extends StructArray {
+  _refreshViews() {
+    this.uint8 = new Uint8Array(this.arrayBuffer);
+    this.int16 = new Int16Array(this.arrayBuffer);
+    this.uint16 = new Uint16Array(this.arrayBuffer);
+    this.uint32 = new Uint32Array(this.arrayBuffer);
+  }
+
+  emplaceBack(v0, v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v13) {
+    const i = this.length;
+    this.resize(i + 1);
+    const o2 = i * 16;
+    const o4 = i * 8;
+    this.int16[o2 + 0] = v0;
+    this.int16[o2 + 1] = v1;
+    this.int16[o2 + 2] = v2;
+    this.int16[o2 + 3] = v3;
+    this.uint16[o2 + 4] = v4;
+    this.uint16[o2 + 5] = v5;
+    this.uint16[o2 + 6] = v6;
+    this.uint16[o2 + 7] = v7;
+    this.uint16[o2 + 8] = v8;
+    this.uint16[o2 + 9] = v9;
+    this.uint16[o2 + 10] = v10;
+    this.uint16[o2 + 11] = v11;
+    this.uint16[o2 + 12] = v12;
+    this.uint32[o4 + 7] = v13;
+    return i;
+  }
+
+  emplace(i, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v13) {
+    const o2 = i * 16;
+    const o4 = i * 8;
+    this.int16[o2 + 0] = v0;
+    this.int16[o2 + 1] = v1;
+    this.int16[o2 + 2] = v2;
+    this.int16[o2 + 3] = v3;
+    this.uint16[o2 + 4] = v4;
+    this.uint16[o2 + 5] = v5;
+    this.uint16[o2 + 6] = v6;
+    this.uint16[o2 + 7] = v7;
+    this.uint16[o2 + 8] = v8;
+    this.uint16[o2 + 9] = v9;
+    this.uint16[o2 + 10] = v10;
+    this.uint16[o2 + 11] = v11;
+    this.uint16[o2 + 12] = v12;
+    this.uint32[o4 + 7] = v13;
+    return i;
+  }
+}
+
+StructArrayLayout4i9ui1ul32.prototype.bytesPerElement = 32;
+register('StructArrayLayout4i9ui1ul32', StructArrayLayout4i9ui1ul32);
+
 /**
  * Implementation of the StructArray layout:
  * [0]: Float32[1]
@@ -974,6 +1036,111 @@ class PlacedSymbolArray extends StructArrayLayout2i2ui3ul3ui2f2ub40 {
 
 register('PlacedSymbolArray', PlacedSymbolArray);
 
+class SymbolInstanceStruct extends Struct {
+  get anchorX() {
+    return this._structArray.int16[this._pos2 + 0];
+  }
+  set anchorX(x) {
+    this._structArray.int16[this._pos2 + 0] = x;
+  }
+  get anchorY() {
+    return this._structArray.int16[this._pos2 + 1];
+  }
+  set anchorY(x) {
+    this._structArray.int16[this._pos2 + 1] = x;
+  }
+  get horizontalPlacedTextSymbolIndex() {
+    return this._structArray.int16[this._pos2 + 2];
+  }
+  set horizontalPlacedTextSymbolIndex(x) {
+    this._structArray.int16[this._pos2 + 2] = x;
+  }
+  get verticalPlacedTextSymbolIndex() {
+    return this._structArray.int16[this._pos2 + 3];
+  }
+  set verticalPlacedTextSymbolIndex(x) {
+    this._structArray.int16[this._pos2 + 3] = x;
+  }
+  get key() {
+    return this._structArray.uint16[this._pos2 + 4];
+  }
+  set key(x) {
+    this._structArray.uint16[this._pos2 + 4] = x;
+  }
+  get textBoxStartIndex() {
+    return this._structArray.uint16[this._pos2 + 5];
+  }
+  set textBoxStartIndex(x) {
+    this._structArray.uint16[this._pos2 + 5] = x;
+  }
+  get textBoxEndIndex() {
+    return this._structArray.uint16[this._pos2 + 6];
+  }
+  set textBoxEndIndex(x) {
+    this._structArray.uint16[this._pos2 + 6] = x;
+  }
+  get iconBoxStartIndex() {
+    return this._structArray.uint16[this._pos2 + 7];
+  }
+  set iconBoxStartIndex(x) {
+    this._structArray.uint16[this._pos2 + 7] = x;
+  }
+  get iconBoxEndIndex() {
+    return this._structArray.uint16[this._pos2 + 8];
+  }
+  set iconBoxEndIndex(x) {
+    this._structArray.uint16[this._pos2 + 8] = x;
+  }
+  get featureIndex() {
+    return this._structArray.uint16[this._pos2 + 9];
+  }
+  set featureIndex(x) {
+    this._structArray.uint16[this._pos2 + 9] = x;
+  }
+  get numGlyphVertices() {
+    return this._structArray.uint16[this._pos2 + 10];
+  }
+  set numGlyphVertices(x) {
+    this._structArray.uint16[this._pos2 + 10] = x;
+  }
+  get numVerticalGlyphVertices() {
+    return this._structArray.uint16[this._pos2 + 11];
+  }
+  set numVerticalGlyphVertices(x) {
+    this._structArray.uint16[this._pos2 + 11] = x;
+  }
+  get numIconVertices() {
+    return this._structArray.uint16[this._pos2 + 12];
+  }
+  set numIconVertices(x) {
+    this._structArray.uint16[this._pos2 + 12] = x;
+  }
+  get crossTileID() {
+    return this._structArray.uint32[this._pos4 + 7];
+  }
+  set crossTileID(x) {
+    this._structArray.uint32[this._pos4 + 7] = x;
+  }
+}
+
+SymbolInstanceStruct.prototype.size = 32;
+
+/**
+ * @private
+ */
+class SymbolInstanceArray extends StructArrayLayout4i9ui1ul32 {
+  /**
+   * Return the SymbolInstanceStruct at the given location in the array.
+   * @param {number} index The index of the element.
+   */
+  get(index) {
+    assert(!this.isTransferred);
+    return new SymbolInstanceStruct(this, index);
+  }
+}
+
+register('SymbolInstanceArray', SymbolInstanceArray);
+
 class GlyphOffsetStruct extends Struct {
   get offsetX() {
     return this._structArray.float32[this._pos4 + 0];
@@ -1104,6 +1271,7 @@ module.exports = {
   StructArrayLayout2i2i2i12,
   StructArrayLayout2ub4,
   StructArrayLayout2i2ui3ul3ui2f2ub40,
+  StructArrayLayout4i9ui1ul32,
   StructArrayLayout1f4,
   StructArrayLayout3i6,
   StructArrayLayout1ul2ui8,
@@ -1134,5 +1302,6 @@ module.exports = {
   FeatureIndexArray,
   GlyphOffsetArray,
   PlacedSymbolArray,
+  SymbolInstanceArray,
   SymbolLineVertexArray
 };

package/src/data/bucket/symbol_attributes.js

@@ -73,6 +73,23 @@ const placement = createLayout([
   { type: 'Uint8', name: 'hidden' }
 ]);
 
+const symbolInstance = createLayout([
+  { type: 'Int16', name: 'anchorX' },
+  { type: 'Int16', name: 'anchorY' },
+  { type: 'Int16', name: 'horizontalPlacedTextSymbolIndex' },
+  { type: 'Int16', name: 'verticalPlacedTextSymbolIndex' },
+  { type: 'Uint16', name: 'key' },
+  { type: 'Uint16', name: 'textBoxStartIndex' },
+  { type: 'Uint16', name: 'textBoxEndIndex' },
+  { type: 'Uint16', name: 'iconBoxStartIndex' },
+  { type: 'Uint16', name: 'iconBoxEndIndex' },
+  { type: 'Uint16', name: 'featureIndex' },
+  { type: 'Uint16', name: 'numGlyphVertices' },
+  { type: 'Uint16', name: 'numVerticalGlyphVertices' },
+  { type: 'Uint16', name: 'numIconVertices' },
+  { type: 'Uint32', name: 'crossTileID' }
+]);
+
 const glyphOffset = createLayout([{ type: 'Float32', name: 'offsetX' }]);
 
 const lineVertex = createLayout([
@@ -90,6 +107,7 @@ module.exports = {
   collisionBoxLayout,
   collisionCircleLayout,
   placement,
+  symbolInstance,
   glyphOffset,
   lineVertex
 };

package/src/data/bucket/symbol_bucket.js

@@ -14,6 +14,7 @@ const {
   CollisionCircleLayoutArray,
   CollisionVertexArray,
   PlacedSymbolArray,
+  SymbolInstanceArray,
   GlyphOffsetArray,
   SymbolLineVertexArray
 } = require('../array_types');
@@ -31,6 +32,7 @@ const { verticalizedCharacterMap } = require('../../util/verticalize_punctuation
 const { getSizeData } = require('../../symbol/symbol_size');
 const { register } = require('../../util/transfer_registry');
 const EvaluationParameters = require('../../style/evaluation_parameters');
+const { Formatted } = require('../../style-spec/expression/definitions/formatted');
 
 // Opacity arrays are frequently updated but don't contain a lot of information, so we pack them
 // tight. Each Uint32 is actually four duplicate Uint8s for the four corners of a glyph
@@ -189,11 +191,13 @@ class SymbolBucket {
     this.iconSizeData = getSizeData(this.zoom, unevaluatedLayoutValues['icon-size']);
 
     const layout = this.layers[0].layout;
+    const zOrderByViewportY = layout.get('symbol-z-order') === 'viewport-y';
     this.sortFeaturesByY =
-      layout.get('text-allow-overlap') ||
-      layout.get('icon-allow-overlap') ||
-      layout.get('text-ignore-placement') ||
-      layout.get('icon-ignore-placement');
+      zOrderByViewportY &&
+      (layout.get('text-allow-overlap') ||
+        layout.get('icon-allow-overlap') ||
+        layout.get('text-ignore-placement') ||
+        layout.get('icon-ignore-placement'));
 
     this.sourceID = options.sourceID;
   }
@@ -219,6 +223,19 @@ class SymbolBucket {
 
     this.glyphOffsetArray = new GlyphOffsetArray();
     this.lineVertexArray = new SymbolLineVertexArray();
+    this.symbolInstances = new SymbolInstanceArray();
+  }
+
+  calculateGlyphDependencies(text, stack, textAlongLine, doesAllowVerticalWritingMode) {
+    for (let i = 0; i < text.length; i++) {
+      stack[text.charCodeAt(i)] = true;
+      if (textAlongLine && doesAllowVerticalWritingMode) {
+        const verticalChar = verticalizedCharacterMap[text.charAt(i)];
+        if (verticalChar) {
+          stack[verticalChar.charCodeAt(0)] = true;
+        }
+      }
+    }
   }
 
   populate(features, options) {
@@ -229,7 +246,7 @@ class SymbolBucket {
     const textField = layout.get('text-field');
     const iconImage = layout.get('icon-image');
     const hasText =
-      (textField.value.kind !== 'constant' || textField.value.value.length > 0) &&
+      (textField.value.kind !== 'constant' || textField.value.value.toString().length > 0) &&
       (textFont.value.kind !== 'constant' || textFont.value.value.length > 0);
     const hasIcon = iconImage.value.kind !== 'constant' || (iconImage.value.value && iconImage.value.value.length > 0);
 
@@ -286,15 +303,16 @@ class SymbolBucket {
         const stack = (stacks[fontStack] = stacks[fontStack] || {});
         const textAlongLine =
           layout.get('text-rotation-alignment') === 'map' && layout.get('symbol-placement') !== 'point';
-        const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text);
-        for (let i = 0; i < text.length; i++) {
-          stack[text.charCodeAt(i)] = true;
-          if (textAlongLine && doesAllowVerticalWritingMode) {
-            const verticalChar = verticalizedCharacterMap[text.charAt(i)];
-            if (verticalChar) {
-              stack[verticalChar.charCodeAt(0)] = true;
-            }
+        if (text instanceof Formatted) {
+          for (const section of text.sections) {
+            const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text.toString());
+            const sectionFont = section.fontStack || fontStack;
+            const sectionStack = (stacks[sectionFont] = stacks[sectionFont] || {});
+            this.calculateGlyphDependencies(section.text, sectionStack, textAlongLine, doesAllowVerticalWritingMode);
           }
+        } else {
+          const doesAllowVerticalWritingMode = allowsVerticalWritingMode(text);
+          this.calculateGlyphDependencies(text, stack, textAlongLine, doesAllowVerticalWritingMode);
         }
       }
     }
@@ -441,15 +459,15 @@ class SymbolBucket {
     arrays.programConfigurations.populatePaintArrays(arrays.layoutVertexArray.length, feature, feature.index, {});
   }
 
-  _addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, point, anchor, extrude) {
+  _addCollisionDebugVertex(layoutVertexArray, collisionVertexArray, point, anchorX, anchorY, extrude) {
     collisionVertexArray.emplaceBack(0, 0);
     return layoutVertexArray.emplaceBack(
       // pos
       point.x,
       point.y,
       // a_anchor_pos
-      anchor.x,
-      anchor.y,
+      anchorX,
+      anchorY,
       // extrude
       Math.round(extrude.x),
       Math.round(extrude.y)
@@ -463,32 +481,39 @@ class SymbolBucket {
     const layoutVertexArray = arrays.layoutVertexArray;
     const collisionVertexArray = arrays.collisionVertexArray;
 
+    const anchorX = symbolInstance.anchorX;
+    const anchorY = symbolInstance.anchorY;
+
     this._addCollisionDebugVertex(
       layoutVertexArray,
       collisionVertexArray,
       boxAnchorPoint,
-      symbolInstance.anchor,
+      anchorX,
+      anchorY,
       new Point(x1, y1)
     );
     this._addCollisionDebugVertex(
       layoutVertexArray,
       collisionVertexArray,
       boxAnchorPoint,
-      symbolInstance.anchor,
+      anchorX,
+      anchorY,
       new Point(x2, y1)
     );
     this._addCollisionDebugVertex(
       layoutVertexArray,
       collisionVertexArray,
       boxAnchorPoint,
-      symbolInstance.anchor,
+      anchorX,
+      anchorY,
       new Point(x2, y2)
     );
     this._addCollisionDebugVertex(
       layoutVertexArray,
       collisionVertexArray,
       boxAnchorPoint,
-      symbolInstance.anchor,
+      anchorX,
+      anchorY,
       new Point(x1, y2)
     );
 
@@ -510,49 +535,41 @@ class SymbolBucket {
     }
   }
 
-  generateCollisionDebugBuffers() {
-    for (const symbolInstance of this.symbolInstances) {
-      symbolInstance.textCollisionFeature = {
-        boxStartIndex: symbolInstance.textBoxStartIndex,
-        boxEndIndex: symbolInstance.textBoxEndIndex
-      };
-      symbolInstance.iconCollisionFeature = {
-        boxStartIndex: symbolInstance.iconBoxStartIndex,
-        boxEndIndex: symbolInstance.iconBoxEndIndex
-      };
+  addDebugCollisionBoxes(startIndex, endIndex, symbolInstance) {
+    for (let b = startIndex; b < endIndex; b++) {
+      const box = this.collisionBoxArray.get(b);
+      const x1 = box.x1;
+      const y1 = box.y1;
+      const x2 = box.x2;
+      const y2 = box.y2;
+
+      // If the radius > 0, this collision box is actually a circle
+      // The data we add to the buffers is exactly the same, but we'll render with a different shader.
+      const isCircle = box.radius > 0;
+      this.addCollisionDebugVertices(
+        x1,
+        y1,
+        x2,
+        y2,
+        isCircle ? this.collisionCircle : this.collisionBox,
+        box.anchorPoint,
+        symbolInstance,
+        isCircle
+      );
+    }
+  }
 
-      for (let i = 0; i < 2; i++) {
-        const feature = symbolInstance[i === 0 ? 'textCollisionFeature' : 'iconCollisionFeature'];
-        if (!feature) continue;
-
-        for (let b = feature.boxStartIndex; b < feature.boxEndIndex; b++) {
-          const box = this.collisionBoxArray.get(b);
-          const x1 = box.x1;
-          const y1 = box.y1;
-          const x2 = box.x2;
-          const y2 = box.y2;
-
-          // If the radius > 0, this collision box is actually a circle
-          // The data we add to the buffers is exactly the same, but we'll render with a different shader.
-          const isCircle = box.radius > 0;
-          this.addCollisionDebugVertices(
-            x1,
-            y1,
-            x2,
-            y2,
-            isCircle ? this.collisionCircle : this.collisionBox,
-            box.anchorPoint,
-            symbolInstance,
-            isCircle
-          );
-        }
-      }
+  generateCollisionDebugBuffers() {
+    for (let i = 0; i < this.symbolInstances.length; i++) {
+      const symbolInstance = this.symbolInstances.get(i);
+      this.addDebugCollisionBoxes(symbolInstance.textBoxStartIndex, symbolInstance.textBoxEndIndex, symbolInstance);
+      this.addDebugCollisionBoxes(symbolInstance.iconBoxStartIndex, symbolInstance.iconBoxEndIndex, symbolInstance);
     }
   }
 
   // These flat arrays are meant to be quicker to iterate over than the source
   // CollisionBoxArray
-  deserializeCollisionBoxes(collisionBoxArray, textStartIndex, textEndIndex, iconStartIndex, iconEndIndex) {
+  _deserializeCollisionBoxesForSymbol(collisionBoxArray, textStartIndex, textEndIndex, iconStartIndex, iconEndIndex) {
     const collisionArrays = {};
     for (let k = textStartIndex; k < textEndIndex; k++) {
       const box = collisionBoxArray.get(k);
@@ -600,6 +617,22 @@ class SymbolBucket {
     return collisionArrays;
   }
 
+  deserializeCollisionBoxes(collisionBoxArray) {
+    this.collisionArrays = [];
+    for (let i = 0; i < this.symbolInstances.length; i++) {
+      const symbolInstance = this.symbolInstances.get(i);
+      this.collisionArrays.push(
+        this._deserializeCollisionBoxesForSymbol(
+          collisionBoxArray,
+          symbolInstance.textBoxStartIndex,
+          symbolInstance.textBoxEndIndex,
+          symbolInstance.iconBoxStartIndex,
+          symbolInstance.iconBoxEndIndex
+        )
+      );
+    }
+  }
+
   hasTextData() {
     return this.text.segments.get().length > 0;
   }
@@ -616,6 +649,16 @@ class SymbolBucket {
     return this.collisionCircle.segments.get().length > 0;
   }
 
+  addIndicesForPlacedTextSymbol(placedTextSymbolIndex) {
+    const placedSymbol = this.text.placedSymbolArray.get(placedTextSymbolIndex);
+
+    const endIndex = placedSymbol.vertexStartIndex + placedSymbol.numGlyphs * 4;
+    for (let vertexIndex = placedSymbol.vertexStartIndex; vertexIndex < endIndex; vertexIndex += 4) {
+      this.text.indexArray.emplaceBack(vertexIndex, vertexIndex + 1, vertexIndex + 2);
+      this.text.indexArray.emplaceBack(vertexIndex + 1, vertexIndex + 2, vertexIndex + 3);
+    }
+  }
+
   sortFeatures(angle) {
     if (!this.sortFeaturesByY) return;
 
@@ -639,12 +682,16 @@ class SymbolBucket {
     const sin = Math.sin(angle);
     const cos = Math.cos(angle);
 
+    const rotatedYs = [];
+    const featureIndexes = [];
+    for (let i = 0; i < this.symbolInstances.length; i++) {
+      const symbolInstance = this.symbolInstances.get(i);
+      rotatedYs.push(Math.round(sin * symbolInstance.anchorX + cos * symbolInstance.anchorY) | 0);
+      featureIndexes.push(symbolInstance.featureIndex);
+    }
+
     symbolInstanceIndexes.sort((aIndex, bIndex) => {
-      const a = this.symbolInstances[aIndex];
-      const b = this.symbolInstances[bIndex];
-      const aRotated = (sin * a.anchor.x + cos * a.anchor.y) | 0;
-      const bRotated = (sin * b.anchor.x + cos * b.anchor.y) | 0;
-      return aRotated - bRotated || b.featureIndex - a.featureIndex;
+      return rotatedYs[aIndex] - rotatedYs[bIndex] || featureIndexes[bIndex] - featureIndexes[aIndex];
     });
 
     this.text.indexArray.clear();
@@ -653,17 +700,14 @@ class SymbolBucket {
     this.featureSortOrder = [];
 
     for (const i of symbolInstanceIndexes) {
-      const symbolInstance = this.symbolInstances[i];
+      const symbolInstance = this.symbolInstances.get(i);
       this.featureSortOrder.push(symbolInstance.featureIndex);
 
-      for (const placedTextSymbolIndex of symbolInstance.placedTextSymbolIndices) {
-        const placedSymbol = this.text.placedSymbolArray.get(placedTextSymbolIndex);
-
-        const endIndex = placedSymbol.vertexStartIndex + placedSymbol.numGlyphs * 4;
-        for (let vertexIndex = placedSymbol.vertexStartIndex; vertexIndex < endIndex; vertexIndex += 4) {
-          this.text.indexArray.emplaceBack(vertexIndex, vertexIndex + 1, vertexIndex + 2);
-          this.text.indexArray.emplaceBack(vertexIndex + 1, vertexIndex + 2, vertexIndex + 3);
-        }
+      if (symbolInstance.horizontalPlacedTextSymbolIndex >= 0) {
+        this.addIndicesForPlacedTextSymbol(symbolInstance.horizontalPlacedTextSymbolIndex);
+      }
+      if (symbolInstance.verticalPlacedTextSymbolIndex >= 0) {
+        this.addIndicesForPlacedTextSymbol(symbolInstance.verticalPlacedTextSymbolIndex);
       }
 
       const placedIcon = this.icon.placedSymbolArray.get(i);
@@ -680,8 +724,7 @@ class SymbolBucket {
 }
 
 register('SymbolBucket', SymbolBucket, {
-  omit: ['layers', 'collisionBoxArray', 'features', 'compareText'],
-  shallow: ['symbolInstances']
+  omit: ['layers', 'collisionBoxArray', 'features', 'compareText']
 });
 
 // this constant is based on the size of StructArray indexes used in a symbol

package/src/data/program_configuration.js

@@ -170,11 +170,15 @@ class SourceExpressionBinder {
 
   upload(context) {
     if (this.paintVertexArray?.arrayBuffer) {
-      this.paintVertexBuffer = context.createVertexBuffer(
-        this.paintVertexArray,
-        this.paintVertexAttributes,
-        this.expression.isStateDependent
-      );
+      if (this.paintVertexBuffer?.buffer) {
+        this.paintVertexBuffer.updateData(this.paintVertexArray);
+      } else {
+        this.paintVertexBuffer = context.createVertexBuffer(
+          this.paintVertexArray,
+          this.paintVertexAttributes,
+          this.expression.isStateDependent
+        );
+      }
     }
   }
 
@@ -265,11 +269,15 @@ class CompositeExpressionBinder {
 
   upload(context) {
     if (this.paintVertexArray?.arrayBuffer) {
-      this.paintVertexBuffer = context.createVertexBuffer(
-        this.paintVertexArray,
-        this.paintVertexAttributes,
-        this.expression.isStateDependent
-      );
+      if (this.paintVertexBuffer?.buffer) {
+        this.paintVertexBuffer.updateData(this.paintVertexArray);
+      } else {
+        this.paintVertexBuffer = context.createVertexBuffer(
+          this.paintVertexArray,
+          this.paintVertexAttributes,
+          this.expression.isStateDependent
+        );
+      }
     }
   }
 

package/src/geo/transform.js

@@ -17,12 +17,13 @@ const { vec4, mat4, mat2 } = require('@mapbox/gl-matrix');
 class Transform {
   constructor(minZoom, maxZoom, renderWorldCopies) {
     this.tileSize = 512; // constant
+    this.maxValidLatitude = 85.051129; // constant
 
     this._renderWorldCopies = renderWorldCopies === undefined ? true : renderWorldCopies;
     this._minZoom = minZoom || 0;
     this._maxZoom = maxZoom || 22;
 
-    this.latRange = [-85.05113, 85.05113];
+    this.latRange = [-this.maxValidLatitude, this.maxValidLatitude];
 
     this.width = 0;
     this.height = 0;
@@ -176,13 +177,21 @@ class Transform {
    * @private
    */
   getVisibleUnwrappedCoordinates(tileID) {
-    const ul = this.pointCoordinate(new Point(0, 0), 0);
-    const ur = this.pointCoordinate(new Point(this.width, 0), 0);
-    const w0 = Math.floor(ul.column);
-    const w1 = Math.floor(ur.column);
     const result = [new UnwrappedTileID(0, tileID)];
     if (this._renderWorldCopies) {
-      for (let w = w0; w <= w1; w++) {
+      const utl = this.pointCoordinate(new Point(0, 0), 0);
+      const utr = this.pointCoordinate(new Point(this.width, 0), 0);
+      const ubl = this.pointCoordinate(new Point(this.width, this.height), 0);
+      const ubr = this.pointCoordinate(new Point(0, this.height), 0);
+      const w0 = Math.floor(Math.min(utl.column, utr.column, ubl.column, ubr.column));
+      const w1 = Math.floor(Math.max(utl.column, utr.column, ubl.column, ubr.column));
+
+      // Add an extra copy of the world on each side to properly render ImageSources and CanvasSources.
+      // Both sources draw outside the tile boundaries of the tile that "contains them" so we need
+      // to add extra copies on both sides in case offscreen tiles need to draw into on-screen ones.
+      const extraWorldCopy = 1;
+
+      for (let w = w0 - extraWorldCopy; w <= w1 + extraWorldCopy; w++) {
         if (w === 0) continue;
         result.push(new UnwrappedTileID(w, tileID));
       }
@@ -262,7 +271,7 @@ class Transform {
   }
 
   /**
-   * latitude to absolute x coord
+   * longitude to absolute x coord
    * @returns {number} pixel coordinate
    */
   lngX(lng) {
@@ -273,6 +282,7 @@ class Transform {
    * @returns {number} pixel coordinate
    */
   latY(lat) {
+    lat = clamp(lat, -this.maxValidLatitude, this.maxValidLatitude);
     const y = (180 / Math.PI) * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360));
     return ((180 - y) * this.worldSize) / 360;
   }