@deck.gl/extensions 9.0.0-beta.1 → 9.0.0-beta.11

package/dist/brushing/brushing-extension.js

@@ -0,0 +1,80 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { LayerExtension } from '@deck.gl/core';
+import shaderModule from "./shader-module.js";
+const defaultProps = {
+    getBrushingTarget: { type: 'accessor', value: [0, 0] },
+    brushingTarget: 'source',
+    brushingEnabled: true,
+    brushingRadius: 10000
+};
+/** Adds GPU-based data brushing functionalities to layers. It allows the layer to show/hide objects based on the current pointer position. */
+export default class BrushingExtension extends LayerExtension {
+    static { this.defaultProps = defaultProps; }
+    static { this.extensionName = 'BrushingExtension'; }
+    getShaders() {
+        return {
+            modules: [shaderModule]
+        };
+    }
+    initializeState(context, extension) {
+        const attributeManager = this.getAttributeManager();
+        if (attributeManager) {
+            attributeManager.add({
+                brushingTargets: {
+                    size: 2,
+                    accessor: 'getBrushingTarget',
+                    shaderAttributes: {
+                        brushingTargets: {
+                            divisor: 0
+                        },
+                        instanceBrushingTargets: {
+                            divisor: 1
+                        }
+                    }
+                }
+            });
+        }
+        // Trigger redraw when mouse moves
+        const onMouseMove = () => {
+            this.getCurrentLayer()?.setNeedsRedraw();
+        };
+        // TODO - expose this in a better way
+        this.state.onMouseMove = onMouseMove;
+        if (context.deck) {
+            // @ts-expect-error (2446) accessing protected property
+            context.deck.eventManager.on({
+                pointermove: onMouseMove,
+                pointerleave: onMouseMove
+            });
+        }
+    }
+    finalizeState(context, extension) {
+        // Remove event listeners
+        if (context.deck) {
+            const onMouseMove = this.state.onMouseMove;
+            // @ts-expect-error (2446) accessing protected property
+            context.deck.eventManager.off({
+                pointermove: onMouseMove,
+                pointerleave: onMouseMove
+            });
+        }
+    }
+}

package/{typed → dist}/brushing/shader-module.d.ts

@@ -1,6 +1,6 @@
 import type { ShaderModule } from '@luma.gl/shadertools';
 import type { Viewport } from '@deck.gl/core';
