@deck.gl/extensions 9.0.0-beta.2 → 9.0.0-beta.3

package/dist/terrain/terrain-cover.js

@@ -0,0 +1,187 @@
+import { createRenderTarget } from "./utils.js";
+import { joinLayerBounds, makeViewport, getRenderBounds } from "../utils/projection-utils.js";
+/**
+ * Manages the lifecycle of the terrain cover (draped textures over a terrain mesh).
+ * One terrain cover is created for each unique terrain layer (primitive layer with operation:terrain).
+ * It is updated when the terrain source layer's mesh changes or when any of the terrainDrawMode:drape
+ * layers requires redraw.
+ * During the draw call of a terrain layer, the drape texture is overlaid on top of the layer's own color.
+ */
+export class TerrainCover {
+    constructor(targetLayer) {
+        this.isDirty = true;
+        /** Viewport used to draw into the texture */
+        this.renderViewport = null;
+        /** Bounds of the terrain cover texture, in cartesian space */
+        this.bounds = null;
+        this.layers = [];
+        /** Cached version of targetLayer.getBounds() */
+        this.targetBounds = null;
+        /** targetBounds in cartesian space */
+        this.targetBoundsCommon = null;
+        this.targetLayer = targetLayer;
+        this.tile = getTile(targetLayer);
+    }
+    get id() {
+        return this.targetLayer.id;
+    }
+    /** returns true if the target layer is still in use (i.e. not finalized) */
+    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;
+                    // console.log('layer needs redraw', id);
+                    break;
+                }
+            }
+        }
+        return layersChanged || sizeChanged;
+    }
+    /** Compare layers with the last version. Only rerender if necessary. */
+    _updateLayers(layers) {
+        let needsRedraw = false;
+        layers = this.tile ? getIntersectingLayers(this.tile, layers) : layers;
+        if (layers.length !== this.layers.length) {
+            needsRedraw = true;
+            // console.log('layers count changed', this.layers.length, '>>', layers.length);
+        }
+        else {
+            for (let i = 0; i < layers.length; i++) {
+                const id = layers[i].id;
+                if (id !== this.layers[i]) {
+                    needsRedraw = true;
+                    // console.log('layer added/removed', id);
+                    break;
+                }
+            }
+        }
+        if (needsRedraw) {
+            this.layers = layers.map(layer => layer.id);
+        }
+        return needsRedraw;
+    }
+    /** Compare viewport and terrain bounds with the last version. Only rerender if necesary. */
+    _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()) {
+            // console.log('bounds changed', this.bounds, '>>', newBounds);
+            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 the terrain layer is bound to a tile, always render a texture that cover the whole tile.
+        // Otherwise, use the smaller of layer bounds and the viewport bounds.
+        if (this.tile) {
+            this.bounds = this.targetBoundsCommon;
+        }
+        else {
+            const oldZoom = 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.device, { 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.device, {
+                id: `${this.id}-picking`
+            });
+        }
+        return this.pickingFbo;
+    }
+    filterLayers(layers) {
+        return layers.filter(({ id }) => this.layers.includes(id));
+    }
+    delete() {
+        const { fbo, pickingFbo } = this;
+        if (fbo) {
+            fbo.colorAttachments[0].destroy();
+            fbo.destroy();
+        }
+        if (pickingFbo) {
+            pickingFbo.colorAttachments[0].destroy();
+            pickingFbo.destroy();
+        }
+    }
+}
+/**
+ * Remove layers that do not overlap with the current terrain cover.
+ * This implementation only has effect when a TileLayer is overlaid on top of a TileLayer
+ */
+function getIntersectingLayers(sourceTile, layers) {
+    return layers.filter(layer => {
+        const tile = getTile(layer);
+        if (tile) {
+            return intersect(sourceTile.boundingBox, tile.boundingBox);
+        }
+        return true;
+    });
+}
+/** If layer is the descendent of a TileLayer, return the corresponding tile. */
+function getTile(layer) {
+    while (layer) {
+        // @ts-expect-error tile may not exist
+        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;
+}

package/{typed → dist}/terrain/terrain-effect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"terrain-effect.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAU,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAgB,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAMrE,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAW,MAAM,eAAe,CAAC;AAE7E,qCAAqC;AACrC,qBAAa,aAAc,YAAW,MAAM;IAC1C,EAAE,SAAoB;IACtB,KAAK,OAAQ;IACb,YAAY,UAAQ;IAEpB,0CAA0C;IAC1C,OAAO,CAAC,SAAS,CAAkB;IACnC,6CAA6C;IAC7C,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,sCAAsC;IACtC,OAAO,CAAC,cAAc,CAAC,CAAU;IACjC,wGAAwG;IACxG,OAAO,CAAC,SAAS,CAAC,CAAmB;IACrC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAsB;IAChD,wFAAwF;IACxF,OAAO,CAAC,aAAa,CAAwC;IAE7D,UAAU,CAAC,MAAM,EAAE,MAAM;IAkBzB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI;IA8CvD,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,qBAAqB;IAcxD,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,oBAAoB;IA2B5B,OAAO,CAAC,mBAAmB;IAmC3B,OAAO,CAAC,mBAAmB;CAY5B"}
+{"version":3,"file":"terrain-effect.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAU,MAAM,eAAe,CAAC;AAG9C,OAAO,EAAgB,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAMrE,OAAO,KAAK,EAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAW,MAAM,eAAe,CAAC;AAE7E,qCAAqC;AACrC,qBAAa,aAAc,YAAW,MAAM;IAC1C,EAAE,SAAoB;IACtB,KAAK,OAAQ;IACb,YAAY,UAAQ;IAEpB,0CAA0C;IAC1C,OAAO,CAAC,SAAS,CAAkB;IACnC,6CAA6C;IAC7C,OAAO,CAAC,gBAAgB,CAAkB;IAC1C,sCAAsC;IACtC,OAAO,CAAC,cAAc,CAAC,CAAU;IACjC,wGAAwG;IACxG,OAAO,CAAC,SAAS,CAAC,CAAmB;IACrC,OAAO,CAAC,WAAW,CAAe;IAClC,OAAO,CAAC,kBAAkB,CAAsB;IAChD,wFAAwF;IACxF,OAAO,CAAC,aAAa,CAAwC;IAE7D,UAAU,CAAC,MAAM,EAAE,MAAM;IAkBzB,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,gBAAgB,GAAG,IAAI;IA+CvD,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG,qBAAqB;IAcxD,OAAO,IAAI,IAAI;IAiBf,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,oBAAoB;IA2B5B,OAAO,CAAC,mBAAmB;IAwC3B,OAAO,CAAC,mBAAmB;CAY5B"}

