Unrendered sections in Tile3DLayer using maplibre.gl and deck.gl

[eoudejans]

Using Tile3DLayer as a maplibre.gl map overlay I find that on flat surfaces in particular holes 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 holes:

But obviously this messes up the geometry:

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

[eoudejans]

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:

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
	})
  ]
});

[eoudejans]

Documenting parameterization of deck.gl/luma.gl:
Default settings:

[eoudejans]

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

[eoudejans]

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

[eoudejans]

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

[eoudejans]

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]
}

[eoudejans]

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

[eoudejans]

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