@mapwhit/tilerenderer 0.47.1

package/src/render/program/symbol_program.js

@@ -0,0 +1,112 @@
+const { Uniform1i, Uniform1f, Uniform2f, UniformMatrix4f } = require('../uniform_binding');
+
+const symbolIconUniforms = (context, locations) => ({
+  u_is_size_zoom_constant: new Uniform1i(context, locations.u_is_size_zoom_constant),
+  u_is_size_feature_constant: new Uniform1i(context, locations.u_is_size_feature_constant),
+  u_size_t: new Uniform1f(context, locations.u_size_t),
+  u_size: new Uniform1f(context, locations.u_size),
+  u_camera_to_center_distance: new Uniform1f(context, locations.u_camera_to_center_distance),
+  u_pitch: new Uniform1f(context, locations.u_pitch),
+  u_rotate_symbol: new Uniform1i(context, locations.u_rotate_symbol),
+  u_aspect_ratio: new Uniform1f(context, locations.u_aspect_ratio),
+  u_fade_change: new Uniform1f(context, locations.u_fade_change),
+  u_matrix: new UniformMatrix4f(context, locations.u_matrix),
+  u_label_plane_matrix: new UniformMatrix4f(context, locations.u_label_plane_matrix),
+  u_gl_coord_matrix: new UniformMatrix4f(context, locations.u_gl_coord_matrix),
+  u_is_text: new Uniform1f(context, locations.u_is_text),
+  u_pitch_with_map: new Uniform1i(context, locations.u_pitch_with_map),
+  u_texsize: new Uniform2f(context, locations.u_texsize),
+  u_texture: new Uniform1i(context, locations.u_texture)
+});
+
+const symbolSDFUniforms = (context, locations) => ({
+  u_is_size_zoom_constant: new Uniform1i(context, locations.u_is_size_zoom_constant),
+  u_is_size_feature_constant: new Uniform1i(context, locations.u_is_size_feature_constant),
+  u_size_t: new Uniform1f(context, locations.u_size_t),
+  u_size: new Uniform1f(context, locations.u_size),
+  u_camera_to_center_distance: new Uniform1f(context, locations.u_camera_to_center_distance),
+  u_pitch: new Uniform1f(context, locations.u_pitch),
+  u_rotate_symbol: new Uniform1i(context, locations.u_rotate_symbol),
+  u_aspect_ratio: new Uniform1f(context, locations.u_aspect_ratio),
+  u_fade_change: new Uniform1f(context, locations.u_fade_change),
+  u_matrix: new UniformMatrix4f(context, locations.u_matrix),
+  u_label_plane_matrix: new UniformMatrix4f(context, locations.u_label_plane_matrix),
+  u_gl_coord_matrix: new UniformMatrix4f(context, locations.u_gl_coord_matrix),
+  u_is_text: new Uniform1f(context, locations.u_is_text),
+  u_pitch_with_map: new Uniform1i(context, locations.u_pitch_with_map),
+  u_texsize: new Uniform2f(context, locations.u_texsize),
+  u_texture: new Uniform1i(context, locations.u_texture),
+  u_gamma_scale: new Uniform1f(context, locations.u_gamma_scale),
+  u_is_halo: new Uniform1f(context, locations.u_is_halo)
+});
+
+const symbolIconUniformValues = (
+  functionType,
+  size,
+  rotateInShader,
+  pitchWithMap,
+  painter,
+  matrix,
+  labelPlaneMatrix,
+  glCoordMatrix,
+  isText,
+  texSize
+) => {
+  const { transform } = painter;
+
+  return {
+    u_is_size_zoom_constant: +(functionType === 'constant' || functionType === 'source'),
+    u_is_size_feature_constant: +(functionType === 'constant' || functionType === 'camera'),
+    u_size_t: size ? size.uSizeT : 0,
+    u_size: size ? size.uSize : 0,
+    u_camera_to_center_distance: transform.cameraToCenterDistance,
+    u_pitch: (transform.pitch / 360) * 2 * Math.PI,
+    u_rotate_symbol: +rotateInShader,
+    u_aspect_ratio: transform.width / transform.height,
+    u_fade_change: painter.options.fadeDuration ? painter.symbolFadeChange : 1,
+    u_matrix: matrix,
+    u_label_plane_matrix: labelPlaneMatrix,
+    u_gl_coord_matrix: glCoordMatrix,
+    u_is_text: +isText,
+    u_pitch_with_map: +pitchWithMap,
+    u_texsize: texSize,
+    u_texture: 0
+  };
+};
+
+const symbolSDFUniformValues = (
+  functionType,
+  size,
+  rotateInShader,
+  pitchWithMap,
+  painter,
+  matrix,
+  labelPlaneMatrix,
+  glCoordMatrix,
+  isText,
+  texSize,
+  isHalo
+) => {
+  const { transform } = painter;
+
+  return Object.assign(
+    symbolIconUniformValues(
+      functionType,
+      size,
+      rotateInShader,
+      pitchWithMap,
+      painter,
+      matrix,
+      labelPlaneMatrix,
+      glCoordMatrix,
+      isText,
+      texSize
+    ),
+    {
+      u_gamma_scale: pitchWithMap ? Math.cos(transform._pitch) * transform.cameraToCenterDistance : 1,
+      u_is_halo: +isHalo
+    }
+  );
+};
+
+module.exports = { symbolIconUniforms, symbolSDFUniforms, symbolIconUniformValues, symbolSDFUniformValues };

