@deck.gl/extensions 9.0.40 → 9.1.0-beta.3

package/package.json

@@ -3,7 +3,7 @@
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
   "type": "module",
-  "version": "9.0.40",
+  "version": "9.1.0-beta.3",
   "publishConfig": {
     "access": "public"
   },
@@ -38,14 +38,14 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "~9.0.27",
-    "@luma.gl/shadertools": "~9.0.27",
-    "@math.gl/core": "^4.0.0"
+    "@luma.gl/constants": "^9.1.0-beta.16",
+    "@luma.gl/shadertools": "^9.1.0-beta.16",
+    "@math.gl/core": "^4.1.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0",
-    "@luma.gl/core": "~9.0.0",
-    "@luma.gl/engine": "~9.0.0"
+    "@deck.gl/core": "^9.1.0-beta",
+    "@luma.gl/core": "^9.1.0-beta",
+    "@luma.gl/engine": "^9.1.0-beta"
   },
-  "gitHead": "fe6e4763b3dcd5b602291e7732e9d30b0a4eaec1"
+  "gitHead": "6625885881202cb753b64c6f2b8ee6f323092075"
 }

package/src/brushing/brushing-extension.ts

@@ -1,25 +1,9 @@
-// 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.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
 import {LayerExtension} from '@deck.gl/core';
-import shaderModule from './shader-module';
+import shaderModule, {BrushingModuleProps} from './shader-module';
 
 import type {Layer, LayerContext, Accessor} from '@deck.gl/core';
 
@@ -101,4 +85,17 @@ export default class BrushingExtension extends LayerExtension {
       });
     }
   }
+
+  draw(this: Layer<BrushingExtensionProps>, params: any, extension: this) {
+    const {viewport, mousePosition} = params.context;
+    const {brushingEnabled, brushingRadius, brushingTarget} = this.props;
+    const brushingProps: BrushingModuleProps = {
+      viewport,
+      mousePosition,
+      brushingEnabled,
+      brushingRadius,
+      brushingTarget
+    };
+    this.setShaderModuleProps({brushing: brushingProps});
+  }
 }

package/src/brushing/shader-module.ts

@@ -1,55 +1,50 @@
-// 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.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 /* eslint-disable camelcase */
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {project} from '@deck.gl/core';
 import type {Viewport} from '@deck.gl/core';
 
 import type {BrushingExtensionProps} from './brushing-extension';
-import {glsl} from '../utils/syntax-tags';
 
