Types: luma.gl Parameters

modules/carto/src/api/layer-map.ts

@@ -197,7 +197,7 @@ export function getLayer(
       Layer: GeoJsonLayer,
       propMap: {
         columns: {
-          altitude: x => ({parameters: {depthTest: Boolean(x)}})
+          altitude: x => ({parameters: {depthWriteEnabled: Boolean(x)}})
         },
         visConfig: {outline: 'stroked'}
       }

modules/core/src/index.ts

@@ -120,7 +120,7 @@ export type {
   TextureSource,
   Material
 } from './types/layer-props';
-export type {FilterContext} from './passes/layers-pass';
+export type {DrawLayerParameters, FilterContext} from './passes/layers-pass';
 export type {PickingInfo, GetPickingInfoParams} from './lib/picking/pick-info';
 export type {ConstructorOf as _ConstructorOf} from './types/types';
 export type {BinaryAttribute} from './lib/attribute/attribute';

modules/core/src/lib/layer.ts

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 /* eslint-disable react/no-direct-mutation-state */
-import {Buffer, TypedArray} from '@luma.gl/core';
+import {Buffer, Parameters as LumaParameters, TypedArray} from '@luma.gl/core';
 import {WebGLDevice} from '@luma.gl/webgl';
 import {COORDINATE_SYSTEM} from './constants';
 import AttributeManager from './attribute/attribute-manager';
@@ -1042,7 +1042,7 @@ export default abstract class Layer<PropsT extends {} = {}> extends Component<
     renderPass: RenderPass;
     shaderModuleProps: any;
     uniforms: any;
-    parameters: any;
+    parameters: LumaParameters;
   }): void {
     this._updateAttributeTransition();
 

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {Device, RenderPassParameters} from '@luma.gl/core';
+import type {Device, Parameters, RenderPassParameters} from '@luma.gl/core';
 import type {Framebuffer, RenderPass} from '@luma.gl/core';
 
 import Pass from './pass';
@@ -38,11 +38,11 @@ export type LayersPassRenderOptions = {
   preRenderStats?: Record<string, any>;
 };
 
-type DrawLayerParameters = {
+export type DrawLayerParameters = {
   shouldDrawLayer: boolean;
-  layerRenderIndex?: number;
-  shaderModuleProps?: any;
-  layerParameters?: any;
+  layerRenderIndex: number;
+  shaderModuleProps: any;
+  layerParameters: Parameters;
 };
 
 export type FilterContext = {
@@ -182,11 +182,11 @@ export default class LayersPass extends Pass {
         layerFilterCache
       );
 
-      const layerParam: DrawLayerParameters = {
-        shouldDrawLayer
-      };
+      const layerParam = {shouldDrawLayer} as DrawLayerParameters;
 
       if (shouldDrawLayer && !evaluateShouldDrawOnly) {
+        layerParam.shouldDrawLayer = true;
+
         // This is the "logical" index for ordering this layer in the stack
         // used to calculate polygon offsets
         // It can be the same as another layer
@@ -203,6 +203,7 @@ export default class LayersPass extends Pass {
           ...this.getLayerParameters(layer, layerIndex, viewport)
         };
       }
+
       drawLayerParams[layerIndex] = layerParam;
     }
     return drawLayerParams;
@@ -215,7 +216,7 @@ export default class LayersPass extends Pass {
   private _drawLayersInViewport(
     renderPass: RenderPass,
     {layers, shaderModuleProps: globalModuleParameters, pass, target, viewport, view},
-    drawLayerParams
+    drawLayerParams: DrawLayerParameters[]
   ): RenderStats {
     const glViewport = getGLViewport(this.device, {
       shaderModuleProps: globalModuleParameters,
@@ -248,8 +249,8 @@ export default class LayersPass extends Pass {
     // render layers in normal colors
     for (let layerIndex = 0; layerIndex < layers.length; layerIndex++) {
       const layer = layers[layerIndex] as Layer;
-      const {shouldDrawLayer, layerRenderIndex, shaderModuleProps, layerParameters} =
-        drawLayerParams[layerIndex];
+      const drawLayerParameters = drawLayerParams[layerIndex];
+      const {shouldDrawLayer} = drawLayerParameters;
 
       // Calculate stats
       if (shouldDrawLayer && layer.props.pickable) {
@@ -258,7 +259,8 @@ export default class LayersPass extends Pass {
       if (layer.isComposite) {
         renderStatus.compositeCount++;
       }
-      if (layer.isDrawable && shouldDrawLayer) {
+      if (layer.isDrawable && drawLayerParameters.shouldDrawLayer) {
+        const {layerRenderIndex, shaderModuleProps, layerParameters} = drawLayerParameters;
         // Draw the layer
         renderStatus.visibleCount++;
 
@@ -304,7 +306,7 @@ export default class LayersPass extends Pass {
     return null;
   }
 
-  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
+  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): Parameters {
     return layer.props.parameters;
   }
 

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

@@ -3,7 +3,7 @@
 // Copyright (c) vis.gl contributors
 
 import LayersPass, {LayersPassRenderOptions, RenderStats, Rect} from './layers-pass';
-import type {Framebuffer, RenderPipelineParameters} from '@luma.gl/core';
+import type {Framebuffer, Parameters, RenderPipelineParameters} from '@luma.gl/core';
 import log from '../utils/log';
 
 import type {Effect} from '../lib/effect';
@@ -130,14 +130,9 @@ export default class PickLayersPass extends LayersPass {
     };
   }
 
-  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
+  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): Parameters {
+    // TODO use Parameters type
     const pickParameters: any = {
-      // 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
     };
     const {pickable, operation} = layer.props;
@@ -147,6 +142,7 @@ export default class PickLayersPass extends LayersPass {
     } else if (pickable && operation.includes('draw')) {
       Object.assign(pickParameters, PICKING_BLENDING);
       pickParameters.blend = true;
+      // TODO: blendColor no longer part of luma.gl API
       pickParameters.blendColor = encodeColor(this._colorEncoderState, layer, viewport);
     }
 

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Device, Framebuffer, Texture} from '@luma.gl/core';
+import {Device, Framebuffer, Parameters, Texture} from '@luma.gl/core';
 import type Layer from '../lib/layer';
 import type Viewport from '../viewports/viewport';
 import LayersPass from './layers-pass';
@@ -77,8 +77,17 @@ export default class ShadowPass extends LayersPass {
     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};
+  protected getLayerParameters(
+    layer: Layer<{}>,
+    layerIndex: number,
+    viewport: Viewport
+  ): Parameters {
+    return {
+      ...layer.props.parameters,
+      blend: false,
+      depthWriteEnabled: true,
+      depthCompare: 'less-equal'
+    };
   }
 
   shouldDrawLayer(layer) {

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {Framebuffer} from '@luma.gl/core';
+import {Framebuffer, Parameters} from '@luma.gl/core';
 import {Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport} from '@deck.gl/core';
 
 type CollisionFilterPassRenderOptions = LayersPassRenderOptions & {};
@@ -16,8 +16,13 @@ export default class CollisionFilterPass extends LayersPass {
     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};
+  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): Parameters {
+    return {
+      ...layer.props.parameters,
+      blend: false,
+      depthWriteEnabled: true,
+      depthCompare: 'less-equal'
+    };
   }
 
   getShaderModuleProps() {

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

@@ -2,7 +2,13 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import type {Device, Framebuffer, RenderPipelineParameters, Texture} from '@luma.gl/core';
+import type {
+  Device,
+  Framebuffer,
+  Parameters,
+  RenderPipelineParameters,
+  Texture
+} from '@luma.gl/core';
 import {Layer, _LayersPass as LayersPass, LayersPassRenderOptions, Viewport} from '@deck.gl/core';
 
 type MaskPassRenderOptions = LayersPassRenderOptions & {
@@ -54,11 +60,15 @@ export default class MaskPass extends LayersPass {
     super.render({...options, clearColor, colorMask, target: this.fbo, pass: 'mask'});
   }
 
-  protected getLayerParameters(layer: Layer<{}>, layerIndex: number, viewport: Viewport) {
+  protected getLayerParameters(
+    layer: Layer<{}>,
+    layerIndex: number,
+    viewport: Viewport
+  ): Parameters {
     return {
       ...layer.props.parameters,
       blend: true,
-      depthTest: false,
+      depthCompare: 'always',
       ...MASK_BLENDING
     };
   }

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

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) vis.gl contributors
 
-import {RenderPipelineParameters} from '@luma.gl/core';
+import {Parameters, 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';
@@ -79,11 +79,15 @@ export class TerrainPass extends LayersPass {
     });
   }
 
-  protected getLayerParameters(layer: Layer<{}>, layerIndex: number, viewport: Viewport) {
+  protected getLayerParameters(
+    layer: Layer<{}>,
+    layerIndex: number,
+    viewport: Viewport
+  ): Parameters {
     return {
       ...layer.props.parameters,
       blend: true,
-      depthTest: false,
+      depthCompare: 'always',
       ...(layer.props.operation.includes('terrain') && TERRAIN_BLENDING)
     };
   }

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

@@ -9,6 +9,7 @@ import {
   _PickLayersPass as PickLayersPass
 } from '@deck.gl/core';
 import type {TerrainCover} from './terrain-cover';
+import {Parameters} from '@luma.gl/core';
 
 export type TerrainPickingPassRenderOptions = LayersPassRenderOptions & {
   pickZ: boolean;
@@ -72,15 +73,15 @@ export class TerrainPickingPass extends PickLayersPass {
     });
   }
 
-  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): any {
+  protected getLayerParameters(layer: Layer, layerIndex: number, viewport: Viewport): Parameters {
     let parameters: any;
     if (this.drawParameters[layer.id]) {
       parameters = this.drawParameters[layer.id];
     } else {
       parameters = super.getLayerParameters(layer, layerIndex, viewport);
       parameters.blend = true;
     }
-    return {...parameters, depthTest: false};
+    return {...parameters, depthCompare: 'always'};
   }
 
   getShaderModuleProps(layer: Layer, effects: any, otherShaderModuleProps: Record<string, any>) {

modules/mapbox/src/deck-utils.ts

@@ -118,10 +118,11 @@ export function removeDeckInstance(map: Map & {__deck?: Deck | null}) {
 export function getInterleavedProps(currProps: DeckProps) {
   const nextProps: DeckProps = {
     ...currProps,
-    // TODO: remove with withParametersWebGL
+    // TODO: remove 'any' cast
     parameters: {
       depthMask: true,
-      depthTest: true,
+      depthWriteEnabled: true,
+      depthCompare: 'less-equal',
       blend: true,
       blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA],
       polygonOffsetFill: true,

test/modules/mapbox/fixtures.ts

@@ -6,7 +6,8 @@ import {GL} from '@luma.gl/constants';
 
 export const DEFAULT_PARAMETERS = {
   depthMask: true,
-  depthTest: true,
+  depthWriteEnabled: true,
+  depthCompare: 'less-equal',
   blend: true,
   blendFunc: [GL.SRC_ALPHA, GL.ONE_MINUS_SRC_ALPHA, GL.ONE, GL.ONE_MINUS_SRC_ALPHA],
   polygonOffsetFill: true,

test/modules/mapbox/mapbox-overlay.spec.ts

@@ -281,7 +281,7 @@ test('MapboxOverlay#interleavedNoInitialLayers', t => {
     t.ok(map.getLayer('cities'), 'MapboxLayer is added');
 
     t.ok(
-      objectEqual(overlay._deck.props.parameters, {...DEFAULT_PARAMETERS, depthTest: false}),
+      objectEqual(overlay._deck.props.parameters, {...DEFAULT_PARAMETERS, depthMask: false}),
       'Parameters are updated correctly'
     );
     t.ok(