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

jeafreezy commented 5 months ago

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
[X] 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