-type BrushingModuleSettings = {
+export type BrushingModuleProps = {
   // From layer context
   viewport: Viewport;
   mousePosition?: {x: number; y: number};
 } & BrushingExtensionProps;
 
-const vs = glsl`
-  uniform bool brushing_enabled;
-  uniform int brushing_target;
-  uniform vec2 brushing_mousePos;
-  uniform float brushing_radius;
+type BrushingModuleUniforms = {
+  enabled?: boolean;
+  target?: number;
+  mousePos?: [number, number];
+  radius?: number;
+};
+
+const uniformBlock = /* glsl */ `\
+uniform brushingUniforms {
+  bool enabled;
+  highp int target;
+  vec2 mousePos;
+  float radius;
+} brushing;
+`;
 
+const vertex = /* glsl */ `
   in vec2 brushingTargets;
 
   out float brushing_isVisible;
 
   bool brushing_isPointInRange(vec2 position) {
-    if (!brushing_enabled) {
+    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);
+    vec2 target_commonspace = project_position(brushing.mousePos);
+    float distance = length((target_commonspace - source_commonspace) / project.commonUnitsPerMeter.xy);
 
-    return distance <= brushing_radius;
+    return distance <= brushing.radius;
   }
 
   bool brushing_arePointsInRange(vec2 sourcePos, vec2 targetPos) {
@@ -61,11 +56,20 @@ const vs = glsl`
   }
 `;
 
-const fs = glsl`
-  uniform bool brushing_enabled;
+const vs = `
+${uniformBlock}
+${vertex}
+`;
+
+const fragment = /* glsl */ `
   in float brushing_isVisible;
 `;
 
+const fs = `
+${uniformBlock}
+${fragment}
+`;
+
 const TARGET = {
   source: 0,
   target: 1,
@@ -74,21 +78,21 @@ const TARGET = {
 };
 
 const inject = {
-  'vs:DECKGL_FILTER_GL_POSITION': glsl`
+  'vs:DECKGL_FILTER_GL_POSITION': /* glsl */ `
     vec2 brushingTarget;
     vec2 brushingSource;
-    if (brushing_target == 3) {
+    if (brushing.target == 3) {
       brushingTarget = geometry.worldPositionAlt.xy;
       brushingSource = geometry.worldPosition.xy;
-    } else if (brushing_target == 0) {
+    } else if (brushing.target == 0) {
       brushingTarget = geometry.worldPosition.xy;
-    } else if (brushing_target == 1) {
+    } else if (brushing.target == 1) {
       brushingTarget = geometry.worldPositionAlt.xy;
     } else {
       brushingTarget = brushingTargets;
     }
     bool visible;
-    if (brushing_target == 3) {
+    if (brushing.target == 3) {
       visible = brushing_arePointsInRange(brushingSource, brushingTarget);
     } else {
       visible = brushing_isPointInRange(brushingTarget);
@@ -97,7 +101,7 @@ const inject = {
   `,
 
   'fs:DECKGL_FILTER_COLOR': `
-    if (brushing_enabled && brushing_isVisible < 0.5) {
+    if (brushing.enabled && brushing_isVisible < 0.5) {
       discard;
     }
   `
@@ -109,7 +113,7 @@ export default {
   vs,
   fs,
   inject,
-  getUniforms: (opts?: BrushingModuleSettings | {}): Record<string, any> => {
+  getUniforms: (opts?: BrushingModuleProps | {}): BrushingModuleUniforms => {
     if (!opts || !('viewport' in opts)) {
       return {};
     }
@@ -121,14 +125,21 @@ export default {
       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])
+      enabled: Boolean(brushingEnabled && mousePosition && viewport.containsPixel(mousePosition)),
+      radius: brushingRadius,
+      target: TARGET[brushingTarget] || 0,
+      mousePos: mousePosition
+        ? (viewport.unproject([mousePosition.x - viewport.x, mousePosition.y - viewport.y]) as [
+            number,
+            number
+          ])
         : [0, 0]
     };
+  },
+  uniformTypes: {
+    enabled: 'i32',
+    target: 'i32',
+    mousePos: 'vec2<f32>',
+    radius: 'f32'
   }
-} as ShaderModule<BrushingModuleSettings>;
+} as ShaderModule<BrushingModuleProps, BrushingModuleUniforms, {}>;

package/src/clip/clip-extension.ts

@@ -1,28 +1,11 @@
-// 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.
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {LayerExtension} from '@deck.gl/core';
 
 import type {Layer} from '@deck.gl/core';
-import {glsl} from '../utils/syntax-tags';
 
 const defaultProps = {
   clipBounds: [0, 0, 1, 1],
@@ -41,34 +24,43 @@ export type ClipExtensionProps = {
   clipByInstance?: boolean;
 };
 
-const shaderFunction = glsl`
-uniform vec4 clip_bounds;
+const shaderFunction = /* glsl */ `
+uniform clipUniforms {
+  vec4 bounds;
+} clip;
 
 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];
+  return position.x >= clip.bounds[0] && position.y >= clip.bounds[1] && position.x < clip.bounds[2] && position.y < clip.bounds[3];
 }
 `;
 
+export type ClipModuleProps = {
+  bounds: [number, number, number, number];
+};
+
 /*
  * 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: ShaderModule = {
-  name: 'clip-vs',
-  vs: shaderFunction
+const shaderModuleVs: ShaderModule<ClipModuleProps> = {
+  name: 'clip',
+  vs: shaderFunction,
+  uniformTypes: {
+    bounds: 'vec4<f32>'
+  }
 };
 
 const injectionVs = {
-  'vs:#decl': glsl`
+  'vs:#decl': /* glsl */ `
 out float clip_isVisible;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': glsl`
+  'vs:DECKGL_FILTER_GL_POSITION': /* glsl */ `
   clip_isVisible = float(clip_isInBounds(geometry.worldPosition.xy));
 `,
-  'fs:#decl': glsl`
+  'fs:#decl': /* glsl */ `
 in float clip_isVisible;
 `,
-  'fs:DECKGL_FILTER_COLOR': glsl`
+  'fs:DECKGL_FILTER_COLOR': /* glsl */ `
   if (clip_isVisible < 0.5) discard;
 `
 };
@@ -77,22 +69,25 @@ in float clip_isVisible;
  * 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: ShaderModule = {
-  name: 'clip-fs',
-  fs: shaderFunction
+const shaderModuleFs: ShaderModule<ClipModuleProps> = {
+  name: 'clip',
+  fs: shaderFunction,
+  uniformTypes: {
+    bounds: 'vec4<f32>'
+  }
 };
 
 const injectionFs = {
-  'vs:#decl': glsl`
+  'vs:#decl': /* glsl */ `
 out vec2 clip_commonPosition;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': glsl`
+  'vs:DECKGL_FILTER_GL_POSITION': /* glsl */ `
   clip_commonPosition = geometry.position.xy;
 `,
-  'fs:#decl': glsl`
+  'fs:#decl': /* glsl */ `
 in vec2 clip_commonPosition;
 `,
-  'fs:DECKGL_FILTER_COLOR': glsl`
+  'fs:DECKGL_FILTER_COLOR': /* glsl */ `
   if (!clip_isInBounds(clip_commonPosition)) discard;
 `
 };
@@ -126,20 +121,23 @@ export default class ClipExtension extends LayerExtension {
   }
 
   /* eslint-disable camelcase */
-  draw(this: Layer<Required<ClipExtensionProps>>, {uniforms}: any): void {
+  draw(this: Layer<Required<ClipExtensionProps>>): void {
     const {clipBounds} = this.props;
+    const clipProps = {} as ClipModuleProps;
     if (this.state.clipByInstance) {
-      uniforms.clip_bounds = clipBounds;
+      clipProps.bounds = clipBounds;
     } else {
       const corner0 = this.projectPosition([clipBounds[0], clipBounds[1], 0]);
       const corner1 = this.projectPosition([clipBounds[2], clipBounds[3], 0]);
 
-      uniforms.clip_bounds = [
+      clipProps.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])
       ];
     }
+
+    this.setShaderModuleProps({clip: clipProps});
   }
 }

package/src/collision-filter/collision-filter-effect.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {Device, Framebuffer, Texture} from '@luma.gl/core';
 import {equals} from '@math.gl/core';
 import {_deepEqual as deepEqual} from '@deck.gl/core';
@@ -6,10 +10,8 @@ import CollisionFilterPass from './collision-filter-pass';
 import {MaskPreRenderStats} from '../mask/mask-effect';
 // import {debugFBO} from '../utils/debug';
 
-type CollisionFilterExtensionProps = {
-  collisionTestProps?: {};
-  collisionGroup: string;
-};
+import type {CollisionFilterExtensionProps} from './collision-filter-extension';
+import type {CollisionModuleProps} from './shader-module';
 
 // Factor by which to downscale Collision FBO relative to canvas
 const DOWNSCALE = 2;
@@ -155,11 +157,16 @@ export default class CollisionFilterEffect implements Effect {
         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
+        shaderModuleProps: {
+          collision: {
+            enabled: true,
+            // To avoid feedback loop forming between Framebuffer and active Texture.
+            dummyCollisionMap: this.dummyCollisionMap
+          },
+          project: {
+            // @ts-expect-error TODO - assuming WebGL context
+            devicePixelRatio: collisionFBO.device.canvasContext.getDevicePixelRatio() / DOWNSCALE
+          }
         }
       });
     }
