@mapwhit/tilerenderer 0.47.1

package/src/render/draw_symbol.js

@@ -0,0 +1,231 @@
+const drawCollisionDebug = require('./draw_collision_debug');
+
+const pixelsToTileUnits = require('../source/pixels_to_tile_units');
+const symbolProjection = require('../symbol/projection');
+const symbolSize = require('../symbol/symbol_size');
+const { mat4 } = require('@mapbox/gl-matrix');
+const identityMat4 = mat4.identity(new Float32Array(16));
+const properties = require('../style/style_layer/symbol_style_layer_properties');
+const symbolLayoutProperties = properties.layout;
+const StencilMode = require('../gl/stencil_mode');
+const DepthMode = require('../gl/depth_mode');
+const CullFaceMode = require('../gl/cull_face_mode');
+const { symbolIconUniformValues, symbolSDFUniformValues } = require('./program/symbol_program');
+
+module.exports = drawSymbols;
+
+function drawSymbols(painter, sourceCache, layer, coords) {
+  if (painter.renderPass !== 'translucent') return;
+
+  // Disable the stencil test so that labels aren't clipped to tile boundaries.
+  const stencilMode = StencilMode.disabled;
+  const colorMode = painter.colorModeForRenderPass();
+
+  if (layer.paint.get('icon-opacity').constantOr(1) !== 0) {
+    drawLayerSymbols(
+      painter,
+      sourceCache,
+      layer,
+      coords,
+      false,
+      layer.paint.get('icon-translate'),
+      layer.paint.get('icon-translate-anchor'),
+      layer.layout.get('icon-rotation-alignment'),
+      layer.layout.get('icon-pitch-alignment'),
+      layer.layout.get('icon-keep-upright'),
+      stencilMode,
+      colorMode
+    );
+  }
+
+  if (layer.paint.get('text-opacity').constantOr(1) !== 0) {
+    drawLayerSymbols(
+      painter,
+      sourceCache,
+      layer,
+      coords,
+      true,
+      layer.paint.get('text-translate'),
+      layer.paint.get('text-translate-anchor'),
+      layer.layout.get('text-rotation-alignment'),
+      layer.layout.get('text-pitch-alignment'),
+      layer.layout.get('text-keep-upright'),
+      stencilMode,
+      colorMode
+    );
+  }
+
+  if (sourceCache.map.showCollisionBoxes) {
+    drawCollisionDebug(painter, sourceCache, layer, coords);
+  }
+}
+
+function drawLayerSymbols(
+  painter,
+  sourceCache,
+  layer,
+  coords,
+  isText,
+  translate,
+  translateAnchor,
+  rotationAlignment,
+  pitchAlignment,
+  keepUpright,
+  stencilMode,
+  colorMode
+) {
+  const context = painter.context;
+  const gl = context.gl;
+  const tr = painter.transform;
+
+  const rotateWithMap = rotationAlignment === 'map';
+  const pitchWithMap = pitchAlignment === 'map';
+  const alongLine = rotateWithMap && layer.layout.get('symbol-placement') !== 'point';
+  // Line label rotation happens in `updateLineLabels`
+  // Pitched point labels are automatically rotated by the labelPlaneMatrix projection
+  // Unpitched point labels need to have their rotation applied after projection
+  const rotateInShader = rotateWithMap && !pitchWithMap && !alongLine;
+
+  const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+
+  let program;
+  let size;
+
+  for (const coord of coords) {
+    const tile = sourceCache.getTile(coord);
+    const bucket = tile.getBucket(layer);
+    if (!bucket) continue;
+    const buffers = isText ? bucket.text : bucket.icon;
+    if (!buffers || !buffers.segments.get().length) continue;
+    const programConfiguration = buffers.programConfigurations.get(layer.id);
+
+    const isSDF = isText || bucket.sdfIcons;
+
+    const sizeData = isText ? bucket.textSizeData : bucket.iconSizeData;
+
+    if (!program) {
+      program = painter.useProgram(isSDF ? 'symbolSDF' : 'symbolIcon', programConfiguration);
+      size = symbolSize.evaluateSizeForZoom(
+        sizeData,
+        tr.zoom,
+        symbolLayoutProperties.properties[isText ? 'text-size' : 'icon-size']
+      );
+    }
+
+    context.activeTexture.set(gl.TEXTURE0);
+
+    let texSize;
+    if (isText) {
+      tile.glyphAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+      texSize = tile.glyphAtlasTexture.size;
+    } else {
+      const iconScaled = layer.layout.get('icon-size').constantOr(0) !== 1 || bucket.iconsNeedLinear;
+      const iconTransformed = pitchWithMap || tr.pitch !== 0;
+
+      tile.imageAtlasTexture.bind(
+        isSDF || painter.options.rotating || painter.options.zooming || iconScaled || iconTransformed
+          ? gl.LINEAR
+          : gl.NEAREST,
+        gl.CLAMP_TO_EDGE
+      );
+
+      texSize = tile.imageAtlasTexture.size;
+    }
+
+    const s = pixelsToTileUnits(tile, 1, painter.transform.zoom);
+    const labelPlaneMatrix = symbolProjection.getLabelPlaneMatrix(
+      coord.posMatrix,
+      pitchWithMap,
+      rotateWithMap,
+      painter.transform,
+      s
+    );
+    const glCoordMatrix = symbolProjection.getGlCoordMatrix(
+      coord.posMatrix,
+      pitchWithMap,
+      rotateWithMap,
+      painter.transform,
+      s
+    );
+
+    if (alongLine) {
+      symbolProjection.updateLineLabels(
+        bucket,
+        coord.posMatrix,
+        painter,
+        isText,
+        labelPlaneMatrix,
+        glCoordMatrix,
+        pitchWithMap,
+        keepUpright
+      );
+    }
+
+    const matrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor);
+    const uLabelPlaneMatrix = alongLine ? identityMat4 : labelPlaneMatrix;
+    const uglCoordMatrix = painter.translatePosMatrix(glCoordMatrix, tile, translate, translateAnchor, true);
+
+    let uniformValues;
+    if (isSDF) {
+      const hasHalo = layer.paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
+
+      uniformValues = symbolSDFUniformValues(
+        sizeData.functionType,
+        size,
+        rotateInShader,
+        pitchWithMap,
+        painter,
+        matrix,
+        uLabelPlaneMatrix,
+        uglCoordMatrix,
+        isText,
+        texSize,
+        true
+      );
+
+      if (hasHalo) {
+        drawSymbolElements(buffers, layer, painter, program, depthMode, stencilMode, colorMode, uniformValues);
+      }
+
+      uniformValues['u_is_halo'] = 0;
+    } else {
+      uniformValues = symbolIconUniformValues(
+        sizeData.functionType,
+        size,
+        rotateInShader,
+        pitchWithMap,
+        painter,
+        matrix,
+        uLabelPlaneMatrix,
+        uglCoordMatrix,
+        isText,
+        texSize
+      );
+    }
+
+    drawSymbolElements(buffers, layer, painter, program, depthMode, stencilMode, colorMode, uniformValues);
+  }
+}
+
+function drawSymbolElements(buffers, layer, painter, program, depthMode, stencilMode, colorMode, uniformValues) {
+  const context = painter.context;
+  const gl = context.gl;
+  program.draw(
+    context,
+    gl.TRIANGLES,
+    depthMode,
+    stencilMode,
+    colorMode,
+    CullFaceMode.disabled,
+    uniformValues,
+    layer.id,
+    buffers.layoutVertexBuffer,
+    buffers.indexBuffer,
+    buffers.segments,
+    layer.paint,
+    painter.transform.zoom,
+    buffers.programConfigurations.get(layer.id),
+    buffers.dynamicLayoutVertexBuffer,
+    buffers.opacityVertexBuffer
+  );
+}