package/src/render/program.js

@@ -0,0 +1,133 @@
+const browser = require('../util/browser');
+
+const shaders = require('../shaders');
+const assert = require('assert');
+const VertexArrayObject = require('./vertex_array_object');
+
+class Program {
+  constructor(context, source, configuration, fixedUniforms, showOverdrawInspector) {
+    const gl = context.gl;
+    this.program = gl.createProgram();
+
+    const defines = configuration.defines().concat(`#define DEVICE_PIXEL_RATIO ${browser.devicePixelRatio.toFixed(1)}`);
+    if (showOverdrawInspector) {
+      defines.push('#define OVERDRAW_INSPECTOR;');
+    }
+
+    const fragmentSource = defines.concat(shaders.prelude.fragmentSource, source.fragmentSource).join('\n');
+    const vertexSource = defines.concat(shaders.prelude.vertexSource, source.vertexSource).join('\n');
+
+    const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+    gl.shaderSource(fragmentShader, fragmentSource);
+    gl.compileShader(fragmentShader);
+    assert(gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS), gl.getShaderInfoLog(fragmentShader));
+    gl.attachShader(this.program, fragmentShader);
+
+    const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+    gl.shaderSource(vertexShader, vertexSource);
+    gl.compileShader(vertexShader);
+    assert(gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS), gl.getShaderInfoLog(vertexShader));
+    gl.attachShader(this.program, vertexShader);
+
+    // Manually bind layout attributes in the order defined by their
+    // ProgramInterface so that we don't dynamically link an unused
+    // attribute at position 0, which can cause rendering to fail for an
+    // entire layer (see #4607, #4728)
+    const layoutAttributes = configuration.layoutAttributes || [];
+    for (let i = 0; i < layoutAttributes.length; i++) {
+      gl.bindAttribLocation(this.program, i, layoutAttributes[i].name);
+    }
+
+    gl.linkProgram(this.program);
+    assert(gl.getProgramParameter(this.program, gl.LINK_STATUS), gl.getProgramInfoLog(this.program));
+
+    this.numAttributes = gl.getProgramParameter(this.program, gl.ACTIVE_ATTRIBUTES);
+
+    this.attributes = {};
+    const uniformLocations = {};
+
+    for (let i = 0; i < this.numAttributes; i++) {
+      const attribute = gl.getActiveAttrib(this.program, i);
+      if (attribute) {
+        this.attributes[attribute.name] = gl.getAttribLocation(this.program, attribute.name);
+      }
+    }
+
+    const numUniforms = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
+    for (let i = 0; i < numUniforms; i++) {
+      const uniform = gl.getActiveUniform(this.program, i);
+      if (uniform) {
+        uniformLocations[uniform.name] = gl.getUniformLocation(this.program, uniform.name);
+      }
+    }
+
+    this.fixedUniforms = fixedUniforms(context, uniformLocations);
+    this.binderUniforms = configuration.getUniforms(context, uniformLocations);
+  }
+
+  draw(
+    context,
+    drawMode,
+    depthMode,
+    stencilMode,
+    colorMode,
+    cullFaceMode,
+    uniformValues,
+    layerID,
+    layoutVertexBuffer,
+    indexBuffer,
+    segments,
+    currentProperties,
+    zoom,
+    configuration,
+    dynamicLayoutBuffer,
+    dynamicLayoutBuffer2
+  ) {
+    const gl = context.gl;
+
+    context.program.set(this.program);
+    context.setDepthMode(depthMode);
+    context.setStencilMode(stencilMode);
+    context.setColorMode(colorMode);
+    context.setCullFace(cullFaceMode);
+
+    for (const name in this.fixedUniforms) {
+      this.fixedUniforms[name].set(uniformValues[name]);
+    }
+
+    if (configuration) {
+      configuration.setUniforms(context, this.binderUniforms, currentProperties, { zoom });
+    }
+
+    const primitiveSize = {
+      [gl.LINES]: 2,
+      [gl.TRIANGLES]: 3,
+      [gl.LINE_STRIP]: 1
+    }[drawMode];
+
+    for (const segment of segments.get()) {
+      const vaos = segment.vaos || (segment.vaos = {});
+      const vao = vaos[layerID] || (vaos[layerID] = new VertexArrayObject());
+
+      vao.bind(
+        context,
+        this,
+        layoutVertexBuffer,
+        configuration ? configuration.getPaintVertexBuffers() : [],
+        indexBuffer,
+        segment.vertexOffset,
+        dynamicLayoutBuffer,
+        dynamicLayoutBuffer2
+      );
+
+      gl.drawElements(
+        drawMode,
+        segment.primitiveLength * primitiveSize,
+        gl.UNSIGNED_SHORT,
+        segment.primitiveOffset * primitiveSize * 2
+      );
+    }
+  }
+}
+
+module.exports = Program;

