Importing gltf ArrayBuffers from loaders.gl

HI All,

I’m trying to use the 3D Tile loader from loaders.gl with Babylon.

Each tile is parsed using the gltf-loader which can serve either a post-processed json or glft array buffer.

I am able to parse the array buffer using:

function meshTileToMesh(tile: Tile3D, scene: Scene) {
    const arrayBuffer = tile.content.gltf.buffers[0].arrayBuffer;

    const file = new File([arrayBuffer], "test.gltf")

    const gltfFileLoader = new GLTFFileLoader()
    gltfFileLoader.loadFile(scene, file, (gltf) => {
        console.log(gltf);
    }, (error) => {
        console.log("progress")
    }, true);
}

Which I thought would append the meshes to the scene but this does not appear to be the case.

I can’t seem to get the SceneLoader to accept the arrayBuffer as it fails to parse.

Any guidance would be much appreciated.

  let file = new File([buffer], 'file.glb');
  SceneLoader.LoadAssetContainer(
      'file:',
      file
      ...

Hmm not sure if this is much help but I am able to load buffers this way ( need to add them to scene after with asset container )

Would you be able to reproduce that on the playground? Would be great to see what you are doing so we can help with that.

Pinging @bghgary just in case :slight_smile:

GLTFFileLoader isn’t meant to be used directly. GLTFFileLoader.loadFile is a hidden method used by the SceneLoader.

Based on the code snippet, it seems like you might be trying to load a gltf as a binary buffer? If so, you should convert it to a string and load it with as a string. Loading with a binary buffer is only for glb files.

@br-matt and @bghgary thanks for the tips!

RaananW I’m not sure how to minimally mock loaders.gl to post in the playground.

Using this:

const arrayBuffer = tile.content.gltfArrayBuffer;
const file = new File([arrayBuffer], "test.glb");
SceneLoader.LoadAssetContainer(
            'file:',
            file,
            this.scene,
            (container) => {
                const mesh = container.meshes[0];
                console.log('mesh', mesh);
            }
        );

I get the following error:
Unable to load from file:test.glb: /meshes/0/primitives/0: Mode 5 is not currently supported

So at least it is parsing.

I’ll try changing my Cesium Tileset to something that does not contain mode 5’s.

I’ll try changing my Cesium Tileset to something that does not contain mode 5’s.

From a quick glance that means maybe changing from triangle strip to triangle ?

It appears you are using Draco compressed glb with triangle strips. This is currently not implemented in the code. We can probably add it. Feel free to file a feature request on GitHub.

2 Likes