package/src/render/glyph_atlas.js

@@ -0,0 +1,55 @@
+const ShelfPack = require('@mapbox/shelf-pack');
+
+const { AlphaImage } = require('../util/image');
+const { register } = require('../util/web_worker_transfer');
+
+const padding = 1;
+
+class GlyphAtlas {
+  constructor(stacks) {
+    const positions = {};
+    const pack = new ShelfPack(0, 0, { autoResize: true });
+    const bins = [];
+
+    for (const stack in stacks) {
+      const glyphs = stacks[stack];
+      const stackPositions = (positions[stack] = {});
+
+      for (const id in glyphs) {
+        const src = glyphs[+id];
+        if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) continue;
+
+        const bin = {
+          x: 0,
+          y: 0,
+          w: src.bitmap.width + 2 * padding,
+          h: src.bitmap.height + 2 * padding
+        };
+        bins.push(bin);
+        stackPositions[id] = { rect: bin, metrics: src.metrics };
+      }
+    }
+
+    pack.pack(bins, { inPlace: true });
+
+    const image = new AlphaImage({ width: pack.w, height: pack.h });
+
+    for (const stack in stacks) {
+      const glyphs = stacks[stack];
+
+      for (const id in glyphs) {
+        const src = glyphs[+id];
+        if (!src || src.bitmap.width === 0 || src.bitmap.height === 0) continue;
+        const bin = positions[stack][id].rect;
+        AlphaImage.copy(src.bitmap, image, { x: 0, y: 0 }, { x: bin.x + padding, y: bin.y + padding }, src.bitmap);
+      }
+    }
+
+    this.image = image;
+    this.positions = positions;
+  }
+}
+
+register('GlyphAtlas', GlyphAtlas);
+
+module.exports = GlyphAtlas;

