@deck.gl/extensions 9.0.0-beta.2 → 9.0.0-beta.4

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.2",
+  "type": "module",
+  "version": "9.0.0-beta.4",
   "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,
@@ -32,17 +39,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/shadertools": "9.0.0-beta.1"
+    "@luma.gl/shadertools": "9.0.0-beta.4"
   },
   "peerDependencies": {
     "@deck.gl/core": "^9.0.0-alpha",
-    "@luma.gl/constants": "9.0.0-beta.1",
-    "@luma.gl/core": "9.0.0-beta.1",
-    "@luma.gl/engine": "9.0.0-beta.1",
-    "@luma.gl/shadertools": "9.0.0-beta.1",
-    "@luma.gl/webgl": "9.0.0-beta.1",
+    "@luma.gl/constants": "9.0.0-beta.4",
+    "@luma.gl/core": "9.0.0-beta.4",
+    "@luma.gl/engine": "9.0.0-beta.4",
+    "@luma.gl/shadertools": "9.0.0-beta.4",
+    "@luma.gl/webgl": "9.0.0-beta.4",
     "@math.gl/core": "^4.0.0",
     "@math.gl/web-mercator": "^4.0.0"
   },
-  "gitHead": "ed132efaf84a75ea71c89dd8555b6ffc1fe839d5"
+  "gitHead": "7063cbec75a5fbcefc51f33f6e2488134533d34a"
 }

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

@@ -1,5 +1,4 @@
 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';
@@ -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,5 +1,4 @@
 import {Framebuffer} from '@luma.gl/core';
