@deck.gl/extensions 8.9.0-alpha.5 → 8.9.0-beta.1

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/extensions",
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
-  "version": "8.9.0-alpha.5",
+  "version": "8.9.0-beta.1",
   "publishConfig": {
     "access": "public"
   },
@@ -26,8 +26,8 @@
   ],
   "sideEffects": false,
   "scripts": {
-    "build-bundle": "webpack --config ../../scripts/bundle.config.js",
-    "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env.dev"
+    "build-bundle": "ocular-bundle ./bundle.ts",
+    "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
     "@luma.gl/shadertools": "^8.5.16"
@@ -36,7 +36,9 @@
     "@deck.gl/core": "^8.0.0",
     "@luma.gl/constants": "^8.0.0",
     "@luma.gl/core": "^8.0.0",
+    "@math.gl/core": "^3.6.2",
+    "@math.gl/web-mercator": "^3.6.2",
     "gl-matrix": "^3.0.0"
   },
-  "gitHead": "36330f8ca588055b11ed8032dc68ced641cb258b"
+  "gitHead": "47223d1ea084c3f9b0c9f0f9736682850bb5db85"
 }

package/src/brushing/brushing.ts

@@ -70,11 +70,6 @@ export default class BrushingExtension extends LayerExtension {
         brushingTargets: {
           size: 2,
           accessor: 'getBrushingTarget',
-          // Hack: extension's defaultProps is not merged with the layer's defaultProps,
-          // So we can't use the standard accessor when the prop is undefined
-          // TODO - move to an option
-          // eslint-disable-next-line @typescript-eslint/unbound-method
-          update: this.props.getBrushingTarget ? undefined : extension.useConstantTargetPositions,
           shaderAttributes: {
             brushingTargets: {
               divisor: 0
@@ -111,10 +106,4 @@ export default class BrushingExtension extends LayerExtension {
       });
     }
   }
-
-  useConstantTargetPositions(attribute) {
-    attribute.constant = true;
-    attribute.value = new Float32Array(2);
-    return;
-  }
 }

package/src/clip/clip.ts

@@ -23,7 +23,8 @@ import {LayerExtension, _ShaderModule as ShaderModule} from '@deck.gl/core';
 import type {Layer} from '@deck.gl/core';
 
 const defaultProps = {
-  clipBounds: [0, 0, 1, 1]
+  clipBounds: [0, 0, 1, 1],
+  clipByInstance: undefined
 };
 
 export type ClipExtensionProps = {
@@ -107,8 +108,8 @@ export default class ClipExtension extends LayerExtension {
     // @ts-expect-error attributeManager is always defined for primitive layers
     let clipByInstance = 'instancePositions' in this.getAttributeManager().attributes;
     // Users can override by setting the `clipByInstance` prop
-    if ('clipByInstance' in this.props) {
-      clipByInstance = this.props.clipByInstance as boolean;
+    if (this.props.clipByInstance !== undefined) {
+      clipByInstance = Boolean(this.props.clipByInstance);
     }
     this.state.clipByInstance = clipByInstance;
 
@@ -124,8 +125,8 @@ export default class ClipExtension extends LayerExtension {
   }
 
   /* eslint-disable camelcase */
-  draw(this: Layer<ClipExtensionProps>, {uniforms}: any): void {
-    const {clipBounds = defaultProps.clipBounds} = this.props;
+  draw(this: Layer<Required<ClipExtensionProps>>, {uniforms}: any): void {
+    const {clipBounds} = this.props;
     if (this.state.clipByInstance) {
       uniforms.clip_bounds = clipBounds;
     } else {

package/src/collide/collide-effect.ts

@@ -0,0 +1,257 @@
+import {Framebuffer, Renderbuffer, Texture2D, cssToDeviceRatio} from '@luma.gl/core';
+import {equals} from '@math.gl/core';
+import {_deepEqual as deepEqual} from '@deck.gl/core';
+import type {Effect, Layer, PreRenderOptions, Viewport} from '@deck.gl/core';
+import CollidePass from './collide-pass';
+import MaskEffect, {MaskPreRenderStats} from '../mask/mask-effect';
+// import {debugFBO} from '../utils/debug';
+
+type CollideExtensionProps = {
+  collideTestProps?: {};
+  collideGroup: string;
+};
+
+// Factor by which to downscale Collide FBO relative to canvas
+const DOWNSCALE = 2;
+
+type RenderInfo = {
+  collideGroup: string;
+  layers: Layer<CollideExtensionProps>[];
+  layerBounds: ([number[], number[]] | null)[];
+};
+
+// Class to manage collide effect
+export default class CollideEffect implements Effect {
+  id = 'collide-effect';
+  props = null;
+  useInPicking = true;
+  order = 1;
+
+  private channels: Record<string, RenderInfo> = {};
+  private collidePass?: CollidePass;
+  private collideFBOs: Record<string, Framebuffer> = {};
+  private dummyCollideMap?: Texture2D;
+  private lastViewport?: Viewport;
+
+  preRender(
+    gl: WebGLRenderingContext,
+    {
+      effects: allEffects,
+      layers,
+      layerFilter,
+      viewports,
+      onViewportActive,
+      views,
+      pass,
+      preRenderStats = {}
+    }: PreRenderOptions
+  ): void {
+    if (!this.dummyCollideMap) {
+      this.dummyCollideMap = new Texture2D(gl, {width: 1, height: 1});
+    }
+
+    if (pass.startsWith('picking')) {
+      // Do not update on picking pass
+      return;
+    }
+
+    const collideLayers = layers.filter(
+      // @ts-ignore
+      ({props: {visible, collideEnabled}}) => visible && collideEnabled
+    ) as Layer<CollideExtensionProps>[];
+    if (collideLayers.length === 0) {
+      this.channels = {};
+      return;
+    }
+
+    if (!this.collidePass) {
+      this.collidePass = new CollidePass(gl, {id: 'default-collide'});
+    }
+
+    // Detect if mask has rendered. TODO: better dependency system for Effects
+    const effects = allEffects?.filter(e => e.constructor === MaskEffect);
+    const maskEffectRendered = (preRenderStats['mask-effect'] as MaskPreRenderStats)?.didRender;
+
+    // Collect layers to render
+    const channels = this._groupByCollideGroup(gl, collideLayers);
+
+    const viewport = viewports[0];
+    const viewportChanged =
+      !this.lastViewport || !this.lastViewport.equals(viewport) || maskEffectRendered;
+
+    // Resize framebuffers to match canvas
+    for (const collideGroup in channels) {
+      const collideFBO = this.collideFBOs[collideGroup];
+      const renderInfo = channels[collideGroup];
+      collideFBO.resize({
+        width: gl.canvas.width / DOWNSCALE,
+        height: gl.canvas.height / DOWNSCALE
+      });
+      this._render(renderInfo, {
+        effects,
+        layerFilter,
+        onViewportActive,
+        views,
+        viewport,
+        viewportChanged
+      });
+    }
+
+    // debugFBO(this.collideFBOs[Object.keys(channels)[0]], {minimap: true});
+  }
+
+  private _render(
+    renderInfo: RenderInfo,
+    {
+      effects,
+      layerFilter,
+      onViewportActive,
+      views,
+      viewport,
+      viewportChanged
+    }: {
+      effects: PreRenderOptions['effects'];
+      layerFilter: PreRenderOptions['layerFilter'];
+      onViewportActive: PreRenderOptions['onViewportActive'];
+      views: PreRenderOptions['views'];
+      viewport: Viewport;
+      viewportChanged: boolean;
+    }
+  ) {
+    const {collideGroup} = renderInfo;
+    const oldRenderInfo = this.channels[collideGroup];
+    if (!oldRenderInfo) {
+      return;
+    }
+
+    const needsRender =
+      viewportChanged ||
+      // If render info is new
+      renderInfo === oldRenderInfo ||
+      // If sublayers have changed
+      !deepEqual(oldRenderInfo.layers, renderInfo.layers, 0) ||
+      // If a sublayer's bounds have been updated
+      renderInfo.layerBounds.some((b, i) => !equals(b, oldRenderInfo.layerBounds[i]));
+
+    this.channels[collideGroup] = renderInfo;
+
+    if (needsRender) {
+      this.lastViewport = viewport;
+      const collideFBO = this.collideFBOs[collideGroup];
+
+      // Rerender collide FBO
+      this.collidePass!.renderCollideMap(collideFBO, {
+        pass: 'collide',
+        layers: renderInfo.layers,
+        effects,
+        layerFilter,
+        viewports: viewport ? [viewport] : [],
+        onViewportActive,
+        views,
+        moduleParameters: {
+          // To avoid feedback loop forming between Framebuffer and active Texture.
+          dummyCollideMap: this.dummyCollideMap,
+          devicePixelRatio: cssToDeviceRatio(collideFBO.gl) / DOWNSCALE
+        }
+      });
+    }
+  }
+
+  /**
+   * Group layers by collideGroup
+   * Returns a map from collideGroup to render info
+   */
+  private _groupByCollideGroup(
+    gl: WebGLRenderingContext,
+    collideLayers: Layer<CollideExtensionProps>[]
+  ): Record<string, RenderInfo> {
+    const channelMap = {};
+    for (const layer of collideLayers) {
+      const {collideGroup} = layer.props;
+      let channelInfo = channelMap[collideGroup];
+      if (!channelInfo) {
+        channelInfo = {
+          collideGroup,
+          layers: [],
+          layerBounds: []
+        };
+        channelMap[collideGroup] = channelInfo;
+      }
+      channelInfo.layers.push(layer);
+      channelInfo.layerBounds.push(layer.getBounds());
+    }
+
+    // Create any new passes and remove any old ones
+    for (const collideGroup of Object.keys(channelMap)) {
+      if (!this.collideFBOs[collideGroup]) {
+        this.createFBO(gl, collideGroup);
+      }
+      if (!this.channels[collideGroup]) {
+        this.channels[collideGroup] = channelMap[collideGroup];
+      }
+    }
+    for (const collideGroup of Object.keys(this.collideFBOs)) {
+      if (!channelMap[collideGroup]) {
+        this.destroyFBO(collideGroup);
+      }
+    }
+
+    return channelMap;
+  }
+
+  getModuleParameters(layer: Layer): {
+    collideFBO: Framebuffer;
+    dummyCollideMap: Texture2D;
+  } {
+    const {collideGroup} = (layer as Layer<CollideExtensionProps>).props;
+    const {collideFBOs, dummyCollideMap} = this;
+    return {collideFBO: collideFBOs[collideGroup], dummyCollideMap};
+  }
+
+  cleanup(): void {
+    if (this.dummyCollideMap) {
+      this.dummyCollideMap.delete();
+      this.dummyCollideMap = undefined;
+    }
+    this.channels = {};
+    for (const collideGroup of Object.keys(this.collideFBOs)) {
+      this.destroyFBO(collideGroup);
+    }
+    this.collideFBOs = {};
+    this.lastViewport = undefined;
+  }
+
+  createFBO(gl: WebGLRenderingContext, collideGroup: string) {
+    const {width, height} = gl.canvas;
+    const collideMap = new Texture2D(gl, {
+      width,
+      height,
+      parameters: {
+        [gl.TEXTURE_MIN_FILTER]: gl.NEAREST,
+        [gl.TEXTURE_MAG_FILTER]: gl.NEAREST,
+        [gl.TEXTURE_WRAP_S]: gl.CLAMP_TO_EDGE,
+        [gl.TEXTURE_WRAP_T]: gl.CLAMP_TO_EDGE
+      }
+    });
+
+    const depthBuffer = new Renderbuffer(gl, {format: gl.DEPTH_COMPONENT16, width, height});
+    this.collideFBOs[collideGroup] = new Framebuffer(gl, {
+      id: `Collide-${collideGroup}`,
+      width,
+      height,
+      attachments: {
+        [gl.COLOR_ATTACHMENT0]: collideMap,
+        [gl.DEPTH_ATTACHMENT]: depthBuffer
+      }
+    });
+  }
+
+  destroyFBO(collideGroup: string) {
+    const fbo = this.collideFBOs[collideGroup];
+    for (const attachment of Object.values(fbo.attachments as Texture2D[])) {
+      attachment.delete();
+    }
+    fbo.delete();
+    delete this.collideFBOs[collideGroup];
+  }
+}

package/src/collide/collide-pass.ts

@@ -0,0 +1,35 @@
+import {Framebuffer, withParameters} from '@luma.gl/core';
+import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
+
+type CollidePassRenderOptions = LayersPassRenderOptions & {};
+
+export default class CollidePass extends LayersPass {
+  renderCollideMap(target: Framebuffer, options: CollidePassRenderOptions) {
+    const gl = this.gl;
+
+    const padding = 1;
+
+    return withParameters(
+      gl,
+      {
+        scissorTest: true,
+        scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],
+        clearColor: [0, 0, 0, 0],
+        blend: false,
+        depthTest: true,
+        depthRange: [0, 1]
+      },
+      () => this.render({...options, target, pass: 'collide'})
+    );
+  }
+
+  getModuleParameters() {
+    // Draw picking colors into collide FBO
+    return {
+      drawToCollideMap: true,
+      pickingActive: 1,
+      pickingAttribute: false,
+      lightSources: {}
+    };
+  }
+}

package/src/collide/collide.ts

@@ -0,0 +1,79 @@
+import {Accessor, Layer, LayerContext, LayerExtension} from '@deck.gl/core';
+import collide from './shader-module';
+import CollideEffect from './collide-effect';
+
+const defaultProps = {
+  getCollidePriority: {type: 'accessor', value: 0},
+  collideEnabled: true,
+  collideGroup: {type: 'string', value: 'default'},
+  collideTestProps: {}
+};
+
+export type CollideExtensionProps<DataT = any> = {
+  /**
+   * Accessor for collision priority. Must return a number in the range -1000 -> 1000. Features with higher values are shown preferentially.
+   */
+  getCollidePriority?: Accessor<DataT, number>;
+
+  /**
+   * Enable/disable collisions. If collisions are disabled, all objects are rendered.
+   * @default true
+   */
+  collideEnabled: boolean;
+
+  /**
+   * Collision group this layer belongs to. If it is not set, the 'default' collision group is used
+   */
+  collideGroup?: string;
+
+  /**
+   * Props to override when rendering collision map
+   */
+  collideTestProps?: {};
+};
+
+/** Allows layers to hide overlapping objects. */
+export default class CollideExtension extends LayerExtension {
+  static defaultProps = defaultProps;
+  static extensionName = 'CollideExtension';
+
+  getShaders(this: Layer<CollideExtensionProps>): any {
+    return {modules: [collide]};
+  }
+
+  /* eslint-disable camelcase */
+  draw(this: Layer<CollideExtensionProps>, {uniforms, context, moduleParameters}: any) {
+    const {collideEnabled} = this.props;
+    const {collideFBO, drawToCollideMap} = moduleParameters;
+    const enabled = collideEnabled && Boolean(collideFBO);
+    uniforms.collide_enabled = enabled;
+
+    if (drawToCollideMap) {
+      // Override any props with those defined in collideTestProps
+      // @ts-ignore
+      this.props = this.clone(this.props.collideTestProps).props;
+    }
+  }
+
+  initializeState(this: Layer<CollideExtensionProps>, context: LayerContext, extension: this) {
+    if (this.getAttributeManager() === null) {
+      return;
+    }
+    this.context.deck?._addDefaultEffect(new CollideEffect());
+    const attributeManager = this.getAttributeManager();
+    attributeManager!.add({
+      collidePriorities: {
+        size: 1,
+        accessor: 'getCollidePriority',
+        shaderAttributes: {
+          collidePriorities: {divisor: 0},
+          instanceCollidePriorities: {divisor: 1}
+        }
+      }
+    });
+  }
+
+  getNeedsPickingBuffer(this: Layer<CollideExtensionProps>): boolean {
+    return this.props.collideEnabled;
+  }
+}

package/src/collide/shader-module.ts

@@ -0,0 +1,113 @@
+import {Framebuffer, Texture2D} from '@luma.gl/core';
+import {project} from '@deck.gl/core';
+import type {_ShaderModule as ShaderModule} from '@deck.gl/core';
+
+const vs = `
+#ifdef NON_INSTANCED_MODEL
+attribute float collidePriorities;
+#else
+attribute float instanceCollidePriorities;
+#endif
+
+uniform sampler2D collide_texture;
+uniform bool collide_sort;
+uniform bool collide_enabled;
+
+vec2 collide_getCoords(vec4 position) {
+  vec4 collide_clipspace = project_common_position_to_clipspace(position);
+  return (1.0 + collide_clipspace.xy / collide_clipspace.w) / 2.0;
+}
+
+float collide_match(vec2 tex, vec3 pickingColor) {
+  vec4 collide_pickingColor = texture2D(collide_texture, tex);
+  float delta = dot(abs(collide_pickingColor.rgb - pickingColor), vec3(1.0));
+  float e = 0.001;
+  return step(delta, e);
+}
+
+float collide_isVisible(vec2 texCoords, vec3 pickingColor) {
+  if (!collide_enabled) {
+    return 1.0;
+  }
+
+  // Visibility test, sample area of 5x5 pixels in order to fade in/out.
+  // Due to the locality, the lookups will be cached
+  // This reduces the flicker present when objects are shown/hidden
+  const int N = 2;
+  float accumulator = 0.0;
+  vec2 step = vec2(1.0 / project_uViewportSize);
+
+  const float floatN = float(N);
+  vec2 delta = -floatN * step;
+  for(int i = -N; i <= N; i++) {
+    delta.x = -step.x * floatN;
+    for(int j = -N; j <= N; j++) {
+      accumulator += collide_match(texCoords + delta, pickingColor);
+      delta.x += step.x;
+    }
+    delta.y += step.y;
+  }
+
+  float W = 2.0 * floatN + 1.0;
+  return pow(accumulator / (W * W), 2.2);
+}
+`;
+
+const inject = {
+  'vs:#decl': `
+  float collide_fade = 1.0;
+`,
+  'vs:DECKGL_FILTER_GL_POSITION': `
+  if (collide_sort) {
+    #ifdef NON_INSTANCED_MODEL
+    float collidePriority = collidePriorities;
+    #else
+    float collidePriority = instanceCollidePriorities;
+    #endif
+    position.z = -0.001 * collidePriority * position.w; // Support range -1000 -> 1000
+  }
+
+  if (collide_enabled) {
+    vec4 collide_common_position = project_position(vec4(geometry.worldPosition, 1.0));
+    vec2 collide_texCoords = collide_getCoords(collide_common_position);
+    collide_fade = collide_isVisible(collide_texCoords, geometry.pickingColor / 255.0);
+    if (collide_fade < 0.0001) {
+      position = vec4(0.);
+    }
+  }
+  `,
+  'vs:DECKGL_FILTER_COLOR': `
+  color.a *= collide_fade;
+  `
+};
+
+type CollideModuleSettings = {
+  collideFBO?: Framebuffer;
+  drawToCollideMap?: boolean;
+  dummyCollideMap?: Texture2D;
+};
+
+/* eslint-disable camelcase */
+type CollideUniforms = {collide_sort?: boolean; collide_texture?: Framebuffer | Texture2D};
+
+const getCollideUniforms = (
+  opts: CollideModuleSettings | {},
+  uniforms: Record<string, any>
+): CollideUniforms => {
+  if (!opts || !('dummyCollideMap' in opts)) {
+    return {};
+  }
+  const {collideFBO, drawToCollideMap, dummyCollideMap} = opts;
+  return {
+    collide_sort: Boolean(drawToCollideMap),
+    collide_texture: !drawToCollideMap && collideFBO ? collideFBO : dummyCollideMap
+  };
+};
+
+export default {
+  name: 'collide',
+  dependencies: [project],
+  vs,
+  inject,
+  getUniforms: getCollideUniforms
+} as ShaderModule;