SceneGraph Base64?

[jfuehner]

The SceneGraph Layer docs say the scenegraph property accepts a promise being returned which provides a luma.gl SceneGraph Node...

If I have a base64 encoded string, how would I go about constructing a luma.gl SceneGraph Node?

[ibgreen]

If I have a base64 encoded string

A binary string containing what? A glTF binary?

[jfuehner]

@ibgreen Correct, the string contains the glTF model data

[ibgreen]

If you decode it into an ArrayBuffer and pass it in, it should work.

Also, strings are usually interpreted as URLs. A data URL can be base 64 encoded. Have you tried adding the appropriate data URL header.

[jfuehner]

@ibgreen or could I construct the SceneGragh Node from an arrayBuffer?

I am receiving the glTF via web socket...

[jfuehner]

@ibgreen I took one of the examples from the deck website to simply try and return a manual arrayBuffer/ScenegraphNode from the scenegraph property...

However, I am receiving an invalid scenegraph: undefined error. Clearly I am doing something wrong. However, deck doesn't appear to call my scenegraph function...

Below is my layer configuration. Anything jumping out at you that might be off?

        new ScenegraphLayer({
          id: 'ScenegraphLayer',
          data: '/bart-stations.json',  
          _animations: {
            '*': {speed: 5}
          },
          _lighting: 'pbr',
          getOrientation: d => [0, Math.random() * 180, 90],
          getPosition: d => d.coordinates,
          scenegraph: async () => {
            const url = 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb';
            const response = await fetch(url);
            const buffer =  await response.arrayBuffer();
  
            return new ScenegraphNode(buffer);
          },
          sizeScale: 500,
          pickable: true
        })  

[Pessimistress]

You still need to parse your binary.

import {parse} from '@loaders.gl/core';
import {GLTFLoader} from '@loaders.gl/gltf';

new ScenegraphLayer({
  ...
  scenegraph: (async () => {
    const arraybuffer = await getGlbBuffer();
    return parse(arraybuffer, GLTFLoader);
  })()
})

or convert it to a blob URL:

const blob = new Blob([arraybuffer]);
const objectURL = URL.createObjectURL(blob);

new ScenegraphLayer({
  ...
  scenegraph: objectURL
});

[jfuehner]

@Pessimistress thank you for providing the examples; they are super helpful.

However, I still seem to be experiencing the invalid scenegraph: undefined error. I put together a quick CodeSandbox reproducing the issue. The App-mounted.js file contains the bulk of the code.

It is almost as if the scenegraph function is not being called...

[Pessimistress]

Apologies, you cannot supply a function to the prop. It needs to be a promise. I have corrected the code sample in my comment.