package/src/render/glyph_manager.js

@@ -0,0 +1,145 @@
+const loadGlyphRange = require('../style/load_glyph_range');
+
+const TinySDF = require('@mapbox/tiny-sdf');
+const isChar = require('../util/is_char_in_unicode_block');
+const { AlphaImage } = require('../util/image');
+const { callback } = require('../util/callback');
+
+class GlyphManager {
+  // exposed as statics to enable stubbing in unit tests
+  static loadGlyphRange = loadGlyphRange;
+  static TinySDF = TinySDF;
+
+  constructor(localIdeographFontFamily) {
+    this.localIdeographFontFamily = localIdeographFontFamily;
+    this.entries = {};
+  }
+
+  setGlyphsLoader(loader) {
+    this.loader = loader;
+  }
+
+  getGlyphs(glyphs, fn) {
+    return callback(fn, perform.call(this, glyphs));
+
+    async function perform(glyphs) {
+      const all = [];
+      for (const stack in glyphs) {
+        for (const id of glyphs[stack]) {
+          all.push(retrieveGlyph(this, { stack, id }));
+        }
+      }
+      const fetchedGlyphs = await Promise.all(all);
+      const result = {};
+      for (const { stack, id, glyph } of fetchedGlyphs) {
+        // Clone the glyph so that our own copy of its ArrayBuffer doesn't get transferred.
+        (result[stack] ??= {})[id] = cloneGlyph(glyph);
+      }
+      return result;
+
+      function cloneGlyph(glyph) {
+        if (glyph) {
+          return {
+            id: glyph.id,
+            bitmap: glyph.bitmap.clone(),
+            metrics: glyph.metrics
+          };
+        }
+      }
+
+      async function retrieveGlyph({ entries, loader, localIdeographFontFamily }, { stack, id }) {
+        const entry = (entries[stack] ??= { glyphs: {}, requests: {} });
+
+        let glyph = entry.glyphs[id];
+        if (glyph) {
+          return { stack, id, glyph };
+        }
+
+        glyph = tinySDF(localIdeographFontFamily, entry, stack, id);
+        if (glyph) {
+          return { stack, id, glyph };
+        }
+
+        const range = Math.floor(id / 256);
+        if (range * 256 > 65535) {
+          throw new Error('glyphs > 65535 not supported');
+        }
+
+        const promise = (entry.requests[range] ??= GlyphManager.loadGlyphRange(stack, range, loader));
+        const response = await promise;
+        if (response) {
+          for (const id in response) {
+            entry.glyphs[+id] = response[+id];
+          }
+        }
+        delete entry.requests[range];
+        return { stack, id, glyph: response?.[id] || null };
+      }
+    }
+  }
+}
+
+module.exports = GlyphManager;
+
+/**
+ * Creates a glyph descriptor for a character using TinySDF if the character belongs to
+ * the CJK Unified Ideographs or Hangul Syllables ranges.
+ *
+ * The function checks if the provided font family is valid and whether the Unicode code
+ * point (id) falls within the supported character ranges. If so, it creates or reuses a
+ * TinySDF instance from the given entry to generate a bitmap for the character.
+ *
+ * @param {string} family - The font family to be used for rendering the glyph.
+ * @param {Object} entry - An object containing glyph-related data. May store a cached TinySDF instance.
+ * @param {string} stack - A string representing the font style stack (e.g., "bold", "medium", "light") to determine the font weight.
+ * @param {number} id - The Unicode code point of the character to render.
+ * @returns {Object|undefined} An object with the glyph descriptor containing:
+ *   - id {number}: The Unicode code point.
+ *   - bitmap {AlphaImage}: An image instance created from the glyph bitmap.
+ *   - metrics {Object}: An object containing rendering metrics:
+ *       - width {number}: The width of the glyph.
+ *       - height {number}: The height of the glyph.
+ *       - left {number}: The left bearing for the glyph.
+ *       - top {number}: The top bearing for the glyph (used for vertical offset).
+ *       - advance {number}: The advance width for spacing the glyph.
+ *
+ * Returns undefined if no font family is provided or if the character is not within the supported ranges.
+ */
+function tinySDF(family, entry, stack, id) {
+  if (!family) {
+    return;
+  }
+
+  if (!isChar['CJK Unified Ideographs'](id) && !isChar['Hangul Syllables'](id)) {
+    return;
+  }
+
+  const tinySDF = getTinySDF();
+  return {
+    id,
+    bitmap: new AlphaImage({ width: 30, height: 30 }, tinySDF.draw(String.fromCharCode(id))),
+    metrics: {
+      width: 24,
+      height: 24,
+      left: 0,
+      top: -8,
+      advance: 24
+    }
+  };
+
+  function getTinySDF() {
+    const { tinySDF } = entry;
+    if (tinySDF) {
+      return tinySDF;
+    }
+    let fontWeight = '400';
+    if (/bold/i.test(stack)) {
+      fontWeight = '900';
+    } else if (/medium/i.test(stack)) {
+      fontWeight = '500';
+    } else if (/light/i.test(stack)) {
+      fontWeight = '200';
+    }
+    return (entry.tinySDF = new GlyphManager.TinySDF(24, 3, 8, 0.25, family, fontWeight));
+  }
+}

