fix postprocessing effects

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

Author: igorDykhta

src/components/src/effects/effect-configurator.tsx

@@ -283,7 +283,7 @@ export default function EffectConfiguratorFactory(
     effect,
     updateEffectConfig
   }) => {
-    const uniforms = effect.deckEffect?.module.uniforms || defaultUniforms;
+    const uniforms = effect.deckEffect?.module.propTypes || defaultUniforms;
     const parameterDescriptions = effect.getParameterDescriptions();
     const {parameters, id} = effect;
     const flatParameterDescriptions = useMemo(() => {

src/components/src/map-container.tsx

@@ -59,7 +59,8 @@ import {
   computeDeckEffects,
   getApplicationConfig,
   GetMapRef,
-  getLayerBlendingParameters
+  getLayerBlendingParameters,
+  patchDeckRendererForPostProcessing
 } from '@kepler.gl/utils';
 import {breakPointValues} from '@kepler.gl/styles';
 
@@ -94,6 +95,8 @@ import {VisState} from '@kepler.gl/schemas';
 
 import LoadingIndicator from './loading-indicator';
 
+patchDeckRendererForPostProcessing();
+
 // Debounce the propagation of viewport change and mouse moves to redux store.
 // This is to avoid too many renders of other components when the map is
 // being panned/zoomed (leading to laggy basemap/deck syncing).

src/deckgl-augmentations.d.ts

@@ -44,6 +44,16 @@ declare module '@deck.gl/core' {
   export type Color = [number, number, number] | [number, number, number, number];
   export type RGBAColor = [number, number, number, number];
   export type RGBColor = [number, number, number];
+
+  export class DeckRenderer {
+    device: any;
+    renderBuffers: any[];
+    lastPostProcessEffect: string | null;
+    constructor(device: any);
+    renderLayers(opts: any): void;
+    needsRedraw(opts?: any): string | false;
+    finalize(): void;
+  }
 }
 
 declare module '@deck.gl/geo-layers' {

src/effects/src/post-processing-effect.ts

@@ -117,13 +117,12 @@ class PostProcessingEffect extends Effect {
     if (effectDesc) {
       this.deckEffect = new DeckPostProcessEffect(effectDesc.class, this.parameters);
 
-      const uniforms = this.deckEffect?.module?.uniforms;
-      if (uniforms) {
-        // get default parameters
-        const keys = Object.keys(uniforms);
+      const propTypes = this.deckEffect?.module?.propTypes;
+      if (propTypes) {
+        const keys = Object.keys(propTypes);
         const defaultParameters = {};
         keys.forEach(key => {
-          defaultParameters[key] = getDefaultValueForParameter(key, this._uiConfig, uniforms);
+          defaultParameters[key] = getDefaultValueForParameter(key, this._uiConfig, propTypes);
         });
         this.parameters = {...defaultParameters, ...this.parameters};
         this.deckEffect?.setProps(this.parameters);

src/utils/src/gl-utils.ts

@@ -2,6 +2,7 @@
 // Copyright contributors to the kepler.gl project
 
 import {LAYER_BLENDINGS} from '@kepler.gl/constants';
+import {DeckRenderer} from '@deck.gl/core';
 
 const GL_BLEND_FUNC_TO_WEBGPU: Record<string, string> = {
   SRC_ALPHA: 'src-alpha',
@@ -66,3 +67,42 @@ export function getLayerBlendingParameters(layerBlending: string): Record<string
 export function setLayerBlending(_gl: unknown, _layerBlending: string): void {
   // no-op in deck.gl 9.x - blending is handled via parameters prop
 }
+
+/**
+ * Patch DeckRenderer to include depth-stencil attachments on post-processing
+ * framebuffers. In deck.gl 9, _resizeRenderBuffers creates FBOs with only color
+ * attachments, which breaks depth testing when post-processing effects are active.
+ * This was not an issue in deck.gl 8 where Framebuffer() auto-created a depth buffer.
+ */
+let _deckRendererPatched = false;
+export function patchDeckRendererForPostProcessing(): void {
+  if (_deckRendererPatched) return;
+  _deckRendererPatched = true;
+
+  const proto = DeckRenderer.prototype as any;
+
+  proto._resizeRenderBuffers = function _resizeRenderBufferPatched() {
+    const {renderBuffers} = this;
+    const size = this.device.canvasContext!.getDrawingBufferSize();
+    const [width, height] = size;
+    if (renderBuffers.length === 0) {
+      [0, 1].map((i: number) => {
+        const texture = this.device.createTexture({
+          sampler: {minFilter: 'linear', magFilter: 'linear'},
+          width,
+          height
+        });
+        renderBuffers.push(
+          this.device.createFramebuffer({
+            id: `deck-renderbuffer-${i}`,
+            colorAttachments: [texture],
+            depthStencilAttachment: 'depth24plus'
+          })
+        );
+      });
+    }
+    for (const buffer of renderBuffers) {
+      buffer.resize(size);
+    }
+  };
+}

src/utils/src/index.ts

@@ -82,7 +82,11 @@ export {
   isMSEdge
 } from './export-utils';
 export {getFormatValue, getDefaultTimeFormat} from './format';
-export {setLayerBlending, getLayerBlendingParameters} from './gl-utils';
+export {
+  setLayerBlending,
+  getLayerBlendingParameters,
+  patchDeckRendererForPostProcessing
+} from './gl-utils';
 export {flattenMessages, mergeMessages} from './locale-utils';
 export {isValidMapInfo} from './map-info-utils';
 export {