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

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

@@ -1,14 +1,20 @@
-import {Framebuffer, Texture} from '@luma.gl/core';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Framebuffer, Texture, TextureView} 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 = glsl`
+const vs = /* glsl */ `
 in float collisionPriorities;
 
 uniform sampler2D collision_texture;
-uniform bool collision_sort;
-uniform bool collision_enabled;
+
+uniform collisionUniforms {
+  bool sort;
+  bool enabled;
+} collision;
 
 vec2 collision_getCoords(vec4 position) {
   vec4 collision_clipspace = project_common_position_to_clipspace(position);
@@ -23,7 +29,7 @@ float collision_match(vec2 tex, vec3 pickingColor) {
 }
 
 float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
-  if (!collision_enabled) {
+  if (!collision.enabled) {
     return 1.0;
   }
 
@@ -32,7 +38,7 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
   // 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);
+  vec2 step = vec2(1.0 / project.viewportSize);
 
   const float floatN = float(N);
   vec2 delta = -floatN * step;
@@ -51,16 +57,16 @@ float collision_isVisible(vec2 texCoords, vec3 pickingColor) {
 `;
 
 const inject = {
-  'vs:#decl': glsl`
+  'vs:#decl': /* glsl */ `
   float collision_fade = 1.0;
 `,
-  'vs:DECKGL_FILTER_GL_POSITION': glsl`
-  if (collision_sort) {
+  'vs:DECKGL_FILTER_GL_POSITION': /* glsl */ `
+  if (collision.sort) {
     float collisionPriority = collisionPriorities;
     position.z = -0.001 * collisionPriority * position.w; // Support range -1000 -> 1000
   }
 
-  if (collision_enabled) {
+  if (collision.enabled) {
     vec4 collision_common_position = project_position(vec4(geometry.worldPosition, 1.0));
     vec2 collision_texCoords = collision_getCoords(collision_common_position);
     collision_fade = collision_isVisible(collision_texCoords, geometry.pickingColor / 255.0);
@@ -70,40 +76,52 @@ const inject = {
     }
   }
   `,
-  'vs:DECKGL_FILTER_COLOR': glsl`
+  'vs:DECKGL_FILTER_COLOR': /* glsl */ `
   color.a *= collision_fade;
   `
 };
 
-type CollisionModuleSettings = {
+export type CollisionModuleProps = {
+  enabled: boolean;
   collisionFBO?: Framebuffer;
   drawToCollisionMap?: boolean;
   dummyCollisionMap?: Texture;
 };
 
 /* eslint-disable camelcase */
-type CollisionUniforms = {collision_sort?: boolean; collision_texture?: Texture};
+type CollisionUniforms = {
+  enabled?: boolean;
+  sort?: boolean;
+};
+
+type CollisionBindings = {
+  collision_texture?: TextureView | Texture;
+};
 
 const getCollisionUniforms = (
-  opts: CollisionModuleSettings | {},
-  uniforms: Record<string, any>
-): CollisionUniforms => {
+  opts: CollisionModuleProps | {}
+): CollisionBindings & CollisionUniforms => {
   if (!opts || !('dummyCollisionMap' in opts)) {
     return {};
   }
-  const {collisionFBO, drawToCollisionMap, dummyCollisionMap} = opts;
+  const {enabled, collisionFBO, drawToCollisionMap, dummyCollisionMap} = opts;
   return {
-    collision_sort: Boolean(drawToCollisionMap),
-    // @ts-ignore (v9 not sure why this isn't allowed now)
+    enabled: enabled && !drawToCollisionMap,
+    sort: Boolean(drawToCollisionMap),
     collision_texture:
       !drawToCollisionMap && collisionFBO ? collisionFBO.colorAttachments[0] : dummyCollisionMap
   };
 };
 
+// @ts-ignore
 export default {
   name: 'collision',
   dependencies: [project],
   vs,
   inject,
-  getUniforms: getCollisionUniforms
-} as ShaderModule<CollisionModuleSettings>;
+  getUniforms: getCollisionUniforms,
+  uniformTypes: {
+    sort: 'i32',
+    enabled: 'i32'
+  }
+} as ShaderModule<CollisionModuleProps>;

package/src/data-filter/aggregator.ts

@@ -1,6 +1,9 @@
-import {Device, DeviceFeature, Framebuffer} from '@luma.gl/core';
-import {Model} from '@luma.gl/engine';
-import {GL} from '@luma.gl/constants';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Device, DeviceFeature, Framebuffer, RenderPipelineParameters} from '@luma.gl/core';
+import {Model, ModelProps} from '@luma.gl/engine';
 
 const AGGREGATE_VS = `\
 #version 300 es
@@ -71,7 +74,6 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
       colorAttachments: [
         device.createTexture({
           format: 'rgba32float',
-          type: GL.FLOAT,
           mipmaps: false
         })
       ]
@@ -80,12 +82,17 @@ export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebu
   return device.createFramebuffer({
     width: 256,
     height: 64,
-    colorAttachments: [device.createTexture({format: 'rgba8unorm', type: GL.FLOAT, mipmaps: false})]
+    colorAttachments: [device.createTexture({format: 'rgba8unorm', mipmaps: false})]
   });
 }
 
 // Increments the counter based on dataFilter_value
-export function getModel(device: Device, shaderOptions: any, useFloatTarget: boolean): Model {
+export function getModel(
+  device: Device,
+  bufferLayout: ModelProps['bufferLayout'],
+  shaderOptions: any,
+  useFloatTarget: boolean
+): Model {
   shaderOptions.defines.NON_INSTANCED_MODEL = 1;
   if (useFloatTarget) {
     shaderOptions.defines.FLOAT_TARGET = 1;
@@ -95,16 +102,21 @@ export function getModel(device: Device, shaderOptions: any, useFloatTarget: boo
     id: 'data-filter-aggregation-model',
     vertexCount: 1,
     isInstanced: false,
-    drawMode: GL.POINTS,
+    topology: 'point-list',
     vs: AGGREGATE_VS,
     fs: AGGREGATE_FS,
+    bufferLayout,
     ...shaderOptions
   });
 }
 
-export const parameters = {
+export const parameters: RenderPipelineParameters = {
   blend: true,
-  blendFunc: [GL.ONE, GL.ONE, GL.ONE, GL.ONE],
-  blendEquation: [GL.FUNC_ADD, GL.FUNC_ADD],
-  depthTest: false
+  blendColorSrcFactor: 'one',
+  blendColorDstFactor: 'one',
+  blendAlphaSrcFactor: 'one',
+  blendAlphaDstFactor: 'one',
+  blendColorOperation: 'add',
+  blendAlphaOperation: 'add',
+  depthCompare: 'never'
 } as const;

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

@@ -1,29 +1,20 @@
-// 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 type {Framebuffer} from '@luma.gl/core';
+// deck.gl
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import type {Buffer, Framebuffer} from '@luma.gl/core';
 import type {Model} from '@luma.gl/engine';
 import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
 import {_deepEqual as deepEqual, LayerExtension, log} from '@deck.gl/core';
-import {Defines, shaderModule, shaderModule64} from './shader-module';
+import {
+  CategoryBitMask,
+  DataFilterModuleProps,
+  Defines,
+  dataFilter,
+  dataFilter64
+} from './shader-module';
 import * as aggregator from './aggregator';
+import {NumberArray4} from '@math.gl/core';
 
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
@@ -124,6 +115,12 @@ const defaultOptions: Required<DataFilterExtensionOptions> = {
   countItems: false
 };
 
+const CATEGORY_TYPE_FROM_SIZE = {
+  1: 'uint' as const,
+  2: 'uvec2' as const,
+  3: 'uvec3' as const,
+  4: 'uvec4' as const
+};
 const DATA_TYPE_FROM_SIZE = {
   1: 'float' as const,
   2: 'vec2' as const,
@@ -146,7 +143,7 @@ export default class DataFilterExtension extends LayerExtension<
     const {categorySize, filterSize, fp64} = extension.opts;
     const defines: Defines = {};
     if (categorySize) {
-      defines.DATACATEGORY_TYPE = DATA_TYPE_FROM_SIZE[categorySize];
+      defines.DATACATEGORY_TYPE = CATEGORY_TYPE_FROM_SIZE[categorySize];
       defines.DATACATEGORY_CHANNELS = categorySize;
     }
     if (filterSize) {
@@ -154,7 +151,10 @@ export default class DataFilterExtension extends LayerExtension<
       defines.DATAFILTER_DOUBLE = Boolean(fp64);
     }
 
-    return {modules: [fp64 ? shaderModule64 : shaderModule], defines};
+    const module = fp64 ? dataFilter64 : dataFilter;
+    module.uniformTypes = module.uniformTypesFromOptions(extension.opts);
+
+    return {modules: [module], defines};
   }
 
   initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this) {
@@ -179,6 +179,7 @@ export default class DataFilterExtension extends LayerExtension<
             size: categorySize,
             stepMode: 'dynamic',
             accessor: 'getFilterCategory',
+            type: 'uint32',
             transform:
               categorySize === 1
                 ? d => extension._getCategoryKey.call(this, d, 0)
@@ -195,7 +196,7 @@ export default class DataFilterExtension extends LayerExtension<
       // The vertex shader checks if a vertex has the same "index" as the previous vertex
       // so that we only write one count cross multiple vertices of the same object
       attributeManager.add({
-        filterIndices: {
+        filterVertexIndices: {
           size: useFloatTarget ? 1 : 2,
           vertexOffset: 1,
           type: 'unorm8',
@@ -217,6 +218,7 @@ export default class DataFilterExtension extends LayerExtension<
       const filterFBO = aggregator.getFramebuffer(device, useFloatTarget);
       const filterModel = aggregator.getModel(
         device,
+        attributeManager.getBufferLayouts({isInstanced: false}),
         extension.getShaders.call(this, extension),
         useFloatTarget
       );
@@ -271,40 +273,65 @@ export default class DataFilterExtension extends LayerExtension<
     const filterModel = this.state.filterModel as Model;
     const filterNeedsUpdate = this.state.filterNeedsUpdate as boolean;
 
-    const {onFilteredItemsChange} = this.props;
-
     if (!this.state.categoryBitMask) {
       extension._updateCategoryBitMask.call(this, params, extension);
     }
+
+    const {
+      onFilteredItemsChange,
+      extensions,
+      filterEnabled,
+      filterRange,
+      filterSoftRange,
+      filterTransformSize,
+      filterTransformColor,
+      filterCategories
+    } = this.props;
+    const dataFilterProps: DataFilterModuleProps = {
+      extensions,
+      filterEnabled,
+      filterRange,
+      filterSoftRange,
+      filterTransformSize,
+      filterTransformColor,
+      filterCategories
+    };
+    if (this.state.categoryBitMask) {
+      dataFilterProps.categoryBitMask = this.state.categoryBitMask as CategoryBitMask;
+    }
+    this.setShaderModuleProps({dataFilter: dataFilterProps});
+
     /* eslint-disable-next-line camelcase */
-    params.uniforms.filter_categoryBitMask = this.state.categoryBitMask;
     if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
+      const attributeManager = this.getAttributeManager()!;
       const {
-        attributes: {filterValues, filterCategoryValues, filterIndices}
-      } = this.getAttributeManager()!;
+        attributes: {filterValues, filterCategoryValues, filterVertexIndices}
+      } = attributeManager;
       filterModel.setVertexCount(this.getNumInstances());
 
-      this.context.device.clearWebGL({framebuffer: filterFBO, color: [0, 0, 0, 0]});
-
-      filterModel.updateModuleSettings(params.moduleParameters);
-      // @ts-expect-error filterValue and filterIndices should always have buffer value
-      filterModel.setAttributes({
+      // @ts-expect-error filterValue and filterVertexIndices should always have buffer value
+      const attributes: Record<string, Buffer> = {
         ...filterValues?.getValue(),
         ...filterCategoryValues?.getValue(),
-        ...filterIndices?.getValue()
+        ...filterVertexIndices?.getValue()
+      };
+      filterModel.setAttributes(attributes);
+      filterModel.shaderInputs.setProps({
+        dataFilter: dataFilterProps
       });
-      filterModel.setUniforms(params.uniforms);
-      filterModel.device.withParametersWebGL(
-        {
-          framebuffer: filterFBO,
-          // ts-ignore 'readonly' cannot be assigned to the mutable type '[GLBlendEquation, GLBlendEquation]'
-          ...(aggregator.parameters as any),
-          viewport: [0, 0, filterFBO.width, filterFBO.height]
-        },
-        () => {
-          filterModel.draw(this.context.renderPass);
-        }
-      );
+
+      const viewport = [0, 0, filterFBO.width, filterFBO.height] as NumberArray4;
+
+      const renderPass = filterModel.device.beginRenderPass({
+        id: 'data-filter-aggregation',
+        framebuffer: filterFBO,
+        parameters: {viewport},
+        clearColor: [0, 0, 0, 0]
+      });
+      filterModel.setParameters(aggregator.parameters);
+      filterModel.draw(renderPass);
+      renderPass.end();
+
       const color = filterModel.device.readPixelsToArrayWebGL(filterFBO);
       let count = 0;
       for (let i = 0; i < color.length; i++) {
@@ -338,7 +365,7 @@ export default class DataFilterExtension extends LayerExtension<
     const {categorySize} = extension.opts;
     if (!categorySize) return;
     const {filterCategories} = this.props;
-    const categoryBitMask = new Uint32Array([0, 0, 0, 0]);
+    const categoryBitMask: CategoryBitMask = new Uint32Array([0, 0, 0, 0]);
     const categoryFilters = (
       categorySize === 1 ? [filterCategories] : filterCategories
     ) as FilterCategory[][];