For discussion: remove withParametersWebGL

examples/website/geojson/app.jsx

@@ -94,6 +94,7 @@ export default function App({data = DATA_URL, mapStyle = MAP_STYLE}) {
     new GeoJsonLayer({
       id: 'geojson',
       data,
+      autoHighlight: true,
       opacity: 0.8,
       stroked: false,
       filled: true,

modules/core/src/lib/deck.ts

@@ -35,7 +35,6 @@ import {luma} from '@luma.gl/core';
 import {WebGLDevice} from '@luma.gl/webgl';
 import {Timeline} from '@luma.gl/engine';
 import {AnimationLoop} from '@luma.gl/engine';
-import {GL} from '@luma.gl/constants';
 import type {Device, DeviceProps, Framebuffer} from '@luma.gl/core';
 import type {ShaderModule} from '@luma.gl/shadertools';
 
@@ -54,6 +53,7 @@ import type {RecognizerOptions, MjolnirGestureEvent, MjolnirPointerEvent} from '
 import type {TypedArrayManagerOptions} from '../utils/typed-array-manager';
 import type {ViewStateChangeParameters, InteractionState} from '../controllers/controller';
 import type {PickingInfo} from './picking/pick-info';
+import type {LayerParameters} from '../passes/layers-pass';
 import type {PickByPointOptions, PickByRectOptions} from './deck-picker';
 import type {LayersList} from './layer-manager';
 import type {TooltipContent} from './tooltip';
@@ -114,7 +114,7 @@ export type DeckProps<ViewsT extends ViewOrViews = ViewOrViews> = {
   pickingRadius?: number;
 
   /** WebGL parameters to be set before each frame is rendered. */
-  parameters?: any;
+  parameters?: LayerParameters;
   /** If supplied, will be called before a layer is drawn to determine whether it should be rendered. */
   layerFilter?: ((context: FilterContext) => boolean) | null;
 
@@ -946,14 +946,6 @@ export default class Deck<ViewsT extends ViewOrViews = ViewOrViews> {
       // instrumentGLContext(this.device.gl, {enable: true, copyState: true});
     }
 
-    this.device.setParametersWebGL({
-      blend: true,
-      blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA],
-      polygonOffsetFill: true,
-      depthTest: true,
-      depthFunc: GL.LEQUAL
-    });
-
     this.props.onDeviceInitialized(this.device);
     if (this.device instanceof WebGLDevice) {
       // Legacy callback - warn?

modules/core/src/lib/layer.ts

@@ -43,6 +43,7 @@ import {load} from '@loaders.gl/core';
 
 import type {Loader} from '@loaders.gl/loader-utils';
 import type {CoordinateSystem} from './constants';
+import type {LayerParameters} from '../passes/layers-pass';
 import type Attribute from './attribute/attribute';
 import type {Model} from '@luma.gl/engine';
 import type {PickingInfo, GetPickingInfoParams} from './picking/pick-info';
@@ -1046,7 +1047,7 @@ export default abstract class Layer<PropsT extends {} = {}> extends Component<
     renderPass: RenderPass;
     moduleParameters: any;
     uniforms: any;
-    parameters: any;
+    parameters: LayerParameters;
   }): void {
     this._updateAttributeTransition();
 
@@ -1069,13 +1070,6 @@ export default abstract class Layer<PropsT extends {} = {}> extends Component<
         this.setShaderModuleProps({picking: {isActive, isAttribute}});
       }
 
-      // Apply polygon offset to avoid z-fighting
-      // TODO - move to draw-layers
-      const {getPolygonOffset} = this.props;
-      const offsets = (getPolygonOffset && getPolygonOffset(uniforms)) || [0, 0];
-
-      context.device.setParametersWebGL({polygonOffset: offsets});
-
       for (const model of this.getModels()) {
         model.setParameters(parameters);
       }

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

@@ -56,6 +56,14 @@ export type RenderStats = {
   pickableCount: number;
 };
 
+const DEFAULT_PARAMETERS: LayerParameters = {
+  blendColorSrcFactor: 'src-alpha',
+  blendColorDstFactor: 'one-minus-src-alpha',
+  blendAlphaSrcFactor: 'one',
+  blendAlphaDstFactor: 'one-minus-src-alpha',
+  depthCompare: 'less-equal'
+};
+
 /** A Pass that renders all layers */
 export default class LayersPass extends Pass {
   _lastRenderIndex: number = -1;
@@ -191,7 +199,9 @@ export default class LayersPass extends Pass {
           moduleParameters
         );
         layerParam.layerParameters = {
+          ...DEFAULT_PARAMETERS,
           ...layer.context.deck?.props.parameters,
+          ...layer.props.parameters,
           ...this.getLayerParameters(layer, layerIndex, viewport)
         };
       }
@@ -262,7 +272,7 @@ export default class LayersPass extends Pass {
             renderPass,
             moduleParameters,
             uniforms: {layerIndex: layerRenderIndex},
-            parameters: layerParameters
+            parameters: layerParameters!
           });
         } catch (err) {
           layer.raiseError(err as Error, `drawing ${layer} to ${pass}`);
@@ -288,7 +298,10 @@ export default class LayersPass extends Pass {
     layerIndex: number,
     viewport: Viewport
   ): LayerParameters {
-    return layer.props.parameters;
+    const {getPolygonOffset} = layer.props;
+    const offsets = (getPolygonOffset && getPolygonOffset({layerIndex})) || [0, 0];
+
+    return {depthBias: offsets[0], depthBiasSlopeScale: offsets[1]};
   }
 
   /* Private */

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

@@ -133,17 +133,11 @@
     layerIndex: number,
     viewport: Viewport
   ): LayerParameters {
-    const pickParameters: LayerParameters = {
-      // 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
-      depthCompare: 'less-equal',
-      ...layer.props.parameters
-    };
+    const pickParameters: LayerParameters = super.getLayerParameters(layer, layerIndex, viewport);
     const {pickable, operation} = layer.props;
 
     if (!this._colorEncoderState || operation.includes('terrain')) {
       pickParameters.blendColorOperation = 'none';
     } else if (pickable && operation.includes('draw')) {
       Object.assign(pickParameters, PICKING_BLENDING);
       pickParameters.blendConstant = encodeColor(this._colorEncoderState, layer, viewport);

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

@@ -72,7 +72,11 @@
     layerIndex: number,
     viewport: Viewport
   ): LayerParameters {
-    return {...layer.props.parameters, blendColorOperation: 'none', depthCompare: 'less-equal'};
+    return {
+      ...super.getLayerParameters(layer, layerIndex, viewport),
+      blendColorOperation: 'none',
+      depthCompare: 'less-equal'
+    };
   }
 
   shouldDrawLayer(layer) {

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

@@ -23,7 +23,7 @@ export default class CollisionFilterPass extends LayersPass {
     layerIndex: number,
     viewport: Viewport
   ): LayerParameters {
-    return {...layer.props.parameters, blendColorOperation: 'none', depthCompare: 'less-equal'};
+    return {blendColorOperation: 'none', depthCompare: 'less-equal'};
   }
 
   getModuleParameters() {

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

@@ -61,11 +61,7 @@ export default class MaskPass extends LayersPass {
     layerIndex: number,
     viewport: Viewport
   ): LayerParameters {
-    return {
-      ...layer.props.parameters,
-      depthCompare: 'less-equal',
-      ...MASK_BLENDING
-    };
+    return {depthCompare: 'less-equal', ...MASK_BLENDING};
   }
 
   shouldDrawLayer(layer) {

modules/extensions/src/terrain/terrain-pass.ts

@@ -87,7 +87,6 @@ export class TerrainPass extends LayersPass {
     viewport: Viewport
   ): LayerParameters {
     return {
-      ...layer.props.parameters,
       depthCompare: 'always',
       ...(layer.props.operation.includes('terrain') && TERRAIN_BLENDING)
     };