-import type { BrushingExtensionProps } from './brushing-extension';
+import type { BrushingExtensionProps } from "./brushing-extension.js";
 type BrushingModuleSettings = {
     viewport: Viewport;
     mousePosition?: {

package/{typed → dist}/brushing/shader-module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/brushing/shader-module.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,MAAM,sBAAsB,CAAC;AAEjE,KAAK,sBAAsB,GAAG;IAE5B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CACxC,GAAG,sBAAsB,CAAC;;AAkF3B,wBA4B0C"}
+{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/brushing/shader-module.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAEvD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,eAAe,CAAC;AAE5C,OAAO,KAAK,EAAC,sBAAsB,EAAC,gCAA6B;AAGjE,KAAK,sBAAsB,GAAG;IAE5B,QAAQ,EAAE,QAAQ,CAAC;IACnB,aAAa,CAAC,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;CACxC,GAAG,sBAAsB,CAAC;;AAkF3B,wBA4B0C"}

package/dist/brushing/shader-module.js

@@ -0,0 +1,92 @@
+import { project } from '@deck.gl/core';
+import { glsl } from "../utils/syntax-tags.js";
+const vs = `
+uniform bool brushing_enabled;
+uniform int brushing_target;
+uniform vec2 brushing_mousePos;
+uniform float brushing_radius;
+#ifdef NON_INSTANCED_MODEL
+in vec2 brushingTargets;
+#else
+in vec2 instanceBrushingTargets;
+#endif
+out float brushing_isVisible;
+bool brushing_isPointInRange(vec2 position) {
+if (!brushing_enabled) {
+return true;
+}
+vec2 source_commonspace = project_position(position);
+vec2 target_commonspace = project_position(brushing_mousePos);
+float distance = length((target_commonspace - source_commonspace) / project_uCommonUnitsPerMeter.xy);
+return distance <= brushing_radius;
+}
+bool brushing_arePointsInRange(vec2 sourcePos, vec2 targetPos) {
+return brushing_isPointInRange(sourcePos) || brushing_isPointInRange(targetPos);
+}
+void brushing_setVisible(bool visible) {
+brushing_isVisible = float(visible);
+}
+`;
+const fs = `
+uniform bool brushing_enabled;
+in float brushing_isVisible;
+`;
+const TARGET = {
+    source: 0,
+    target: 1,
+    custom: 2,
+    source_target: 3
+};
+const inject = {
+    'vs:DECKGL_FILTER_GL_POSITION': `
+vec2 brushingTarget;
+vec2 brushingSource;
+if (brushing_target == 3) {
+brushingTarget = geometry.worldPositionAlt.xy;
+brushingSource = geometry.worldPosition.xy;
+} else if (brushing_target == 0) {
+brushingTarget = geometry.worldPosition.xy;
+} else if (brushing_target == 1) {
+brushingTarget = geometry.worldPositionAlt.xy;
+} else {
+#ifdef NON_INSTANCED_MODEL
+brushingTarget = brushingTargets;
+#else
+brushingTarget = instanceBrushingTargets;
+#endif
+}
+bool visible;
+if (brushing_target == 3) {
+visible = brushing_arePointsInRange(brushingSource, brushingTarget);
+} else {
+visible = brushing_isPointInRange(brushingTarget);
+}
+brushing_setVisible(visible);
+`,
+    'fs:DECKGL_FILTER_COLOR': `
+    if (brushing_enabled && brushing_isVisible < 0.5) {
+      discard;
+    }
+  `
+};
+export default {
+    name: 'brushing',
+    dependencies: [project],
+    vs,
+    fs,
+    inject,
+    getUniforms: (opts) => {
+        if (!opts || !('viewport' in opts)) {
+            return {};
+        }
+        const { brushingEnabled = true, brushingRadius = 10000, brushingTarget = 'source', mousePosition, viewport } = opts;
+        return {
+            brushing_enabled: Boolean(brushingEnabled && mousePosition && viewport.containsPixel(mousePosition)),
+            brushing_radius: brushingRadius,
+            brushing_target: TARGET[brushingTarget] || 0,
+            brushing_mousePos: mousePosition
+                ? viewport.unproject([mousePosition.x - viewport.x, mousePosition.y - viewport.y])
+                : [0, 0]
+        };
+    }
+};

package/{typed → dist}/clip/clip-extension.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"clip-extension.d.ts","sourceRoot":"","sources":["../../src/clip/clip-extension.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAE7C,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAOzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA0DF,uEAAuE;AACvE,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,cAAc;IACvD,MAAM,CAAC,YAAY;;;MAAgB;IACnC,MAAM,CAAC,aAAa,SAAmB;IAEvC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,kBAAkB,CAAC;;;;;;;;;IAwB1C,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,EAAE,EAAC,QAAQ,EAAC,EAAE,GAAG,GAAG,IAAI;CAgBvE"}
+{"version":3,"file":"clip-extension.d.ts","sourceRoot":"","sources":["../../src/clip/clip-extension.ts"],"names":[],"mappings":"AAoBA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AACvD,OAAO,EAAC,cAAc,EAAC,MAAM,eAAe,CAAC;AAE7C,OAAO,KAAK,EAAC,KAAK,EAAC,MAAM,eAAe,CAAC;AAQzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9C;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AA0DF,uEAAuE;AACvE,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,cAAc;IACvD,MAAM,CAAC,YAAY;;;MAAgB;IACnC,MAAM,CAAC,aAAa,SAAmB;IAEvC,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC,kBAAkB,CAAC;;;;;;;;;IAwB1C,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC,EAAE,EAAC,QAAQ,EAAC,EAAE,GAAG,GAAG,IAAI;CAgBvE"}

package/dist/clip/clip-extension.js

@@ -0,0 +1,117 @@
+// Copyright (c) 2015 - 2017 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+import { LayerExtension } from '@deck.gl/core';
+import { glsl } from "../utils/syntax-tags.js";
+const defaultProps = {
+    clipBounds: [0, 0, 1, 1],
+    clipByInstance: undefined
+};
+const shaderFunction = `
+uniform vec4 clip_bounds;
+bool clip_isInBounds(vec2 position) {
+return position.x >= clip_bounds[0] && position.y >= clip_bounds[1] && position.x < clip_bounds[2] && position.y < clip_bounds[3];
+}
+`;
+/*
+ * The vertex-shader version clips geometries by their anchor position
+ * e.g. ScatterplotLayer - show if the center of a circle is within bounds
+ */
+const shaderModuleVs = {
+    name: 'clip-vs',
+    vs: shaderFunction
+};
+const injectionVs = {
+    'vs:#decl': `
+out float clip_isVisible;
+`,
+    'vs:DECKGL_FILTER_GL_POSITION': `
+clip_isVisible = float(clip_isInBounds(geometry.worldPosition.xy));
+`,
+    'fs:#decl': `
+in float clip_isVisible;
+`,
+    'fs:DECKGL_FILTER_COLOR': `
+if (clip_isVisible < 0.5) discard;
+`
+};
+/*
+ * The fragment-shader version clips pixels at the bounds
+ * e.g. PolygonLayer - show the part of the polygon that intersect with the bounds
+ */
+const shaderModuleFs = {
+    name: 'clip-fs',
+    fs: shaderFunction
+};
+const injectionFs = {
+    'vs:#decl': `
+out vec2 clip_commonPosition;
+`,
+    'vs:DECKGL_FILTER_GL_POSITION': `
+clip_commonPosition = geometry.position.xy;
+`,
+    'fs:#decl': `
+in vec2 clip_commonPosition;
+`,
+    'fs:DECKGL_FILTER_COLOR': `
+if (!clip_isInBounds(clip_commonPosition)) discard;
+`
+};
+/** Adds support for clipping rendered layers by rectangular bounds. */
+export default class ClipExtension extends LayerExtension {
+    static { this.defaultProps = defaultProps; }
+    static { this.extensionName = 'ClipExtension'; }
+    getShaders() {
+        // If `clipByInstance: true`, the entire object is shown/hidden based on its anchor position (done by vertex shader)
+        // Otherwise, the object is trimmed by the clip bounds (done by fragment shader)
+        // Default behavior: consider a layer instanced if it has attribute `instancePositions`
+        let clipByInstance = 'instancePositions' in this.getAttributeManager().attributes;
+        // Users can override by setting the `clipByInstance` prop
+        if (this.props.clipByInstance !== undefined) {
+            clipByInstance = Boolean(this.props.clipByInstance);
+        }
+        this.state.clipByInstance = clipByInstance;
+        return clipByInstance
+            ? {
+                modules: [shaderModuleVs],
+                inject: injectionVs
+            }
+            : {
+                modules: [shaderModuleFs],
+                inject: injectionFs
+            };
+    }
+    /* eslint-disable camelcase */
+    draw({ uniforms }) {
+        const { clipBounds } = this.props;
+        if (this.state.clipByInstance) {
+            uniforms.clip_bounds = clipBounds;
+        }
+        else {
+            const corner0 = this.projectPosition([clipBounds[0], clipBounds[1], 0]);
+            const corner1 = this.projectPosition([clipBounds[2], clipBounds[3], 0]);
+            uniforms.clip_bounds = [
+                Math.min(corner0[0], corner1[0]),
+                Math.min(corner0[1], corner1[1]),
+                Math.max(corner0[0], corner1[0]),
+                Math.max(corner0[1], corner1[1])
+            ];
+        }
+    }
+}

package/{typed → dist}/collision-filter/collision-filter-effect.d.ts

@@ -1,16 +1,18 @@
 import { Device, Framebuffer, Texture } from '@luma.gl/core';
-import type { Effect, Layer, PreRenderOptions } from '@deck.gl/core';
+import type { Effect, EffectContext, Layer, PreRenderOptions } from '@deck.gl/core';
 export default class CollisionFilterEffect implements Effect {
     id: string;
     props: null;
     useInPicking: boolean;
     order: number;
+    private context?;
     private channels;
     private collisionFilterPass?;
     private collisionFBOs;
     private dummyCollisionMap?;
     private lastViewport?;
-    preRender(device: Device, { effects: allEffects, layers, layerFilter, viewports, onViewportActive, views, isPicking, preRenderStats }: PreRenderOptions): void;
+    setup(context: EffectContext): void;
+    preRender({ effects: allEffects, layers, layerFilter, viewports, onViewportActive, views, isPicking, preRenderStats }: PreRenderOptions): void;
     private _render;
     /**
      * Group layers by collisionGroup

package/dist/collision-filter/collision-filter-effect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collision-filter-effect.d.ts","sourceRoot":"","sources":["../../src/collision-filter/collision-filter-effect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AAG3D,OAAO,KAAK,EAAC,MAAM,EAAE,aAAa,EAAE,KAAK,EAAE,gBAAgB,EAAW,MAAM,eAAe,CAAC;AAoB5F,MAAM,CAAC,OAAO,OAAO,qBAAsB,YAAW,MAAM;IAC1D,EAAE,SAA6B;IAC/B,KAAK,OAAQ;IACb,YAAY,UAAQ;IACpB,KAAK,SAAK;IAEV,OAAO,CAAC,OAAO,CAAC,CAAgB;IAChC,OAAO,CAAC,QAAQ,CAAkC;IAClD,OAAO,CAAC,mBAAmB,CAAC,CAAsB;IAClD,OAAO,CAAC,aAAa,CAAmC;IACxD,OAAO,CAAC,iBAAiB,CAAC,CAAU;IACpC,OAAO,CAAC,YAAY,CAAC,CAAW;IAEhC,KAAK,CAAC,OAAO,EAAE,aAAa;IAO5B,SAAS,CAAC,EACR,OAAO,EAAE,UAAU,EACnB,MAAM,EACN,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,cAAmB,EACpB,EAAE,gBAAgB,GAAG,IAAI;IAoD1B,OAAO,CAAC,OAAO;IA+Df;;;OAGG;IACH,OAAO,CAAC,sBAAsB;IAqC9B,mBAAmB,CAAC,KAAK,EAAE,KAAK,GAAG;QACjC,YAAY,EAAE,WAAW,CAAC;QAC1B,iBAAiB,EAAE,OAAO,CAAC;KAC5B;IAMD,OAAO,IAAI,IAAI;IAaf,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM;IAmChD,UAAU,CAAC,cAAc,EAAE,MAAM;CAOlC"}

package/dist/collision-filter/collision-filter-effect.js

@@ -0,0 +1,194 @@
+import { equals } from '@math.gl/core';
+import { _deepEqual as deepEqual } from '@deck.gl/core';
+import CollisionFilterPass from "./collision-filter-pass.js";
+// Factor by which to downscale Collision FBO relative to canvas
+const DOWNSCALE = 2;
+export default class CollisionFilterEffect {
+    constructor() {
+        this.id = 'collision-filter-effect';
+        this.props = null;
+        this.useInPicking = true;
+        this.order = 1;
+        this.channels = {};
+        this.collisionFBOs = {};
+    }
+    setup(context) {
+        this.context = context;
+        const { device } = context;
+        this.dummyCollisionMap = device.createTexture({ width: 1, height: 1 });
+        this.collisionFilterPass = new CollisionFilterPass(device, { id: 'default-collision-filter' });
+    }
+    preRender({ effects: allEffects, layers, layerFilter, viewports, onViewportActive, views, isPicking, preRenderStats = {} }) {
+        // This can only be called in preRender() after setup() where context is populated
+        const { device } = this.context;
+        if (isPicking) {
+            // Do not update on picking pass
+            return;
+        }
+        const collisionLayers = layers.filter(
+        // @ts-ignore
+        ({ props: { visible, collisionEnabled } }) => visible && collisionEnabled);
+        if (collisionLayers.length === 0) {
+            this.channels = {};
+            return;
+        }
+        // Detect if mask has rendered. TODO: better dependency system for Effects
+        const effects = allEffects?.filter(e => e.useInPicking && preRenderStats[e.id]);
+        const maskEffectRendered = preRenderStats['mask-effect']?.didRender;
+        // Collect layers to render
+        const channels = this._groupByCollisionGroup(device, collisionLayers);
+        const viewport = viewports[0];
+        const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport) || maskEffectRendered;
+        // Resize framebuffers to match canvas
+        for (const collisionGroup in channels) {
+            const collisionFBO = this.collisionFBOs[collisionGroup];
+            const renderInfo = channels[collisionGroup];
+            // @ts-expect-error TODO - assuming WebGL context
+            const [width, height] = device.canvasContext.getPixelSize();
+            collisionFBO.resize({
+                width: width / DOWNSCALE,
+                height: height / DOWNSCALE
+            });
+            this._render(renderInfo, {
+                effects,
+                layerFilter,
+                onViewportActive,
+                views,
+                viewport,
+                viewportChanged
+            });
+        }
+        // debugFBO(this.collisionFBOs[Object.keys(channels)[0]], {minimap: true});
+    }
+    _render(renderInfo, { effects, layerFilter, onViewportActive, views, viewport, viewportChanged }) {
+        const { collisionGroup } = renderInfo;
+        const oldRenderInfo = this.channels[collisionGroup];
+        if (!oldRenderInfo) {
+            return;
+        }
+        const needsRender = viewportChanged ||
+            // If render info is new
+            renderInfo === oldRenderInfo ||
+            // If sublayers have changed
+            !deepEqual(oldRenderInfo.layers, renderInfo.layers, 1) ||
+            // If a sublayer's bounds have been updated
+            renderInfo.layerBounds.some((b, i) => !equals(b, oldRenderInfo.layerBounds[i])) ||
+            // If a sublayer's isLoaded state has been updated
+            renderInfo.allLayersLoaded !== oldRenderInfo.allLayersLoaded ||
+            // Some prop is in transition
+            renderInfo.layers.some(layer => layer.props.transitions);
+        this.channels[collisionGroup] = renderInfo;
+        if (needsRender) {
+            this.lastViewport = viewport;
+            const collisionFBO = this.collisionFBOs[collisionGroup];
+            // Rerender collision FBO
+            this.collisionFilterPass.renderCollisionMap(collisionFBO, {
+                pass: 'collision-filter',
+                isPicking: true,
+                layers: renderInfo.layers,
+                effects,
+                layerFilter,
+                viewports: viewport ? [viewport] : [],
+                onViewportActive,
+                views,
+                moduleParameters: {
+                    // To avoid feedback loop forming between Framebuffer and active Texture.
+                    dummyCollisionMap: this.dummyCollisionMap,
+                    // @ts-expect-error TODO - assuming WebGL context
+                    devicePixelRatio: collisionFBO.device.canvasContext.getDevicePixelRatio() / DOWNSCALE
+                }
+            });
+        }
+    }
+    /**
+     * Group layers by collisionGroup
+     * Returns a map from collisionGroup to render info
+     */
+    _groupByCollisionGroup(device, collisionLayers) {
+        const channelMap = {};
+        for (const layer of collisionLayers) {
+            const { collisionGroup } = layer.props;
+            let channelInfo = channelMap[collisionGroup];
+            if (!channelInfo) {
+                channelInfo = { collisionGroup, layers: [], layerBounds: [], allLayersLoaded: true };
+                channelMap[collisionGroup] = channelInfo;
+            }
+            channelInfo.layers.push(layer);
+            channelInfo.layerBounds.push(layer.getBounds());
+            if (!layer.isLoaded) {
+                channelInfo.allLayersLoaded = false;
+            }
+        }
+        // Create any new passes and remove any old ones
+        for (const collisionGroup of Object.keys(channelMap)) {
+            if (!this.collisionFBOs[collisionGroup]) {
+                this.createFBO(device, collisionGroup);
+            }
+            if (!this.channels[collisionGroup]) {
+                this.channels[collisionGroup] = channelMap[collisionGroup];
+            }
+        }
+        for (const collisionGroup of Object.keys(this.collisionFBOs)) {
+            if (!channelMap[collisionGroup]) {
+                this.destroyFBO(collisionGroup);
+            }
+        }
+        return channelMap;
+    }
+    getModuleParameters(layer) {
+        const { collisionGroup } = layer.props;
+        const { collisionFBOs, dummyCollisionMap } = this;
+        return { collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap: dummyCollisionMap };
+    }
+    cleanup() {
+        if (this.dummyCollisionMap) {
+            this.dummyCollisionMap.delete();
+            this.dummyCollisionMap = undefined;
+        }
+        this.channels = {};
+        for (const collisionGroup of Object.keys(this.collisionFBOs)) {
+            this.destroyFBO(collisionGroup);
+        }
+        this.collisionFBOs = {};
+        this.lastViewport = undefined;
+    }
+    createFBO(device, collisionGroup) {
+        // @ts-expect-error
+        const { width, height } = device.gl.canvas;
+        const collisionMap = device.createTexture({
+            format: 'rgba8unorm',
+            width,
+            height,
+            sampler: {
+                minFilter: 'nearest',
+                magFilter: 'nearest',
+                addressModeU: 'clamp-to-edge',
+                addressModeV: 'clamp-to-edge'
+            }
+        });
+        // @ts-ignore
+        const depthStencilAttachment = device.createTexture({
+            format: 'depth16unorm',
+            width,
+            height,
+            mipmaps: false,
+            // TODO fix getWebGLTextureParameters() in luma to avoid passing deprecated parameters
+            dataFormat: 6402, // gl.DEPTH_COMPONENT
+            type: 5125 // gl.UNSIGNED_INT
+        });
+        this.collisionFBOs[collisionGroup] = device.createFramebuffer({
+            id: `collision-${collisionGroup}`,
+            width,
+            height,
+            colorAttachments: [collisionMap],
+            depthStencilAttachment
+        });
+    }
+    destroyFBO(collisionGroup) {
+        const fbo = this.collisionFBOs[collisionGroup];
+        fbo.colorAttachments[0]?.destroy();
+        fbo.depthStencilAttachment?.destroy();
+        fbo.destroy();
+        delete this.collisionFBOs[collisionGroup];
+    }
+}

package/dist/collision-filter/collision-filter-extension.js

@@ -0,0 +1,49 @@
+import { LayerExtension } from '@deck.gl/core';
+import collision from "./shader-module.js";
+import CollisionFilterEffect from "./collision-filter-effect.js";
+const defaultProps = {
+    getCollisionPriority: { type: 'accessor', value: 0 },
+    collisionEnabled: true,
+    collisionGroup: { type: 'string', value: 'default' },
+    collisionTestProps: {}
+};
+/** Allows layers to hide overlapping objects. */
+export default class CollisionFilterExtension extends LayerExtension {
+    static { this.defaultProps = defaultProps; }
+    static { this.extensionName = 'CollisionFilterExtension'; }
+    getShaders() {
+        return { modules: [collision] };
+    }
+    /* eslint-disable camelcase */
+    draw({ uniforms, context, moduleParameters }) {
+        const { collisionEnabled } = this.props;
+        const { collisionFBO, drawToCollisionMap } = moduleParameters;
+        const enabled = collisionEnabled && Boolean(collisionFBO);
+        uniforms.collision_enabled = enabled;
+        if (drawToCollisionMap) {
+            // Override any props with those defined in collisionTestProps
+            // @ts-ignore
+            this.props = this.clone(this.props.collisionTestProps).props;
+        }
+    }
+    initializeState(context, extension) {
+        if (this.getAttributeManager() === null) {
+            return;
+        }
+        this.context.deck?._addDefaultEffect(new CollisionFilterEffect());
+        const attributeManager = this.getAttributeManager();
+        attributeManager.add({
+            collisionPriorities: {
+                size: 1,
+                accessor: 'getCollisionPriority',
+                shaderAttributes: {
+                    collisionPriorities: { divisor: 0 },
+                    instanceCollisionPriorities: { divisor: 1 }
+                }
+            }
+        });
+    }
+    getNeedsPickingBuffer() {
+        return this.props.collisionEnabled;
+    }
+}

package/{typed → dist}/collision-filter/collision-filter-pass.d.ts

@@ -1,8 +1,9 @@
 import { Framebuffer } from '@luma.gl/core';
-import { _LayersPass as LayersPass, LayersPassRenderOptions } from '@deck.gl/core';
+import { Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport } from '@deck.gl/core';
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
 export default class CollisionFilterPass extends LayersPass {
-    renderCollisionMap(target: Framebuffer, options: CollisionFilterPassRenderOptions): any;
+    renderCollisionMap(target: Framebuffer, options: CollisionFilterPassRenderOptions): void;
+    protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any;
     getModuleParameters(): {
         drawToCollisionMap: boolean;
         picking: {

package/dist/collision-filter/collision-filter-pass.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collision-filter-pass.d.ts","sourceRoot":"","sources":["../../src/collision-filter/collision-filter-pass.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAC,KAAK,EAAE,WAAW,IAAI,UAAU,EAAE,uBAAuB,EAAE,QAAQ,EAAC,MAAM,eAAe,CAAC;AAElG,KAAK,gCAAgC,GAAG,uBAAuB,GAAG,EAAE,CAAC;AAErE,MAAM,CAAC,OAAO,OAAO,mBAAoB,SAAQ,UAAU;IACzD,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,OAAO,EAAE,gCAAgC;IAQjF,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAIvF,mBAAmB;;;;;;;;CAWpB"}

package/dist/collision-filter/collision-filter-pass.js

@@ -0,0 +1,23 @@
+import { _LayersPass as LayersPass } from '@deck.gl/core';
+export default class CollisionFilterPass extends LayersPass {
+    renderCollisionMap(target, options) {
+        const padding = 1;
+        const clearColor = [0, 0, 0, 0];
+        const scissorRect = [padding, padding, target.width - 2 * padding, target.height - 2 * padding];
+        this.render({ ...options, clearColor, scissorRect, target, pass: 'collision' });
+    }
+    getLayerParameters(layer, layerIndex, viewport) {
+        return { ...layer.props.parameters, blend: false, depthRange: [0, 1], depthTest: true };
+    }
+    getModuleParameters() {
+        // Draw picking colors into collision FBO
+        return {
+            drawToCollisionMap: true,
+            picking: {
+                isActive: 1,
+                isAttribute: false
+            },
+            lightSources: {}
+        };
+    }
+}

package/{typed → dist}/collision-filter/shader-module.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/collision-filter/shader-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAmFvD,KAAK,uBAAuB,GAAG;IAC7B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;;AAqBF,wBAM2C"}
+{"version":3,"file":"shader-module.d.ts","sourceRoot":"","sources":["../../src/collision-filter/shader-module.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,OAAO,EAAC,MAAM,eAAe,CAAC;AACnD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,sBAAsB,CAAC;AAoFvD,KAAK,uBAAuB,GAAG;IAC7B,YAAY,CAAC,EAAE,WAAW,CAAC;IAC3B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B,CAAC;;AAsBF,wBAM2C"}