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

package/package.json

@@ -2,7 +2,8 @@
   "name": "@deck.gl/extensions",
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
-  "version": "9.0.0-beta.1",
+  "type": "module",
+  "version": "9.0.0-beta.11",
   "publishConfig": {
     "access": "public"
   },
@@ -16,13 +17,19 @@
     "type": "git",
     "url": "https://github.com/visgl/deck.gl.git"
   },
-  "main": "dist/es5/index.js",
-  "module": "dist/esm/index.js",
-  "types": "typed/index.d.ts",
+  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "files": [
     "dist",
     "src",
-    "typed",
     "dist.min.js"
   ],
   "sideEffects": false,
@@ -31,18 +38,14 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@luma.gl/shadertools": "9.0.0-alpha.54"
+    "@luma.gl/constants": "^9.0.11",
+    "@luma.gl/shadertools": "^9.0.11",
+    "@math.gl/core": "^4.0.0"
   },
   "peerDependencies": {
-    "@deck.gl/core": "^9.0.0-alpha",
-    "@luma.gl/constants": "9.0.0-alpha.54",
-    "@luma.gl/core": "9.0.0-alpha.54",
-    "@luma.gl/engine": "9.0.0-alpha.54",
-    "@luma.gl/shadertools": "9.0.0-alpha.54",
-    "@luma.gl/webgl": "9.0.0-alpha.54",
-    "@math.gl/core": "^4.0.0",
-    "@math.gl/web-mercator": "^4.0.0"
+    "@deck.gl/core": "^9.0.0-beta",
+    "@luma.gl/core": "^9.0.0",
+    "@luma.gl/engine": "^9.0.0"
   },
-  "gitHead": "9628417918bec5cc73c1345bfcd2f2be575741f1"
+  "gitHead": "d8a3f5bdb644f85caba9d5c1e74baff8f8a3d439"
 }

package/src/brushing/shader-module.ts