@@ -175,7 +182,7 @@ export default class CollisionFilterEffect implements Effect {
   ): Record<string, RenderInfo> {
     const channelMap = {};
     for (const layer of collisionLayers) {
-      const {collisionGroup} = layer.props;
+      const collisionGroup = layer.props.collisionGroup!;
       let channelInfo = channelMap[collisionGroup];
       if (!channelInfo) {
         channelInfo = {collisionGroup, layers: [], layerBounds: [], allLayersLoaded: true};
@@ -206,13 +213,21 @@ export default class CollisionFilterEffect implements Effect {
     return channelMap;
   }
 
-  getModuleParameters(layer: Layer): {
-    collisionFBO: Framebuffer;
-    dummyCollisionMap: Texture;
+  getShaderModuleProps(layer: Layer): {
+    collision: CollisionModuleProps;
   } {
-    const {collisionGroup} = (layer as Layer<CollisionFilterExtensionProps>).props;
+    const {collisionGroup, collisionEnabled} = (layer as Layer<CollisionFilterExtensionProps>)
+      .props;
     const {collisionFBOs, dummyCollisionMap} = this;
-    return {collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap: dummyCollisionMap!};
+    const collisionFBO = collisionFBOs[collisionGroup!];
+    const enabled = collisionEnabled && Boolean(collisionFBO);
+    return {
+      collision: {
+        enabled,
+        collisionFBO,
+        dummyCollisionMap: dummyCollisionMap!
+      }
+    };
   }
 
   cleanup(): void {
@@ -248,11 +263,7 @@ export default class CollisionFilterEffect implements Effect {
       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
+      mipmaps: false
     });
     this.collisionFBOs[collisionGroup] = device.createFramebuffer({
       id: `collision-${collisionGroup}`,

package/src/collision-filter/collision-filter-extension.ts

@@ -1,3 +1,7 @@
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {Accessor, Layer, LayerContext, LayerExtension} from '@deck.gl/core';
 import collision from './shader-module';
 import CollisionFilterEffect from './collision-filter-effect';
@@ -42,13 +46,8 @@ export default class CollisionFilterExtension extends LayerExtension {
   }
 
   /* eslint-disable camelcase */
-  draw(this: Layer<CollisionFilterExtensionProps>, {uniforms, context, moduleParameters}: any) {
-    const {collisionEnabled} = this.props;
-    const {collisionFBO, drawToCollisionMap} = moduleParameters;
-    const enabled = collisionEnabled && Boolean(collisionFBO);
-    uniforms.collision_enabled = enabled;
-
-    if (drawToCollisionMap) {
+  draw(this: Layer<CollisionFilterExtensionProps>, {shaderModuleProps}: any) {
+    if (shaderModuleProps.collision?.drawToCollisionMap) {
       // Override any props with those defined in collisionTestProps
       // @ts-ignore
       this.props = this.clone(this.props.collisionTestProps).props;

package/src/collision-filter/collision-filter-pass.ts

@@ -1,4 +1,8 @@
-import {Framebuffer} from '@luma.gl/core';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Framebuffer, Parameters} from '@luma.gl/core';
 import {Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport} from '@deck.gl/core';
 
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
@@ -12,19 +16,26 @@ export default class CollisionFilterPass extends LayersPass {
     this.render({...options, clearColor, scissorRect, target, pass: 'collision'});
   }
 
-  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
-    return {...layer.props.parameters, blend: false, depthRange: [0, 1], depthTest: true};
+  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): Parameters {
+    return {
+      ...layer.props.parameters,
+      blend: false,
+      depthWriteEnabled: true,
+      depthCompare: 'less-equal'
+    };
   }
 
-  getModuleParameters() {
+  getShaderModuleProps() {
     // Draw picking colors into collision FBO
     return {
-      drawToCollisionMap: true,
+      collision: {
+        drawToCollisionMap: true
+      },
       picking: {
         isActive: 1,
         isAttribute: false
       },
-      lightSources: {}
+      lighting: {enabled: false}
     };
   }
 }