[Bug] Tiles Disappear in Google 3D Tiles Map

[BharathKumarRavichandran]

Description

Hi, I am using deck.gl along with google-3d-tiles to incorporate a 3D Tile Layer. I've encountered an issue where black regions start appearing at the top of the map upon zooming in beyond a certain threshold. The color is black because the background color is black. So I guess the tiles disappear at that place. This only happens after a particular zoom factor, or if the pitch approaches 0, I am not sure what is going wrong here. I've included both the code snippet and screenshots for reference.

The initial view state coordinates of the study area are (29.7335, -95.2987). Interestingly, this issue doesn't occur for the region with coordinates (50.089, 14.42), which is included in the examples.

const newLayers = [
    new Tile3DLayer({
        id: 'google-3d-tiles',
        data: 'https://tile.googleapis.com/v1/3dtiles/root.json',
        onTilesetLoad: tileset3d => {
            tileset3d.options.onTraversalComplete = selectedTiles => {
                const uniqueCredits = new Set();
                selectedTiles.forEach(tile => {
                    const {copyright} = tile.content.gltf.asset;
                    copyright.split(';').forEach(uniqueCredits.add, uniqueCredits);
                });
                setCredits([...uniqueCredits].join('; '));
                return selectedTiles;
            };
        },
        loadOptions: {
            fetch: {headers: {'X-GOOG-API-KEY': import.meta.env.VITE_APP_GOOGLE_MAPS_API_KEY}}
        },
        operation: 'terrain+draw',
        strategy: 'no-overlap',
    })
];

Component:

<DeckGL
    initialViewState={deckGLViewState}
    controller={true}
    layers={layers}
    onViewStateChange={onViewStateChange}
>
    <div className={"credits"}>
        {credits}
    </div>
</DeckGL>

Screenshots for reference:

Discussion Link: #8641

Flavors

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

Expected Behavior

No response

Steps to Reproduce

import React, {useEffect, useState} from 'react';

import DeckGL from '@deck.gl/react';
import { LinearInterpolator } from 'deck.gl';
import { BitmapLayer, GeoJsonLayer } from '@deck.gl/layers';
import { Tile3DLayer } from '@deck.gl/geo-layers';
import { DataFilterExtension, _TerrainExtension as TerrainExtension } from '@deck.gl/extensions';


const PhotoRealisticMap = ({globalViewState, setGlobalViewState, simulationLayerData, superimposeStyle}) => {

    const [deckGLViewState, setDeckGLViewState] = useState({
        longitude: -95.2987,
        latitude: 29.7335,
        zoom: 18.3,
        pitch: 75,
        bearing: -16.27,
        maxZoom: 21
    });
    const [layers, setLayers] = useState([]);
    const [credits, setCredits] = useState('');

    const loadLayers = (simulationLayerData) => {
        console.debug("Loading photorealistic layers");

        const newLayers = [
            new Tile3DLayer({
                id: 'google-3d-tiles',
                data: 'https://tile.googleapis.com/v1/3dtiles/root.json',
                onTilesetLoad: tileset3d => {
                    tileset3d.options.onTraversalComplete = selectedTiles => {
                        const uniqueCredits = new Set();
                        selectedTiles.forEach(tile => {
                            const {copyright} = tile.content.gltf.asset;
                            copyright.split(';').forEach(uniqueCredits.add, uniqueCredits);
                        });
                        setCredits([...uniqueCredits].join('; '));
                        return selectedTiles;
                    };
                },
                _subLayerProps: {
                    scenegraph: {_lighting: 'flat'}
                },
                loadOptions: {
                    fetch: {headers: {'X-GOOG-API-KEY': import.meta.env.VITE_APP_GOOGLE_MAPS_API_KEY}}
                },
                operation: 'terrain+draw',
            }),
        ];
        setLayers(newLayers);
    };


    useEffect(() => {
        loadLayers(simulationLayerData);
    }, []);

    return (
        <div className={`deck-map-container`}>
            <DeckGL
                initialViewState={deckGLViewState}
                controller={true}
                layers={layers}
                onViewStateChange={onViewStateChange}
            >
                <div className={"credits"}>
                    {credits}
                </div>
            </DeckGL>
        </div>
    );
}

export default PhotoRealisticMap;

Environment

• Framework version: [email protected]
• Browser: Brave - Version 1.63.165 Chromium: 122.0.6261.94 (Official Build) (arm64)
• OS: macOS

Logs

No response

[Pessimistress]

You may try setting farZMultiplier manually. The default far plane is calculated assuming everything is at sea level.

Meanwhile, I concur that this is not a great default behavior - ideally the camera should point at the altitude on the terrain surface and adjust its frustum accordingly.