package/dist/terrain/terrain-effect.js

@@ -0,0 +1,184 @@
+import { log, getShaderAssembler } from '@deck.gl/core';
+import { terrainModule } from "./shader-module.js";
+import { TerrainCover } from "./terrain-cover.js";
+import { TerrainPass } from "./terrain-pass.js";
+import { TerrainPickingPass } from "./terrain-picking-pass.js";
+import { HeightMapBuilder } from "./height-map-builder.js";
+/** Class to manage terrain effect */
+export class TerrainEffect {
+    constructor() {
+        this.id = 'terrain-effect';
+        this.props = null;
+        this.useInPicking = true;
+        /** true if picking in the current pass */
+        this.isPicking = false;
+        /** true if should use in the current pass */
+        this.isDrapingEnabled = false;
+        /** One texture for each primitive terrain layer, into which the draped layers render */
+        this.terrainCovers = new Map();
+    }
+    initialize(device) {
+        this.dummyHeightMap = device.createTexture({
+            width: 1,
+            height: 1,
+            data: new Uint8Array([0, 0, 0, 0])
+        });
+        this.terrainPass = new TerrainPass(device, { id: 'terrain' });
+        this.terrainPickingPass = new TerrainPickingPass(device, { id: 'terrain-picking' });
+        if (HeightMapBuilder.isSupported(device)) {
+            this.heightMap = new HeightMapBuilder(device);
+        }
+        else {
+            log.warn('Terrain offset mode is not supported by this browser')();
+        }
+        getShaderAssembler().addDefaultModule(terrainModule);
+    }
+    preRender(device, opts) {
+        if (!this.dummyHeightMap) {
+            // First time this effect is in use, initialize resources and register the shader module
+            this.initialize(device);
+            for (const layer of opts.layers) {
+                // Force the terrain layer (and its descendents) to rebuild their models with the new shader
+                if (layer.props.operation.includes('terrain')) {
+                    layer.setChangeFlags({ extensionsChanged: true });
+                }
+            }
+        }
+        // @ts-expect-error pickZ only defined in picking pass
+        if (opts.pickZ) {
+            // Do not update if picking attributes
+            this.isDrapingEnabled = false;
+            return;
+        }
+        const { viewports } = opts;
+        const isPicking = opts.pass.startsWith('picking');
+        this.isPicking = isPicking;
+        this.isDrapingEnabled = true;
+        // TODO - support multiple views?
+        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) {
+        const { terrainDrawMode } = layer.state;
+        return {
+            // @ts-expect-error
+            heightMap: this.heightMap?.getRenderFramebuffer(),
+            heightMapBounds: this.heightMap?.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) {
+            // Not supported
+            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) {
+        // Mark a terrain cover as dirty if one of the drape layers needs redraw
+        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
+                    }
+                });
+                if (!this.isPicking) {
+                    // IsDirty refers to the normal fbo, not the picking fbo.
+                    // Only mark it as not dirty if the normal fbo was updated.
+                    terrainCover.isDirty = false;
+                }
+            }
+        }
+        catch (err) {
+            terrainLayer.raiseError(err, `Error rendering terrain cover ${terrainCover.id}`);
+        }
+    }
+    _pruneTerrainCovers() {
+        /** Prune the cache, remove textures for layers that have been removed */
+        const idsToRemove = [];
+        for (const [id, terrainCover] of this.terrainCovers) {
+            if (!terrainCover.isActive) {
+                idsToRemove.push(id);
+            }
+        }
+        for (const id of idsToRemove) {
+            this.terrainCovers.delete(id);
+        }
+    }
+}

