[Bug] Unrendered sections in Tile3DLayer using maplibre.gl and deck.gl

Description

Using Tile3DLayer as a maplibre.gl map overlay I find that on flat surfaces in particular unrendered sections occur, see the following two screenshots for an idea what these holes look like:

The following code is the core of the custom deck.gl layer added in interleaved mode for maplibre-gl:

class MaplibreOverlay extends MapboxOverlay {
  override onAdd(map: any) :HTMLDivElement {
        (<any>this)._map=map; // circumvent type collisions between maplibre and mapbox map classes
        return (<any>this)._interleaved ? (<any>this)._onAddInterleaved(map) : (<any>this)._onAddOverlaid(map);
    }
}

tile3DLayer = new Tile3DLayer({
      id: tile3DLayerId,
      data: url,
      pickable: true,
    })
    
overlay = new MaplibreOverlay({
      interleaved: true,
      layers: [
        this.tile3DLayer
      ]
    });

map.addControl(overlay);

I have experimented with most of the depthTest related settings; turning the depthTest off for example results in a layer without unrendered sections:

But obviously this messes up the geometry:

The initial hypothesis I had was that there was some sort of z-fighting going on between maplibre.gl and deck.gl. However this hypothesis can be disproven as similar behavior occurs with pure js deck.gl:

The above was accomplished using the following code:

import {Deck} from '@deck.gl/core';
import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
import {Tile3DLayer} from '@deck.gl/geo-layers';

const INITIAL_VIEW_STATE = {
  latitude: 52.377956,
  longitude: 4.897070,
  zoom: 10,
  bearing: 0,
  pitch: 45
};

new Deck({
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  layers: [
	new Tile3DLayer({
		id: 'tile-3d-layer',
		pointSize: 2,
		data: '.../tileset.json',
		loader: Tiles3DLoader
	})
  ]
});

I have tried most parameters available to control both luma.gl and deck.gl, depthRange seemed to impact the rendering the most:

parameters: {
        depthTest: true,
        depthRange:[0.0, 0.6]
}

parameters: {
        depthTest: true,
        depthRange:[0.0, 0.001]
}

parameters: {
depthTest: true,
depthRange:[0.3, 1.0]
}

parameters: {
        depthTest: true,
        depthRange:[0.3, 1.0]
}

There is also a viewing angle dependency as it appears (first image top-down, second image slightly tilted camera):

parameters: {
depthTest: true,
depthRange:[0.3, 0.3001]
}

      getPolygonOffset: () => {
        return [-1, -1];
      },

Not sure if related, luma.gl states the following warning, I assume this is related with maplibre.gl and deck.gl interleaving:

Any help and tips on how to proceed are highly appreciated!

Flavors

• Script tag
• React
• Python/Jupyter notebook
• MapboxOverlay
• GoogleMapsOverlay
• CartoLayer
• ArcGIS

Expected Behavior

No response

Steps to Reproduce

import {Deck} from '@deck.gl/core';
import {Tiles3DLoader} from '@loaders.gl/3d-tiles';
import {Tile3DLayer} from '@deck.gl/geo-layers';

const INITIAL_VIEW_STATE = {
  latitude: 52.377956,
  longitude: 4.897070,
  zoom: 10,
  bearing: 0,
  pitch: 45
};

new Deck({
  initialViewState: INITIAL_VIEW_STATE,
  controller: true,
  layers: [
	new Tile3DLayer({
		id: 'tile-3d-layer',
		pointSize: 2,
		data: '.../tileset.json',
		loader: Tiles3DLoader
	})
  ]
});

Environment

• Framework version: deck.gl@9.0.32
• Browser: Chrome Version 130.0.6723.117 (Official Build) (64-bit)
• OS: Linux Ubuntu / Windows 11

Logs

No response

Start with the provided pure Deck Tile3DLayer reproduction, then compare it with the MaplibreOverlay interleaved setup and the depthTest and depthRange parameters. Reproduce the missing sections at the stated view and camera angles, and consider the issue done when depth-tested Tile3DLayer geometry renders without holes in both setups.