Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A 3D tile failed to load: undefined cannot read properties of undefined (reading 'BYTES_PER_ELEMENT') #8746

Closed
1 of 7 tasks
jeafreezy opened this issue Apr 2, 2024 · 2 comments
Labels

Comments

@jeafreezy
Copy link

jeafreezy commented Apr 2, 2024

Description

Hi, I am experiencing a strange bug when using deck.gl along with the Tile3DLayer to render point clouds with over 25m points. At first, I hosted the asset on Cesium Ion, using the CesiumIonLoader, it didn't work. I also downloaded the assets and hosted it on GCP, it's still the same. Suprisingly, I followed the example and it worked, it rendered on the map.

The point cloud renders on Cesium Ion

image

What I have tried:

  • I downloaded the tiled data from cesium and hosted on GCP, it didn't work still.
  • I used the direct .copc.las file using the PointCloudLayer, it didn't work as well.

What I noticed is that, the tiles are getting fetched (see attached).

image

image

Kindly help. Thanks.

Flavors

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

Expected Behavior

I expect to have the 3DTiled Point Clouds to be rendered on the webmap.

Steps to Reproduce

Here is the link to my tileset.json.

Dependencies:

  • "next": "14.0.4"
  • "react": "^18"
  • "loaders.gl": "^0.3.5"
  • "@loaders.gl/3d-tiles": "^4.1.4"
  • "deck.gl": "^9.0.3",

'use client'
import React, { useCallback, useState } from 'react'
import Map, { MapProvider, Source, Layer, Marker } from 'react-map-gl'
import { useRef } from 'react'
import { APP_CONFIG } from '@/utils/config'
import DeckGL from '@deck.gl/react'
import { Tiles3DLoader } from '@loaders.gl/3d-tiles'
import { Tile3DLayer } from '@deck.gl/geo-layers'

const TILESET_URL = 'https://storage.googleapis.com/external-geo-projects/GTE464_Crocodile_Lower_LAS/tileset.json'

const INITIAL_VIEW_STATE = {
  latitude: APP_CONFIG.MAP_CENTER[0],
  longitude: APP_CONFIG.MAP_CENTER[1],
  pitch: 45,
  maxPitch: 60,
  bearing: 0,
  minZoom: 2,
  maxZoom: 30,
  zoom: 17
}

const MapView = () => {
  const mapContainer = useRef(null)
  const [cursor, setCursor] = useState('auto')
  
  const onTilesetLoad = tileset => {
    // Recenter view to cover the new tileset
    const { cartographicCenter, zoom } = tileset
    setViewState({
      ...INITIAL_VIEW_STATE,
      longitude: cartographicCenter[0],
      latitude: cartographicCenter[1],
      zoom
    })
  }

  const layers = [
    new Tile3DLayer({
      id: 'tile-3d-layer',
      pointSize: 2,
      data: TILESET_URL,
      loader: Tiles3DLoader,
      onTilesetLoad
    })
  ]

  return (
    <MapProvider>
        <DeckGL
          controller={true}
          initialViewState={viewState}
          style={{ width: '100%', height: '100%', position: 'relative' }}
          layers={layers}
        >
          <Map
            ref={mapContainer}
            id='map'
            mapboxAccessToken=''"
            onMouseEnter={onMouseEnter}
            onMouseLeave={onMouseLeave}
            cursor={cursor}
            mapStyle={baseMap}
            
          >
            ...
    </MapProvider>
  )
}

export default MapView

Environment

  • Framework version: ^9.0.3
  • Browser: Chrome 1123.0.6312.86
  • OS: Windows 11 Home Single Language. OS build - 22631.3296

Logs

screely-1712040780563

@jeafreezy jeafreezy added the bug label Apr 2, 2024
@Pessimistress
Copy link
Collaborator

@ibgreen @belom88 The error is at

https://github.com/visgl/loaders.gl/blob/47f091c7d1d4650b469dc447eecad457cd85acc9/modules/draco/src/lib/draco-parser.ts#L354

attribute.data_type is 10 and TypedArrayCtor is undefined.

@iwmi-geospatial
Copy link

Update: After bumping to the latest version of Deck.gl, the Lidar data is now rendering on the map. Thank you so much everyone.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants