@gisatcz/deckgl-geolib 1.5.0-dev.0 → 1.6.0-dev.0

package/dist/esm/index.js

@@ -1,7 +1,8 @@
-import { CompositeLayer } from '@deck.gl/core';
+import { WebMercatorViewport, OrthographicViewport, project, _LayersPass, _PickLayersPass, log, LayerExtension, CompositeLayer } from '@deck.gl/core';
 import { TileLayer, TerrainLayer } from '@deck.gl/geo-layers';
 import { BitmapLayer } from '@deck.gl/layers';
 import chroma from 'chroma-js';
+import { Framebuffer, Texture2D, isWebGL2, withParameters, ProgramManager } from '@luma.gl/core';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -30,6 +31,1226 @@ function __awaiter(thisArg, _arguments, P, generator) {
     });
 }
 
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
+
+/**
+ * Common utilities
+ * @module glMatrix
+ */
+// Configuration Constants
+var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
+if (!Math.hypot) Math.hypot = function () {
+  var y = 0,
+      i = arguments.length;
+
+  while (i--) {
+    y += arguments[i] * arguments[i];
+  }
+
+  return Math.sqrt(y);
+};
+
+/**
+ * 2 Dimensional Vector
+ * @module vec2
+ */
+
+/**
+ * Creates a new, empty vec2
+ *
+ * @returns {vec2} a new 2D vector
+ */
+
+function create$2() {
+  var out = new ARRAY_TYPE(2);
+
+  if (ARRAY_TYPE != Float32Array) {
+    out[0] = 0;
+    out[1] = 0;
+  }
+
+  return out;
+}
+/**
+ * Perform some operation over an array of vec2s.
+ *
+ * @param {Array} a the array of vectors to iterate over
+ * @param {Number} stride Number of elements between the start of each vec2. If 0 assumes tightly packed
+ * @param {Number} offset Number of elements to skip at the beginning of the array
+ * @param {Number} count Number of vec2s to iterate over. If 0 iterates over entire array
+ * @param {Function} fn Function to call for each vector in the array
+ * @param {Object} [arg] additional argument to pass to fn
+ * @returns {Array} a
+ * @function
+ */
+
+(function () {
+  var vec = create$2();
+  return function (a, stride, offset, count, fn, arg) {
+    var i, l;
+
+    if (!stride) {
+      stride = 2;
+    }
+
+    if (!offset) {
+      offset = 0;
+    }
+
+    if (count) {
+      l = Math.min(count * stride + offset, a.length);
+    } else {
+      l = a.length;
+    }
+
+    for (i = offset; i < l; i += stride) {
+      vec[0] = a[i];
+      vec[1] = a[i + 1];
+      fn(vec, vec, arg);
+      a[i] = vec[0];
+      a[i + 1] = vec[1];
+    }
+
+    return a;
+  };
+})();
+
+/**
+ * 3 Dimensional Vector
+ * @module vec3
+ */
+
+/**
+ * Creates a new, empty vec3
+ *
+ * @returns {vec3} a new 3D vector
+ */
+
+function create$1() {
+  var out = new ARRAY_TYPE(3);
+
+  if (ARRAY_TYPE != Float32Array) {
+    out[0] = 0;
+    out[1] = 0;
+    out[2] = 0;
+  }
+
+  return out;
+}
+/**
+ * Perform some operation over an array of vec3s.
+ *
+ * @param {Array} a the array of vectors to iterate over
+ * @param {Number} stride Number of elements between the start of each vec3. If 0 assumes tightly packed
+ * @param {Number} offset Number of elements to skip at the beginning of the array
+ * @param {Number} count Number of vec3s to iterate over. If 0 iterates over entire array
+ * @param {Function} fn Function to call for each vector in the array
+ * @param {Object} [arg] additional argument to pass to fn
+ * @returns {Array} a
+ * @function
+ */
+
+(function () {
+  var vec = create$1();
+  return function (a, stride, offset, count, fn, arg) {
+    var i, l;
+
+    if (!stride) {
+      stride = 3;
+    }
+
+    if (!offset) {
+      offset = 0;
+    }
+
+    if (count) {
+      l = Math.min(count * stride + offset, a.length);
+    } else {
+      l = a.length;
+    }
+
+    for (i = offset; i < l; i += stride) {
+      vec[0] = a[i];
+      vec[1] = a[i + 1];
+      vec[2] = a[i + 2];
+      fn(vec, vec, arg);
+      a[i] = vec[0];
+      a[i + 1] = vec[1];
+      a[i + 2] = vec[2];
+    }
+
+    return a;
+  };
+})();
+
+/**
+ * 4 Dimensional Vector
+ * @module vec4
+ */
+
+/**
+ * Creates a new, empty vec4
+ *
+ * @returns {vec4} a new 4D vector
+ */
+
+function create() {
+  var out = new ARRAY_TYPE(4);
+
+  if (ARRAY_TYPE != Float32Array) {
+    out[0] = 0;
+    out[1] = 0;
+    out[2] = 0;
+    out[3] = 0;
+  }
+
+  return out;
+}
+/**
+ * Perform some operation over an array of vec4s.
+ *
+ * @param {Array} a the array of vectors to iterate over
+ * @param {Number} stride Number of elements between the start of each vec4. If 0 assumes tightly packed
+ * @param {Number} offset Number of elements to skip at the beginning of the array
+ * @param {Number} count Number of vec4s to iterate over. If 0 iterates over entire array
+ * @param {Function} fn Function to call for each vector in the array
+ * @param {Object} [arg] additional argument to pass to fn
+ * @returns {Array} a
+ * @function
+ */
+
+(function () {
+  var vec = create();
+  return function (a, stride, offset, count, fn, arg) {
+    var i, l;
+
+    if (!stride) {
+      stride = 4;
+    }
+
+    if (!offset) {
+      offset = 0;
+    }
+
+    if (count) {
+      l = Math.min(count * stride + offset, a.length);
+    } else {
+      l = a.length;
+    }
+
+    for (i = offset; i < l; i += stride) {
+      vec[0] = a[i];
+      vec[1] = a[i + 1];
+      vec[2] = a[i + 2];
+      vec[3] = a[i + 3];
+      fn(vec, vec, arg);
+      a[i] = vec[0];
+      a[i + 1] = vec[1];
+      a[i + 2] = vec[2];
+      a[i + 3] = vec[3];
+    }
+
+    return a;
+  };
+})();
+
+function joinLayerBounds(layers, viewport) {
+  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
+
+  for (const layer of layers) {
+    const layerBounds = layer.getBounds();
+
+    if (layerBounds) {
+      const bottomLeftCommon = layer.projectPosition(layerBounds[0], {
+        viewport,
+        autoOffset: false
+      });
+      const topRightCommon = layer.projectPosition(layerBounds[1], {
+        viewport,
+        autoOffset: false
+      });
+      bounds[0] = Math.min(bounds[0], bottomLeftCommon[0]);
+      bounds[1] = Math.min(bounds[1], bottomLeftCommon[1]);
+      bounds[2] = Math.max(bounds[2], topRightCommon[0]);
+      bounds[3] = Math.max(bounds[3], topRightCommon[1]);
+    }
+  }
+
+  if (Number.isFinite(bounds[0])) {
+    return bounds;
+  }
+
+  return null;
+}
+const MAX_VIEWPORT_SIZE = 2048;
+function makeViewport(opts) {
+  const {
+    bounds,
+    viewport,
+    border = 0
+  } = opts;
+  const {
+    isGeospatial
+  } = viewport;
+
+  if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) {
+    return null;
+  }
+
+  const centerWorld = viewport.unprojectPosition([(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2, 0]);
+  let {
+    width,
+    height,
+    zoom
+  } = opts;
+
+  if (zoom === undefined) {
+    width = width - border * 2;
+    height = height - border * 2;
+    const scale = Math.min(width / (bounds[2] - bounds[0]), height / (bounds[3] - bounds[1]));
+    zoom = Math.min(Math.log2(scale), 20);
+  } else if (!width || !height) {
+    const scale = 2 ** zoom;
+    width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale);
+    height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale);
+    const maxSize = MAX_VIEWPORT_SIZE - border * 2;
+
+    if (width > maxSize || height > maxSize) {
+      const r = maxSize / Math.max(width, height);
+      width = Math.round(width * r);
+      height = Math.round(height * r);
+      zoom += Math.log2(r);
+    }
+  }
+
+  return isGeospatial ? new WebMercatorViewport({
+    id: viewport.id,
+    x: border,
+    y: border,
+    width,
+    height,
+    longitude: centerWorld[0],
+    latitude: centerWorld[1],
+    zoom,
+    orthographic: true
+  }) : new OrthographicViewport({
+    id: viewport.id,
+    x: border,
+    y: border,
+    width,
+    height,
+    target: centerWorld,
+    zoom,
+    flipY: false
+  });
+}
+function getViewportBounds(viewport, zRange) {
+  let viewportBoundsWorld;
+
+  if (zRange && zRange.length === 2) {
+    const [minZ, maxZ] = zRange;
+    const bounds0 = viewport.getBounds({
+      z: minZ
+    });
+    const bounds1 = viewport.getBounds({
+      z: maxZ
+    });
+    viewportBoundsWorld = [Math.min(bounds0[0], bounds1[0]), Math.min(bounds0[1], bounds1[1]), Math.max(bounds0[2], bounds1[2]), Math.max(bounds0[3], bounds1[3])];
+  } else {
+    viewportBoundsWorld = viewport.getBounds();
+  }
+
+  const viewportBottomLeftCommon = viewport.projectPosition(viewportBoundsWorld.slice(0, 2));
+  const viewportTopRightCommon = viewport.projectPosition(viewportBoundsWorld.slice(2, 4));
+  return [viewportBottomLeftCommon[0], viewportBottomLeftCommon[1], viewportTopRightCommon[0], viewportTopRightCommon[1]];
+}
+function getRenderBounds(layerBounds, viewport, zRange) {
+  if (!layerBounds) {
+    return [0, 0, 1, 1];
+  }
+
+  const viewportBounds = getViewportBounds(viewport, zRange);
+  const paddedBounds = doubleBounds(viewportBounds);
+
+  if (layerBounds[2] - layerBounds[0] <= paddedBounds[2] - paddedBounds[0] && layerBounds[3] - layerBounds[1] <= paddedBounds[3] - paddedBounds[1]) {
+    return layerBounds;
+  }
+
+  return [Math.max(layerBounds[0], paddedBounds[0]), Math.max(layerBounds[1], paddedBounds[1]), Math.min(layerBounds[2], paddedBounds[2]), Math.min(layerBounds[3], paddedBounds[3])];
+}
+
+function doubleBounds(bounds) {
+  const dx = bounds[2] - bounds[0];
+  const dy = bounds[3] - bounds[1];
+  const centerX = (bounds[0] + bounds[2]) / 2;
+  const centerY = (bounds[1] + bounds[3]) / 2;
+  return [centerX - dx, centerY - dy, centerX + dx, centerY + dy];
+}
+
+const TERRAIN_MODE = {
+  NONE: 0,
+  WRITE_HEIGHT_MAP: 1,
+  USE_HEIGHT_MAP: 2,
+  USE_COVER: 3,
+  USE_COVER_ONLY: 4,
+  SKIP: 5
+};
+const TERRAIN_MODE_CONSTANTS = Object.keys(TERRAIN_MODE).map(key => "const float TERRAIN_MODE_".concat(key, " = ").concat(TERRAIN_MODE[key], ".0;")).join('\n');
+const terrainModule = {
+  name: 'terrain',
+  dependencies: [project],
+  inject: {
+    'vs:#decl': "\nuniform float terrain_mode;\nuniform sampler2D terrain_map;\nuniform vec4 terrain_bounds;\nvarying vec3 commonPos;\n".concat(TERRAIN_MODE_CONSTANTS, "\n    "),
+    'vs:#main-start': "\nif (terrain_mode == TERRAIN_MODE_SKIP) {\n  gl_Position = vec4(0.0);\n  return;\n}\n",
+    'vs:DECKGL_FILTER_GL_POSITION': "\ncommonPos = geometry.position.xyz;\nif (terrain_mode == TERRAIN_MODE_WRITE_HEIGHT_MAP) {\n  vec2 texCoords = (commonPos.xy - terrain_bounds.xy) / terrain_bounds.zw;\n  position = vec4(texCoords * 2.0 - 1.0, 0.0, 1.0);\n  commonPos.z += project_uCommonOrigin.z;\n}\nif (terrain_mode == TERRAIN_MODE_USE_HEIGHT_MAP) {\n  vec3 anchor = geometry.worldPosition;\n  anchor.z = 0.0;\n  vec3 anchorCommon = project_position(anchor);\n  vec2 texCoords = (anchorCommon.xy - terrain_bounds.xy) / terrain_bounds.zw;\n  if (texCoords.x >= 0.0 && texCoords.y >= 0.0 && texCoords.x <= 1.0 && texCoords.y <= 1.0) {\n    float terrainZ = texture2D(terrain_map, texCoords).r;\n    geometry.position.z += terrainZ;\n    position = project_common_position_to_clipspace(geometry.position);\n  }\n}\n    ",
+    'fs:#decl': "\nuniform float terrain_mode;\nuniform sampler2D terrain_map;\nuniform vec4 terrain_bounds;\nvarying vec3 commonPos;\n".concat(TERRAIN_MODE_CONSTANTS, "\n    "),
+    'fs:#main-start': "\nif (terrain_mode == TERRAIN_MODE_WRITE_HEIGHT_MAP) {\n  gl_FragColor = vec4(commonPos.z, 0.0, 0.0, 1.0);\n  return;\n}\n    ",
+    'fs:DECKGL_FILTER_COLOR': "\nif ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_USE_COVER_ONLY)) {\n  vec2 texCoords = (commonPos.xy - terrain_bounds.xy) / terrain_bounds.zw;\n  vec4 pixel = texture2D(terrain_map, texCoords);\n  if (terrain_mode == TERRAIN_MODE_USE_COVER_ONLY) {\n    color = pixel;\n  } else {\n    // pixel is premultiplied\n    color = pixel + color * (1.0 - pixel.a);\n  }\n  return;\n}\n    "
+  },
+  getUniforms: (opts = {}, uniforms) => {
+    if ('dummyHeightMap' in opts) {
+      const {
+        drawToTerrainHeightMap,
+        heightMap,
+        heightMapBounds,
+        dummyHeightMap,
+        terrainCover,
+        useTerrainHeightMap,
+        terrainSkipRender
+      } = opts;
+      const {
+        project_uCommonOrigin
+      } = uniforms;
+      let mode = terrainSkipRender ? TERRAIN_MODE.SKIP : TERRAIN_MODE.NONE;
+      let sampler = dummyHeightMap;
+      let bounds = null;
+
+      if (drawToTerrainHeightMap) {
+        mode = TERRAIN_MODE.WRITE_HEIGHT_MAP;
+        bounds = heightMapBounds;
+      } else if (useTerrainHeightMap && heightMap) {
+        mode = TERRAIN_MODE.USE_HEIGHT_MAP;
+        sampler = heightMap;
+        bounds = heightMapBounds;
+      } else if (terrainCover) {
+        const isPicking = opts.pickingActive;
+        sampler = isPicking ? terrainCover.getPickingFramebuffer() : terrainCover.getRenderFramebuffer();
+
+        if (isPicking) {
+          mode = TERRAIN_MODE.SKIP;
+        }
+
+        if (sampler) {
+          mode = mode === TERRAIN_MODE.SKIP ? TERRAIN_MODE.USE_COVER_ONLY : TERRAIN_MODE.USE_COVER;
+          bounds = terrainCover.bounds;
+        } else {
+          sampler = dummyHeightMap;
+        }
+      }
+
+      return {
+        terrain_mode: mode,
+        terrain_map: sampler,
+        terrain_bounds: bounds ? [bounds[0] - project_uCommonOrigin[0], bounds[1] - project_uCommonOrigin[1], bounds[2] - bounds[0], bounds[3] - bounds[1]] : [0, 0, 0, 0]
+      };
+    }
+
+    return null;
+  }
+};
+
+function createRenderTarget(gl, opts) {
+  return new Framebuffer(gl, {
+    id: opts.id,
+    attachments: {
+      [36064]: new Texture2D(gl, { ...(opts.float && {
+          format: isWebGL2(gl) ? 34836 : 6408,
+          type: 5126
+        }),
+        mipmaps: false,
+        parameters: {
+          [10241]: 9729,
+          [10240]: 9729,
+          [10242]: 33071,
+          [10243]: 33071
+        }
+      })
+    }
+  });
+}
+
+class TerrainCover {
+  constructor(targetLayer) {
+    _defineProperty(this, "isDirty", true);
+
+    _defineProperty(this, "targetLayer", void 0);
+
+    _defineProperty(this, "renderViewport", null);
+
+    _defineProperty(this, "bounds", null);
+
+    _defineProperty(this, "fbo", void 0);
+
+    _defineProperty(this, "pickingFbo", void 0);
+
+    _defineProperty(this, "layers", []);
+
+    _defineProperty(this, "tile", void 0);
+
+    _defineProperty(this, "targetBounds", null);
+
+    _defineProperty(this, "targetBoundsCommon", null);
+
+    this.targetLayer = targetLayer;
+    this.tile = getTile(targetLayer);
+  }
+
+  get id() {
+    return this.targetLayer.id;
+  }
+
+  get isActive() {
+    return Boolean(this.targetLayer.getCurrentLayer());
+  }
+
+  shouldUpdate({
+    targetLayer,
+    viewport,
+    layers,
+    layerNeedsRedraw
+  }) {
+    if (targetLayer) {
+      this.targetLayer = targetLayer;
+    }
+
+    const sizeChanged = viewport ? this._updateViewport(viewport) : false;
+    let layersChanged = layers ? this._updateLayers(layers) : false;
+
+    if (layerNeedsRedraw) {
+      for (const id of this.layers) {
+        if (layerNeedsRedraw[id]) {
+          layersChanged = true;
+          break;
+        }
+      }
+    }
+
+    return layersChanged || sizeChanged;
+  }
+
+  _updateLayers(layers) {
+    let needsRedraw = false;
+    layers = this.tile ? getIntersectingLayers(this.tile, layers) : layers;
+
+    if (layers.length !== this.layers.length) {
+      needsRedraw = true;
+    } else {
+      for (let i = 0; i < layers.length; i++) {
+        const id = layers[i].id;
+
+        if (id !== this.layers[i]) {
+          needsRedraw = true;
+          break;
+        }
+      }
+    }
+
+    if (needsRedraw) {
+      this.layers = layers.map(layer => layer.id);
+    }
+
+    return needsRedraw;
+  }
+
+  _updateViewport(viewport) {
+    const targetLayer = this.targetLayer;
+    let shouldRedraw = false;
+
+    if (this.tile && 'boundingBox' in this.tile) {
+      if (!this.targetBounds) {
+        shouldRedraw = true;
+        this.targetBounds = this.tile.boundingBox;
+        const bottomLeftCommon = viewport.projectPosition(this.targetBounds[0]);
+        const topRightCommon = viewport.projectPosition(this.targetBounds[1]);
+        this.targetBoundsCommon = [bottomLeftCommon[0], bottomLeftCommon[1], topRightCommon[0], topRightCommon[1]];
+      }
+    } else if (this.targetBounds !== targetLayer.getBounds()) {
+      shouldRedraw = true;
+      this.targetBounds = targetLayer.getBounds();
+      this.targetBoundsCommon = joinLayerBounds([targetLayer], viewport);
+    }
+
+    if (!this.targetBoundsCommon) {
+      return false;
+    }
+
+    const newZoom = Math.ceil(viewport.zoom + 0.5);
+
+    if (this.tile) {
+      this.bounds = this.targetBoundsCommon;
+    } else {
+      var _this$renderViewport;
+
+      const oldZoom = (_this$renderViewport = this.renderViewport) === null || _this$renderViewport === void 0 ? void 0 : _this$renderViewport.zoom;
+      shouldRedraw = shouldRedraw || newZoom !== oldZoom;
+      const newBounds = getRenderBounds(this.targetBoundsCommon, viewport);
+      const oldBounds = this.bounds;
+      shouldRedraw = shouldRedraw || !oldBounds || newBounds.some((x, i) => x !== oldBounds[i]);
+      this.bounds = newBounds;
+    }
+
+    if (shouldRedraw) {
+      this.renderViewport = makeViewport({
+        bounds: this.bounds,
+        zoom: newZoom,
+        viewport
+      });
+    }
+
+    return shouldRedraw;
+  }
+
+  getRenderFramebuffer() {
+    if (!this.renderViewport || this.layers.length === 0) {
+      return null;
+    }
+
+    if (!this.fbo) {
+      this.fbo = createRenderTarget(this.targetLayer.context.gl, {
+        id: this.id
+      });
+    }
+
+    return this.fbo;
+  }
+
+  getPickingFramebuffer() {
+    if (!this.renderViewport || this.layers.length === 0 && !this.targetLayer.props.pickable) {
+      return null;
+    }
+
+    if (!this.pickingFbo) {
+      this.pickingFbo = createRenderTarget(this.targetLayer.context.gl, {
+        id: "".concat(this.id, "-picking")
+      });
+    }
+
+    return this.pickingFbo;
+  }
+
+  filterLayers(layers) {
+    return layers.filter(({
+      id
+    }) => this.layers.includes(id));
+  }
+
+  delete() {
+    const {
+      fbo,
+      pickingFbo
+    } = this;
+
+    if (fbo) {
+      fbo.texture.delete();
+      fbo.delete();
+    }
+
+    if (pickingFbo) {
+      pickingFbo.texture.delete();
+      pickingFbo.delete();
+    }
+  }
+
+}
+
+function getIntersectingLayers(sourceTile, layers) {
+  return layers.filter(layer => {
+    const tile = getTile(layer);
+
+    if (tile) {
+      return intersect(sourceTile.boundingBox, tile.boundingBox);
+    }
+
+    return true;
+  });
+}
+
+function getTile(layer) {
+  while (layer) {
+    const {
+      tile
+    } = layer.props;
+
+    if (tile) {
+      return tile;
+    }
+
+    layer = layer.parent;
+  }
+
+  return null;
+}
+
+function intersect(b1, b2) {
+  if (b1 && b2) {
+    return b1[0][0] < b2[1][0] && b2[0][0] < b1[1][0] && b1[0][1] < b2[1][1] && b2[0][1] < b1[1][1];
+  }
+
+  return false;
+}
+
+class TerrainPass extends _LayersPass {
+  getRenderableLayers(viewport, opts) {
+    const {
+      layers
+    } = opts;
+    const result = [];
+
+    const drawParamsByIndex = this._getDrawLayerParams(viewport, opts, true);
+
+    for (let i = 0; i < layers.length; i++) {
+      const layer = layers[i];
+
+      if (!layer.isComposite && drawParamsByIndex[i].shouldDrawLayer) {
+        result.push(layer);
+      }
+    }
+
+    return result;
+  }
+
+  renderHeightMap(heightMap, opts) {
+    const target = heightMap.getRenderFramebuffer();
+    const viewport = heightMap.renderViewport;
+
+    if (!target || !viewport) {
+      return;
+    }
+
+    target.resize(viewport);
+    withParameters(this.gl, {
+      clearColor: [0, 0, 0, 0],
+      blend: true,
+      blendFunc: [1, 1],
+      blendEquation: 32776,
+      depthTest: false
+    }, () => this.render({ ...opts,
+      target,
+      pass: 'terrain-height-map',
+      layers: opts.layers,
+      viewports: [viewport],
+      effects: []
+    }));
+  }
+
+  renderTerrainCover(terrainCover, opts) {
+    const target = terrainCover.getRenderFramebuffer();
+    const viewport = terrainCover.renderViewport;
+
+    if (!target || !viewport) {
+      return;
+    }
+
+    const layers = terrainCover.filterLayers(opts.layers);
+    target.resize(viewport);
+    withParameters(this.gl, {
+      depthTest: false
+    }, () => this.render({ ...opts,
+      target,
+      pass: "terrain-cover-".concat(terrainCover.id),
+      layers,
+      effects: [],
+      viewports: [viewport]
+    }));
+  }
+
+}
+
+class TerrainPickingPass extends _PickLayersPass {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "drawParameters", {});
+  }
+
+  getRenderableLayers(viewport, opts) {
+    const {
+      layers
+    } = opts;
+    const result = [];
+    this.drawParameters = {};
+
+    this._resetColorEncoder(opts.pickZ);
+
+    const drawParamsByIndex = this._getDrawLayerParams(viewport, opts);
+
+    for (let i = 0; i < layers.length; i++) {
+      const layer = layers[i];
+
+      if (!layer.isComposite && drawParamsByIndex[i].shouldDrawLayer) {
+        result.push(layer);
+        this.drawParameters[layer.id] = drawParamsByIndex[i].layerParameters;
+      }
+    }
+
+    return result;
+  }
+
+  renderTerrainCover(terrainCover, opts) {
+    const target = terrainCover.getPickingFramebuffer();
+    const viewport = terrainCover.renderViewport;
+
+    if (!target || !viewport) {
+      return;
+    }
+
+    const layers = terrainCover.filterLayers(opts.layers);
+    const terrainLayer = terrainCover.targetLayer;
+
+    if (terrainLayer.props.pickable) {
+      layers.unshift(terrainLayer);
+    }
+
+    target.resize(viewport);
+    withParameters(this.gl, {
+      depthTest: false
+    }, () => this.render({ ...opts,
+      pickingFBO: target,
+      pass: "terrain-cover-picking-".concat(terrainCover.id),
+      layers,
+      effects: [],
+      viewports: [viewport],
+      cullRect: undefined,
+      deviceRect: viewport,
+      pickZ: false
+    }));
+  }
+
+  getLayerParameters(layer, layerIndex, viewport) {
+    if (this.drawParameters[layer.id]) {
+      return this.drawParameters[layer.id];
+    }
+
+    const parameters = super.getLayerParameters(layer, layerIndex, viewport);
+    parameters.blend = true;
+    return parameters;
+  }
+
+}
+
+const MAP_MAX_SIZE = 2048;
+class HeightMapBuilder {
+  static isSupported(gl) {
+    return Framebuffer.isSupported(gl, {
+      colorBufferFloat: true
+    });
+  }
+
+  constructor(gl) {
+    _defineProperty(this, "renderViewport", null);
+
+    _defineProperty(this, "bounds", null);
+
+    _defineProperty(this, "fbo", void 0);
+
+    _defineProperty(this, "gl", void 0);
+
+    _defineProperty(this, "layers", []);
+
+    _defineProperty(this, "layersBounds", []);
+
+    _defineProperty(this, "layersBoundsCommon", null);
+
+    _defineProperty(this, "lastViewport", null);
+
+    this.gl = gl;
+  }
+
+  getRenderFramebuffer() {
+    if (!this.renderViewport) {
+      return null;
+    }
+
+    if (!this.fbo) {
+      this.fbo = createRenderTarget(this.gl, {
+        id: 'height-map',
+        float: true
+      });
+    }
+
+    return this.fbo;
+  }
+
+  shouldUpdate({
+    layers,
+    viewport
+  }) {
+    const layersChanged = layers.length !== this.layers.length || layers.some((layer, i) => layer !== this.layers[i] || layer.props.transitions || layer.getBounds() !== this.layersBounds[i]);
+
+    if (layersChanged) {
+      this.layers = layers;
+      this.layersBounds = layers.map(layer => layer.getBounds());
+      this.layersBoundsCommon = joinLayerBounds(layers, viewport);
+    }
+
+    const viewportChanged = !this.lastViewport || !viewport.equals(this.lastViewport);
+
+    if (!this.layersBoundsCommon) {
+      this.renderViewport = null;
+    } else if (layersChanged || viewportChanged) {
+      const bounds = getRenderBounds(this.layersBoundsCommon, viewport);
+
+      if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) {
+        this.renderViewport = null;
+        return false;
+      }
+
+      this.bounds = bounds;
+      this.lastViewport = viewport;
+      const scale = viewport.scale;
+      const pixelWidth = (bounds[2] - bounds[0]) * scale;
+      const pixelHeight = (bounds[3] - bounds[1]) * scale;
+      this.renderViewport = pixelWidth > 0 || pixelHeight > 0 ? makeViewport({
+        bounds: [viewport.center[0] - 1, viewport.center[1] - 1, viewport.center[0] + 1, viewport.center[1] + 1],
+        zoom: viewport.zoom,
+        width: Math.min(pixelWidth, MAP_MAX_SIZE),
+        height: Math.min(pixelHeight, MAP_MAX_SIZE),
+        viewport
+      }) : null;
+      return true;
+    }
+
+    return false;
+  }
+
+  delete() {
+    if (this.fbo) {
+      this.fbo.color.delete();
+      this.fbo.delete();
+    }
+  }
+
+}
+
+class TerrainEffect {
+  constructor() {
+    _defineProperty(this, "id", 'terrain-effect');
+
+    _defineProperty(this, "props", null);
+
+    _defineProperty(this, "useInPicking", true);
+
+    _defineProperty(this, "isPicking", false);
+
+    _defineProperty(this, "isDrapingEnabled", false);
+
+    _defineProperty(this, "dummyHeightMap", void 0);
+
+    _defineProperty(this, "heightMap", void 0);
+
+    _defineProperty(this, "terrainPass", void 0);
+
+    _defineProperty(this, "terrainPickingPass", void 0);
+
+    _defineProperty(this, "terrainCovers", new Map());
+  }
+
+  initialize(gl) {
+    this.dummyHeightMap = new Texture2D(gl, {
+      width: 1,
+      height: 1,
+      data: new Uint8Array([0, 0, 0, 0])
+    });
+    this.terrainPass = new TerrainPass(gl, {
+      id: 'terrain'
+    });
+    this.terrainPickingPass = new TerrainPickingPass(gl, {
+      id: 'terrain-picking'
+    });
+
+    if (HeightMapBuilder.isSupported(gl)) {
+      this.heightMap = new HeightMapBuilder(gl);
+    } else {
+      log.warn('Terrain offset mode is not supported by this browser')();
+    }
+
+    ProgramManager.getDefaultProgramManager(gl).addDefaultModule(terrainModule);
+  }
+
+  preRender(gl, opts) {
+    if (!this.dummyHeightMap) {
+      this.initialize(gl);
+
+      for (const layer of opts.layers) {
+        if (layer.props.operation.includes('terrain')) {
+          layer.setChangeFlags({
+            extensionsChanged: true
+          });
+        }
+      }
+    }
+
+    if (opts.pickZ) {
+      this.isDrapingEnabled = false;
+      return;
+    }
+
+    const {
+      viewports,
+      isPicking = false
+    } = opts;
+    this.isPicking = isPicking;
+    this.isDrapingEnabled = true;
+    const viewport = viewports[0];
+    const layers = (isPicking ? this.terrainPickingPass : this.terrainPass).getRenderableLayers(viewport, opts);
+    const terrainLayers = layers.filter(l => l.props.operation.includes('terrain'));
+
+    if (terrainLayers.length === 0) {
+      return;
+    }
+
+    if (!isPicking) {
+      const offsetLayers = layers.filter(l => l.state.terrainDrawMode === 'offset');
+
+      if (offsetLayers.length > 0) {
+        this._updateHeightMap(terrainLayers, viewport, opts);
+      }
+    }
+
+    const drapeLayers = layers.filter(l => l.state.terrainDrawMode === 'drape');
+
+    this._updateTerrainCovers(terrainLayers, drapeLayers, viewport, opts);
+  }
+
+  getModuleParameters(layer) {
+    var _this$heightMap, _this$heightMap2;
+
+    const {
+      terrainDrawMode
+    } = layer.state;
+    return {
+      heightMap: (_this$heightMap = this.heightMap) === null || _this$heightMap === void 0 ? void 0 : _this$heightMap.getRenderFramebuffer(),
+      heightMapBounds: (_this$heightMap2 = this.heightMap) === null || _this$heightMap2 === void 0 ? void 0 : _this$heightMap2.bounds,
+      dummyHeightMap: this.dummyHeightMap,
+      terrainCover: this.isDrapingEnabled ? this.terrainCovers.get(layer.id) : null,
+      useTerrainHeightMap: terrainDrawMode === 'offset',
+      terrainSkipRender: terrainDrawMode === 'drape' || !layer.props.operation.includes('draw')
+    };
+  }
+
+  cleanup() {
+    if (this.dummyHeightMap) {
+      this.dummyHeightMap.delete();
+      this.dummyHeightMap = undefined;
+    }
+
+    if (this.heightMap) {
+      this.heightMap.delete();
+      this.heightMap = undefined;
+    }
+
+    for (const terrainCover of this.terrainCovers.values()) {
+      terrainCover.delete();
+    }
+
+    this.terrainCovers.clear();
+  }
+
+  _updateHeightMap(terrainLayers, viewport, opts) {
+    if (!this.heightMap) {
+      return;
+    }
+
+    const shouldUpdate = this.heightMap.shouldUpdate({
+      layers: terrainLayers,
+      viewport
+    });
+
+    if (!shouldUpdate) {
+      return;
+    }
+
+    this.terrainPass.renderHeightMap(this.heightMap, { ...opts,
+      layers: terrainLayers,
+      moduleParameters: {
+        heightMapBounds: this.heightMap.bounds,
+        dummyHeightMap: this.dummyHeightMap,
+        devicePixelRatio: 1,
+        drawToTerrainHeightMap: true
+      }
+    });
+  }
+
+  _updateTerrainCovers(terrainLayers, drapeLayers, viewport, opts) {
+    const layerNeedsRedraw = {};
+
+    for (const layer of drapeLayers) {
+      if (layer.state.terrainCoverNeedsRedraw) {
+        layerNeedsRedraw[layer.id] = true;
+        layer.state.terrainCoverNeedsRedraw = false;
+      }
+    }
+
+    for (const terrainCover of this.terrainCovers.values()) {
+      terrainCover.isDirty = terrainCover.isDirty || terrainCover.shouldUpdate({
+        layerNeedsRedraw
+      });
+    }
+
+    for (const layer of terrainLayers) {
+      this._updateTerrainCover(layer, drapeLayers, viewport, opts);
+    }
+
+    if (!this.isPicking) {
+      this._pruneTerrainCovers();
+    }
+  }
+
+  _updateTerrainCover(terrainLayer, drapeLayers, viewport, opts) {
+    const renderPass = this.isPicking ? this.terrainPickingPass : this.terrainPass;
+    let terrainCover = this.terrainCovers.get(terrainLayer.id);
+
+    if (!terrainCover) {
+      terrainCover = new TerrainCover(terrainLayer);
+      this.terrainCovers.set(terrainLayer.id, terrainCover);
+    }
+
+    try {
+      const isDirty = terrainCover.shouldUpdate({
+        targetLayer: terrainLayer,
+        viewport,
+        layers: drapeLayers
+      });
+
+      if (this.isPicking || terrainCover.isDirty || isDirty) {
+        renderPass.renderTerrainCover(terrainCover, { ...opts,
+          layers: drapeLayers,
+          moduleParameters: {
+            dummyHeightMap: this.dummyHeightMap,
+            terrainSkipRender: false,
+            devicePixelRatio: 1
+          }
+        });
+        terrainCover.isDirty = false;
+      }
+    } catch (err) {
+      terrainLayer.raiseError(err, "Error rendering terrain cover ".concat(terrainCover.id));
+    }
+  }
+
+  _pruneTerrainCovers() {
+    const idsToRemove = [];
+
+    for (const [id, terrainCover] of this.terrainCovers) {
+      if (!terrainCover.isActive) {
+        idsToRemove.push(id);
+      }
+    }
+
+    for (const id of idsToRemove) {
+      this.terrainCovers.delete(id);
+    }
+  }
+
+}
+
+const defaultProps = {
+  terrainDrawMode: undefined
+};
+class TerrainExtension extends LayerExtension {
+  getShaders() {
+    return {
+      modules: [terrainModule]
+    };
+  }
+
+  initializeState() {
+    var _this$context$deck;
+
+    (_this$context$deck = this.context.deck) === null || _this$context$deck === void 0 ? void 0 : _this$context$deck._addDefaultEffect(new TerrainEffect());
+  }
+
+  updateState(params) {
+    const {
+      props,
+      oldProps
+    } = params;
+
+    if (this.state.terrainDrawMode && props.terrainDrawMode === oldProps.terrainDrawMode && props.extruded === oldProps.extruded) {
+      return;
+    }
+
+    let {
+      terrainDrawMode
+    } = props;
+
+    if (!terrainDrawMode) {
+      var _this$getAttributeMan;
+
+      const is3d = this.props.extruded;
+      const attributes = (_this$getAttributeMan = this.getAttributeManager()) === null || _this$getAttributeMan === void 0 ? void 0 : _this$getAttributeMan.attributes;
+      const hasAnchor = attributes && 'instancePositions' in attributes;
+      terrainDrawMode = is3d || hasAnchor ? 'offset' : 'drape';
+    }
+
+    this.setState({
+      terrainDrawMode
+    });
+  }
+
+  onNeedsRedraw() {
+    const state = this.state;
+
+    if (state.terrainDrawMode === 'drape') {
+      state.terrainCoverNeedsRedraw = true;
+    }
+  }
+
+}
+
+_defineProperty(TerrainExtension, "defaultProps", defaultProps);
+
+_defineProperty(TerrainExtension, "extensionName", 'TerrainExtension');
+
 /**
  * MimeType conversion for common tif image types
  */
@@ -10456,227 +11677,6 @@ var jpegJs = {
 
 var jpeg$1 = /*@__PURE__*/getDefaultExportFromCjs(jpegJs);
 
-/**
- * Common utilities
- * @module glMatrix
- */
-// Configuration Constants
-var ARRAY_TYPE = typeof Float32Array !== 'undefined' ? Float32Array : Array;
-if (!Math.hypot) Math.hypot = function () {
-  var y = 0,
-      i = arguments.length;
-
-  while (i--) {
-    y += arguments[i] * arguments[i];
-  }
-
-  return Math.sqrt(y);
-};
-
-/**
- * 4 Dimensional Vector
- * @module vec4
- */
-
-/**
- * Creates a new, empty vec4
- *
- * @returns {vec4} a new 4D vector
- */
-
-function create$2() {
-  var out = new ARRAY_TYPE(4);
-
-  if (ARRAY_TYPE != Float32Array) {
-    out[0] = 0;
-    out[1] = 0;
-    out[2] = 0;
-    out[3] = 0;
-  }
-
-  return out;
-}
-/**
- * Perform some operation over an array of vec4s.
- *
- * @param {Array} a the array of vectors to iterate over
- * @param {Number} stride Number of elements between the start of each vec4. If 0 assumes tightly packed
- * @param {Number} offset Number of elements to skip at the beginning of the array
- * @param {Number} count Number of vec4s to iterate over. If 0 iterates over entire array
- * @param {Function} fn Function to call for each vector in the array
- * @param {Object} [arg] additional argument to pass to fn
- * @returns {Array} a
- * @function
- */
-
-(function () {
-  var vec = create$2();
-  return function (a, stride, offset, count, fn, arg) {
-    var i, l;
-
-    if (!stride) {
-      stride = 4;
-    }
-
-    if (!offset) {
-      offset = 0;
-    }
-
-    if (count) {
-      l = Math.min(count * stride + offset, a.length);
-    } else {
-      l = a.length;
-    }
-
-    for (i = offset; i < l; i += stride) {
-      vec[0] = a[i];
-      vec[1] = a[i + 1];
-      vec[2] = a[i + 2];
-      vec[3] = a[i + 3];
-      fn(vec, vec, arg);
-      a[i] = vec[0];
-      a[i + 1] = vec[1];
-      a[i + 2] = vec[2];
-      a[i + 3] = vec[3];
-    }
-
-    return a;
-  };
-})();
-
-/**
- * 2 Dimensional Vector
- * @module vec2
- */
-
-/**
- * Creates a new, empty vec2
- *
- * @returns {vec2} a new 2D vector
- */
-
-function create$1() {
-  var out = new ARRAY_TYPE(2);
-
-  if (ARRAY_TYPE != Float32Array) {
-    out[0] = 0;
-    out[1] = 0;
-  }
-
-  return out;
-}
-/**
- * Perform some operation over an array of vec2s.
- *
- * @param {Array} a the array of vectors to iterate over
- * @param {Number} stride Number of elements between the start of each vec2. If 0 assumes tightly packed
- * @param {Number} offset Number of elements to skip at the beginning of the array
- * @param {Number} count Number of vec2s to iterate over. If 0 iterates over entire array
- * @param {Function} fn Function to call for each vector in the array
- * @param {Object} [arg] additional argument to pass to fn
- * @returns {Array} a
- * @function
- */
-
-(function () {
-  var vec = create$1();
-  return function (a, stride, offset, count, fn, arg) {
-    var i, l;
-
-    if (!stride) {
-      stride = 2;
-    }
-
-    if (!offset) {
-      offset = 0;
-    }
-
-    if (count) {
-      l = Math.min(count * stride + offset, a.length);
-    } else {
-      l = a.length;
-    }
-
-    for (i = offset; i < l; i += stride) {
-      vec[0] = a[i];
-      vec[1] = a[i + 1];
-      fn(vec, vec, arg);
-      a[i] = vec[0];
-      a[i + 1] = vec[1];
-    }
-
-    return a;
-  };
-})();
-
-/**
- * 3 Dimensional Vector
- * @module vec3
- */
-
-/**
- * Creates a new, empty vec3
- *
- * @returns {vec3} a new 3D vector
- */
-
-function create() {
-  var out = new ARRAY_TYPE(3);
-
-  if (ARRAY_TYPE != Float32Array) {
-    out[0] = 0;
-    out[1] = 0;
-    out[2] = 0;
-  }
-
-  return out;
-}
-/**
- * Perform some operation over an array of vec3s.
- *
- * @param {Array} a the array of vectors to iterate over
- * @param {Number} stride Number of elements between the start of each vec3. If 0 assumes tightly packed
- * @param {Number} offset Number of elements to skip at the beginning of the array
- * @param {Number} count Number of vec3s to iterate over. If 0 iterates over entire array
- * @param {Function} fn Function to call for each vector in the array
- * @param {Object} [arg] additional argument to pass to fn
- * @returns {Array} a
- * @function
- */
-
-(function () {
-  var vec = create();
-  return function (a, stride, offset, count, fn, arg) {
-    var i, l;
-
-    if (!stride) {
-      stride = 3;
-    }
-
-    if (!offset) {
-      offset = 0;
-    }
-
-    if (count) {
-      l = Math.min(count * stride + offset, a.length);
-    } else {
-      l = a.length;
-    }
-
-    for (i = offset; i < l; i += stride) {
-      vec[0] = a[i];
-      vec[1] = a[i + 1];
-      vec[2] = a[i + 2];
-      fn(vec, vec, arg);
-      a[i] = vec[0];
-      a[i + 1] = vec[1];
-      a[i + 2] = vec[2];
-    }
-
-    return a;
-  };
-})();
-
 const PI = Math.PI;
 const PI_4 = PI / 4;
 const RADIANS_TO_DEGREES = 180 / PI;
@@ -14602,13 +15602,11 @@ class CogBitmapLayer extends CompositeLayer {
                 maxRequests: 6,
                 extent: this.cogTiles.cog ? this.cogTiles.getBoundsAsLatLon(this.cogTiles.cog) : null,
                 renderSubLayers: (props) => {
+                    var _a, _b, _c, _d, _e, _f, _g;
                     const { bbox: { west, south, east, north, }, } = props.tile;
-                    return new BitmapLayer(props, {
-                        data: null,
-                        image: props.data,
-                        bounds: [west, south, east, north],
-                        opacity: 1, // 0.6
-                    });
+                    return new BitmapLayer(props, Object.assign({ data: null, image: props.data, bounds: [west, south, east, north], opacity: 1, extensions: ((_b = (_a = this.cogTiles) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.clampToTerrain) ? [new TerrainExtension()] : [] }, (((_e = (_d = (_c = this.cogTiles) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.clampToTerrain) === null || _e === void 0 ? void 0 : _e.terrainDrawMode)
+                        ? { terrainDrawMode: (_g = (_f = this.cogTiles) === null || _f === void 0 ? void 0 : _f.options) === null || _g === void 0 ? void 0 : _g.clampToTerrain.terrainDrawMode }
+                        : {})));
                 },
             });
             return layer;