@deck.gl/extensions 8.10.0-alpha.7 → 9.0.0-alpha.3

package/package.json

@@ -2,7 +2,7 @@
   "name": "@deck.gl/extensions",
   "description": "Plug-and-play functionalities for deck.gl layers",
   "license": "MIT",
-  "version": "8.10.0-alpha.7",
+  "version": "9.0.0-alpha.3",
   "publishConfig": {
     "access": "public"
   },
@@ -31,14 +31,17 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.0.0",
-    "@luma.gl/shadertools": "^8.5.20"
+    "@luma.gl/shadertools": "9.0.0-alpha.42"
   },
   "peerDependencies": {
     "@deck.gl/core": "^8.0.0",
-    "@luma.gl/constants": "^8.0.0",
-    "@luma.gl/core": "^8.0.0",
+    "@luma.gl/constants": "9.0.0-alpha.42",
+    "@luma.gl/core": "9.0.0-alpha.42",
+    "@luma.gl/engine": "9.0.0-alpha.42",
+    "@luma.gl/shadertools": "9.0.0-alpha.42",
+    "@luma.gl/webgl": "9.0.0-alpha.42",
     "@math.gl/core": "^4.0.0",
     "@math.gl/web-mercator": "^4.0.0"
   },
-  "gitHead": "1c62a9eec914019afd3969bc0c59f1488e491207"
+  "gitHead": "51dfb88f9168ccf478d01b28a2c5ada7bd8281c7"
 }

package/src/brushing/brushing-extension.ts

@@ -83,15 +83,16 @@ export default class BrushingExtension extends LayerExtension {
     }
 
     // Trigger redraw when mouse moves
-    // TODO - expose this in a better way
-    this.state.onMouseMove = () => {
+    const onMouseMove = () => {
       this.getCurrentLayer()?.setNeedsRedraw();
     };
+    // TODO - expose this in a better way
+    this.state.onMouseMove = onMouseMove;
     if (context.deck) {
       // @ts-expect-error (2446) accessing protected property
       context.deck.eventManager.on({
-        pointermove: this.state.onMouseMove,
-        pointerleave: this.state.onMouseMove
+        pointermove: onMouseMove,
+        pointerleave: onMouseMove
       });
     }
   }
