modelMatrix not working in Tile3DLayer

[radoslavirha]

Description

Hi,

I need to move some 3D tiles (Tile3DLayer) to 0 elevation. Using custom modelMatrix does not work it seems.

I discussed it on slack, but it seems to be a bug in deck.gl, not my bad implementation.

Thanks!

Flavors

• [ ] React
• [ ] Python/Jupyter notebook
• [ ] MapboxLayer
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [ ] DeckLayer/DeckRenderer for ArcGIS

Expected Behavior

Accept custom modelMatrix

Steps to Reproduce

const modelMatrix = new Matrix4().scale([1, 1, 0]);

const ion = new Tile3DLayer({
  id: "tile-3d-layer",
  data: TILESET_URL,
  loader: CesiumIonLoader,
  // modelMatrix,
  loadOptions: {
    "cesium-ion": { accessToken: ION_TOKEN }
  },
  _subLayerProps: {
    pointcloud: {
      modelMatrix
    }
  }
});

https://codesandbox.io/s/deck-gl-3d-tiles-forked-t2crt6?file=/src/App.js:1239-1607

Environment

• Framework version: 8.8.10
• Browser: Chrome 105.0.5195.125
• OS: macos 12.6

Logs

nothing

[radoslavirha]

Hi, can anybody confirm it's a bug? Thanks

[Pessimistress]

modelMatrix does not work in Tile3DLayer because Tileset3D does not support it. We should include this limitation in the documentation. You can open a feature request in loaders.gl.

[r2dev]

checking with the latest doc in loaders.js, modelMatrix has been added for Tileset3D. Add modelMatrix as part of loaderOptions doesnt seem to be working <Tile3DLayer data="/tileset.json" loaderOptions={{ '3d-tiles': { modelMatrix, }, }} />

is this the correct way to add modelMatrix to Tile3Dlayer?

"@deck.gl/core": "9.0.29" "@loaders.gl/core": "4.2.3"

[mghildiy]

@r2dev , could you find correct way of doing it? I tried it as:

const layer = new Tile3DLayer({
    id: 'tile-3d-layer',
    data: event.outputpath,
    loader:Tiles3DLoader,
    loadOptions:{modelMatrix:  new Matrix4().translate([0, 0, -100])},
    pointSize: 0.5,
    pickable:true,
    onTilesetLoad: (tileset: Tileset3D) => {
        // Recenter to cover the tileset
        const {cartographicCenter, zoom} = tileset as any;
        setInitialViewState({
            ...initialViewState,
          longitude: cartographicCenter[0],
          latitude: cartographicCenter[1],
          zoom:tileset.zoom
        });
      },
  });

But this doesn't work.

[mghildiy]

I tried this too after I saw this.

const layer = new Tile3DLayer({
    id: 'tile-3d-layer',
    data: event.outputpath,
    loader:Tiles3DLoader,
    pointSize: 0.5,
    pickable:true,
    onTilesetLoad: (tileset: Tileset3D) => {
        // Recenter to cover the tileset
        tileset.modelMatrix =  new Matrix4().translate([0, 0, -100]);
        const {cartographicCenter, zoom} = tileset as any;
        setInitialViewState({
            ...initialViewState,
          longitude: cartographicCenter[0],
          latitude: cartographicCenter[1],
          zoom:tileset.zoom
        });
      },
    
  });

But this too doesn't work.

[mohadib]

I can pass in a custom modelMatrix onTilesetLoad load. This works fine. I can not figure out a way to modify the modelMatrix after tilesetLoad and have the tiles re-render. Only way I have been able to have the layer update is changing the id of the layer. Is it possible to update the modelMatrix after the tileset has loaded, then have the layer re-render with the new modelMatrix? thanks.