@@ -23,6 +23,7 @@ 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 = {
   // From layer context
@@ -30,7 +31,7 @@ type BrushingModuleSettings = {
   mousePosition?: {x: number; y: number};
 } & BrushingExtensionProps;
 
-const vs = `
+const vs = glsl`
   uniform bool brushing_enabled;
   uniform int brushing_target;
   uniform vec2 brushing_mousePos;
@@ -64,7 +65,7 @@ const vs = `
   }
 `;
 
-const fs = `
+const fs = glsl`
   uniform bool brushing_enabled;
   in float brushing_isVisible;
 `;
@@ -77,7 +78,7 @@ const TARGET = {
 };
 
 const inject = {
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
     vec2 brushingTarget;
     vec2 brushingSource;
     if (brushing_target == 3) {

package/src/clip/clip-extension.ts

@@ -22,6 +22,7 @@ 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],
@@ -40,7 +41,7 @@ export type ClipExtensionProps = {
   clipByInstance?: boolean;
 };
 
-const shaderFunction = `
+const shaderFunction = glsl`
 uniform vec4 clip_bounds;
 
 bool clip_isInBounds(vec2 position) {
@@ -58,16 +59,16 @@ const shaderModuleVs: ShaderModule = {
 };
 
 const injectionVs = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out float clip_isVisible;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   clip_isVisible = float(clip_isInBounds(geometry.worldPosition.xy));
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in float clip_isVisible;
 `,
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
   if (clip_isVisible < 0.5) discard;
 `
 };
@@ -82,16 +83,16 @@ const shaderModuleFs: ShaderModule = {
 };
 
 const injectionFs = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out vec2 clip_commonPosition;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   clip_commonPosition = geometry.position.xy;
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in vec2 clip_commonPosition;
 `,
-  'fs:DECKGL_FILTER_COLOR': `
+  'fs:DECKGL_FILTER_COLOR': glsl`
   if (!clip_isInBounds(clip_commonPosition)) discard;
 `
 };

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

@@ -1,10 +1,9 @@
 import {Device, Framebuffer, Texture} from '@luma.gl/core';
-import {WEBGLRenderbuffer} from '@luma.gl/webgl';
 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 type {Effect, EffectContext, Layer, PreRenderOptions, Viewport} from '@deck.gl/core';
 import CollisionFilterPass from './collision-filter-pass';
-import MaskEffect, {MaskPreRenderStats} from '../mask/mask-effect';
+import {MaskPreRenderStats} from '../mask/mask-effect';
 // import {debugFBO} from '../utils/debug';
 
 type CollisionFilterExtensionProps = {
@@ -28,28 +27,32 @@ export default class CollisionFilterEffect implements Effect {
   useInPicking = true;
   order = 1;
 
+  private context?: EffectContext;
   private channels: Record<string, RenderInfo> = {};
   private collisionFilterPass?: CollisionFilterPass;
   private collisionFBOs: Record<string, Framebuffer> = {};
   private dummyCollisionMap?: Texture;
   private lastViewport?: Viewport;
 
-  preRender(
-    device: Device,
-    {
-      effects: allEffects,
-      layers,
-      layerFilter,
-      viewports,
-      onViewportActive,
-      views,
-      isPicking,
-      preRenderStats = {}
-    }: PreRenderOptions
-  ): void {
-    if (!this.dummyCollisionMap) {
-      this.dummyCollisionMap = device.createTexture({width: 1, height: 1});
-    }
+  setup(context: EffectContext) {
+    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 = {}
+  }: PreRenderOptions): void {
+    // 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
@@ -65,12 +68,8 @@ export default class CollisionFilterEffect implements Effect {
       return;
     }
 
-    if (!this.collisionFilterPass) {
-      this.collisionFilterPass = new CollisionFilterPass(device, {id: 'default-collision-filter'});
-    }
-
     // Detect if mask has rendered. TODO: better dependency system for Effects
-    const effects = allEffects?.filter(e => e.constructor === MaskEffect);
+    const effects = allEffects?.filter(e => e.useInPicking && preRenderStats[e.id]);
     const maskEffectRendered = (preRenderStats['mask-effect'] as MaskPreRenderStats)?.didRender;
 
     // Collect layers to render
@@ -244,18 +243,23 @@ export default class CollisionFilterEffect implements Effect {
       }
     });
 
-    const depthBuffer = new WEBGLRenderbuffer(
-      // @ts-expect-error TODO v9 needs to be WebGLDevice
-      device,
-      {format: 'depth16unorm', width, height}
-    );
+    // @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],
-      // @ts-expect-error TODO v9 doesn't handle renderbuffers well
-      depthStencilAttachment: depthBuffer
+      depthStencilAttachment
     });
   }
 

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

@@ -1,6 +1,5 @@
 import {Framebuffer} from '@luma.gl/core';
-import {withGLParameters} from '@luma.gl/webgl';
-import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
+import {Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport} from '@deck.gl/core';
 
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
 
@@ -8,18 +7,13 @@ export default class CollisionFilterPass extends LayersPass {
   renderCollisionMap(target: Framebuffer, options: CollisionFilterPassRenderOptions) {
     const padding = 1;
     const clearColor = [0, 0, 0, 0];
+    const scissorRect = [padding, padding, target.width - 2 * padding, target.height - 2 * padding];
 
-    return withGLParameters(
-      this.device,
-      {
-        scissorTest: true,
-        scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],
-        blend: false,
-        depthTest: true,
-        depthRange: [0, 1]
-      },
-      () => this.render({...options, clearColor, target, pass: 'collision'})
-    );
+    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};
   }
 
   getModuleParameters() {

package/src/collision-filter/shader-module.ts

@@ -1,8 +1,9 @@
 import {Framebuffer, Texture} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {project} from '@deck.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
-const vs = `
+const vs = glsl`
 #ifdef NON_INSTANCED_MODEL
 in float collisionPriorities;
 #else
@@ -54,10 +55,10 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
 `;
 
 const inject = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
   float collision_fade = 1.0;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': `
+  'vs:DECKGL_FILTER_GL_POSITION': glsl`
   if (collision_sort) {
     #ifdef NON_INSTANCED_MODEL
     float collisionPriority = collisionPriorities;
@@ -77,7 +78,7 @@ const inject = {
     }
   }
   `,
-  'vs:DECKGL_FILTER_COLOR': `
+  'vs:DECKGL_FILTER_COLOR': glsl`
   color.a *= collision_fade;
   `
 };
@@ -101,6 +102,7 @@ const getCollisionUniforms = (
   const {collisionFBO, drawToCollisionMap, dummyCollisionMap} = opts;
   return {
     collision_sort: Boolean(drawToCollisionMap),
+    // @ts-ignore (v9 not sure why this isn't allowed now)
     collision_texture:
       !drawToCollisionMap && collisionFBO ? collisionFBO.colorAttachments[0] : dummyCollisionMap
   };

package/src/data-filter/aggregator.ts

@@ -1,4 +1,4 @@
-import {Device, Framebuffer} from '@luma.gl/core';
+import {Device, DeviceFeature, Framebuffer} from '@luma.gl/core';
 import {Model} from '@luma.gl/engine';
 import {GL} from '@luma.gl/constants';
 
@@ -53,18 +53,13 @@ void main() {
 }
 `;
 
-export function supportsFloatTarget(device: Device): boolean {
-  // @ts-expect-error
-  const gl = device.gl;
+const FLOAT_TARGET_FEATURES: DeviceFeature[] = [
+  'float32-renderable-webgl', // ability to render to float texture
+  'texture-blend-float-webgl' // ability to blend when rendering to float texture
+];
 
-  // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#Support_for_float_textures_doesnt_mean_you_can_render_into_them!
-  return Boolean(
-    gl.getExtension('EXT_float_blend') &&
-      // WebGL 2
-      (gl.getExtension('EXT_color_buffer_float') ||
-        // WebGL 1
-        gl.getExtension('WEBGL_color_buffer_float'))
-  );
+export function supportsFloatTarget(device: Device): boolean {
+  return FLOAT_TARGET_FEATURES.every(feature => device.features.has(feature));
 }
 
 // A 1x1 framebuffer object that encodes the total count of filtered items
@@ -75,7 +70,7 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
       height: 1,
       colorAttachments: [
         device.createTexture({
-          format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
+          format: 'rgba32float',
           type: GL.FLOAT,
           mipmaps: false
         })