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

[eoudejans]

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