package/src/render/texture.js

@@ -0,0 +1,88 @@
+class Texture {
+  constructor(context, image, format, options) {
+    this.context = context;
+    this.format = format;
+    this.texture = context.gl.createTexture();
+    this.update(image, options);
+  }
+
+  update(image, options) {
+    const { width, height } = image;
+    const resize = !this.size || this.size[0] !== width || this.size[1] !== height;
+    const { context } = this;
+    const { gl } = context;
+
+    this.useMipmap = Boolean(options?.useMipmap);
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+    if (resize) {
+      this.size = [width, height];
+
+      context.pixelStoreUnpack.set(1);
+
+      if (this.format === gl.RGBA && (!options || options.premultiply !== false)) {
+        context.pixelStoreUnpackPremultiplyAlpha.set(true);
+      }
+
+      if (
+        image instanceof HTMLImageElement ||
+        image instanceof HTMLCanvasElement ||
+        image instanceof HTMLVideoElement ||
+        image instanceof ImageData
+      ) {
+        gl.texImage2D(gl.TEXTURE_2D, 0, this.format, this.format, gl.UNSIGNED_BYTE, image);
+      } else {
+        gl.texImage2D(gl.TEXTURE_2D, 0, this.format, width, height, 0, this.format, gl.UNSIGNED_BYTE, image.data);
+      }
+    } else {
+      if (
+        image instanceof HTMLImageElement ||
+        image instanceof HTMLCanvasElement ||
+        image instanceof HTMLVideoElement ||
+        image instanceof ImageData
+      ) {
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, image);
+      } else {
+        gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, image.data);
+      }
+    }
+
+    if (this.useMipmap && this.isSizePowerOfTwo()) {
+      gl.generateMipmap(gl.TEXTURE_2D);
+    }
+  }
+
+  bind(filter, wrap, minFilter) {
+    const { context } = this;
+    const { gl } = context;
+    gl.bindTexture(gl.TEXTURE_2D, this.texture);
+
+    if (minFilter === gl.LINEAR_MIPMAP_NEAREST && !this.isSizePowerOfTwo()) {
+      minFilter = gl.LINEAR;
+    }
+
+    if (filter !== this.filter) {
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, minFilter || filter);
+      this.filter = filter;
+    }
+
+    if (wrap !== this.wrap) {
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap);
+      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap);
+      this.wrap = wrap;
+    }
+  }
+
+  isSizePowerOfTwo() {
+    return this.size[0] === this.size[1] && (Math.log(this.size[0]) / Math.LN2) % 1 === 0;
+  }
+
+  destroy() {
+    const { gl } = this.context;
+    gl.deleteTexture(this.texture);
+    this.texture = null;
+  }
+}
+
+module.exports = Texture;

