Remove withParametersWebGL method in Pass classes

modules/aggregation-layers/package.json

@@ -38,8 +38,8 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.5",
-    "@luma.gl/shadertools": "^9.0.5",
+    "@luma.gl/constants": "^9.0.6",
+    "@luma.gl/shadertools": "^9.0.6",
     "@math.gl/web-mercator": "^4.0.0",
     "d3-hexbin": "^0.2.1"
   },

modules/arcgis/package.json

@@ -36,8 +36,8 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.5",
-    "@luma.gl/webgl": "^9.0.5",
+    "@luma.gl/constants": "^9.0.6",
+    "@luma.gl/webgl": "^9.0.6",
     "esri-loader": "^3.3.0"
   },
   "peerDependencies": {

modules/carto/package.json

@@ -47,7 +47,7 @@
     "@loaders.gl/mvt": "^4.1.4",
     "@loaders.gl/schema": "^4.1.4",
     "@loaders.gl/tiles": "^4.1.4",
-    "@luma.gl/constants": "^9.0.5",
+    "@luma.gl/constants": "^9.0.6",
     "@math.gl/web-mercator": "^4.0.0",
     "@types/d3-array": "^3.0.2",
     "@types/d3-color": "^1.4.2",

modules/core/package.json

@@ -42,11 +42,11 @@
   "dependencies": {
     "@loaders.gl/core": "^4.1.4",
     "@loaders.gl/images": "^4.1.4",
-    "@luma.gl/constants": "^9.0.5",
-    "@luma.gl/core": "^9.0.5",
-    "@luma.gl/engine": "^9.0.5",
-    "@luma.gl/shadertools": "^9.0.5",
-    "@luma.gl/webgl": "^9.0.5",
+    "@luma.gl/constants": "^9.0.6",
+    "@luma.gl/core": "^9.0.6",
+    "@luma.gl/engine": "^9.0.6",
+    "@luma.gl/shadertools": "^9.0.6",
+    "@luma.gl/webgl": "^9.0.6",
     "@math.gl/core": "^4.0.0",
     "@math.gl/sun": "^4.0.0",
     "@math.gl/web-mercator": "^4.0.0",

modules/core/src/lib/deck.ts

@@ -391,7 +391,7 @@
         ...props.deviceProps,
         canvas: this._createCanvas(props)
       });
       deviceOrPromise.then(device => {
         this.device = device;
       });
     }
@@ -405,7 +405,7 @@
       typedArrayManager.setOptions(props._typedArrayManagerProps);
     }
 
     this.animationLoop.start();
   }
 
   /** Stop rendering and dispose all resources */
