@deck.gl/extensions 9.0.0-beta.1 → 9.0.0-beta.11

package/src/mask/mask-effect.ts

@@ -1,6 +1,13 @@
-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 {
+  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';
@@ -8,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;
@@ -16,7 +23,7 @@ type Mask = {
 
 type Channel = {
   id: string;
-  index: number;
+  index: 0 | 1 | 2 | 3;
   layers: Layer[];
   bounds: Bounds | null;
   maskBounds: Bounds;
@@ -43,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
@@ -68,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,11 +1,18 @@
-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';
+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 {
@@ -38,21 +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 withGLParameters(
-      this.device,
-      {
-        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/mask/shader-module.ts

@@ -1,8 +1,9 @@
 import type {ShaderModule} from '@luma.gl/shadertools';
 import {project} from '@deck.gl/core';
 import type {Texture} from '@luma.gl/core';
+import {glsl} from '../utils/syntax-tags';
 
-const vs = `
+const vs = glsl`
 uniform vec4 mask_bounds;
 uniform bool mask_maskByInstance;
 vec2 mask_getCoords(vec4 position) {
@@ -10,7 +11,7 @@ vec2 mask_getCoords(vec4 position) {
 }
 `;
 
-const fs = `
+const fs = glsl`
 uniform sampler2D mask_texture;
 uniform int mask_channel;
 uniform bool mask_enabled;
@@ -40,10 +41,10 @@ bool mask_isInBounds(vec2 texCoords) {
 `;
 
 const inject = {
-  'vs:#decl': `
+  'vs:#decl': glsl`
 out vec2 mask_texCoords;
 `,
-  'vs:#main-end': `
+  'vs:#main-end': glsl`
    vec4 mask_common_position;
    if (mask_maskByInstance) {
      mask_common_position = project_position(vec4(geometry.worldPosition, 1.0));
@@ -52,10 +53,10 @@ out vec2 mask_texCoords;
    }
    mask_texCoords = mask_getCoords(mask_common_position);
 `,
-  'fs:#decl': `
+  'fs:#decl': glsl`
 in vec2 mask_texCoords;
 `,
-  'fs:#main-start': `
+  'fs:#main-start': glsl`
   if (mask_enabled) {
     bool mask = mask_isInBounds(mask_texCoords);
 

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/shader-module.ts

@@ -6,6 +6,7 @@ import {project} from '@deck.gl/core';
 import type {Texture} from '@luma.gl/core';
 import type {Bounds} from '../utils/projection-utils';
 import type {TerrainCover} from './terrain-cover';
+import {glsl} from '../utils/syntax-tags';
 
 /** Module parameters expected by the terrain shader module */
 export type TerrainModuleSettings = {
@@ -43,20 +44,20 @@ export const terrainModule = {
   name: 'terrain',
   dependencies: [project],
   inject: {
-    'vs:#decl': `
+    'vs:#decl':
+      glsl`
 uniform float terrain_mode;
 uniform sampler2D terrain_map;
 uniform vec4 terrain_bounds;
 out vec3 commonPos;
-${TERRAIN_MODE_CONSTANTS}
-    `,
-    'vs:#main-start': `
+` + TERRAIN_MODE_CONSTANTS,
+    'vs:#main-start': glsl`
 if (terrain_mode == TERRAIN_MODE_SKIP) {
   gl_Position = vec4(0.0);
   return;
 }
 `,
-    'vs:DECKGL_FILTER_GL_POSITION': `
+    'vs:DECKGL_FILTER_GL_POSITION': glsl`
 commonPos = geometry.position.xyz;
 if (terrain_mode == TERRAIN_MODE_WRITE_HEIGHT_MAP) {
   vec2 texCoords = (commonPos.xy - terrain_bounds.xy) / terrain_bounds.zw;
@@ -75,20 +76,20 @@ if (terrain_mode == TERRAIN_MODE_USE_HEIGHT_MAP) {
   }
 }
     `,
-    'fs:#decl': `
+    'fs:#decl':
+      glsl`
 uniform float terrain_mode;
 uniform sampler2D terrain_map;
 uniform vec4 terrain_bounds;
 in vec3 commonPos;
-${TERRAIN_MODE_CONSTANTS}
-    `,
-    'fs:#main-start': `
+` + TERRAIN_MODE_CONSTANTS,
+    'fs:#main-start': glsl`
 if (terrain_mode == TERRAIN_MODE_WRITE_HEIGHT_MAP) {
   fragColor = vec4(commonPos.z, 0.0, 0.0, 1.0);
   return;
 }
     `,
-    'fs:DECKGL_FILTER_COLOR': `
+    'fs:DECKGL_FILTER_COLOR': glsl`
 if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_USE_COVER_ONLY)) {
   vec2 texCoords = (commonPos.xy - terrain_bounds.xy) / terrain_bounds.zw;
   vec4 pixel = texture(terrain_map, texCoords);
@@ -118,7 +119,7 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
 
       let mode: number = terrainSkipRender ? TERRAIN_MODE.SKIP : TERRAIN_MODE.NONE;
       // height map if case USE_HEIGHT_MAP, terrain cover if USE_COVER, otherwise empty
-      let sampler = dummyHeightMap as Texture;
+      let sampler: Texture | undefined = dummyHeightMap as Texture;
       // height map bounds if case USE_HEIGHT_MAP, terrain cover bounds if USE_COVER, otherwise null
       let bounds: number[] | null = null;
       if (drawToTerrainHeightMap) {
@@ -131,10 +132,10 @@ if ((terrain_mode == TERRAIN_MODE_USE_COVER) || (terrain_mode == TERRAIN_MODE_US
       } else if (terrainCover) {
         // This is a terrain layer
         const isPicking = opts.picking?.isActive;
-        // @ts-expect-error
-        sampler = isPicking
+        const fbo = isPicking
           ? terrainCover.getPickingFramebuffer()
           : terrainCover.getRenderFramebuffer();
+        sampler = fbo?.colorAttachments[0].texture;
         if (isPicking) {
           // Never render the layer itself in picking pass
           mode = TERRAIN_MODE.SKIP;

package/src/terrain/terrain-cover.ts

@@ -174,7 +174,8 @@ export class TerrainCover {
     }
     if (!this.pickingFbo) {
       this.pickingFbo = createRenderTarget(this.targetLayer.context.device, {
-        id: `${this.id}-picking`
+        id: `${this.id}-picking`,
+        interpolate: false
       });
     }
     return this.pickingFbo;

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
@@ -65,7 +54,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;
 
@@ -92,12 +82,11 @@ export class TerrainEffect implements Effect {
     this._updateTerrainCovers(terrainLayers, drapeLayers, viewport, opts);
   }
 
-  getModuleParameters(layer: Layer): TerrainModuleSettings {
+  getModuleParameters(layer: Layer): Omit<TerrainModuleSettings, 'picking'> {
     const {terrainDrawMode} = layer.state;
 
     return {
-      // @ts-expect-error
-      heightMap: this.heightMap?.getRenderFramebuffer(),
+      heightMap: this.heightMap?.getRenderFramebuffer()?.colorAttachments[0].texture || null,
       heightMapBounds: this.heightMap?.bounds,
       dummyHeightMap: this.dummyHeightMap!,
       terrainCover: this.isDrapingEnabled ? this.terrainCovers.get(layer.id) : null,
@@ -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) {
@@ -201,7 +192,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,11 +1,19 @@
-import {withGLParameters} from '@luma.gl/webgl';
-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[] {
@@ -33,25 +41,15 @@ export class TerrainPass extends LayersPass {
 
     target.resize(viewport);
 
-    withGLParameters(
-      this.device,
-      {
-        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>) {
@@ -66,21 +64,23 @@ export class TerrainPass extends LayersPass {
     const layers = terrainCover.filterLayers(opts.layers!);
     target.resize(viewport);
 
-    withGLParameters(
-      this.device,
-      {
-        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

@@ -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,34 +53,29 @@ export class TerrainPickingPass extends PickLayersPass {
     }
     target.resize(viewport);
 
-    withGLParameters(
-      this.device,
-      {
-        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

@@ -6,23 +6,29 @@ export function createRenderTarget(
   opts: {
     id: string;
     float?: boolean;
+    interpolate?: boolean;
   }
 ) {
   return device.createFramebuffer({
     id: opts.id,
     colorAttachments: [
       device.createTexture({
+        id: opts.id,
         ...(opts.float && {
-          format: device.info.type === 'webgl2' ? 'rgba32float' : 'rgba8unorm',
+          format: 'rgba32float',
           type: GL.FLOAT
         }),
         mipmaps: false,
-        sampler: {
-          minFilter: 'linear',
-          magFilter: 'linear',
-          addressModeU: 'clamp-to-edge',
-          addressModeV: 'clamp-to-edge'
-        }
+        sampler:
+          opts.interpolate === false
+            ? {
+                minFilter: 'nearest',
+                magFilter: 'nearest'
+              }
+            : {
+                minFilter: 'linear',
+                magFilter: 'linear'
+              }
       })
     ]
   });

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) {

package/src/utils/syntax-tags.ts

@@ -0,0 +1,5 @@
+/**
+ * Marks GLSL shaders for syntax highlighting: glsl`...`
+ * Install https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal
+ */
+export const glsl = (s: TemplateStringsArray) => `${s}`;