package/src/render/image_atlas.js

@@ -0,0 +1,97 @@
+const ShelfPack = require('@mapbox/shelf-pack');
+
+const { RGBAImage } = require('../util/image');
+const { register } = require('../util/web_worker_transfer');
+
+const padding = 1;
+
+class ImagePosition {
+  constructor(paddedRect, { pixelRatio }) {
+    this.paddedRect = paddedRect;
+    this.pixelRatio = pixelRatio;
+  }
+
+  get tl() {
+    return [this.paddedRect.x + padding, this.paddedRect.y + padding];
+  }
+
+  get br() {
+    return [this.paddedRect.x + this.paddedRect.w - padding, this.paddedRect.y + this.paddedRect.h - padding];
+  }
+
+  get tlbr() {
+    return this.tl.concat(this.br);
+  }
+
+  get displaySize() {
+    return [(this.paddedRect.w - padding * 2) / this.pixelRatio, (this.paddedRect.h - padding * 2) / this.pixelRatio];
+  }
+}
+
+class ImageAtlas {
+  constructor(icons, patterns) {
+    const iconPositions = {};
+    const patternPositions = {};
+    const pack = new ShelfPack(0, 0, { autoResize: true });
+    const bins = [];
+    for (const id in icons) {
+      const src = icons[id];
+      const bin = {
+        x: 0,
+        y: 0,
+        w: src.data.width + 2 * padding,
+        h: src.data.height + 2 * padding
+      };
+      bins.push(bin);
+      iconPositions[id] = new ImagePosition(bin, src);
+    }
+
+    for (const id in patterns) {
+      const src = patterns[id];
+      const bin = {
+        x: 0,
+        y: 0,
+        w: src.data.width + 2 * padding,
+        h: src.data.height + 2 * padding
+      };
+      bins.push(bin);
+      patternPositions[id] = new ImagePosition(bin, src);
+    }
+
+    pack.pack(bins, { inPlace: true });
+
+    const image = new RGBAImage({ width: pack.w, height: pack.h });
+
+    for (const id in icons) {
+      const src = icons[id];
+      const bin = iconPositions[id].paddedRect;
+      RGBAImage.copy(src.data, image, { x: 0, y: 0 }, { x: bin.x + padding, y: bin.y + padding }, src.data);
+    }
+
+    for (const id in patterns) {
+      const src = patterns[id];
+      const bin = patternPositions[id].paddedRect;
+      const x = bin.x + padding;
+      const y = bin.y + padding;
+      const w = src.data.width;
+      const h = src.data.height;
+
+      RGBAImage.copy(src.data, image, { x: 0, y: 0 }, { x: x, y: y }, src.data);
+      // Add 1 pixel wrapped padding on each side of the image.
+      RGBAImage.copy(src.data, image, { x: 0, y: h - 1 }, { x: x, y: y - 1 }, { width: w, height: 1 }); // T
+      RGBAImage.copy(src.data, image, { x: 0, y: 0 }, { x: x, y: y + h }, { width: w, height: 1 }); // B
+      RGBAImage.copy(src.data, image, { x: w - 1, y: 0 }, { x: x - 1, y: y }, { width: 1, height: h }); // L
+      RGBAImage.copy(src.data, image, { x: 0, y: 0 }, { x: x + w, y: y }, { width: 1, height: h }); // R
+    }
+
+    this.image = image;
+    this.iconPositions = iconPositions;
+    this.patternPositions = patternPositions;
+  }
+}
+
+ImageAtlas.ImagePosition = ImagePosition;
+module.exports = ImageAtlas;
+
+register('ImagePosition', ImagePosition);
+register('ImageAtlas', ImageAtlas);

