Remove withParametersWebGL method in Pass classes

modules/core/src/lib/layer.ts

@@ -1072,6 +1072,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 @@
   clearStack?: boolean;
   clearCanvas?: boolean;
   clearColor?: number[];
+  colorMask?: boolean[];
+  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 @@
     const clearCanvas = options.clearCanvas ?? true;
     const clearColor = options.clearColor ?? (clearCanvas ? [0, 0, 0, 0] : false);
     const clearDepth = clearCanvas ? 1 : false;
+    const colorMask = options.colorMask ?? [true, true, true, true];
+
+    const parameters: RenderPassParameters = {viewport: [0, 0, width, height]};
+    if (options.colorMask) {
+      parameters.colorMask = options.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 @@
           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,28 @@ 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],
+      scissorRect
+    });
 
     // Clear the temp field
     this._colorEncoderState = null;
@@ -135,13 +123,26 @@ export default class PickLayersPass extends LayersPass {
   }
 
   protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
-    const pickParameters = {...layer.props.parameters};
+    const {x, y, width, height} = viewport;
+    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],
+      colorMask: [true, true, true, true],
+      ...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);
+      Object.assign(pickParameters, PICKING_BLENDING);
       pickParameters.blend = true;
       pickParameters.blendColor = encodeColor(this._colorEncoderState, layer, viewport);
     }

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

@@ -1,4 +1,5 @@
 import type {Device, Framebuffer, Texture} from '@luma.gl/core';
+import {Layer, Viewport} from '@deck.gl/core';
 import {default as LayersPass} from './layers-pass';
 
 export default class ShadowPass extends LayersPass {
@@ -51,27 +52,22 @@ export default class ShadowPass extends LayersPass {
   render(params) {
     const target = this.fbo;
 
-    this.device.withParametersWebGL(
-      {
-        depthRange: [0, 1],
-        depthTest: true,
-        blend: false,
-        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;
-        if (width !== target.width || height !== target.height) {
-          target.resize({width, height});
-        }
-
-        super.render({...params, target, pass: 'shadow'});
-      }
-    );
+    // @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/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-pass.ts

@@ -1,12 +1,20 @@
-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;
 };
 
+const MASK_BLENDING: RenderPipelineParameters = {
+  blendColorOperation: 'subtract',
+  blendColorSrcFactor: 'zero',
+  blendColorDstFactor: 'one',
+  blendAlphaOperation: 'subtract',
+  blendAlphaSrcFactor: 'zero',
+  blendAlphaDstFactor: 'one'
+};
+
 export default class MaskPass extends LayersPass {
   maskMap: Texture;
   fbo: Framebuffer;
@@ -40,17 +48,16 @@ export default class MaskPass extends LayersPass {
     const colorMask = [false, false, false, false];
     colorMask[options.channel] = true;
     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) {

modules/extensions/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,
+      ...TERRAIN_BLENDING
+    };
   }
 }