visgl / visgl/deck.gl

[Bug] Tile3DLayer: Always got error when load tileset.json file contains .b3dm ext

Open
#9,119 0 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

Description

Hi,

If tileset.json contains .b3dm uri (working well with Cesium ION)

"root": {
    ...
    "content": {
      "uri": "abc.b3dm"
    },

I always got this error (enabled debug in newDeck())

deck.js:82  deck: matching of ScenegraphLayer({id: 'tile-3d-layer-scenegraph-https://assets.ion.cesium.com/ap-northeast-1/2714376/dragon_low.b3dm'}): Invalid prop getPosition: 0,0,0 Error: Invalid prop getPosition: 0,0,0
    at validateProps (props.js:8:19)
    at _ScenegraphLayer.validateProps (layer.js:948:9)
    at LayerManager._updateSublayersRecursively (layer-manager.js:251:30)
    at LayerManager._updateSublayersRecursively (layer-manager.js:269:22)
    at LayerManager._updateLayers (layer-manager.js:221:14)
    at LayerManager.setLayers (layer-manager.js:161:14)
    at LayerManager.updateLayers (layer-manager.js:172:18)
    at _Deck._onRenderFrame (deck.js:719:27)
    at AnimationLoop._renderFrame (animation-loop.js:256:20)
    at AnimationLoop.redraw (animation-loop.js:154:14)

And this is full of my code

import {Tiles3DLoader} from "@loaders.gl/3d-tiles";
import {Tile3DLayer} from "@deck.gl/geo-layers";
import {Deck} from "@deck.gl/core";

const layer = new Tile3DLayer({
  id: 'tile-3d-layer',
  data: '/resources/model_02/tileset.json', // Ensure this is a valid URL to a tileset JSON file
  loader: Tiles3DLoader,
  onTileError: (err) => {
    console.error('Tile error:', err);
  },
  onTilesetLoad: (tileset) => {
    console.log('Tileset loaded:', tileset);
    // Optionally update the view state or perform other actions
    deckInstance.setProps({
      initialViewState: {
        longitude: tileset.cartographicCenter?.[0] || 0,
        latitude: tileset.cartographicCenter?.[1] || 0,
        zoom: tileset.zoom || 2.5,
      },
    });
  },
  pickable: true,
  pointSize: 2,
  getPointColor: [115, 112, 202],
});
const deckInstance = new Deck({
  initialViewState: {
    longitude: 10,
    latitude: 50,
    zoom: 2,
  },
  layers: [layer],
  controller: true,
  debug: true, // Enable debugging for more insights
});
Flavors
  • Script tag
  • React
  • Python/Jupyter notebook
  • MapboxOverlay
  • GoogleMapsOverlay
  • CartoLayer
  • ArcGIS
Expected Behavior

No response

Steps to Reproduce

I using this tileset.json and .b3dm files

https://github.com/CesiumGS/3d-tiles-samples/tree/main/1.0/TilesetWithDiscreteLOD

Environment
  • Framework version: deck.gl@9.0.27
  • Browser: Edge Newest
  • OS: Window10
Logs
deck: matching of ScenegraphLayer({id: 'tile-3d-layer-scenegraph-https://assets.ion.cesium.com/ap-northeast-1/2714376/dragon_low.b3dm'}): Invalid prop getPosition: 0,0,0 Error: Invalid prop getPosition: 0,0,0
    at validateProps (props.js:8:19)
    at _ScenegraphLayer.validateProps (layer.js:948:9)
    at LayerManager._updateSublayersRecursively (layer-manager.js:251:30)
    at LayerManager._updateSublayersRecursively (layer-manager.js:269:22)
    at LayerManager._updateLayers (layer-manager.js:221:14)
    at LayerManager.setLayers (layer-manager.js:161:14)
    at LayerManager.updateLayers (layer-manager.js:172:18)
    at _Deck._onRenderFrame (deck.js:719:27)
    at AnimationLoop._renderFrame (animation-loop.js:256:20)
    at AnimationLoop.redraw (animation-loop.js:154:14)
onError @ deck.js:82
raiseError @ layer.js:432
_handleError @ layer-manager.js:195
_updateSublayersRecursively @ layer-manager.js:266
_updateSublayersRecursively @ layer-manager.js:269
_updateLayers @ layer-manager.js:221
setLayers @ layer-manager.js:161
updateLayers @ layer-manager.js:172
_onRenderFrame @ deck.js:719
_renderFrame @ animation-loop.js:256
redraw @ animation-loop.js:154
_animationFrame @ animation-loop.js:244
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
requestAnimationFrame
requestAnimationFrame2 @ request-animation-frame.js:9
_requestAnimationFrame @ animation-loop.js:225
_animationFrame @ animation-loop.js:245
Show 108 more frames
Show less

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the issue with Tile3DLayer, Tiles3DLoader, and the Cesium TilesetWithDiscreteLOD sample, then follow the generated ScenegraphLayer path from the reported validation error. Compare the loader output for the .b3dm content URI and verify that the tileset renders without the invalid getPosition error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
data-visualization, frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.