package/dist/terrain/terrain-extension.js

@@ -0,0 +1,44 @@
+import { LayerExtension } from '@deck.gl/core';
+import { TerrainEffect } from "./terrain-effect.js";
+import { terrainModule } from "./shader-module.js";
+const defaultProps = {
+    terrainDrawMode: undefined
+};
+/** Allows layers to show/hide objects by a geofence. */
+export default class TerrainExtension extends LayerExtension {
+    static { this.defaultProps = defaultProps; }
+    static { this.extensionName = 'TerrainExtension'; }
+    getShaders() {
+        return {
+            modules: [terrainModule]
+        };
+    }
+    initializeState() {
+        this.context.deck?._addDefaultEffect(new TerrainEffect());
+    }
+    updateState(params) {
+        const { props, oldProps } = params;
+        if (this.state.terrainDrawMode &&
+            props.terrainDrawMode === oldProps.terrainDrawMode &&
+            // @ts-ignore `extruded` may not exist in props
+            props.extruded === oldProps.extruded) {
+            return;
+        }
+        let { terrainDrawMode } = props;
+        if (!terrainDrawMode) {
+            // props.extruded is used as an indication that the layer is 2.5D
+            // @ts-ignore `extruded` may not exist in props
+            const is3d = this.props.extruded;
+            const attributes = this.getAttributeManager()?.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;
+        }
+    }
+}

package/{typed → dist}/terrain/terrain-pass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"terrain-pass.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-pass.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,IAAI,UAAU,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AAClG,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC;AAE/D,6DAA6D;AAC7D,qBAAa,WAAY,SAAQ,UAAU;IACzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,wBAAwB,GAAG,KAAK,EAAE;IAchF,eAAe,CAAC,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,CAAC,wBAAwB,CAAC;IAgCpF,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,CAAC,wBAAwB,CAAC;CA6BvF"}
+{"version":3,"file":"terrain-pass.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-pass.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,KAAK,EAAE,QAAQ,EAAE,WAAW,IAAI,UAAU,EAAE,uBAAuB,EAAC,MAAM,eAAe,CAAC;AAClG,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,sBAAsB,CAAC;AAC3D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,wBAAwB,GAAG,uBAAuB,CAAC;AAE/D,6DAA6D;AAC7D,qBAAa,WAAY,SAAQ,UAAU;IACzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,wBAAwB,GAAG,KAAK,EAAE;IAchF,eAAe,CAAC,SAAS,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,CAAC,wBAAwB,CAAC;IA+BpF,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,CAAC,wBAAwB,CAAC;CA4BvF"}