@@ -99,10 +100,11 @@ export default class BrushingExtension extends LayerExtension {
   finalizeState(this: Layer<BrushingExtensionProps>, context: LayerContext, extension: this) {
     // Remove event listeners
     if (context.deck) {
+      const onMouseMove = this.state.onMouseMove as () => void;
       // @ts-expect-error (2446) accessing protected property
       context.deck.eventManager.off({
-        pointermove: this.state.onMouseMove,
-        pointerleave: this.state.onMouseMove
+        pointermove: onMouseMove,
+        pointerleave: onMouseMove
       });
     }
   }

package/src/clip/clip-extension.ts

@@ -105,8 +105,7 @@ export default class ClipExtension extends LayerExtension {
     // Otherwise, the object is trimmed by the clip bounds (done by fragment shader)
 
     // Default behavior: consider a layer instanced if it has attribute `instancePositions`
-    // @ts-expect-error attributeManager is always defined for primitive layers
-    let clipByInstance = 'instancePositions' in this.getAttributeManager().attributes;
+    let clipByInstance = 'instancePositions' in this.getAttributeManager()!.attributes;
     // Users can override by setting the `clipByInstance` prop
     if (this.props.clipByInstance !== undefined) {
       clipByInstance = Boolean(this.props.clipByInstance);

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

@@ -1,4 +1,5 @@
-import {Framebuffer, Renderbuffer, Texture2D, cssToDeviceRatio} from '@luma.gl/core';
+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';
@@ -30,11 +31,11 @@ export default class CollisionFilterEffect implements Effect {
   private channels: Record<string, RenderInfo> = {};
   private collisionFilterPass?: CollisionFilterPass;
   private collisionFBOs: Record<string, Framebuffer> = {};
-  private dummyCollisionMap?: Texture2D;
+  private dummyCollisionMap?: Texture;
   private lastViewport?: Viewport;
 
   preRender(
-    gl: WebGLRenderingContext,
+    device: Device,
     {
       effects: allEffects,
       layers,
@@ -47,7 +48,7 @@ export default class CollisionFilterEffect implements Effect {
     }: PreRenderOptions
   ): void {
     if (!this.dummyCollisionMap) {
-      this.dummyCollisionMap = new Texture2D(gl, {width: 1, height: 1});
+      this.dummyCollisionMap = device.createTexture({width: 1, height: 1});
     }
 
     if (isPicking) {
@@ -65,7 +66,7 @@ export default class CollisionFilterEffect implements Effect {
     }
 
     if (!this.collisionFilterPass) {
-      this.collisionFilterPass = new CollisionFilterPass(gl, {id: 'default-collision-filter'});
+      this.collisionFilterPass = new CollisionFilterPass(device, {id: 'default-collision-filter'});
     }
 
     // Detect if mask has rendered. TODO: better dependency system for Effects
@@ -73,7 +74,7 @@ export default class CollisionFilterEffect implements Effect {
     const maskEffectRendered = (preRenderStats['mask-effect'] as MaskPreRenderStats)?.didRender;
 
     // Collect layers to render
-    const channels = this._groupByCollisionGroup(gl, collisionLayers);
+    const channels = this._groupByCollisionGroup(device, collisionLayers);
 
     const viewport = viewports[0];
     const viewportChanged =
@@ -83,9 +84,11 @@ export default class CollisionFilterEffect implements Effect {
     for (const collisionGroup in channels) {
       const collisionFBO = this.collisionFBOs[collisionGroup];
       const renderInfo = channels[collisionGroup];
+      // @ts-expect-error TODO - assuming WebGL context
+      const [width, height] = device.canvasContext.getPixelSize();
       collisionFBO.resize({
-        width: gl.canvas.width / DOWNSCALE,
-        height: gl.canvas.height / DOWNSCALE
+        width: width / DOWNSCALE,
+        height: height / DOWNSCALE
       });
       this._render(renderInfo, {
         effects,
@@ -156,7 +159,8 @@ export default class CollisionFilterEffect implements Effect {
         moduleParameters: {
           // To avoid feedback loop forming between Framebuffer and active Texture.
           dummyCollisionMap: this.dummyCollisionMap,
-          devicePixelRatio: cssToDeviceRatio(collisionFBO.gl) / DOWNSCALE
+          // @ts-expect-error TODO - assuming WebGL context
+          devicePixelRatio: collisionFBO.device.canvasContext.getDevicePixelRatio() / DOWNSCALE
         }
       });
     }
@@ -167,7 +171,7 @@ export default class CollisionFilterEffect implements Effect {
    * Returns a map from collisionGroup to render info
    */
   private _groupByCollisionGroup(
-    gl: WebGLRenderingContext,
+    device: Device,
     collisionLayers: Layer<CollisionFilterExtensionProps>[]
   ): Record<string, RenderInfo> {
     const channelMap = {};
@@ -188,7 +192,7 @@ export default class CollisionFilterEffect implements Effect {
     // Create any new passes and remove any old ones
     for (const collisionGroup of Object.keys(channelMap)) {
       if (!this.collisionFBOs[collisionGroup]) {
-        this.createFBO(gl, collisionGroup);
+        this.createFBO(device, collisionGroup);
       }
       if (!this.channels[collisionGroup]) {
         this.channels[collisionGroup] = channelMap[collisionGroup];
@@ -205,11 +209,11 @@ export default class CollisionFilterEffect implements Effect {
 
   getModuleParameters(layer: Layer): {
     collisionFBO: Framebuffer;
-    dummyCollisionMap: Texture2D;
+    dummyCollisionMap: Texture;
   } {
     const {collisionGroup} = (layer as Layer<CollisionFilterExtensionProps>).props;
     const {collisionFBOs, dummyCollisionMap} = this;
-    return {collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap};
+    return {collisionFBO: collisionFBOs[collisionGroup], dummyCollisionMap: dummyCollisionMap!};
   }
 
   cleanup(): void {
@@ -225,34 +229,41 @@ export default class CollisionFilterEffect implements Effect {
     this.lastViewport = undefined;
   }
 
-  createFBO(gl: WebGLRenderingContext, collisionGroup: string) {
-    const {width, height} = gl.canvas;
-    const collisionMap = new Texture2D(gl, {
+  createFBO(device: Device, collisionGroup: string) {
+    // @ts-expect-error
+    const {width, height} = device.gl.canvas;
+    const collisionMap = device.createTexture({
+      format: 'rgba8unorm',
       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
+      sampler: {
+        minFilter: 'nearest',
+        magFilter: 'nearest',
+        addressModeU: 'clamp-to-edge',
+        addressModeV: 'clamp-to-edge'
       }
     });
 
-    const depthBuffer = new Renderbuffer(gl, {format: gl.DEPTH_COMPONENT16, width, height});
-    this.collisionFBOs[collisionGroup] = new Framebuffer(gl, {
-      id: `Collision-${collisionGroup}`,
+    const depthBuffer = new WEBGLRenderbuffer(
+      // @ts-expect-error TODO v9 needs to be WebGLDevice
+      device,
+      {format: 'depth16', width, height}
+    );
+    this.collisionFBOs[collisionGroup] = device.createFramebuffer({
+      id: `collision-${collisionGroup}`,
       width,
       height,
-      attachments: {
-        [gl.COLOR_ATTACHMENT0]: collisionMap,
-        [gl.DEPTH_ATTACHMENT]: depthBuffer
-      }
+      colorAttachments: [collisionMap],
+      // @ts-expect-error TODO v9 doesn't handle renderbuffers well
+      depthStencilAttachment: depthBuffer
     });
   }
 
   destroyFBO(collisionGroup: string) {
     const fbo = this.collisionFBOs[collisionGroup];
-    for (const attachment of Object.values(fbo.attachments as Texture2D[])) {
+    // @ts-expect-error
+    const attachments = fbo.attachments as Texture[];
+    for (const attachment of Object.values(attachments)) {
       attachment.delete();
     }
     fbo.delete();

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

@@ -1,16 +1,15 @@
-import {Framebuffer, withParameters} from '@luma.gl/core';
+import {Framebuffer} from '@luma.gl/core';
+import {withGLParameters} from '@luma.gl/webgl';
 import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
 
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
 
 export default class CollisionFilterPass extends LayersPass {
   renderCollisionMap(target: Framebuffer, options: CollisionFilterPassRenderOptions) {
-    const gl = this.gl;
-
     const padding = 1;
 
-    return withParameters(
-      gl,
+    return withGLParameters(
+      this.device,
       {
         scissorTest: true,
         scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],

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

@@ -1,4 +1,4 @@
-import {Framebuffer, Texture2D} from '@luma.gl/core';
+import {Framebuffer, Texture} from '@luma.gl/core';
 import {project} from '@deck.gl/core';
 import type {_ShaderModule as ShaderModule} from '@deck.gl/core';
 
@@ -85,11 +85,11 @@ const inject = {
 type CollisionModuleSettings = {
   collisionFBO?: Framebuffer;
   drawToCollisionMap?: boolean;
-  dummyCollisionMap?: Texture2D;
+  dummyCollisionMap?: Texture;
 };
 
 /* eslint-disable camelcase */
-type CollisionUniforms = {collision_sort?: boolean; collision_texture?: Framebuffer | Texture2D};
+type CollisionUniforms = {collision_sort?: boolean; collision_texture?: Framebuffer | Texture};
 
 const getCollisionUniforms = (
   opts: CollisionModuleSettings | {},
@@ -105,6 +105,7 @@ const getCollisionUniforms = (
   };
 };
 
+// @ts-expect-error
 export default {
   name: 'collision',
   dependencies: [project],

package/src/data-filter/aggregator.ts

@@ -1,5 +1,6 @@
-import {Model, Texture2D, Framebuffer, isWebGL2} from '@luma.gl/core';
-import GL from '@luma.gl/constants';
+import {Device, Framebuffer} from '@luma.gl/core';
+import {Model} from '@luma.gl/engine';
+import {GL} from '@luma.gl/constants';
 
 const AGGREGATE_VS = `\
 #define SHADER_NAME data-filter-vertex-shader
@@ -48,7 +49,10 @@ void main() {
 }
 `;
 
-export function supportsFloatTarget(gl: WebGLRenderingContext): boolean {
+export function supportsFloatTarget(device: Device): boolean {
+  // @ts-expect-error
+  const gl = device.gl;
+
   // 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') &&
@@ -60,39 +64,35 @@ export function supportsFloatTarget(gl: WebGLRenderingContext): boolean {
 }
 
 // A 1x1 framebuffer object that encodes the total count of filtered items
-export function getFramebuffer(gl: WebGLRenderingContext, useFloatTarget: boolean): Framebuffer {
+export function getFramebuffer(device: Device, useFloatTarget: boolean): Framebuffer {
   if (useFloatTarget) {
-    return new Framebuffer(gl, {
+    return device.createFramebuffer({
       width: 1,
       height: 1,
-      attachments: {
-        [GL.COLOR_ATTACHMENT0]: new Texture2D(gl, {
-          format: isWebGL2(gl) ? GL.RGBA32F : GL.RGBA,
+      colorAttachments: [
+        device.createTexture({
+          format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
           type: GL.FLOAT,
           mipmaps: false
         })
-      }
+      ]
     });
   }
-  return new Framebuffer(gl, {
+  return device.createFramebuffer({
     width: 256,
     height: 64,
-    depth: false
+    colorAttachments: [device.createTexture({format: 'rgba8unorm', type: GL.FLOAT, mipmaps: false})]
   });
 }
 
 // Increments the counter based on dataFilter_value
-export function getModel(
-  gl: WebGLRenderingContext,
-  shaderOptions: any,
-  useFloatTarget: boolean
-): Model {
+export function getModel(device: Device, shaderOptions: any, useFloatTarget: boolean): Model {
   shaderOptions.defines.NON_INSTANCED_MODEL = 1;
   if (useFloatTarget) {
     shaderOptions.defines.FLOAT_TARGET = 1;
   }
 
-  return new Model(gl, {
+  return new Model(device, {
     id: 'data-filter-aggregation-model',
     vertexCount: 1,
     isInstanced: false,
@@ -108,4 +108,4 @@ export const parameters = {
   blendFunc: [GL.ONE, GL.ONE, GL.ONE, GL.ONE],
   blendEquation: [GL.FUNC_ADD, GL.FUNC_ADD],
   depthTest: false
-};
+} as const;

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

@@ -18,13 +18,14 @@
 // 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 {shaderModule, shaderModule64} from './shader-module';
 import * as aggregator from './aggregator';
-import {readPixelsToArray, clear} from '@luma.gl/core';
-import GL from '@luma.gl/constants';
-
-import type {Layer, LayerContext, Accessor, UpdateParameters} from '@deck.gl/core';
 
 const defaultProps = {
   getFilterValue: {type: 'accessor', value: 0},
@@ -155,9 +156,9 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
       });
     }
 
-    const {gl} = this.context;
+    const {device} = this.context;
     if (attributeManager && extension.opts.countItems) {
-      const useFloatTarget = aggregator.supportsFloatTarget(gl);
+      const useFloatTarget = aggregator.supportsFloatTarget(device);
       // This attribute is needed for variable-width data, e.g. Path, SolidPolygon, Text
       // 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
@@ -182,9 +183,9 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
         }
       });
 
-      const filterFBO = aggregator.getFramebuffer(gl, useFloatTarget);
+      const filterFBO = aggregator.getFramebuffer(device, useFloatTarget);
       const filterModel = aggregator.getModel(
-        gl,
+        device,
         extension.getShaders.call(this, extension),
         useFloatTarget
       );
@@ -211,7 +212,10 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
   }
 
   draw(this: Layer<DataFilterExtensionProps>, params: any, extension: this) {
-    const {filterFBO, filterModel, filterNeedsUpdate} = this.state;
+    const filterFBO = this.state.filterFBO as Framebuffer;
+    const filterModel = this.state.filterModel as Model;
+    const filterNeedsUpdate = this.state.filterNeedsUpdate as boolean;
+
     const {onFilteredItemsChange} = this.props;
     if (filterNeedsUpdate && onFilteredItemsChange && filterModel) {
       const {
@@ -219,22 +223,26 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
       } = this.getAttributeManager()!;
       filterModel.setVertexCount(this.getNumInstances());
 
-      const {gl} = this.context;
-      clear(gl, {framebuffer: filterFBO, color: [0, 0, 0, 0]});
+      clear(this.context.device, {framebuffer: filterFBO, color: [0, 0, 0, 0]});
 
-      filterModel
-        .updateModuleSettings(params.moduleParameters)
-        .setAttributes({
-          ...filterValues.getShaderAttributes(),
-          ...(filterIndices && filterIndices.getShaderAttributes())
-        })
-        .draw({
+      filterModel.updateModuleSettings(params.moduleParameters);
+      // @ts-expect-error filterValue and filterIndices should always have buffer value
+      filterModel.setAttributes({
+        ...filterValues.getValue(),
+        ...filterIndices?.getValue()
+      });
+      withGLParameters(
+        filterModel.device,
+        {
           framebuffer: filterFBO,
-          parameters: {
-            ...aggregator.parameters,
-            viewport: [0, 0, filterFBO.width, filterFBO.height]
-          }
-        });
+          // 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 color = readPixelsToArray(filterFBO);
       let count = 0;
       for (let i = 0; i < color.length; i++) {
@@ -247,11 +255,11 @@ export default class DataFilterExtension extends LayerExtension<DataFilterExtens
   }
 
   finalizeState(this: Layer<DataFilterExtensionProps>) {
-    const {filterFBO, filterModel} = this.state;
-    if (filterFBO) {
-      filterFBO.color.delete();
-      filterFBO.delete();
-      filterModel.delete();
-    }
+    const filterFBO = this.state.filterFBO as Framebuffer;
+    const filterModel = this.state.filterModel as Model;
+
+    // filterFBO.color.delete();
+    filterFBO?.destroy();
+    filterModel?.destroy();
   }
 }

package/src/fill-style/fill-style-extension.ts

@@ -1,6 +1,4 @@
 import {LayerExtension} from '@deck.gl/core';
-import {Texture2D} from '@luma.gl/core';
-import GL from '@luma.gl/constants';
 
 import {patternShaders} from './shaders.glsl';
 
@@ -9,9 +7,10 @@ import type {
   LayerContext,
   Accessor,
   AccessorFunction,
-  Texture,
+  TextureSource,
   UpdateParameters
 } from '@deck.gl/core';
+import type {Texture} from '@luma.gl/core';
 
 const defaultProps = {
   fillPatternEnabled: true,
@@ -20,7 +19,7 @@ const defaultProps = {
     value: null,
     async: true,
     parameters: {
-      [GL.TEXTURE_MIN_FILTER]: GL.LINEAR
+      minFilter: 'linear'
     }
   },
   fillPatternMapping: {type: 'object', value: {}, async: true},
@@ -36,7 +35,7 @@ export type FillStyleExtensionProps<DataT = any> = {
    */
   fillPatternEnabled?: boolean;
   /** Sprite image url or texture that packs all your patterns into one layout. */
-  fillPatternAtlas?: string | Texture;
+  fillPatternAtlas?: string | TextureSource;
   /** Pattern names mapped to pattern definitions, or a url that points to a JSON file. */
   fillPatternMapping?:
     | string
@@ -151,7 +150,7 @@ export default class FillStyleExtension extends LayerExtension<FillStyleExtensio
       });
     }
     this.setState({
-      emptyTexture: new Texture2D(this.context.gl, {
+      emptyTexture: this.context.device.createTexture({
         data: new Uint8Array(4),
         width: 1,
         height: 1
@@ -185,7 +184,7 @@ export default class FillStyleExtension extends LayerExtension<FillStyleExtensio
   }
 
   finalizeState(this: Layer<FillStyleExtensionProps>) {
-    const {emptyTexture} = this.state;
+    const emptyTexture = this.state.emptyTexture as Texture;
     emptyTexture?.delete();
   }
 

package/src/fill-style/shaders.glsl.ts

@@ -1,7 +1,7 @@
 import {project, fp64LowPart} from '@deck.gl/core';
 import type {Viewport, _ShaderModule as ShaderModule, ProjectUniforms} from '@deck.gl/core';
 
-import type {Texture2D} from '@luma.gl/webgl';
+import type {Texture} from '@luma.gl/core';
 
 /*
  * fill pattern shader module
@@ -80,7 +80,7 @@ type FillStyleModuleSettings =
       fillPatternMask?: boolean;
     }
   | {
-      fillPatternTexture: Texture2D;
+      fillPatternTexture: Texture;
     };
 
 /* eslint-disable camelcase */

package/src/mask/mask-effect.ts

@@ -1,5 +1,6 @@
 import {Layer, Viewport, Effect, PreRenderOptions, CoordinateSystem, log} from '@deck.gl/core';
-import {Texture2D} from '@luma.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';
@@ -35,20 +36,20 @@ export default class MaskEffect implements Effect {
   useInPicking = true;
   order = 0;
 
-  private dummyMaskMap?: Texture2D;
+  private dummyMaskMap?: Texture;
   private channels: (Channel | null)[] = [];
   private masks: Record<string, Mask> | null = null;
   private maskPass?: MaskPass;
-  private maskMap?: Texture2D;
+  private maskMap?: Texture;
   private lastViewport?: Viewport;
 
   preRender(
-    gl: WebGLRenderingContext,
+    device: Device,
     {layers, layerFilter, viewports, onViewportActive, views, isPicking}: PreRenderOptions
   ): MaskPreRenderStats {
     let didRender = false;
     if (!this.dummyMaskMap) {
-      this.dummyMaskMap = new Texture2D(gl, {
+      this.dummyMaskMap = device.createTexture({
         width: 1,
         height: 1
       });
@@ -68,7 +69,7 @@ export default class MaskEffect implements Effect {
     this.masks = {};
 
     if (!this.maskPass) {
-      this.maskPass = new MaskPass(gl, {id: 'default-mask'});
+      this.maskPass = new MaskPass(device, {id: 'default-mask'});
       this.maskMap = this.maskPass.maskMap;
     }
 
@@ -159,8 +160,8 @@ export default class MaskEffect implements Effect {
           makeViewport({
             bounds: channelInfo.bounds!,
             viewport,
-            width: maskMap.width,
-            height: maskMap.height,
+            width: maskMap!.width,
+            height: maskMap!.height,
             border: 1
           });
 
@@ -247,11 +248,11 @@ export default class MaskEffect implements Effect {
   }
 
   getModuleParameters(): {
-    maskMap: Texture2D;
+    maskMap: Texture;
     maskChannels: Record<string, Mask> | null;
   } {
     return {
-      maskMap: this.masks ? this.maskMap : this.dummyMaskMap,
+      maskMap: this.masks ? this.maskMap! : this.dummyMaskMap!,
       maskChannels: this.masks
     };
   }