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

package/src/common/projection-utils.ts

@@ -0,0 +1,187 @@
+import {WebMercatorViewport, OrthographicViewport} from '@deck.gl/core';
+import type {Layer, Viewport} from '@deck.gl/core';
+
+/** Bounds in CARTESIAN coordinates */
+export type Bounds = [minX: number, minY: number, maxX: number, maxY: number];
+
+/*
+ * Compute the union of bounds from multiple layers
+ * Returns bounds in CARTESIAN coordinates
+ */
+export function joinLayerBounds(
+  /** The layers to combine */
+  layers: Layer[],
+  /** A Viewport instance that is used to determine the type of the view */
+  viewport: Viewport
+): Bounds | null {
+  // Join the bounds of layer data
+  const bounds: Bounds = [Infinity, Infinity, -Infinity, -Infinity];
+  for (const layer of layers) {
+    const layerBounds = layer.getBounds();
+    if (layerBounds) {
+      const bottomLeftCommon = layer.projectPosition(layerBounds[0], {viewport, autoOffset: false});
+      const topRightCommon = layer.projectPosition(layerBounds[1], {viewport, autoOffset: false});
+
+      bounds[0] = Math.min(bounds[0], bottomLeftCommon[0]);
+      bounds[1] = Math.min(bounds[1], bottomLeftCommon[1]);
+      bounds[2] = Math.max(bounds[2], topRightCommon[0]);
+      bounds[3] = Math.max(bounds[3], topRightCommon[1]);
+    }
+  }
+
+  if (Number.isFinite(bounds[0])) {
+    return bounds;
+  }
+  return null;
+}
+
+const MAX_VIEWPORT_SIZE = 2048;
+
+/** Construct a viewport that just covers the target bounds. Used for rendering to common space indexed texture. */
+export function makeViewport(opts: {
+  /** The cartesian bounds of layers that will render into this texture */
+  bounds: Bounds;
+  /** Target width. If not specified, will be deduced from zoom */
+  width?: number;
+  /** Target height. If not specified, will be deduced from zoom */
+  height?: number;
+  /** Target zoom. If not specified, will be deduced from width and height */
+  zoom?: number;
+  /** Border around the viewport in pixels */
+  border?: number;
+  /** A viewport used to determine the output type */
+  viewport: Viewport;
+}): Viewport | null {
+  const {bounds, viewport, border = 0} = opts;
+  const {isGeospatial} = viewport;
+
+  if (bounds[2] <= bounds[0] || bounds[3] <= bounds[1]) {
+    return null;
+  }
+
+  const centerWorld = viewport.unprojectPosition([
+    (bounds[0] + bounds[2]) / 2,
+    (bounds[1] + bounds[3]) / 2,
+    0
+  ]);
+
+  const maxSize = MAX_VIEWPORT_SIZE - border * 2;
+  let {width, height, zoom} = opts;
+  if (zoom === undefined) {
+    // Use width and height to determine zoom
+    const scale = Math.min(width! / (bounds[2] - bounds[0]), height! / (bounds[3] - bounds[1]));
+    zoom = Math.min(Math.log2(scale), 20);
+  } else if (!width || !height) {
+    // Use zoom to determine width and height
+    const scale = 2 ** zoom;
+    width = Math.round(Math.abs(bounds[2] - bounds[0]) * scale);
+    height = Math.round(Math.abs(bounds[3] - bounds[1]) * scale);
+    if (width > maxSize || height > maxSize) {
+      const r = maxSize / Math.max(width, height);
+      width = Math.round(width * r);
+      height = Math.round(height * r);
+      zoom += Math.log2(r);
+    }
+  }
+
+  // TODO - find a more generic way to construct this viewport
+  // Geospatial viewports may not be web-mercator
+  return isGeospatial
+    ? new WebMercatorViewport({
+        x: border,
+        y: border,
+        width,
+        height,
+        longitude: centerWorld[0],
+        latitude: centerWorld[1],
+        zoom,
+        orthographic: true
+      })
+    : new OrthographicViewport({
+        x: border,
+        y: border,
+        width,
+        height,
+        target: centerWorld,
+        zoom,
+        flipY: false
+      });
+}
+
+/** Returns viewport bounds in CARTESIAN coordinates */
+export function getViewportBounds(viewport: Viewport, zRange?: [number, number]): Bounds {
+  // Viewport bounds in world coordinates
+  let viewportBoundsWorld: Bounds;
+  if (zRange && zRange.length === 2) {
+    const [minZ, maxZ] = zRange;
+    const bounds0 = viewport.getBounds({z: minZ});
+    const bounds1 = viewport.getBounds({z: maxZ});
+    viewportBoundsWorld = [
+      Math.min(bounds0[0], bounds1[0]),
+      Math.min(bounds0[1], bounds1[1]),
+      Math.max(bounds0[2], bounds1[2]),
+      Math.max(bounds0[3], bounds1[3])
+    ];
+  } else {
+    viewportBoundsWorld = viewport.getBounds();
+  }
+
+  // Viewport bounds in cartesian coordinates
+  const viewportBottomLeftCommon = viewport.projectPosition(viewportBoundsWorld.slice(0, 2));
+  const viewportTopRightCommon = viewport.projectPosition(viewportBoundsWorld.slice(2, 4));
+  return [
+    viewportBottomLeftCommon[0],
+    viewportBottomLeftCommon[1],
+    viewportTopRightCommon[0],
+    viewportTopRightCommon[1]
+  ];
+}
+
+/*
+ * Determine the common space bounds that best cover the given data for the given viewport
+ * Returns bounds in CARTESIAN coordinates
+ */
+export function getRenderBounds(
+  layerBounds: Bounds,
+  viewport: Viewport,
+  zRange?: [number, number]
+): Bounds {
+  if (!layerBounds) {
+    return [0, 0, 1, 1];
+  }
+
+  const viewportBounds = getViewportBounds(viewport, zRange);
+  // Expand viewport bounds by 2X. Heurestically chosen to avoid masking
+  // errors when mask is partially out of view
+  const paddedBounds = doubleBounds(viewportBounds);
+
+  // When bounds of the layers are smaller than the viewport bounds simply use
+  // mask bounds, so as to maximize resolution & avoid rerenders
+  if (
+    layerBounds[2] - layerBounds[0] <= paddedBounds[2] - paddedBounds[0] &&
+    layerBounds[3] - layerBounds[1] <= paddedBounds[3] - paddedBounds[1]
+  ) {
+    return layerBounds;
+  }
+
+  // As viewport shrinks, to avoid pixelation along mask edges
+  // we need to reduce the bounds and only render the visible portion
+  // of the mask.
+  // We pad the viewport bounds to capture the section
+  // of the mask just outside the viewport to correctly maskByInstance.
+  // Intersect mask & padded viewport bounds
+  return [
+    Math.max(layerBounds[0], paddedBounds[0]),
+    Math.max(layerBounds[1], paddedBounds[1]),
+    Math.min(layerBounds[2], paddedBounds[2]),
+    Math.min(layerBounds[3], paddedBounds[3])
+  ];
+}
+
+function doubleBounds(bounds: Bounds): Bounds {
+  const dx = bounds[2] - bounds[0];
+  const dy = bounds[3] - bounds[1];
+  const centerX = (bounds[0] + bounds[2]) / 2;
+  const centerY = (bounds[1] + bounds[3]) / 2;
+  return [centerX - dx, centerY - dy, centerX + dx, centerY + dy];
+}

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