package/src/render/image_manager.js

@@ -0,0 +1,183 @@
+const ShelfPack = require('@mapbox/shelf-pack');
+
+const { RGBAImage } = require('../util/image');
+const { ImagePosition } = require('./image_atlas');
+const Texture = require('./texture');
+const assert = require('assert');
+
+// When copied into the atlas texture, image data is padded by one pixel on each side. Icon
+// images are padded with fully transparent pixels, while pattern images are padded with a
+// copy of the image data wrapped from the opposite side. In both cases, this ensures the
+// correct behavior of GL_LINEAR texture sampling mode.
+const padding = 1;
+
+/*
+    ImageManager does two things:
+
+        1. Tracks requests for icon images from tile workers and sends responses when the requests are fulfilled.
+        2. Builds a texture atlas for pattern images.
+
+    These are disparate responsibilities and should eventually be handled by different classes. When we implement
+    data-driven support for `*-pattern`, we'll likely use per-bucket pattern atlases, and that would be a good time
+    to refactor this.
+*/
+class ImageManager {
+  constructor() {
+    this.images = {};
+    this.loaded = false;
+    this.requestors = [];
+
+    this.shelfPack = new ShelfPack(64, 64, { autoResize: true });
+    this.patterns = {};
+    this.atlasImage = new RGBAImage({ width: 64, height: 64 });
+    this.dirty = true;
+  }
+
+  isLoaded() {
+    return this.loaded;
+  }
+
+  setLoaded(loaded) {
+    if (this.loaded === loaded) {
+      return;
+    }
+
+    this.loaded = loaded;
+
+    if (loaded) {
+      for (const { ids, callback } of this.requestors) {
+        this._notify(ids, callback);
+      }
+      this.requestors = [];
+    }
+  }
+
+  getImage(id) {
+    return this.images[id];
+  }
+
+  addImage(id, image) {
+    assert(!this.images[id]);
+    this.images[id] = image;
+  }
+
+  removeImage(id) {
+    assert(this.images[id]);
+    delete this.images[id];
+
+    const pattern = this.patterns[id];
+    if (pattern) {
+      this.shelfPack.unref(pattern.bin);
+      delete this.patterns[id];
+    }
+  }
+
+  listImages() {
+    return Object.keys(this.images);
+  }
+
+  getImages(ids, callback) {
+    // If the sprite has been loaded, or if all the icon dependencies are already present
+    // (i.e. if they've been addeded via runtime styling), then notify the requestor immediately.
+    // Otherwise, delay notification until the sprite is loaded. At that point, if any of the
+    // dependencies are still unavailable, we'll just assume they are permanently missing.
+    let hasAllDependencies = true;
+    if (!this.isLoaded()) {
+      for (const id of ids) {
+        if (!this.images[id]) {
+          hasAllDependencies = false;
+        }
+      }
+    }
+    if (this.isLoaded() || hasAllDependencies) {
+      this._notify(ids, callback);
+    } else {
+      this.requestors.push({ ids, callback });
+    }
+  }
+
+  _notify(ids, callback) {
+    const response = {};
+
+    for (const id of ids) {
+      const image = this.images[id];
+      if (image) {
+        // Clone the image so that our own copy of its ArrayBuffer doesn't get transferred.
+        response[id] = {
+          data: image.data.clone(),
+          pixelRatio: image.pixelRatio,
+          sdf: image.sdf
+        };
+      }
+    }
+
+    callback(null, response);
+  }
+
+  // Pattern stuff
+
+  getPixelSize() {
+    return {
+      width: this.shelfPack.w,
+      height: this.shelfPack.h
+    };
+  }
+
+  getPattern(id) {
+    const pattern = this.patterns[id];
+    if (pattern) {
+      return pattern.position;
+    }
+
+    const image = this.getImage(id);
+    if (!image) {
+      return null;
+    }
+
+    const width = image.data.width + padding * 2;
+    const height = image.data.height + padding * 2;
+
+    const bin = this.shelfPack.packOne(width, height);
+    if (!bin) {
+      return null;
+    }
+
+    this.atlasImage.resize(this.getPixelSize());
+
+    const src = image.data;
+    const dst = this.atlasImage;
+
+    const x = bin.x + padding;
+    const y = bin.y + padding;
+    const w = src.width;
+    const h = src.height;
+
+    RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x, y }, { width: w, height: h });
+
+    // Add 1 pixel wrapped padding on each side of the image.
+    RGBAImage.copy(src, dst, { x: 0, y: h - 1 }, { x: x, y: y - 1 }, { width: w, height: 1 }); // T
+    RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x: x, y: y + h }, { width: w, height: 1 }); // B
+    RGBAImage.copy(src, dst, { x: w - 1, y: 0 }, { x: x - 1, y: y }, { width: 1, height: h }); // L
+    RGBAImage.copy(src, dst, { x: 0, y: 0 }, { x: x + w, y: y }, { width: 1, height: h }); // R
+
+    this.dirty = true;
+
+    const position = new ImagePosition(bin, image);
+    this.patterns[id] = { bin, position };
+    return position;
+  }
+
+  bind(context) {
+    const gl = context.gl;
+    if (!this.atlasTexture) {
+      this.atlasTexture = new Texture(context, this.atlasImage, gl.RGBA);
+    } else if (this.dirty) {
+      this.atlasTexture.update(this.atlasImage);
+      this.dirty = false;
+    }
+
+    this.atlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+  }
+}
+
+module.exports = ImageManager;