package/src/render/tile_mask.js

@@ -0,0 +1,108 @@
+const { OverscaledTileID, CanonicalTileID } = require('../source/tile_id');
+
+// Updates the TileMasks for all renderable tiles. A TileMask describes all regions
+// within that tile that are *not* covered by other renderable tiles.
+// Example: renderableTiles in our list are 2/1/3, 3/3/6, and 4/5/13. The schematic for creating the
+// TileMask for 2/1/3 looks like this:
+//
+//    ┌────────┬────────┬─────────────────┐
+//    │        │        │#################│
+//    │ 4/4/12 │ 4/5/12 │#################│
+//    │        │        │#################│
+//    ├──────3/2/6──────┤#####3/3/6#######│
+//    │        │########│#################│
+//    │ 4/4/13 │#4/5/13#│#################│
+//    │        │########│#################│
+//    ├────────┴──────2/1/3───────────────┤
+//    │                 │                 │
+//    │                 │                 │
+//    │                 │                 │
+//    │      3/2/7      │      3/3/7      │
+//    │                 │                 │
+//    │                 │                 │
+//    │                 │                 │
+//    └─────────────────┴─────────────────┘
+//
+// The TileMask for 2/1/3 thus consists of the tiles 4/4/12, 4/5/12, 4/4/13, 3/2/7, and 3/3/7,
+// but it does *not* include 4/5/13, and 3/3/6, since these are other renderableTiles.
+// A TileMask always contains TileIDs *relative* to the tile it is generated for, so 2/1/3 is
+// "subtracted" from these TileIDs. The final TileMask for 2/1/3 will thus be:
+//
+//    ┌────────┬────────┬─────────────────┐
+//    │        │        │#################│
+//    │ 2/0/0  │ 2/1/0  │#################│
+//    │        │        │#################│
+//    ├────────┼────────┤#################│
+//    │        │########│#################│
+//    │ 2/0/1  │########│#################│
+//    │        │########│#################│
+//    ├────────┴────────┼─────────────────┤
+//    │                 │                 │
+//    │                 │                 │
+//    │                 │                 │
+//    │      1/0/1      │      1/1/1      │
+//    │                 │                 │
+//    │                 │                 │
+//    │                 │                 │
+//    └─────────────────┴─────────────────┘
+//
+// Only other renderable tiles that are *children* of the tile we are generating the mask for will
+// be considered. For example, adding TileID 4/8/13 to renderableTiles won't affect the TileMask for
+// 2/1/3, since it is not a descendant of it.
+
+module.exports = function (renderableTiles, context) {
+  const sortedRenderables = renderableTiles.sort((a, b) => {
+    return a.tileID.isLessThan(b.tileID) ? -1 : b.tileID.isLessThan(a.tileID) ? 1 : 0;
+  });
+
+  for (let i = 0; i < sortedRenderables.length; i++) {
+    const mask = {};
+    const tile = sortedRenderables[i];
+    const childArray = sortedRenderables.slice(i + 1);
+    // Try to add all remaining ids as children. We sorted the tile list
+    // by z earlier, so all preceding items cannot be children of the current
+    // tile. We also compute the lower bound of the next wrap, because items of the next wrap
+    // can never be children of the current wrap.
+
+    computeTileMasks(
+      tile.tileID.wrapped(),
+      tile.tileID,
+      childArray,
+      new OverscaledTileID(0, tile.tileID.wrap + 1, 0, 0, 0),
+      mask
+    );
+    tile.setMask(mask, context);
+  }
+};
+
+function computeTileMasks(rootTile, ref, childArray, lowerBound, mask) {
+  // If the reference or any of its children is found in the list, we need to recurse.
+  for (let i = 0; i < childArray.length; i++) {
+    const childTile = childArray[i];
+    // childTile is from a larger wrap than the rootTile so it cannot be a child tile
+    if (lowerBound.isLessThan(childTile.tileID)) break;
+    // The current tile is masked out, so we don't need to add them to the mask set.
+    if (ref.key === childTile.tileID.key) {
+      return;
+    }
+    if (childTile.tileID.isChildOf(ref)) {
+      // There's at least one child tile that is masked out, so recursively descend
+      const children = ref.children(Number.POSITIVE_INFINITY);
+      for (let j = 0; j < children.length; j++) {
+        const child = children[j];
+        computeTileMasks(rootTile, child, childArray.slice(i), lowerBound, mask);
+      }
+      return;
+    }
+  }
+  // We couldn't find a child, so it's definitely a masked part.
+  // Compute the difference between the root tile ID and the reference tile ID, since TileMask
+  // elements are always relative (see below for explanation).
+  const diffZ = ref.overscaledZ - rootTile.overscaledZ;
+  const maskTileId = new CanonicalTileID(
+    diffZ,
+    ref.canonical.x - (rootTile.canonical.x << diffZ),
+    ref.canonical.y - (rootTile.canonical.y << diffZ)
+  );
+  mask[maskTileId.key] = mask[maskTileId.key] || maskTileId;
+}

