@mapwhit/tilerenderer 0.47.1

package/src/render/draw_heatmap.js

@@ -0,0 +1,159 @@
+const Texture = require('./texture');
+const Color = require('../style-spec/util/color');
+const DepthMode = require('../gl/depth_mode');
+const StencilMode = require('../gl/stencil_mode');
+const ColorMode = require('../gl/color_mode');
+const CullFaceMode = require('../gl/cull_face_mode');
+const { heatmapUniformValues, heatmapTextureUniformValues } = require('./program/heatmap_program');
+
+module.exports = drawHeatmap;
+
+function drawHeatmap(painter, sourceCache, layer, coords) {
+  if (layer.paint.get('heatmap-opacity') === 0) {
+    return;
+  }
+
+  if (painter.renderPass === 'offscreen') {
+    const context = painter.context;
+    const gl = context.gl;
+
+    const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+    // Allow kernels to be drawn across boundaries, so that
+    // large kernels are not clipped to tiles
+    const stencilMode = StencilMode.disabled;
+    // Turn on additive blending for kernels, which is a key aspect of kernel density estimation formula
+    const colorMode = new ColorMode([gl.ONE, gl.ONE], Color.transparent, [true, true, true, true]);
+
+    bindFramebuffer(context, painter, layer);
+
+    context.clear({ color: Color.transparent });
+
+    for (let i = 0; i < coords.length; i++) {
+      const coord = coords[i];
+
+      // Skip tiles that have uncovered parents to avoid flickering; we don't need
+      // to use complex tile masking here because the change between zoom levels is subtle,
+      // so it's fine to simply render the parent until all its 4 children are loaded
+      if (sourceCache.hasRenderableParent(coord)) continue;
+
+      const tile = sourceCache.getTile(coord);
+      const bucket = tile.getBucket(layer);
+      if (!bucket) continue;
+
+      const programConfiguration = bucket.programConfigurations.get(layer.id);
+      const program = painter.useProgram('heatmap', programConfiguration);
+      const { zoom } = painter.transform;
+
+      program.draw(
+        context,
+        gl.TRIANGLES,
+        depthMode,
+        stencilMode,
+        colorMode,
+        CullFaceMode.disabled,
+        heatmapUniformValues(coord.posMatrix, tile, zoom, layer.paint.get('heatmap-intensity')),
+        layer.id,
+        bucket.layoutVertexBuffer,
+        bucket.indexBuffer,
+        bucket.segments,
+        layer.paint,
+        painter.transform.zoom,
+        programConfiguration
+      );
+    }
+
+    context.viewport.set([0, 0, painter.width, painter.height]);
+  } else if (painter.renderPass === 'translucent') {
+    painter.context.setColorMode(painter.colorModeForRenderPass());
+    renderTextureToMap(painter, layer);
+  }
+}
+
+function bindFramebuffer(context, painter, layer) {
+  const gl = context.gl;
+  context.activeTexture.set(gl.TEXTURE1);
+
+  // Use a 4x downscaled screen texture for better performance
+  context.viewport.set([0, 0, painter.width / 4, painter.height / 4]);
+
+  let fbo = layer.heatmapFbo;
+
+  if (!fbo) {
+    const texture = gl.createTexture();
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+
+    fbo = layer.heatmapFbo = context.createFramebuffer(painter.width / 4, painter.height / 4);
+
+    bindTextureToFramebuffer(context, painter, texture, fbo);
+  } else {
+    gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+    context.bindFramebuffer.set(fbo.framebuffer);
+  }
+}
+
+function bindTextureToFramebuffer(context, painter, texture, fbo) {
+  const gl = context.gl;
+  // Use the higher precision half-float texture where available (producing much smoother looking heatmaps);
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.RGBA,
+    painter.width / 4,
+    painter.height / 4,
+    0,
+    gl.RGBA,
+    context.extTextureHalfFloat ? context.extTextureHalfFloat.HALF_FLOAT_OES : gl.UNSIGNED_BYTE,
+    null
+  );
+
+  fbo.colorAttachment.set(texture);
+
+  // If using half-float texture as a render target is not supported, fall back to a low precision texture
+  if (context.extTextureHalfFloat && gl.checkFramebufferStatus(gl.FRAMEBUFFER) !== gl.FRAMEBUFFER_COMPLETE) {
+    context.extTextureHalfFloat = null;
+    fbo.colorAttachment.setDirty();
+    bindTextureToFramebuffer(context, painter, texture, fbo);
+  }
+}
+
+function renderTextureToMap(painter, layer) {
+  const context = painter.context;
+  const gl = context.gl;
+
+  // Here we bind two different textures from which we'll sample in drawing
+  // heatmaps: the kernel texture, prepared in the offscreen pass, and a
+  // color ramp texture.
+  const fbo = layer.heatmapFbo;
+  if (!fbo) return;
+  context.activeTexture.set(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+
+  context.activeTexture.set(gl.TEXTURE1);
+  let colorRampTexture = layer.colorRampTexture;
+  if (!colorRampTexture) {
+    colorRampTexture = layer.colorRampTexture = new Texture(context, layer.colorRamp, gl.RGBA);
+  }
+  colorRampTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+  painter
+    .useProgram('heatmapTexture')
+    .draw(
+      context,
+      gl.TRIANGLES,
+      DepthMode.disabled,
+      StencilMode.disabled,
+      painter.colorModeForRenderPass(),
+      CullFaceMode.disabled,
+      heatmapTextureUniformValues(painter, layer, 0, 1),
+      layer.id,
+      painter.viewportBuffer,
+      painter.quadTriangleIndexBuffer,
+      painter.viewportSegments,
+      layer.paint,
+      painter.transform.zoom
+    );
+}

package/src/render/draw_hillshade.js

@@ -0,0 +1,144 @@
+const Texture = require('./texture');
+const StencilMode = require('../gl/stencil_mode');
+const DepthMode = require('../gl/depth_mode');
+const CullFaceMode = require('../gl/cull_face_mode');
+const { hillshadeUniformValues, hillshadeUniformPrepareValues } = require('./program/hillshade_program');
+
+module.exports = drawHillshade;
+
+function drawHillshade(painter, sourceCache, layer, tileIDs) {
+  if (painter.renderPass !== 'offscreen' && painter.renderPass !== 'translucent') return;
+
+  const context = painter.context;
+  const sourceMaxZoom = sourceCache.getSource().maxzoom;
+
+  const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+  const stencilMode = StencilMode.disabled;
+  const colorMode = painter.colorModeForRenderPass();
+
+  for (const tileID of tileIDs) {
+    const tile = sourceCache.getTile(tileID);
+    if (tile.needsHillshadePrepare && painter.renderPass === 'offscreen') {
+      prepareHillshade(painter, tile, layer, sourceMaxZoom, depthMode, stencilMode, colorMode);
+    } else if (painter.renderPass === 'translucent') {
+      renderHillshade(painter, tile, layer, depthMode, stencilMode, colorMode);
+    }
+  }
+
+  context.viewport.set([0, 0, painter.width, painter.height]);
+}
+
+function renderHillshade(painter, tile, layer, depthMode, stencilMode, colorMode) {
+  const context = painter.context;
+  const gl = context.gl;
+  const fbo = tile.fbo;
+  if (!fbo) return;
+
+  const program = painter.useProgram('hillshade');
+
+  context.activeTexture.set(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, fbo.colorAttachment.get());
+
+  const uniformValues = hillshadeUniformValues(painter, tile, layer);
+
+  if (tile.maskedBoundsBuffer && tile.maskedIndexBuffer && tile.segments) {
+    program.draw(
+      context,
+      gl.TRIANGLES,
+      depthMode,
+      stencilMode,
+      colorMode,
+      CullFaceMode.disabled,
+      uniformValues,
+      layer.id,
+      tile.maskedBoundsBuffer,
+      tile.maskedIndexBuffer,
+      tile.segments
+    );
+  } else {
+    program.draw(
+      context,
+      gl.TRIANGLES,
+      depthMode,
+      stencilMode,
+      colorMode,
+      CullFaceMode.disabled,
+      uniformValues,
+      layer.id,
+      painter.rasterBoundsBuffer,
+      painter.quadTriangleIndexBuffer,
+      painter.rasterBoundsSegments
+    );
+  }
+}
+
+// hillshade rendering is done in two steps. the prepare step first calculates the slope of the terrain in the x and y
+// directions for each pixel, and saves those values to a framebuffer texture in the r and g channels.
+function prepareHillshade(painter, tile, layer, sourceMaxZoom, depthMode, stencilMode, colorMode) {
+  const context = painter.context;
+  const gl = context.gl;
+  // decode rgba levels by using integer overflow to convert each Uint32Array element -> 4 Uint8Array elements.
+  // ex.
+  // Uint32:
+  // base 10 - 67308
+  // base 2 - 0000 0000 0000 0001 0000 0110 1110 1100
+  //
+  // Uint8:
+  // base 10 - 0, 1, 6, 236 (this order is reversed in the resulting array via the overflow.
+  // first 8 bits represent 236, so the r component of the texture pixel will be 236 etc.)
+  // base 2 - 0000 0000, 0000 0001, 0000 0110, 1110 1100
+  if (tile.dem?.data) {
+    const tileSize = tile.dem.dim;
+    const textureStride = tile.dem.stride;
+
+    const pixelData = tile.dem.getPixels();
+    context.activeTexture.set(gl.TEXTURE1);
+
+    // if UNPACK_PREMULTIPLY_ALPHA_WEBGL is set to true prior to drawHillshade being called
+    // tiles will appear blank, because as you can see above the alpha value for these textures
+    // is always 0
+    context.pixelStoreUnpackPremultiplyAlpha.set(false);
+    tile.demTexture = tile.demTexture || painter.getTileTexture(textureStride);
+    if (tile.demTexture) {
+      const demTexture = tile.demTexture;
+      demTexture.update(pixelData, { premultiply: false });
+      demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
+    } else {
+      tile.demTexture = new Texture(context, pixelData, gl.RGBA, { premultiply: false });
+      tile.demTexture.bind(gl.NEAREST, gl.CLAMP_TO_EDGE);
+    }
+
+    context.activeTexture.set(gl.TEXTURE0);
+
+    let fbo = tile.fbo;
+
+    if (!fbo) {
+      const renderTexture = new Texture(context, { width: tileSize, height: tileSize, data: null }, gl.RGBA);
+      renderTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+      fbo = tile.fbo = context.createFramebuffer(tileSize, tileSize);
+      fbo.colorAttachment.set(renderTexture.texture);
+    }
+
+    context.bindFramebuffer.set(fbo.framebuffer);
+    context.viewport.set([0, 0, tileSize, tileSize]);
+
+    painter
+      .useProgram('hillshadePrepare')
+      .draw(
+        context,
+        gl.TRIANGLES,
+        depthMode,
+        stencilMode,
+        colorMode,
+        CullFaceMode.disabled,
+        hillshadeUniformPrepareValues(tile, sourceMaxZoom),
+        layer.id,
+        painter.rasterBoundsBuffer,
+        painter.quadTriangleIndexBuffer,
+        painter.rasterBoundsSegments
+      );
+
+    tile.needsHillshadePrepare = false;
+  }
+}

package/src/render/draw_line.js

@@ -0,0 +1,99 @@
+const DepthMode = require('../gl/depth_mode');
+const Texture = require('./texture');
+const CullFaceMode = require('../gl/cull_face_mode');
+const {
+  lineUniformValues,
+  linePatternUniformValues,
+  lineSDFUniformValues,
+  lineGradientUniformValues
+} = require('./program/line_program');
+
+module.exports = function drawLine(painter, sourceCache, layer, coords) {
+  if (painter.renderPass !== 'translucent') return;
+
+  const opacity = layer.paint.get('line-opacity');
+  const width = layer.paint.get('line-width');
+  if (opacity.constantOr(1) === 0 || width.constantOr(1) === 0) return;
+
+  const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
+  const colorMode = painter.colorModeForRenderPass();
+
+  const dasharray = layer.paint.get('line-dasharray');
+  const patternProperty = layer.paint.get('line-pattern');
+  const image = patternProperty.constantOr(1);
+  const gradient = layer.paint.get('line-gradient');
+  const crossfade = layer.getCrossfadeParameters();
+
+  const programId = dasharray ? 'lineSDF' : image ? 'linePattern' : gradient ? 'lineGradient' : 'line';
+
+  const context = painter.context;
+  const gl = context.gl;
+
+  let firstTile = true;
+
+  if (gradient) {
+    context.activeTexture.set(gl.TEXTURE0);
+
+    let gradientTexture = layer.gradientTexture;
+    if (!layer.gradient) return;
+    if (!gradientTexture) gradientTexture = layer.gradientTexture = new Texture(context, layer.gradient, gl.RGBA);
+    gradientTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+  }
+
+  for (const coord of coords) {
+    const tile = sourceCache.getTile(coord);
+
+    if (image && !tile.patternsLoaded()) continue;
+
+    const bucket = tile.getBucket(layer);
+    if (!bucket) continue;
+
+    const programConfiguration = bucket.programConfigurations.get(layer.id);
+    const prevProgram = painter.context.program.get();
+    const program = painter.useProgram(programId, programConfiguration);
+    const programChanged = firstTile || program.program !== prevProgram;
+
+    const constantPattern = patternProperty.constantOr(null);
+    if (constantPattern && tile.imageAtlas) {
+      const posTo = tile.imageAtlas.patternPositions[constantPattern.to];
+      const posFrom = tile.imageAtlas.patternPositions[constantPattern.from];
+      if (posTo && posFrom) programConfiguration.setConstantPatternPositions(posTo, posFrom);
+    }
+
+    const uniformValues = dasharray
+      ? lineSDFUniformValues(painter, tile, layer, dasharray, crossfade)
+      : image
+        ? linePatternUniformValues(painter, tile, layer, crossfade)
+        : gradient
+          ? lineGradientUniformValues(painter, tile, layer)
+          : lineUniformValues(painter, tile, layer);
+
+    if (dasharray && (programChanged || painter.lineAtlas.dirty)) {
+      context.activeTexture.set(gl.TEXTURE0);
+      painter.lineAtlas.bind(context);
+    } else if (image) {
+      tile.imageAtlasTexture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+      programConfiguration.updatePatternPaintBuffers(crossfade);
+    }
+
+    program.draw(
+      context,
+      gl.TRIANGLES,
+      depthMode,
+      painter.stencilModeForClipping(coord),
+      colorMode,
+      CullFaceMode.disabled,
+      uniformValues,
+      layer.id,
+      bucket.layoutVertexBuffer,
+      bucket.indexBuffer,
+      bucket.segments,
+      layer.paint,
+      painter.transform.zoom,
+      programConfiguration
+    );
+
+    firstTile = false;
+    // once refactored so that bound texture state is managed, we'll also be able to remove this firstTile/programChanged logic
+  }
+};

package/src/render/draw_raster.js

@@ -0,0 +1,151 @@
+const { clamp } = require('../util/util');
+
+const ImageSource = require('../source/image_source');
+const browser = require('../util/browser');
+const StencilMode = require('../gl/stencil_mode');
+const DepthMode = require('../gl/depth_mode');
+const CullFaceMode = require('../gl/cull_face_mode');
+const { rasterUniformValues } = require('./program/raster_program');
+
+module.exports = drawRaster;
+
+function drawRaster(painter, sourceCache, layer, coords) {
+  if (painter.renderPass !== 'translucent') return;
+  if (layer.paint.get('raster-opacity') === 0) return;
+
+  const context = painter.context;
+  const gl = context.gl;
+  const source = sourceCache.getSource();
+  const program = painter.useProgram('raster');
+
+  const stencilMode = StencilMode.disabled;
+  const colorMode = painter.colorModeForRenderPass();
+  const minTileZ = coords.length && coords[0].overscaledZ;
+  const align = !painter.options.moving;
+  for (const coord of coords) {
+    // Set the lower zoom level to sublayer 0, and higher zoom levels to higher sublayers
+    // Use gl.LESS to prevent double drawing in areas where tiles overlap.
+    const depthMode = painter.depthModeForSublayer(
+      coord.overscaledZ - minTileZ,
+      layer.paint.get('raster-opacity') === 1 ? DepthMode.ReadWrite : DepthMode.ReadOnly,
+      gl.LESS
+    );
+
+    const tile = sourceCache.getTile(coord);
+    const posMatrix = painter.transform.calculatePosMatrix(coord.toUnwrapped(), align);
+
+    tile.registerFadeDuration(layer.paint.get('raster-fade-duration'));
+
+    const parentTile = sourceCache.findLoadedParent(coord, 0);
+    const fade = getFadeValues(tile, parentTile, sourceCache, layer, painter.transform);
+
+    let parentScaleBy;
+    let parentTL;
+
+    const textureFilter = layer.paint.get('raster-resampling') === 'nearest' ? gl.NEAREST : gl.LINEAR;
+
+    context.activeTexture.set(gl.TEXTURE0);
+    tile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+
+    context.activeTexture.set(gl.TEXTURE1);
+
+    if (parentTile) {
+      parentTile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+      parentScaleBy = 2 ** (parentTile.tileID.overscaledZ - tile.tileID.overscaledZ);
+      parentTL = [(tile.tileID.canonical.x * parentScaleBy) % 1, (tile.tileID.canonical.y * parentScaleBy) % 1];
+    } else {
+      tile.texture.bind(textureFilter, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+    }
+
+    const uniformValues = rasterUniformValues(posMatrix, parentTL || [0, 0], parentScaleBy || 1, fade, layer);
+
+    if (source instanceof ImageSource) {
+      program.draw(
+        context,
+        gl.TRIANGLES,
+        depthMode,
+        stencilMode,
+        colorMode,
+        CullFaceMode.disabled,
+        uniformValues,
+        layer.id,
+        source.boundsBuffer,
+        painter.quadTriangleIndexBuffer,
+        source.boundsSegments
+      );
+    } else if (tile.maskedBoundsBuffer && tile.maskedIndexBuffer && tile.segments) {
+      program.draw(
+        context,
+        gl.TRIANGLES,
+        depthMode,
+        stencilMode,
+        colorMode,
+        CullFaceMode.disabled,
+        uniformValues,
+        layer.id,
+        tile.maskedBoundsBuffer,
+        tile.maskedIndexBuffer,
+        tile.segments,
+        layer.paint,
+        painter.transform.zoom
+      );
+    } else {
+      program.draw(
+        context,
+        gl.TRIANGLES,
+        depthMode,
+        stencilMode,
+        colorMode,
+        CullFaceMode.disabled,
+        uniformValues,
+        layer.id,
+        painter.rasterBoundsBuffer,
+        painter.quadTriangleIndexBuffer,
+        painter.rasterBoundsSegments
+      );
+    }
+  }
+}
+
+function getFadeValues(tile, parentTile, sourceCache, layer, transform) {
+  const fadeDuration = layer.paint.get('raster-fade-duration');
+
+  if (fadeDuration > 0) {
+    const now = browser.now();
+    const sinceTile = (now - tile.timeAdded) / fadeDuration;
+    const sinceParent = parentTile ? (now - parentTile.timeAdded) / fadeDuration : -1;
+
+    const source = sourceCache.getSource();
+    const idealZ = transform.coveringZoomLevel({
+      tileSize: source.tileSize,
+      roundZoom: source.roundZoom
+    });
+
+    // if no parent or parent is older, fade in; if parent is younger, fade out
+    const fadeIn =
+      !parentTile || Math.abs(parentTile.tileID.overscaledZ - idealZ) > Math.abs(tile.tileID.overscaledZ - idealZ);
+
+    const childOpacity = fadeIn && tile.refreshedUponExpiration ? 1 : clamp(fadeIn ? sinceTile : 1 - sinceParent, 0, 1);
+
+    // we don't crossfade tiles that were just refreshed upon expiring:
+    // once they're old enough to pass the crossfading threshold
+    // (fadeDuration), unset the `refreshedUponExpiration` flag so we don't
+    // incorrectly fail to crossfade them when zooming
+    if (tile.refreshedUponExpiration && sinceTile >= 1) tile.refreshedUponExpiration = false;
+
+    if (parentTile) {
+      return {
+        opacity: 1,
+        mix: 1 - childOpacity
+      };
+    }
+    return {
+      opacity: childOpacity,
+      mix: 0
+    };
+  }
+  return {
+    opacity: 1,
+    mix: 0
+  };
+}