@deck.gl/extensions 9.0.0-beta.8 → 9.0.0

package/src/mask/mask-effect.ts

@@ -1,5 +1,13 @@
-import {Layer, Viewport, Effect, PreRenderOptions, CoordinateSystem, log} from '@deck.gl/core';
-import type {Device, Texture} from '@luma.gl/core';
+import {
+  Layer,
+  Viewport,
+  Effect,
+  EffectContext,
+  PreRenderOptions,
+  CoordinateSystem,
+  log
+} from '@deck.gl/core';
+import type {Texture} from '@luma.gl/core';
 import {equals} from '@math.gl/core';
 import MaskPass from './mask-pass';
 import {joinLayerBounds, getRenderBounds, makeViewport, Bounds} from '../utils/projection-utils';
@@ -7,7 +15,7 @@ import {joinLayerBounds, getRenderBounds, makeViewport, Bounds} from '../utils/p
 
 type Mask = {
   /** The channel index */
-  index: number;
+  index: 0 | 1 | 2 | 3;
   bounds: Bounds;
   coordinateOrigin: [number, number, number];
   coordinateSystem: CoordinateSystem;
@@ -15,7 +23,7 @@ type Mask = {
 
 type Channel = {
   id: string;
-  index: number;
+  index: 0 | 1 | 2 | 3;
   layers: Layer[];
   bounds: Bounds | null;
   maskBounds: Bounds;
@@ -42,17 +50,25 @@ export default class MaskEffect implements Effect {
   private maskMap?: Texture;
   private lastViewport?: Viewport;
 
-  preRender(
-    device: Device,
-    {layers, layerFilter, viewports, onViewportActive, views, isPicking}: PreRenderOptions
-  ): MaskPreRenderStats {
+  setup({device}: EffectContext) {
+    this.dummyMaskMap = device.createTexture({
+      width: 1,
+      height: 1
+    });
+
+    this.maskPass = new MaskPass(device, {id: 'default-mask'});
+    this.maskMap = this.maskPass.maskMap;
+  }
+
+  preRender({
+    layers,
+    layerFilter,
+    viewports,
+    onViewportActive,
+    views,
+    isPicking
+  }: PreRenderOptions): MaskPreRenderStats {
     let didRender = false;
-    if (!this.dummyMaskMap) {
-      this.dummyMaskMap = device.createTexture({
-        width: 1,
-        height: 1
-      });
-    }
 
     if (isPicking) {
       // Do not update on picking pass
@@ -67,11 +83,6 @@ export default class MaskEffect implements Effect {
     }
     this.masks = {};
 
-    if (!this.maskPass) {
-      this.maskPass = new MaskPass(device, {id: 'default-mask'});
-      this.maskMap = this.maskPass.maskMap;
-    }
-
     // Map layers to channels
     const channelMap = this._sortMaskChannels(maskLayers);
     // TODO - support multiple views

package/src/mask/mask-pass.ts

@@ -1,10 +1,18 @@
-import type {Device, Framebuffer, Texture} from '@luma.gl/core';
-import {GL} from '@luma.gl/constants';
-import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
+import type {Device, Framebuffer, RenderPipelineParameters, Texture} from '@luma.gl/core';
+import {Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport} from '@deck.gl/core';
 
 type MaskPassRenderOptions = LayersPassRenderOptions & {
   /** The channel to render into, 0:red, 1:green, 2:blue, 3:alpha */
-  channel: number;
+  channel: 0 | 1 | 2 | 3;
+};
+
+const MASK_BLENDING: RenderPipelineParameters = {
+  blendColorOperation: 'subtract',
+  blendColorSrcFactor: 'zero',
+  blendColorDstFactor: 'one',
+  blendAlphaOperation: 'subtract',
+  blendAlphaSrcFactor: 'zero',
+  blendAlphaDstFactor: 'one'
 };
 
 export default class MaskPass extends LayersPass {
@@ -37,20 +45,18 @@ export default class MaskPass extends LayersPass {
   }
 
   render(options: MaskPassRenderOptions) {
-    const colorMask = [false, false, false, false];
-    colorMask[options.channel] = true;
+    const colorMask = 2 ** options.channel;
     const clearColor = [255, 255, 255, 255];
+    super.render({...options, clearColor, colorMask, target: this.fbo, pass: 'mask'});
+  }
 
-    return this.device.withParametersWebGL(
-      {
-        blend: true,
-        blendFunc: [GL.ZERO, GL.ONE],
-        blendEquation: GL.FUNC_SUBTRACT,
-        colorMask,
-        depthTest: false
-      },
-      () => super.render({...options, clearColor, target: this.fbo, pass: 'mask'})
-    );
+  protected getLayerParameters(layer: Layer<{}>, layerIndex: number, viewport: Viewport) {
+    return {
+      ...layer.props.parameters,
+      blend: true,
+      depthTest: false,
+      ...MASK_BLENDING
+    };
   }
 
   shouldDrawLayer(layer) {

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

@@ -177,6 +177,7 @@ export default class PathStyleExtension extends LayerExtension<PathStyleExtensio
 
       prevP = p;
     }
+    result[geometrySize - 1] = 0;
     return result;
   }
 }

package/src/terrain/terrain-effect.ts

@@ -1,5 +1,5 @@
-import {Device, Texture} from '@luma.gl/core';
-import {log, getShaderAssembler} from '@deck.gl/core';
+import {Texture} from '@luma.gl/core';
+import {log} from '@deck.gl/core';
 
 import {terrainModule, TerrainModuleSettings} from './shader-module';
 import {TerrainCover} from './terrain-cover';
@@ -7,7 +7,7 @@ import {TerrainPass} from './terrain-pass';
 import {TerrainPickingPass, TerrainPickingPassRenderOptions} from './terrain-picking-pass';
 import {HeightMapBuilder} from './height-map-builder';
 
-import type {Effect, PreRenderOptions, Layer, Viewport} from '@deck.gl/core';
+import type {Effect, EffectContext, PreRenderOptions, Layer, Viewport} from '@deck.gl/core';
 
 /** Class to manage terrain effect */
 export class TerrainEffect implements Effect {
@@ -28,7 +28,7 @@ export class TerrainEffect implements Effect {
   /** One texture for each primitive terrain layer, into which the draped layers render */
   private terrainCovers: Map<string, TerrainCover> = new Map();
 
-  initialize(device: Device) {
+  setup({device, deck}: EffectContext) {
     this.dummyHeightMap = device.createTexture({
       width: 1,
       height: 1,
@@ -43,21 +43,10 @@ export class TerrainEffect implements Effect {
       log.warn('Terrain offset mode is not supported by this browser')();
     }
 
-    getShaderAssembler().addDefaultModule(terrainModule);
+    deck._addDefaultShaderModule(terrainModule);
   }
 
-  preRender(device: Device, opts: PreRenderOptions): void {
-    if (!this.dummyHeightMap) {
-      // First time this effect is in use, initialize resources and register the shader module
-      this.initialize(device);
-      for (const layer of opts.layers) {
-        // Force the terrain layer (and its descendents) to rebuild their models with the new shader
-        if (layer.props.operation.includes('terrain')) {
-          layer.setChangeFlags({extensionsChanged: true});
-        }
-      }
-    }
-
+  preRender(opts: PreRenderOptions): void {
     // @ts-expect-error pickZ only defined in picking pass
     if (opts.pickZ) {
       // Do not update if picking attributes
@@ -106,7 +95,7 @@ export class TerrainEffect implements Effect {
     };
   }
 
-  cleanup(): void {
+  cleanup({deck}: EffectContext): void {
     if (this.dummyHeightMap) {
       this.dummyHeightMap.delete();
       this.dummyHeightMap = undefined;
@@ -121,6 +110,8 @@ export class TerrainEffect implements Effect {
       terrainCover.delete();
     }
     this.terrainCovers.clear();
+
+    deck._removeDefaultShaderModule(terrainModule);
   }
 
   private _updateHeightMap(terrainLayers: Layer[], viewport: Viewport, opts: PreRenderOptions) {

package/src/terrain/terrain-pass.ts

@@ -1,10 +1,19 @@
-import {GL} from '@luma.gl/constants';
+import {RenderPipelineParameters} from '@luma.gl/core';
 import {Layer, Viewport, _LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
 import type {HeightMapBuilder} from './height-map-builder';
 import type {TerrainCover} from './terrain-cover';
 
 export type TerrainPassRenderOptions = LayersPassRenderOptions;
 
+const TERRAIN_BLENDING: RenderPipelineParameters = {
+  blendColorOperation: 'max',
+  blendColorSrcFactor: 'one',
+  blendColorDstFactor: 'one',
+  blendAlphaOperation: 'max',
+  blendAlphaSrcFactor: 'one',
+  blendAlphaDstFactor: 'one'
+};
+
 /** Renders textures used by the TerrainEffect render pass */
 export class TerrainPass extends LayersPass {
   getRenderableLayers(viewport: Viewport, opts: TerrainPassRenderOptions): Layer[] {
@@ -32,24 +41,15 @@ export class TerrainPass extends LayersPass {
 
     target.resize(viewport);
 
-    this.device.withParametersWebGL(
-      {
-        clearColor: [0, 0, 0, 0],
-        blend: true,
-        blendFunc: [GL.ONE, GL.ONE],
-        blendEquation: GL.MAX,
-        depthTest: false
-      },
-      () =>
-        this.render({
-          ...opts,
-          target,
-          pass: 'terrain-height-map',
-          layers: opts.layers!,
-          viewports: [viewport],
-          effects: []
-        })
-    );
+    this.render({
+      ...opts,
+      target,
+      pass: 'terrain-height-map',
+      layers: opts.layers!,
+      viewports: [viewport],
+      effects: [],
+      clearColor: [0, 0, 0, 0]
+    });
   }
 
   renderTerrainCover(terrainCover: TerrainCover, opts: Partial<TerrainPassRenderOptions>) {
@@ -64,20 +64,23 @@ export class TerrainPass extends LayersPass {
     const layers = terrainCover.filterLayers(opts.layers!);
     target.resize(viewport);
 
-    this.device.withParametersWebGL(
-      {
-        clearColor: [0, 0, 0, 0],
-        depthTest: false
-      },
-      () =>
-        this.render({
-          ...opts,
-          target,
-          pass: `terrain-cover-${terrainCover.id}`,
-          layers,
-          effects: [],
-          viewports: [viewport]
-        })
-    );
+    this.render({
+      ...opts,
+      target,
+      pass: `terrain-cover-${terrainCover.id}`,
+      layers,
+      effects: [],
+      viewports: [viewport],
+      clearColor: [0, 0, 0, 0]
+    });
+  }
+
+  protected getLayerParameters(layer: Layer<{}>, layerIndex: number, viewport: Viewport) {
+    return {
+      ...layer.props.parameters,
+      blend: true,
+      depthTest: false,
+      ...(layer.props.operation.includes('terrain') && TERRAIN_BLENDING)
+    };
   }
 }

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

@@ -53,33 +53,29 @@ export class TerrainPickingPass extends PickLayersPass {
     }
     target.resize(viewport);
 
-    this.device.withParametersWebGL(
-      {
-        depthTest: false
-      },
-      () =>
-        this.render({
-          ...opts,
-          pickingFBO: target,
-          pass: `terrain-cover-picking-${terrainCover.id}`,
-          layers,
-          effects: [],
-          viewports: [viewport],
-          // Disable the default culling because TileLayer would cull sublayers based on the screen viewport,
-          // not the viewport of the terrain cover. Culling is already done by `terrainCover.filterLayers`
-          cullRect: undefined,
-          deviceRect: viewport,
-          pickZ: false
-        })
-    );
+    this.render({
+      ...opts,
+      pickingFBO: target,
+      pass: `terrain-cover-picking-${terrainCover.id}`,
+      layers,
+      effects: [],
+      viewports: [viewport],
+      // Disable the default culling because TileLayer would cull sublayers based on the screen viewport,
+      // not the viewport of the terrain cover. Culling is already done by `terrainCover.filterLayers`
+      cullRect: undefined,
+      deviceRect: viewport,
+      pickZ: false
+    });
   }
 
   protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
+    let parameters: any;
     if (this.drawParameters[layer.id]) {
-      return this.drawParameters[layer.id];
+      parameters = this.drawParameters[layer.id];
+    } else {
+      parameters = super.getLayerParameters(layer, layerIndex, viewport);
+      parameters.blend = true;
     }
-    const parameters = super.getLayerParameters(layer, layerIndex, viewport);
-    parameters.blend = true;
-    return parameters;
+    return {...parameters, depthTest: false};
   }
 }

package/src/terrain/utils.ts

@@ -12,6 +12,7 @@ export function createRenderTarget(
     id: opts.id,
     colorAttachments: [
       device.createTexture({
+        id: opts.id,
         ...(opts.float && {
           format: 'rgba32float',
           type: GL.FLOAT