package/src/render/uniform_binding.js

@@ -0,0 +1,129 @@
+const Color = require('../style-spec/util/color');
+
+class Uniform {
+  constructor(context, location) {
+    this.gl = context.gl;
+    this.location = location;
+  }
+}
+
+class Uniform1i extends Uniform {
+  constructor(context, location) {
+    super(context, location);
+    this.current = 0;
+  }
+
+  set(v) {
+    if (this.current !== v) {
+      this.current = v;
+      this.gl.uniform1i(this.location, v);
+    }
+  }
+}
+
+class Uniform1f extends Uniform {
+  constructor(context, location) {
+    super(context, location);
+    this.current = 0;
+  }
+
+  set(v) {
+    if (this.current !== v) {
+      this.current = v;
+      this.gl.uniform1f(this.location, v);
+    }
+  }
+}
+
+class Uniform2f extends Uniform {
+  constructor(context, location) {
+    super(context, location);
+    this.current = [0, 0];
+  }
+
+  set(v) {
+    if (v[0] !== this.current[0] || v[1] !== this.current[1]) {
+      this.current = v;
+      this.gl.uniform2f(this.location, v[0], v[1]);
+    }
+  }
+}
+
+class Uniform3f extends Uniform {
+  constructor(context, location) {
+    super(context, location);
+    this.current = [0, 0, 0];
+  }
+
+  set(v) {
+    if (v[0] !== this.current[0] || v[1] !== this.current[1] || v[2] !== this.current[2]) {
+      this.current = v;
+      this.gl.uniform3f(this.location, v[0], v[1], v[2]);
+    }
+  }
+}
+
+class Uniform4f extends Uniform {
+  constructor(context, location) {
+    super(context, location);
+    this.current = [0, 0, 0, 0];
+  }
+
+  set(v) {
+    if (v[0] !== this.current[0] || v[1] !== this.current[1] || v[2] !== this.current[2] || v[3] !== this.current[3]) {
+      this.current = v;
+      this.gl.uniform4f(this.location, v[0], v[1], v[2], v[3]);
+    }
+  }
+}
+
+class UniformColor extends Uniform {
+  constructor(context, location) {
+    super(context, location);
+    this.current = Color.transparent;
+  }
+
+  set(v) {
+    if (v.r !== this.current.r || v.g !== this.current.g || v.b !== this.current.b || v.a !== this.current.a) {
+      this.current = v;
+      this.gl.uniform4f(this.location, v.r, v.g, v.b, v.a);
+    }
+  }
+}
+
+const emptyMat4 = new Float32Array(16);
+class UniformMatrix4f extends Uniform {
+  constructor(context, location) {
+    super(context, location);
+    this.current = emptyMat4;
+  }
+
+  set(v) {
+    // The vast majority of matrix comparisons that will trip this set
+    // happen at i=12 or i=0, so we check those first to avoid lots of
+    // unnecessary iteration:
+    if (v[12] !== this.current[12] || v[0] !== this.current[0]) {
+      this.current = v;
+      this.gl.uniformMatrix4fv(this.location, false, v);
+      return;
+    }
+    for (let i = 1; i < 16; i++) {
+      if (v[i] !== this.current[i]) {
+        this.current = v;
+        this.gl.uniformMatrix4fv(this.location, false, v);
+        break;
+      }
+    }
+  }
+}
+
+module.exports = {
+  Uniform,
+  Uniform1i,
+  Uniform1f,
+  Uniform2f,
+  Uniform3f,
+  Uniform4f,
+  UniformColor,
+  UniformMatrix4f
+};