-import {withGLParameters} from '@luma.gl/webgl';
 import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
 
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
@@ -9,8 +8,7 @@ export default class CollisionFilterPass extends LayersPass {
     const padding = 1;
     const clearColor = [0, 0, 0, 0];
 
-    return withGLParameters(
-      this.device,
+    return this.device.withParametersWebGL(
       {
         scissorTest: true,
         scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],

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

@@ -18,32 +18,40 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 // THE SOFTWARE.
 
-import {readPixelsToArray, clear, withGLParameters} from '@luma.gl/webgl';
 import {GL} from '@luma.gl/constants';
 import type {Framebuffer} from '@luma.gl/core';
 import type {Model} from '@luma.gl/engine';
 import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
-import {LayerExtension} from '@deck.gl/core';
+import {_deepEqual as deepEqual, LayerExtension, log} from '@deck.gl/core';
 import {shaderModule, shaderModule64} from './shader-module';
 import * as aggregator from './aggregator';
 
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
+  getFilterCategory: {type: 'accessor', value: 0},
   onFilteredItemsChange: {type: 'function', value: null, optional: true},
 
   filterEnabled: true,
   filterRange: [-1, 1],
   filterSoftRange: null,
+  filterCategories: [0],
   filterTransformSize: true,
   filterTransformColor: true
 };
 
+type FilterCategory = number | string;
+
 export type DataFilterExtensionProps<DataT = any> = {
   /**
    * Accessor to retrieve the value for each object that it will be filtered by.
    * Returns either a number (if `filterSize: 1`) or an array of numbers.
    */
   getFilterValue?: Accessor<DataT, number | number[]>;
+  /**
+   * Accessor to retrieve the category (`number | string`) for each object that it will be filtered by.
+   * Returns either a single category (if `filterSize: 1`) or an array of categories.
+   */
+  getFilterCategory?: Accessor<DataT, FilterCategory | FilterCategory[]>;
   /**
    * Enable/disable the data filter. If the data filter is disabled, all objects are rendered.
    * @default true
@@ -71,6 +79,11 @@ export type DataFilterExtensionProps<DataT = any> = {
    * @default true
    */
   filterTransformColor?: boolean;
+  /**
+   * The categories which define whether an object should be rendered.
+   * @default []
+   */
+  filterCategories: FilterCategory[] | FilterCategory[][];
   /**
    * Only called if the `countItems` option is enabled.
    */
@@ -83,21 +96,26 @@ export type DataFilterExtensionProps<DataT = any> = {
 };
 
 type DataFilterExtensionOptions = {
+  /**
+   * The size of the category filter (number of columns to filter by). The category filter can show/hide data based on 1-4 properties of each object.
+   * @default 1
+   */
+  categorySize?: 1 | 2 | 3 | 4;
   /**
    * The size of the filter (number of columns to filter by). The data filter can show/hide data based on 1-4 numeric properties of each object.
    * @default 1
    */
-  filterSize: number;
+  filterSize?: 1 | 2 | 3 | 4;
   /**
    * Use 64-bit precision instead of 32-bit.
    * @default false
    */
-  fp64: boolean;
+  fp64?: boolean;
   /**
    * If `true`, reports the number of filtered objects with the `onFilteredItemsChange` callback.
    * @default `false`.
    */
-  countItems: boolean;
+  countItems?: boolean;
 };
 
 const DATA_TYPE_FROM_SIZE = {
@@ -112,25 +130,15 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
   static defaultProps = defaultProps;
   static extensionName = 'DataFilterExtension';
 
-  constructor({
-    filterSize = 1,
-    fp64 = false,
-    countItems = false
-  }: Partial<DataFilterExtensionOptions> = {}) {
-    if (!DATA_TYPE_FROM_SIZE[filterSize]) {
-      throw new Error('filterSize out of range');
-    }
-
-    super({filterSize, fp64, countItems});
-  }
-
   getShaders(this: Layer<DataFilterExtensionProps>, extension: this): any {
-    const {filterSize, fp64} = extension.opts;
+    const {categorySize, filterSize, fp64} = extension.opts;
 
     return {
       modules: [fp64 ? shaderModule64 : shaderModule],
       defines: {
-        DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize],
+        DATACATEGORY_TYPE: DATA_TYPE_FROM_SIZE[categorySize || 1],
+        DATACATEGORY_CHANNELS: categorySize,
+        DATAFILTER_TYPE: DATA_TYPE_FROM_SIZE[filterSize || 1],
         DATAFILTER_DOUBLE: Boolean(fp64)
       }
     };
@@ -138,11 +146,13 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
 
   initializeState(this: Layer<DataFilterExtensionProps>, context: LayerContext, extension: this) {
     const attributeManager = this.getAttributeManager();
+    const {categorySize, filterSize, fp64} = extension.opts;
+
     if (attributeManager) {
       attributeManager.add({
         filterValues: {
-          size: extension.opts.filterSize,
-          type: extension.opts.fp64 ? GL.DOUBLE : GL.FLOAT,
+          size: filterSize,
+          type: fp64 ? GL.DOUBLE : GL.FLOAT,
           accessor: 'getFilterValue',
           shaderAttributes: {
             filterValues: {
@@ -152,6 +162,23 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
               divisor: 1
             }
           }
+        },
+        filterCategoryValues: {
+          size: categorySize,
+          type: GL.FLOAT,
+          accessor: 'getFilterCategory',
+          transform:
+            categorySize === 1
+              ? d => extension._getCategoryKey.call(this, d, 0)
+              : d => d.map((x, i) => extension._getCategoryKey.call(this, x, i)),
+          shaderAttributes: {
+            filterCategoryValues: {
+              divisor: 0
+            },
+            instanceFilterCategoryValues: {
+              divisor: 1
+            }
+          }
         }
       });
     }
@@ -195,44 +222,74 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
 
   updateState(
     this: Layer<DataFilterExtensionProps>,
-    {props, oldProps}: UpdateParameters<Layer<DataFilterExtensionProps>>
+    {props, oldProps, changeFlags}: UpdateParameters<Layer<DataFilterExtensionProps>>,
+    extension: this
   ) {
+    const attributeManager = this.getAttributeManager();
+    const {categorySize} = extension.opts;
     if (this.state.filterModel) {
-      const attributeManager = this.getAttributeManager();
       const filterNeedsUpdate =
         // attributeManager must be defined for filterModel to be set
         attributeManager!.attributes.filterValues.needsUpdate() ||
+        attributeManager!.attributes.filterCategoryValues?.needsUpdate() ||
         props.filterEnabled !== oldProps.filterEnabled ||
         props.filterRange !== oldProps.filterRange ||
-        props.filterSoftRange !== oldProps.filterSoftRange;
+        props.filterSoftRange !== oldProps.filterSoftRange ||
+        props.filterCategories !== oldProps.filterCategories;
       if (filterNeedsUpdate) {
         this.setState({filterNeedsUpdate});
       }
     }
+    if (attributeManager?.attributes.filterCategoryValues) {
+      // Update bitmask if accessor or selected categories has changed
+      const categoryBitMaskNeedsUpdate =
+        attributeManager.attributes.filterCategoryValues.needsUpdate() ||
+        !deepEqual(props.filterCategories, oldProps.filterCategories, 2);
+      if (categoryBitMaskNeedsUpdate) {
+        this.setState({categoryBitMaskNeedsUpdate});
+      }
+
+      // Need to recreate category map if categorySize has changed
+      const resetCategories = changeFlags.dataChanged;
+      if (resetCategories) {
+        this.setState({
+          categoryMap: Array(categorySize)
+            .fill(0)
+            .map(() => ({}))
+        });
+        attributeManager.attributes.filterCategoryValues.setNeedsUpdate('categoryMap');
+      }
+    }
   }
 
   draw(this: Layer<DataFilterExtensionProps>, params: any, extension: this) {
     const filterFBO = this.state.filterFBO as Framebuffer;
     const filterModel = this.state.filterModel as Model;
     const filterNeedsUpdate = this.state.filterNeedsUpdate as boolean;
+    const categoryBitMaskNeedsUpdate = this.state.categoryBitMaskNeedsUpdate as boolean;
 
     const {onFilteredItemsChange} = this.props;
+
+    if (categoryBitMaskNeedsUpdate) {
+      extension._updateCategoryBitMask.call(this, params, extension);
+    }
     if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
       const {
-        attributes: {filterValues, filterIndices}
+        attributes: {filterValues, filterCategoryValues, filterIndices}
       } = this.getAttributeManager()!;
       filterModel.setVertexCount(this.getNumInstances());
 
-      clear(this.context.device, {framebuffer: filterFBO, color: [0, 0, 0, 0]});
+      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({
         ...filterValues.getValue(),
+        ...filterCategoryValues?.getValue(),
         ...filterIndices?.getValue()
       });
-      withGLParameters(
-        filterModel.device,
+      filterModel.setUniforms(params.uniforms);
+      filterModel.device.withParametersWebGL(
         {
           framebuffer: filterFBO,
           // ts-ignore 'readonly' cannot be assigned to the mutable type '[GLBlendEquation, GLBlendEquation]'
@@ -243,7 +300,7 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
           filterModel.draw(this.context.renderPass);
         }
       );
-      const color = readPixelsToArray(filterFBO);
+      const color = filterModel.device.readPixelsToArrayWebGL(filterFBO);
       let count = 0;
       for (let i = 0; i < color.length; i++) {
         count += color[i];
@@ -262,4 +319,54 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
     filterFBO?.destroy();
     filterModel?.destroy();
   }
+
+  /**
+   * Updates the bitmask used on the GPU to perform the filter based on the
+   * `filterCategories` prop. The mapping between categories and bit in the bitmask
+   * is performed by `_getCategoryKey()`
+   */
+  _updateCategoryBitMask(
+    this: Layer<DataFilterExtensionProps>,
+    params: any,
+    extension: this
+  ): void {
+    const {categorySize} = extension.opts;
+    const {filterCategories} = this.props;
+    const categoryBitMask = new Uint32Array([0, 0, 0, 0]);
+    const categoryFilters = (
+      categorySize === 1 ? [filterCategories] : filterCategories
+    ) as FilterCategory[][];
+    const maxCategories = categorySize === 1 ? 128 : categorySize === 2 ? 64 : 32;
+    for (let c = 0; c < categoryFilters.length; c++) {
+      const categoryFilter = categoryFilters[c];
+      for (const category of categoryFilter) {
+        const key = extension._getCategoryKey.call(this, category, c);
+        if (key < maxCategories) {
+          const channel = c * (maxCategories / 32) + Math.floor(key / 32);
+          categoryBitMask[channel] += Math.pow(2, key % 32); // 1 << key fails for key > 30
+        } else {
+          log.warn(`Exceeded maximum number of categories (${maxCategories})`)();
+        }
+      }
+    }
+    /* eslint-disable-next-line camelcase */
+    params.uniforms.filter_categoryBitMask = categoryBitMask;
+    this.state.categoryBitMaskNeedsUpdate = false;
+  }
+
+  /**
+   * Returns an index of bit in the bitmask for a given category. If the category has
+   * not yet been assigned a bit, a new one is assigned.
+   */
+  _getCategoryKey(
+    this: Layer<DataFilterExtensionProps>,
+    category: FilterCategory,
+    channel: number
+  ) {
+    const categoryMap = (this.state.categoryMap as Record<FilterCategory, number>[])[channel];
+    if (!(category in categoryMap)) {
+      categoryMap[category] = Object.keys(categoryMap).length;
+    }
+    return categoryMap[category];
+  }
 }

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

@@ -12,13 +12,16 @@ uniform DATAFILTER_TYPE filter_max;
 uniform bool filter_useSoftMargin;
 uniform bool filter_enabled;
 uniform bool filter_transformSize;
+uniform ivec4 filter_categoryBitMask;
 
 #ifdef NON_INSTANCED_MODEL
   #define DATAFILTER_ATTRIB filterValues
   #define DATAFILTER_ATTRIB_64LOW filterValues64Low
+  #define DATACATEGORY_ATTRIB filterCategoryValues
 #else
   #define DATAFILTER_ATTRIB instanceFilterValues
   #define DATAFILTER_ATTRIB_64LOW instanceFilterValues64Low
+  #define DATACATEGORY_ATTRIB instanceFilterCategoryValues
 #endif
 
 in DATAFILTER_TYPE DATAFILTER_ATTRIB;
@@ -28,6 +31,7 @@ in DATAFILTER_TYPE DATAFILTER_ATTRIB;
   uniform DATAFILTER_TYPE filter_min64High;
   uniform DATAFILTER_TYPE filter_max64High;
 #endif
+in DATACATEGORY_TYPE DATACATEGORY_ATTRIB;
 
 out float dataFilter_value;
 
@@ -43,7 +47,7 @@ float dataFilter_reduceValue(vec3 value) {
 float dataFilter_reduceValue(vec4 value) {
   return min(min(value.x, value.y), min(value.z, value.w));
 }
-void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax) {
+void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFromMax, DATACATEGORY_TYPE category) {
   if (filter_enabled) {
     if (filter_useSoftMargin) {
       dataFilter_value = dataFilter_reduceValue(
@@ -55,6 +59,29 @@ void dataFilter_setValue(DATAFILTER_TYPE valueFromMin, DATAFILTER_TYPE valueFrom
         step(filter_min, valueFromMin) * step(valueFromMax, filter_max)
       );
     }
+
+    #if DATACATEGORY_CHANNELS == 1 // One 128-bit mask
+      int dataFilter_masks = filter_categoryBitMask[int(category / 32.0)];
+    #elif DATACATEGORY_CHANNELS == 2 // Two 64-bit masks
+      ivec2 dataFilter_masks = ivec2(
+        filter_categoryBitMask[int(category.x / 32.0)],
+        filter_categoryBitMask[int(category.y / 32.0) + 2]
+      );
+    #elif DATACATEGORY_CHANNELS == 3 // Three 32-bit masks
+      ivec3 dataFilter_masks = filter_categoryBitMask.xyz;
+    #else // Four 32-bit masks
+      ivec4 dataFilter_masks = filter_categoryBitMask;
+    #endif
+
+    // Shift mask and extract relevant bits
+    DATACATEGORY_TYPE dataFilter_bits = DATACATEGORY_TYPE(dataFilter_masks) / pow(DATACATEGORY_TYPE(2.0), mod(category, 32.0));
+    dataFilter_bits = mod(floor(dataFilter_bits), 2.0);
+
+    #if DATACATEGORY_CHANNELS == 1
+      if(dataFilter_bits == 0.0) dataFilter_value = 0.0;
+    #else
+    if(any(equal(dataFilter_bits, DATACATEGORY_TYPE(0.0)))) dataFilter_value = 0.0;
+    #endif
   } else {
     dataFilter_value = 1.0;
   }
@@ -138,10 +165,11 @@ const inject = {
     #ifdef DATAFILTER_DOUBLE
       dataFilter_setValue(
         DATAFILTER_ATTRIB - filter_min64High + DATAFILTER_ATTRIB_64LOW,
-        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW
+        DATAFILTER_ATTRIB - filter_max64High + DATAFILTER_ATTRIB_64LOW,
+        DATACATEGORY_ATTRIB
       );
     #else
-      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB);
+      dataFilter_setValue(DATAFILTER_ATTRIB, DATAFILTER_ATTRIB, DATACATEGORY_ATTRIB);
     #endif
   `,
 

package/src/mask/mask-effect.ts

@@ -1,6 +1,5 @@
 import {Layer, Viewport, Effect, PreRenderOptions, CoordinateSystem, log} from '@deck.gl/core';
 import type {Device, Texture} from '@luma.gl/core';
-// import {readPixelsToArray} from '@luma.gl/webgl-legacy';
 import {equals} from '@math.gl/core';
 import MaskPass from './mask-pass';
 import {joinLayerBounds, getRenderBounds, makeViewport, Bounds} from '../utils/projection-utils';

package/src/mask/mask-pass.ts

@@ -1,5 +1,4 @@
 import type {Device, Framebuffer, Texture} from '@luma.gl/core';
-import {withGLParameters} from '@luma.gl/webgl';
 import {GL} from '@luma.gl/constants';
 import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
 
@@ -42,8 +41,7 @@ export default class MaskPass extends LayersPass {
     colorMask[options.channel] = true;
     const clearColor = [255, 255, 255, 255];
 
-    return withGLParameters(
-      this.device,
+    return this.device.withParametersWebGL(
       {
         blend: true,
         blendFunc: [GL.ZERO, GL.ONE],

package/src/terrain/terrain-effect.ts

@@ -65,7 +65,8 @@ export class TerrainEffect implements Effect {
       return;
     }
 
-    const {viewports, isPicking = false} = opts;
+    const {viewports} = opts;
+    const isPicking = opts.pass.startsWith('picking');
     this.isPicking = isPicking;
     this.isDrapingEnabled = true;
 
@@ -201,7 +202,12 @@ export class TerrainEffect implements Effect {
             devicePixelRatio: 1
           }
         });
-        terrainCover.isDirty = false;
+
+        if (!this.isPicking) {
+          // IsDirty refers to the normal fbo, not the picking fbo.
+          // Only mark it as not dirty if the normal fbo was updated.
+          terrainCover.isDirty = false;
+        }
       }
     } catch (err) {
       terrainLayer.raiseError(err as Error, `Error rendering terrain cover ${terrainCover.id}`);

package/src/terrain/terrain-pass.ts

@@ -1,4 +1,3 @@
-import {withGLParameters} from '@luma.gl/webgl';
 import {GL} from '@luma.gl/constants';
 import {Layer, Viewport, _LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
 import type {HeightMapBuilder} from './height-map-builder';
@@ -33,8 +32,7 @@ export class TerrainPass extends LayersPass {
 
     target.resize(viewport);
 
-    withGLParameters(
-      this.device,
+    this.device.withParametersWebGL(
       {
         clearColor: [0, 0, 0, 0],
         blend: true,
@@ -66,8 +64,7 @@ export class TerrainPass extends LayersPass {
     const layers = terrainCover.filterLayers(opts.layers!);
     target.resize(viewport);
 
-    withGLParameters(
-      this.device,
+    this.device.withParametersWebGL(
       {
         clearColor: [0, 0, 0, 0],
         depthTest: false

package/src/terrain/terrain-picking-pass.ts

@@ -4,7 +4,6 @@ import {
   LayersPassRenderOptions,
   _PickLayersPass as PickLayersPass
 } from '@deck.gl/core';
-import {withGLParameters} from '@luma.gl/webgl';
 import type {TerrainCover} from './terrain-cover';
 
 export type TerrainPickingPassRenderOptions = LayersPassRenderOptions & {
@@ -54,8 +53,7 @@ export class TerrainPickingPass extends PickLayersPass {
     }
     target.resize(viewport);
 
-    withGLParameters(
-      this.device,
+    this.device.withParametersWebGL(
       {
         depthTest: false
       },

package/src/utils/debug.ts

@@ -1,7 +1,6 @@
 /* global document */
 
 import {Framebuffer} from '@luma.gl/core';
-import {readPixelsToArray} from '@luma.gl/webgl';
 
 /** Debug utility to draw FBO contents onto screen */
 // eslint-disable-next-line
@@ -9,7 +8,7 @@ export const debugFBO = function (
   fbo: Framebuffer,
   {minimap, opaque}: {minimap?: boolean; opaque?: boolean} = {}
 ) {
-  const color = readPixelsToArray(fbo);
+  const color = fbo.device.readPixelsToArrayWebGL(fbo);
   let canvas = document.getElementById('fbo-canvas') as HTMLCanvasElement;
   const canvasHeight = (minimap ? 2 : 1) * fbo.height;
   if (!canvas) {