@@ -1039,8 +1039,6 @@
   ) {
     const {device, gl} = this.layerManager!.context;
 
-    device.setParametersWebGL(this.props.parameters);
-
     this.props.onBeforeRender({device, gl});
 
     const opts = {

modules/core/src/lib/layer.ts

@@ -1075,6 +1075,10 @@ export default abstract class Layer<PropsT extends {} = {}> extends Component<
 
       context.device.setParametersWebGL({polygonOffset: offsets});
 
+      for (const model of this.getModels()) {
+        model.setParameters(parameters);
+      }
+
       // Call subclass lifecycle method
       context.device.withParametersWebGL(parameters, () => {
         const opts = {renderPass, moduleParameters, uniforms, parameters, context};

modules/core/src/passes/layers-pass.ts

@@ -1,4 +1,4 @@
-import type {Device} from '@luma.gl/core';
+import type {Device, RenderPassParameters} from '@luma.gl/core';
 import type {Framebuffer, RenderPass} from '@luma.gl/core';
 
 import Pass from './pass';
@@ -24,6 +24,8 @@ export type LayersPassRenderOptions = {
   clearStack?: boolean;
   clearCanvas?: boolean;
   clearColor?: number[];
+  colorMask?: number;
+  scissorRect?: number[];
   layerFilter?: ((context: FilterContext) => boolean) | null;
   moduleParameters?: any;
   /** Stores returned results from Effect.preRender, for use downstream in the render pipeline */
@@ -64,12 +66,19 @@ export default class LayersPass extends Pass {
     const clearCanvas = options.clearCanvas ?? true;
     const clearColor = options.clearColor ?? (clearCanvas ? [0, 0, 0, 0] : false);
     const clearDepth = clearCanvas ? 1 : false;
+    const colorMask = options.colorMask ?? 0xf;
+
+    const parameters: RenderPassParameters = {viewport: [0, 0, width, height]};
+    if (options.colorMask) {
+      parameters.colorMask = colorMask;
+    }
+    if (options.scissorRect) {
+      parameters.scissorRect = options.scissorRect;
+    }
 
     const renderPass = this.device.beginRenderPass({
       framebuffer: options.target,
-      parameters: {
-        viewport: [0, 0, width, height]
-      },
+      parameters,
       clearColor,
       clearDepth
     });
@@ -181,7 +190,10 @@ export default class LayersPass extends Pass {
           pass,
           moduleParameters
         );
-        layerParam.layerParameters = this.getLayerParameters(layer, layerIndex, viewport);
+        layerParam.layerParameters = {
+          ...layer.context.deck?.props.parameters,
+          ...this.getLayerParameters(layer, layerIndex, viewport)
+        };
       }
       drawLayerParams[layerIndex] = layerParam;
     }

modules/core/src/passes/pick-layers-pass.ts

@@ -1,14 +1,17 @@
 import LayersPass, {LayersPassRenderOptions, RenderStats, Rect} from './layers-pass';
-import type {Framebuffer} from '@luma.gl/core';
-import {GL, GLParameters} from '@luma.gl/constants';
+import type {Framebuffer, RenderPipelineParameters} from '@luma.gl/core';
 import log from '../utils/log';
 
 import type Viewport from '../viewports/viewport';
 import type Layer from '../lib/layer';
 
-const PICKING_PARAMETERS: GLParameters = {
-  blendFunc: [GL.ONE, GL.ZERO, GL.CONSTANT_ALPHA, GL.ZERO],
-  blendEquation: GL.FUNC_ADD
+const PICKING_BLENDING: RenderPipelineParameters = {
+  blendColorOperation: 'add',
+  blendColorSrcFactor: 'one',
+  blendColorDstFactor: 'zero',
+  blendAlphaOperation: 'add',
+  blendAlphaSrcFactor: 'constant-alpha',
+  blendAlphaDstFactor: 'zero'
 };
 
 type PickLayersPassRenderOptions = LayersPassRenderOptions & {
@@ -69,43 +72,29 @@ export default class PickLayersPass extends LayersPass {
   } {
     this.pickZ = pickZ;
     const colorEncoderState = this._resetColorEncoder(pickZ);
+    const scissorRect = [x, y, width, height];
 
     // Make sure we clear scissor test and fbo bindings in case of exceptions
     // We are only interested in one pixel, no need to render anything else
     // Note that the callback here is called synchronously.
     // Set blend mode for picking
     // always overwrite existing pixel with [r,g,b,layerIndex]
-    const renderStatus = this.device.withParametersWebGL(
-      {
-        scissorTest: true,
-        scissor: [x, y, width, height],
-        // When used as Mapbox custom layer, the context state may be dirty
-        // TODO - Remove when mapbox fixes this issue
-        // https://github.com/mapbox/mapbox-gl-js/issues/7801
-        depthMask: true,
-        depthTest: true,
-        depthRange: [0, 1],
-        colorMask: [true, true, true, true],
-        // Blending
-        ...PICKING_PARAMETERS,
-        blend: !pickZ
-      },
-      () =>
-        super.render({
-          target: pickingFBO,
-          layers,
-          layerFilter,
-          views,
-          viewports,
-          onViewportActive,
-          cullRect,
-          effects: effects?.filter(e => e.useInPicking),
-          pass,
-          isPicking: true,
-          moduleParameters,
-          clearColor: [0, 0, 0, 0]
-        })
-    );
+    const renderStatus = super.render({
+      target: pickingFBO,
+      layers,
+      layerFilter,
+      views,
+      viewports,
+      onViewportActive,
+      cullRect,
+      effects: effects?.filter(e => e.useInPicking),
+      pass,
+      isPicking: true,
+      moduleParameters,
+      clearColor: [0, 0, 0, 0],
+      colorMask: 0xf,
+      scissorRect
+    });
 
     // Clear the temp field
     this._colorEncoderState = null;
@@ -135,13 +124,23 @@ export default class PickLayersPass extends LayersPass {
   }
 
   protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
-    const pickParameters = {...layer.props.parameters};
+    const pickParameters = {
+      // TODO - When used as a custom layer in older Mapbox versions, context
+      // state was dirty. Mapbox fixed that; we should test and remove the workaround.
+      // https://github.com/mapbox/mapbox-gl-js/issues/7801
+      depthMask: true,
+      depthTest: true,
+      depthRange: [0, 1],
+      ...layer.props.parameters,
+      // Blending
+      ...PICKING_BLENDING,
+      blend: !this.pickZ
+    };
     const {pickable, operation} = layer.props;
 
     if (!this._colorEncoderState) {
       pickParameters.blend = false;
     } else if (pickable && operation.includes('draw')) {
-      Object.assign(pickParameters, PICKING_PARAMETERS);
       pickParameters.blend = true;
       pickParameters.blendColor = encodeColor(this._colorEncoderState, layer, viewport);
     }

modules/core/src/passes/shadow-pass.ts

@@ -1,5 +1,7 @@
 import type {Device, Framebuffer, Texture} from '@luma.gl/core';
-import {default as LayersPass} from './layers-pass';
+import type Layer from '../lib/layer';
+import type Viewport from '../viewports/viewport';
+import LayersPass from './layers-pass';
 
 export default class ShadowPass extends LayersPass {
   shadowMap: Texture;
@@ -51,26 +53,22 @@ export default class ShadowPass extends LayersPass {
   render(params) {
     const target = this.fbo;
 
-    this.device.withParametersWebGL(
-      {
-        depthRange: [0, 1],
-        depthTest: true,
-        blend: false
-      },
-      () => {
-        // @ts-expect-error TODO - assuming WebGL context
-        const pixelRatio = this.device.canvasContext.cssToDeviceRatio();
-
-        const viewport = params.viewports[0];
-        const width = viewport.width * pixelRatio;
-        const height = viewport.height * pixelRatio;
-        if (width !== target.width || height !== target.height) {
-          target.resize({width, height});
-        }
-
-        super.render({...params, target, pass: 'shadow', clearColor: [1, 1, 1, 1]});
-      }
-    );
+    // @ts-expect-error TODO - assuming WebGL context
+    const pixelRatio = this.device.canvasContext.cssToDeviceRatio();
+
+    const viewport = params.viewports[0];
+    const width = viewport.width * pixelRatio;
+    const height = viewport.height * pixelRatio;
+    const clearColor = [1, 1, 1, 1];
+    if (width !== target.width || height !== target.height) {
+      target.resize({width, height});
+    }
+
+    super.render({...params, clearColor, target, pass: 'shadow'});
+  }
+
+  protected getLayerParameters(layer: Layer<{}>, layerIndex: number, viewport: Viewport) {
+    return {...layer.props.parameters, blend: false, depthRange: [0, 1], depthTest: true};
   }
 
   shouldDrawLayer(layer) {

modules/extensions/package.json

@@ -38,8 +38,8 @@
     "prepublishOnly": "npm run build-bundle && npm run build-bundle -- --env=dev"
   },
   "dependencies": {
-    "@luma.gl/constants": "^9.0.5",
-    "@luma.gl/shadertools": "^9.0.5",
+    "@luma.gl/constants": "^9.0.6",
+    "@luma.gl/shadertools": "^9.0.6",
     "@math.gl/core": "^4.0.0"
   },
   "peerDependencies": {

modules/extensions/src/collision-filter/collision-filter-pass.ts

@@ -1,23 +1,19 @@
 import {Framebuffer} from '@luma.gl/core';
-import {_LayersPass as LayersPass, LayersPassRenderOptions} from '@deck.gl/core';
+import {Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport} from '@deck.gl/core';
 
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
 
 export default class CollisionFilterPass extends LayersPass {
   renderCollisionMap(target: Framebuffer, options: CollisionFilterPassRenderOptions) {
     const padding = 1;
     const clearColor = [0, 0, 0, 0];
+    const scissorRect = [padding, padding, target.width - 2 * padding, target.height - 2 * padding];
 
-    return this.device.withParametersWebGL(
-      {
-        scissorTest: true,
-        scissor: [padding, padding, target.width - 2 * padding, target.height - 2 * padding],
-        blend: false,
-        depthTest: true,
-        depthRange: [0, 1]
-      },
-      () => this.render({...options, clearColor, target, pass: 'collision'})
-    );
+    this.render({...options, clearColor, scissorRect, target, pass: 'collision'});
+  }
+
+  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
+    return {...layer.props.parameters, blend: false, depthRange: [0, 1], depthTest: true};
   }
 
   getModuleParameters() {

modules/extensions/src/mask/mask-effect.ts

@@ -15,15 +15,15 @@ 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;
 };
 
 type Channel = {
   id: string;
-  index: number;
+  index: 0 | 1 | 2 | 3;
   layers: Layer[];
   bounds: Bounds | null;
   maskBounds: Bounds;

modules/extensions/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) {