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

[jeafreezy]

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

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).

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

[Pessimistress]

@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]

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