Loaders.gl with babylonjs (and cesium ion)

[techtruth]

Hello all! This I came across loaders.gl in my journey to bring the globe into a simulation in the web browser.

I have gotten somewhat into loaders.gl, but can't seem to make the viewport trigger the loading of the tiles, or get any tiles to load or reveal gltf files to load. I can get the metadata from preload method and can get the actual data from the load method, but no tiles load.

I'm currently bound to the babylonjs framework, and so would need babylon to do the rendering. I'm mainly looking to loaders.gl to get the data from the tile json, and also would need the loaders.gl viewport to trigger tiles for loading/unloading. Is my thinking correct in the way loaders.gl can be used? I believe so, but wanted to check.

The below code is my attempt to make this work in an example. Please assume all the babylon stuff like scene render loop and so on is taken care of. Is there another render loop I need to make the viewport/tiles work? Is there a loaders.gl 'scene render' I need to call with my babylon scene renderer?

Can anyone point me in the right direction here? I have built what I have so far from looking at the examples and figuring out the source code. Thanks!

const tilesetUrl = "https://assets.ion.cesium.com/96188/tileset.json"; //Open street map asset
let longitude = -73.935242;
let latitude = 40.73061;
let zoom = 10;

const headers = new Headers({
  Authorization: `Bearer DynamicAccessTokenForTileset`,
});

const options = {
  ion: { loadGLTF: true },
  fetch: {
    headers: headers,
  },
};

try {
  // Preload metadata for the tileset
  let metadataAccessTokens = {
    "cesium-ion": {
      accessToken: ION_ACCESS_TOKEN,
      headers: { Authorization: `Bearer ${ION_ACCESS_TOKEN}` },
    },
  };

  const metadata = await CesiumIonLoader.preload(
    tilesetUrl,
    metadataAccessTokens,
  );
  console.log("Metadata:", metadata); //This works

  // Load the tileset JSON
  let metaoptions = {
    ...options,
    ...metadata,
    ...metadataAccessTokens,
    isTileset: true,
  };
  const tilesetJsonWithExtension = await load(
    metadata.url,
    CesiumIonLoader,
    metaoptions,
  );
  console.log("Tileset JSON with Extension:", tilesetJsonWithExtension); //This works

  const tileset3d = new Tileset3D(tilesetJsonWithExtension, {
    onTileLoad: (tile) => {
      console.log("LOL WEE!", tile);
    },
  });  //This never calls the onTileLoad function

  //This never does anything that I can tell...
  const viewport = new WebMercatorViewport({ latitude, longitude, zoom });
  tileset3d.update(viewport);
  tileset3d.selectTiles(viewport);

} catch (error) {
  console.error("Error loading tileset:", error);
}```

[ibgreen]

One guess is that viewport needs some width/height extents as well. Maybe check the working example in the examples/website/... directory and strip away the Tile3DLayer rendering?