package/dist/terrain/terrain-pass.js

@@ -0,0 +1,61 @@
+import { GL } from '@luma.gl/constants';
+import { _LayersPass as LayersPass } from '@deck.gl/core';
+/** Renders textures used by the TerrainEffect render pass */
+export 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) {
+        // console.log('Updating height map')
+        const target = heightMap.getRenderFramebuffer();
+        const viewport = heightMap.renderViewport;
+        if (!target || !viewport) {
+            return;
+        }
+        target.resize(viewport);
+        this.device.withParametersWebGL({
+            clearColor: [0, 0, 0, 0],
+            blend: true,
+            blendFunc: [GL.ONE, GL.ONE],
+            blendEquation: GL.MAX,
+            depthTest: false
+        }, () => this.render({
+            ...opts,
+            target,
+            pass: 'terrain-height-map',
+            layers: opts.layers,
+            viewports: [viewport],
+            effects: []
+        }));
+    }
+    renderTerrainCover(terrainCover, opts) {
+        // console.log('Updating terrain cover ' + terrainCover.id)
+        const target = terrainCover.getRenderFramebuffer();
+        const viewport = terrainCover.renderViewport;
+        if (!target || !viewport) {
+            return;
+        }
+        const layers = terrainCover.filterLayers(opts.layers);
+        target.resize(viewport);
+        this.device.withParametersWebGL({
+            clearColor: [0, 0, 0, 0],
+            depthTest: false
+        }, () => this.render({
+            ...opts,
+            target,
+            pass: `terrain-cover-${terrainCover.id}`,
+            layers,
+            effects: [],
+            viewports: [viewport]
+        }));
+    }
+}