@@ -1,4 +1,4 @@
-import {_ShaderModule as ShaderModule} from '@deck.gl/core/typed';
+import {_ShaderModule as ShaderModule} from '@deck.gl/core';
 
 import type {DataFilterExtensionProps} from './data-filter';
 
@@ -146,6 +146,12 @@ const inject = {
     #endif
   `,
 
+  'vs:#main-end': `
+    if (dataFilter_value == 0.0) {
+      gl_Position = vec4(0.);
+    }
+  `,
+
   'vs:DECKGL_FILTER_SIZE': `
     if (filter_transformSize) {
       size = size * dataFilter_value;

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

@@ -15,8 +15,15 @@ import type {
 
 const defaultProps = {
   fillPatternEnabled: true,
-  fillPatternAtlas: null,
-  fillPatternMapping: null,
+  fillPatternAtlas: {
+    type: 'image',
+    value: null,
+    async: true,
+    parameters: {
+      [GL.TEXTURE_MIN_FILTER]: GL.LINEAR
+    }
+  },
+  fillPatternMapping: {type: 'object', value: {}, async: true},
   fillPatternMask: true,
   getFillPattern: {type: 'accessor', value: d => d.pattern},
   getFillPatternScale: {type: 'accessor', value: 1},
@@ -29,7 +36,7 @@ export type FillStyleExtensionProps<DataT = any> = {
    */
   fillPatternEnabled?: boolean;
   /** Sprite image url or texture that packs all your patterns into one layout. */
-  fillPatternAtlas?: Texture;
+  fillPatternAtlas?: string | Texture;
   /** Pattern names mapped to pattern definitions, or a url that points to a JSON file. */
   fillPatternMapping?:
     | string
@@ -71,15 +78,6 @@ type FillStyleExtensionOptions = {
   pattern: boolean;
 };
 
-const DEFAULT_TEXTURE_PARAMETERS = {
-  [GL.TEXTURE_MIN_FILTER]: GL.LINEAR,
-  // GL.LINEAR is the default value but explicitly set it here
-  [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
-  // for texture boundary artifact
-  [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
-  [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
-};
-
 /** Adds selected features to layers that render a "fill", such as the `PolygonLayer` and `ScatterplotLayer`. */
 export default class FillStyleExtension extends LayerExtension<FillStyleExtensionOptions> {
   static defaultProps = defaultProps;
@@ -170,11 +168,8 @@ export default class FillStyleExtension extends LayerExtension<FillStyleExtensio
       return;
     }
 
-    if (props.fillPatternAtlas && props.fillPatternAtlas !== oldProps.fillPatternAtlas) {
-      extension.loadPatternAtlas.call(this);
-    }
     if (props.fillPatternMapping && props.fillPatternMapping !== oldProps.fillPatternMapping) {
-      extension.loadPatternMapping.call(this);
+      this.getAttributeManager()!.invalidate('getFillPattern');
     }
   }
 
@@ -183,9 +178,9 @@ export default class FillStyleExtension extends LayerExtension<FillStyleExtensio
       return;
     }
 
-    const {patternTexture} = this.state;
+    const {fillPatternAtlas} = this.props;
     this.setModuleParameters({
-      fillPatternTexture: patternTexture || this.state.emptyTexture
+      fillPatternTexture: fillPatternAtlas || this.state.emptyTexture
     });
   }
 
@@ -195,42 +190,9 @@ export default class FillStyleExtension extends LayerExtension<FillStyleExtensio
     emptyTexture?.delete();
   }
 
-  async loadPatternAtlas(this: Layer<FillStyleExtensionProps>) {
-    const {fillPatternAtlas, fetch} = this.props;
-    this.state.patternTexture?.delete();
-    this.setState({patternTexture: null});
-    let image = fillPatternAtlas;
-    if (typeof image === 'string') {
-      image = await fetch(image, {propName: 'fillPatternAtlas', layer: this});
-    }
-    const patternTexture =
-      image instanceof Texture2D
-        ? image
-        : new Texture2D(this.context.gl, {
-            data: image,
-            parameters: DEFAULT_TEXTURE_PARAMETERS
-          });
-    this.setState({patternTexture});
-  }
-
-  async loadPatternMapping(this: Layer<FillStyleExtensionProps>) {
-    const {fillPatternMapping, fetch} = this.props;
-    this.setState({patternMapping: null});
-    let patternMapping = fillPatternMapping;
-    if (typeof patternMapping === 'string') {
-      patternMapping = await fetch(patternMapping, {
-        propName: 'fillPatternMapping',
-        layer: this
-      });
-    }
-    this.setState({patternMapping});
-    this.getAttributeManager()!.invalidate('getFillPattern');
-    this.setNeedsUpdate();
-  }
-
   getPatternFrame(this: Layer<FillStyleExtensionProps>, name: string) {
-    const {patternMapping} = this.state;
-    const def = patternMapping && patternMapping[name];
+    const {fillPatternMapping} = this.getCurrentLayer()!.props;
+    const def = fillPatternMapping && fillPatternMapping[name];
     return def ? [def.x, def.y, def.width, def.height] : [0, 0, 0, 0];
   }
 }

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

@@ -26,7 +26,7 @@ uniform vec2 fill_patternTextureSize;
 
 varying vec2 fill_uv;
 varying vec4 fill_patternBounds;
-varying vec3 fill_patternPlacement;
+varying vec4 fill_patternPlacement;
 `;
 
 const patternFs = `
@@ -37,7 +37,7 @@ uniform vec2 fill_uvCoordinateOrigin;
 uniform vec2 fill_uvCoordinateOrigin64Low;
 
 varying vec4 fill_patternBounds;
-varying vec3 fill_patternPlacement;
+varying vec4 fill_patternPlacement;
 varying vec2 fill_uv;
 
 const float FILL_UV_SCALE = 512.0 / 40000000.0;
@@ -52,13 +52,13 @@ const inject = {
     if (fill_patternEnabled) {
       fill_patternBounds = FILL_PATTERN_FRAME_ATTRIB / vec4(fill_patternTextureSize, fill_patternTextureSize);
       fill_patternPlacement.xy = FILL_PATTERN_OFFSET_ATTRIB;
-      fill_patternPlacement.z = FILL_PATTERN_SCALE_ATTRIB * FILL_PATTERN_FRAME_ATTRIB.w;
+      fill_patternPlacement.zw = FILL_PATTERN_SCALE_ATTRIB * FILL_PATTERN_FRAME_ATTRIB.zw;
     }
   `,
 
   'fs:DECKGL_FILTER_COLOR': `
     if (fill_patternEnabled) {
-      float scale = FILL_UV_SCALE * fill_patternPlacement.z;
+      vec2 scale = FILL_UV_SCALE * fill_patternPlacement.zw;
       vec2 patternUV = mod(mod(fill_uvCoordinateOrigin, scale) + fill_uvCoordinateOrigin64Low + fill_uv, scale) / scale;
       patternUV = mod(fill_patternPlacement.xy + patternUV, 1.0);
 
@@ -99,10 +99,9 @@ function getPatternUniforms(
     };
   }
   if ('viewport' in opts) {
-    const {viewport, fillPatternMask = true, fillPatternEnabled = true} = opts;
-    const {project_uCoordinateOrigin} = uniforms as ProjectUniforms;
+    const {fillPatternMask = true, fillPatternEnabled = true} = opts;
+    const {project_uCommonOrigin: coordinateOriginCommon} = uniforms as ProjectUniforms;
 
-    const coordinateOriginCommon = viewport.projectPosition(project_uCoordinateOrigin);
     const coordinateOriginCommon64Low = [
       fp64LowPart(coordinateOriginCommon[0]),
       fp64LowPart(coordinateOriginCommon[1])

package/src/index.ts

@@ -4,7 +4,9 @@ export {default as Fp64Extension} from './fp64/fp64';
 export {default as PathStyleExtension} from './path-style/path-style';
 export {default as FillStyleExtension} from './fill-style/fill-style';
 export {default as ClipExtension} from './clip/clip';
+export {default as CollideExtension} from './collide/collide';
 export {default as MaskExtension} from './mask/mask';
+export {default as TerrainExtension} from './terrain/terrain';
 
 // Shader module
 export {default as project64} from './fp64/project64';
@@ -15,4 +17,6 @@ export type {DataFilterExtensionProps} from './data-filter/data-filter';
 export type {PathStyleExtensionProps} from './path-style/path-style';
 export type {FillStyleExtensionProps} from './fill-style/fill-style';
 export type {ClipExtensionProps} from './clip/clip';
+export type {CollideExtensionProps} from './collide/collide';
 export type {MaskExtensionProps} from './mask/mask';
+export type {TerrainExtensionProps} from './terrain/terrain';

package/src/mask/mask-effect.ts

@@ -0,0 +1,255 @@
+import {Layer, Viewport, Effect, PreRenderOptions, CoordinateSystem, log} from '@deck.gl/core';
+import {Texture2D} from '@luma.gl/core';
+import {equals} from '@math.gl/core';
+import MaskPass from './mask-pass';
+import {getMaskBounds, getMaskViewport, MaskBounds} from './utils';
+// import {debugFBO} from '../utils/debug';
+
+type Mask = {
+  /** The channel index */
+  index: number;
+  bounds: MaskBounds;
+  coordinateOrigin: [number, number, number];
+  coordinateSystem: CoordinateSystem;
+};
+
+type Channel = {
+  id: string;
+  index: number;
+  layers: Layer[];
+  bounds: MaskBounds;
+  maskBounds: MaskBounds;
+  layerBounds: MaskBounds[];
+  coordinateOrigin: [number, number, number];
+  coordinateSystem: CoordinateSystem;
+};
+
+export type MaskPreRenderStats = {
+  didRender: boolean;
+};
+
+// Class to manage mask effect
+export default class MaskEffect implements Effect {
+  id = 'mask-effect';
+  props = null;
+  useInPicking = true;
+  order = 0;
+
+  private dummyMaskMap?: Texture2D;
+  private channels: (Channel | null)[] = [];
+  private masks: Record<string, Mask> | null = null;
+  private maskPass?: MaskPass;
+  private maskMap?: Texture2D;
+  private lastViewport?: Viewport;
+
+  preRender(
+    gl: WebGLRenderingContext,
+    {layers, layerFilter, viewports, onViewportActive, views, isPicking}: PreRenderOptions
+  ): MaskPreRenderStats {
+    let didRender = false;
+    if (!this.dummyMaskMap) {
+      this.dummyMaskMap = new Texture2D(gl, {
+        width: 1,
+        height: 1
+      });
+    }
+
+    if (isPicking) {
+      // Do not update on picking pass
+      return {didRender};
+    }
+
+    const maskLayers = layers.filter(l => l.props.visible && l.props.operation.includes('mask'));
+    if (maskLayers.length === 0) {
+      this.masks = null;
+      this.channels.length = 0;
+      return {didRender};
+    }
+    this.masks = {};
+
+    if (!this.maskPass) {
+      this.maskPass = new MaskPass(gl, {id: 'default-mask'});
+      this.maskMap = this.maskPass.maskMap;
+    }
+
+    // Map layers to channels
+    const channelMap = this._sortMaskChannels(maskLayers);
+    // TODO - support multiple views
+    const viewport = viewports[0];
+    const viewportChanged = !this.lastViewport || !this.lastViewport.equals(viewport);
+
+    for (const maskId in channelMap) {
+      const result = this._renderChannel(channelMap[maskId], {
+        layerFilter,
+        onViewportActive,
+        views,
+        viewport,
+        viewportChanged
+      });
+      didRender ||= result;
+    }
+
+    // debugFBO(this.maskMap, {opaque: true});
+    return {didRender};
+  }
+
+  private _renderChannel(
+    channelInfo: Channel,
+    {
+      layerFilter,
+      onViewportActive,
+      views,
+      viewport,
+      viewportChanged
+    }: {
+      layerFilter: PreRenderOptions['layerFilter'];
+      onViewportActive: PreRenderOptions['onViewportActive'];
+      views: PreRenderOptions['views'];
+      viewport: Viewport;
+      viewportChanged: boolean;
+    }
+  ): boolean {
+    let didRender = false;
+    const oldChannelInfo = this.channels[channelInfo.index];
+    if (!oldChannelInfo) {
+      return didRender;
+    }
+
+    const maskChanged =
+      // If a channel is new
+      channelInfo === oldChannelInfo ||
+      // If sublayers have changed
+      oldChannelInfo.layers.length !== channelInfo.layers.length ||
+      // If a sublayer's positions have been updated, the cached bounds will change shallowly
+      channelInfo.layerBounds.some((b, i) => b !== oldChannelInfo.layerBounds[i]);
+
+    channelInfo.bounds = oldChannelInfo.bounds;
+    channelInfo.maskBounds = oldChannelInfo.maskBounds;
+    this.channels[channelInfo.index] = channelInfo;
+
+    if (maskChanged || viewportChanged) {
+      // Recalculate mask bounds
+      this.lastViewport = viewport;
+
+      channelInfo.bounds = getMaskBounds({layers: channelInfo.layers, viewport});
+
+      if (maskChanged || !equals(channelInfo.bounds, oldChannelInfo.bounds)) {
+        // Rerender mask FBO
+        const {maskPass, maskMap} = this;
+
+        const maskViewport = getMaskViewport({
+          bounds: channelInfo.bounds,
+          viewport,
+          width: maskMap.width,
+          height: maskMap.height
+        });
+
+        channelInfo.maskBounds = maskViewport ? maskViewport.getBounds() : [0, 0, 1, 1];
+
+        // @ts-ignore (2532) This method is only called from preRender where maskPass is defined
+        maskPass.render({
+          pass: 'mask',
+          channel: channelInfo.index,
+          layers: channelInfo.layers,
+          layerFilter,
+          viewports: maskViewport ? [maskViewport] : [],
+          onViewportActive,
+          views,
+          moduleParameters: {
+            devicePixelRatio: 1
+          }
+        });
+
+        didRender = true;
+      }
+    }
+
+    // @ts-ignore (2532) This method is only called from preRender where masks is defined
+    this.masks[channelInfo.id] = {
+      index: channelInfo.index,
+      bounds: channelInfo.maskBounds,
+      coordinateOrigin: channelInfo.coordinateOrigin,
+      coordinateSystem: channelInfo.coordinateSystem
+    };
+
+    return didRender;
+  }
+
+  /**
+   * Find a channel to render each mask into
+   * If a maskId already exists, diff and update the existing channel
+   * Otherwise replace a removed mask
+   * Otherwise create a new channel
+   * Returns a map from mask layer id to channel info
+   */
+  private _sortMaskChannels(maskLayers: Layer[]): Record<string, Channel> {
+    const channelMap = {};
+    let channelCount = 0;
+    for (const layer of maskLayers) {
+      const {id} = layer.root;
+      let channelInfo = channelMap[id];
+      if (!channelInfo) {
+        if (++channelCount > 4) {
+          log.warn('Too many mask layers. The max supported is 4')();
+          continue; // eslint-disable-line no-continue
+        }
+        channelInfo = {
+          id,
+          index: this.channels.findIndex(c => c?.id === id),
+          layers: [],
+          layerBounds: [],
+          coordinateOrigin: layer.root.props.coordinateOrigin,
+          coordinateSystem: layer.root.props.coordinateSystem
+        };
+        channelMap[id] = channelInfo;
+      }
+      channelInfo.layers.push(layer);
+      channelInfo.layerBounds.push(layer.getBounds());
+    }
+
+    for (let i = 0; i < 4; i++) {
+      const channelInfo = this.channels[i];
+      if (!channelInfo || !(channelInfo.id in channelMap)) {
+        // The mask id at this channel no longer exists
+        this.channels[i] = null;
+      }
+    }
+
+    for (const maskId in channelMap) {
+      const channelInfo = channelMap[maskId];
+
+      if (channelInfo.index < 0) {
+        channelInfo.index = this.channels.findIndex(c => !c);
+        this.channels[channelInfo.index] = channelInfo;
+      }
+    }
+    return channelMap;
+  }
+
+  getModuleParameters(): {
+    maskMap: Texture2D;
+    maskChannels: Record<string, Mask> | null;
+  } {
+    return {
+      maskMap: this.masks ? this.maskMap : this.dummyMaskMap,
+      maskChannels: this.masks
+    };
+  }
+
+  cleanup(): void {
+    if (this.dummyMaskMap) {
+      this.dummyMaskMap.delete();
+      this.dummyMaskMap = undefined;
+    }
+
+    if (this.maskPass) {
+      this.maskPass.delete();
+      this.maskPass = undefined;
+      this.maskMap = undefined;
+    }
+
+    this.lastViewport = undefined;
+    this.masks = null;
+    this.channels.length = 0;
+  }
+}

package/src/mask/mask-pass.ts

@@ -0,0 +1,67 @@
+import {Framebuffer, Texture2D, withParameters} from '@luma.gl/core';
+import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
+
+type MaskPassRenderOptions = LayersPassRenderOptions & {
+  /** The channel to render into, 0:red, 1:green, 2:blue, 3:alpha */
+  channel: number;
+};
+
+export default class MaskPass extends LayersPass {
+  maskMap: Texture2D;
+  fbo: Framebuffer;
+
+  constructor(gl, props: {id: string; mapSize?: number}) {
+    super(gl, props);
+
+    const {mapSize = 2048} = props;
+
+    this.maskMap = new Texture2D(gl, {
+      width: mapSize,
+      height: mapSize,
+      parameters: {
+        [gl.TEXTURE_MIN_FILTER]: gl.LINEAR,
+        [gl.TEXTURE_MAG_FILTER]: gl.LINEAR,
+        [gl.TEXTURE_WRAP_S]: gl.CLAMP_TO_EDGE,
+        [gl.TEXTURE_WRAP_T]: gl.CLAMP_TO_EDGE
+      }
+    });
+
+    this.fbo = new Framebuffer(gl, {
+      id: 'maskmap',
+      width: mapSize,
+      height: mapSize,
+      attachments: {
+        [gl.COLOR_ATTACHMENT0]: this.maskMap
+      }
+    });
+  }
+
+  render(options: MaskPassRenderOptions) {
+    const gl = this.gl;
+
+    const colorMask = [false, false, false, false];
+    colorMask[options.channel] = true;
+
+    return withParameters(
+      gl,
+      {
+        clearColor: [255, 255, 255, 255],
+        blend: true,
+        blendFunc: [gl.ZERO, gl.ONE],
+        blendEquation: gl.FUNC_SUBTRACT,
+        colorMask,
+        depthTest: false
+      },
+      () => super.render({...options, target: this.fbo, pass: 'mask'})
+    );
+  }
+
+  shouldDrawLayer(layer) {
+    return layer.props.operation.includes('mask');
+  }
+
+  delete() {
+    this.fbo.delete();
+    this.maskMap.delete();
+  }
+}