deck.gl Google 3D Tiles and Masking

Description

I have used 3DTileLayer with a Cesium Ion data source in combination with Mask Extension to good effect, but have noticed that the same set up doesn't work if I switch to using a Google 3D Tile set.

See:

https://codesandbox.io/p/sandbox/viewer3d-with-points-forked-73mt5w?file=%2Fsrc%2FViever3D.jsx%3A205%2C15

Flavors

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

Expected Behavior

Id expect to see 2 circles revealing 2 masked datasets - 1 Cesium,. 1 Google.

Steps to Reproduce

See attached.

Environment

Framework version: 9.0.19
Browser: Chrome
OS: OSX

Logs

No response

Jun 19 '24 09:06 grahambates-code

I have encountered the same issue. Entire google maps/tiles are shown, geojson layer does not reflect any view. Not sure if that is related to elevation of 3d tiles somehow

Jul 05 '24 08:07 PawelStadnicki

Same issue at my end. I was trying to mask 3dTileLayer (from Google 3d tiles) with MaskExtension, but no luck...

Sep 17 '24 15:09 klushinsky

@grahambates-code what geometry were you using in the mask layer? I've noticed that it doesn't work with points (ie when ScatterplotLayer is responsible for the rendering), but does work with polygons. Modifying this example like so:

-      operation: 'terrain+draw'
+      operation: 'draw',
+      extensions: [new MaskExtension()],
+      maskId: 'buildings'
     }),
     new GeoJsonLayer({
       id: 'buildings',
+      operation: 'mask',
       data: BUILDING_DATA,
-      extensions: [new DataFilterExtension({filterSize: 1}), new TerrainExtension()],
+      extensions: [new DataFilterExtension({filterSize: 1})],
       stroked: false

works nicely:

https://github.com/user-attachments/assets/9ce02b9e-20ae-4b60-9c30-b61b760361f5

Nov 12 '24 10:11 felixpalmer

@felixpalmer I downloaded the sample code, and provided the exact changes and I can see all tiles, no filtering, no masking, like the feature did not exist

Nov 14 '24 11:11 PawelStadnicki

I tested this directly on the master branch, can you report what version, browser & OS you are using?

Nov 15 '24 13:11 felixpalmer

I checked on macos and Windows, chrome & arc.

Are your suggested modifications complete?

For instance I had to import MaskExtension, and after stroke: false there is plenty more setup for the GeojsonLayer that you have not marked for deletion.

Last but not least, I dont see the UI to change the distance and opacity like you presented.

"dependencies": { "d3-scale": "^4.0.0", "deck.gl": "^9.0.0" }, "devDependencies": { "typescript": "^4.6.0", "vite": "^4.0.0" }

Nov 20 '24 10:11 PawelStadnicki

@PawelStadnicki to get the UI you need to run the website (cd website && yarn && yarn start). You are correct, I didn't list every detail in my patch, like the imports, just the relevant changes. It is a diff, not a complete example

Nov 20 '24 10:11 felixpalmer

I can confirm this works in the latest beta 9.1.0-beta.1.

Note: I had to remove strict mode.

import DeckGL from '@deck.gl/react';
import { Tile3DLayer } from '@deck.gl/geo-layers';
import {MaskExtension} from '@deck.gl/extensions';
import {GeoJsonLayer} from "deck.gl";

const data = {
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "coordinates": [
                    -122.4194,
                    37.7749
                ],
                "type": "Point"
            }
        },
        {
            "type": "Feature",
            "properties": {},
            "geometry": {
                "coordinates": [
                    [
                        [
                            -122.42449644634436,
                            37.77394410346234
                        ],
                        [
                            -122.42449644634436,
                            37.772461698565195
                        ],
                        [
                            -122.42128850201573,
                            37.772461698565195
                        ],
                        [
                            -122.42128850201573,
                            37.77394410346234
                        ],
                        [
                            -122.42449644634436,
                            37.77394410346234
                        ]
                    ]
                ],
                "type": "Polygon"
            }
        }
    ]
};

// React component with Deck.GL and useState for viewState
const MyDeckGLComponent = () => {
    const [viewState, setViewState] = useState({
        longitude: -122.4194,
        latitude: 37.7749,
        zoom: 15,
        pitch: 45,
        bearing: 0,
    });

    return (
        <DeckGL
            initialViewState={viewState}
            controller={true}
            width={800}
            height={800}
            onViewStateChange={({ viewState }) => setViewState(viewState)}
            layers={[
                new Tile3DLayer({
                    id: 'google-3d-tiles',
                    data: `https://tile.googleapis.com/v1/3dtiles/root.json`,
                    opacity: 1,
                        operation: 'draw',
                          extensions: [new MaskExtension()],
                      maskId: 'buildings',
                    loadOptions: {
                        fetch: {
                            headers: {
                                'X-GOOG-API-KEY':'yourkey'
                            },
                        },
                    },
                }),

                new GeoJsonLayer({
                    id: 'buildings',
                    data: data,
                    operation: 'mask',
                    stroked: false,
                    filled: true,
                    pickable: true
                })

            ]}
            style={{ width: '100vw', height: '100vh' }}
        />
    );
};

export default MyDeckGLComponent;

Nov 24 '24 16:11 grahambates-code

It sort of works in beta 9.1.0-beta.1 but crashes moving the plane when you hit, or are very near, the max allowed pitch with high chrome cpu usage

To clarify: this happens with or without the Tile3DLayer

Update: The issue is not related to the Pitch, it happens whenever the mouse exit the viewport

here crashed