package/{typed → dist}/terrain/terrain-picking-pass.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"terrain-picking-pass.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-picking-pass.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,QAAQ,EACR,uBAAuB,EACvB,eAAe,IAAI,cAAc,EAClC,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,+BAA+B,GAAG,uBAAuB,GAAG;IACtE,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,8DAA8D;AAC9D,qBAAa,kBAAmB,SAAQ,cAAc;IACpD;;;;;OAKG;IACH,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAEzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,+BAA+B,GAAG,KAAK,EAAE;IAiBvF,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,CAAC,+BAA+B,CAAC;IAsC7F,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;CAQxF"}
+{"version":3,"file":"terrain-picking-pass.d.ts","sourceRoot":"","sources":["../../src/terrain/terrain-picking-pass.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,EACL,QAAQ,EACR,uBAAuB,EACvB,eAAe,IAAI,cAAc,EAClC,MAAM,eAAe,CAAC;AACvB,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,+BAA+B,GAAG,uBAAuB,GAAG;IACtE,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AAEF,8DAA8D;AAC9D,qBAAa,kBAAmB,SAAQ,cAAc;IACpD;;;;;OAKG;IACH,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAM;IAEzC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,+BAA+B,GAAG,KAAK,EAAE;IAiBvF,kBAAkB,CAAC,YAAY,EAAE,YAAY,EAAE,IAAI,EAAE,OAAO,CAAC,+BAA+B,CAAC;IAqC7F,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;CAQxF"}

package/dist/terrain/terrain-picking-pass.js

@@ -0,0 +1,66 @@
+import { _PickLayersPass as PickLayersPass } from '@deck.gl/core';
+/** Renders textures used by the TerrainEffect picking pass */
+export class TerrainPickingPass extends PickLayersPass {
+    constructor() {
+        super(...arguments);
+        /** Save layer index for use when drawing to terrain cover.
+         * When a terrain cover's picking buffer is rendered,
+         * we need to make sure each layer receives a consistent index (encoded in the alpha channel)
+         * so that a picked color can be decoded back to the correct layer.
+         * Updated in getRenderableLayers which is called in TerrainEffect.preRender
+         */
+        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) {
+        // console.log('Updating terrain cover for picking ' + terrainCover.id)
+        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);
+        this.device.withParametersWebGL({
+            depthTest: false
+        }, () => this.render({
+            ...opts,
+            pickingFBO: target,
+            pass: `terrain-cover-picking-${terrainCover.id}`,
+            layers,
+            effects: [],
+            viewports: [viewport],
+            // Disable the default culling because TileLayer would cull sublayers based on the screen viewport,
+            // not the viewport of the terrain cover. Culling is already done by `terrainCover.filterLayers`
+            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;
+    }
+}

package/dist/terrain/utils.js

@@ -0,0 +1,21 @@
+import { GL } from '@luma.gl/constants';
+export function createRenderTarget(device, opts) {
+    return device.createFramebuffer({
+        id: opts.id,
+        colorAttachments: [
+            device.createTexture({
+                ...(opts.float && {
+                    format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
+                    type: GL.FLOAT
+                }),
+                mipmaps: false,
+                sampler: {
+                    minFilter: 'linear',
+                    magFilter: 'linear',
+                    addressModeU: 'clamp-to-edge',
+                    addressModeV: 'clamp-to-edge'
+                }
+            })
+        ]
+    });
+}

package/{typed → dist}/utils/debug.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/utils/debug.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAG1C,qDAAqD;AAErD,eAAO,MAAM,QAAQ,QACd,WAAW;;;UAmDjB,CAAC"}
+{"version":3,"file":"debug.d.ts","sourceRoot":"","sources":["../../src/utils/debug.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAE1C,qDAAqD;AAErD,eAAO,MAAM,QAAQ,QACd,WAAW;;;UAmDjB,CAAC"}

package/dist/utils/debug.js

@@ -0,0 +1,50 @@
+/* global document */
+/** Debug utility to draw FBO contents onto screen */
+// eslint-disable-next-line
+export const debugFBO = function (fbo, { minimap, opaque } = {}) {
+    const color = fbo.device.readPixelsToArrayWebGL(fbo);
+    let canvas = document.getElementById('fbo-canvas');
+    const canvasHeight = (minimap ? 2 : 1) * fbo.height;
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+        canvas.id = 'fbo-canvas';
+        canvas.style.zIndex = '100';
+        canvas.style.position = 'absolute';
+        canvas.style.top = '0';
+        canvas.style.right = '0';
+        canvas.style.border = 'blue 1px solid';
+        canvas.style.transform = 'scaleY(-1)';
+        document.body.appendChild(canvas);
+    }
+    if (canvas.width !== fbo.width || canvas.height !== canvasHeight) {
+        canvas.width = fbo.width;
+        canvas.height = canvasHeight;
+        canvas.style.width = '400px';
+    }
+    const ctx = canvas.getContext('2d');
+    const imageData = ctx.createImageData(canvas.width, canvas.height);
+    // Minimap
+    if (minimap) {
+        const zoom = 8; // Zoom factor for minimap
+        const { width, height } = canvas;
+        for (let y = 0; y < height; y++) {
+            for (let x = 0; x < width; x++) {
+                const d = 4 * (x + y * width); // destination pixel
+                const s = 4 * (Math.floor(x / zoom) + Math.floor(y / zoom) * width); // source
+                imageData.data[d + 0] = color[s + 0];
+                imageData.data[d + 1] = color[s + 1];
+                imageData.data[d + 2] = color[s + 2];
+                imageData.data[d + 3] = opaque ? 255 : color[s + 3];
+            }
+        }
+    }
+    // Full map
+    const offset = minimap ? color.length : 0;
+    for (let i = 0; i < color.length; i += 4) {
+        imageData.data[offset + i + 0] = color[i + 0];
+        imageData.data[offset + i + 1] = color[i + 1];
+        imageData.data[offset + i + 2] = color[i + 2];
+        imageData.data[offset + i + 3] = opaque ? 255 : color[i + 3];
+    }
+    ctx.putImageData(imageData, 0, 0);
+};