Scenegraph framerate

[29942016]

We're trying to display gltf files in a scenegraph layer but have noticed that once loaded deckgl appears to have a severely reduced framerate, with 40mb files resulting in 10-30 fps and a 80mb file is almost unusable, around <10fps, these examples were done on a fresh node project with only deckgl. I have a suspicion it may be due to the complexity of the scene object, but i'm not 100% certain.

When loading these models using https://gltf-viewer.donmccurdy.com/ they're almost always 60fps with no stutter (afaik they both share the same loader, so i assume the framerate drop is either from deckgl or us not correctly using deckgl scenegraph layer). I'd like to know if there's anyway to achieve the same performance in DeckGL.

Here are the models we're using:
https://sense-structures-santos-dev-media.s3-ap-southeast-2.amazonaws.com/structures/Lamond.gltf
https://sense-structures-santos-dev-media.s3-ap-southeast-2.amazonaws.com/structures/Armada.gltf

The two models in a fresh project:

Any help is much appreciated, thanks!

[Clebal]

I cannot make work none of your models either in https://gltf-viewer.donmccurdy.com/ or deck.gl. THREE.GLTFLoader: Failed to load buffer "Lamond.bin"..

By the way, it's recommended that you give us an example about how are you using deck.gl ScenegraphLayer and then the community can help you in a easier way.

[29942016]

Sorry about that, thought the domain would automatically reference the bin files.

Here's the bins + gltf:

https://sense-structures-santos-dev-media.s3-ap-southeast-2.amazonaws.com/structures/Lamond.gltf
https://sense-structures-santos-dev-media.s3-ap-southeast-2.amazonaws.com/structures/Lamond.bin

https://sense-structures-santos-dev-media.s3-ap-southeast-2.amazonaws.com/structures/Armada.gltf
https://sense-structures-santos-dev-media.s3-ap-southeast-2.amazonaws.com/structures/Armada.bin

Layer usage:

viewStateChange callback

DeckGL initialization & properties:
<DeckGL controller={true} viewState={viewState} onViewStateChange={onViewStateChange} layers={layers} />

This can also be replicated by using the deckgl's example
https://deck.gl/docs/api-reference/mesh-layers/scenegraph-layer and running the codepen link, and then replace their gltf with ours.

[Clebal]

  <script type="text/javascript">
    const { DeckGL, ScenegraphLayer } = deck;
    const layer = new ScenegraphLayer({
      id: "scenegraph-layer",
      data: [
        {
          coordinates: [-122.466233, 37.684638]
        }
      ],
      scenegraph:
        "https://sense-structures-santos-dev-media.s3-ap-southeast-2.amazonaws.com/structures/Lamond.gltf",
      getPosition: (d) => d.coordinates,
      getOrientation: [0, 0, 0],
      sizeScale: 50,
      _lighting: "pbr"
    });

    const deckMap = new DeckGL({
      mapStyle:
        "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
      initialViewState: {
        latitude: 37.684638,
        longitude: -122.466233,
        zoom: 10,
        maxZoom: 16
      },
      controller: true,
      useDevicePixels: false,
      layers: [layer]
    });
  </script>

It's working very well in my laptop in a pure HTML/JS example. Setting useDevicePixels as false improve the performance, but without it it's not bad at all. Also, idk if you are interested about having mapbox under your model, but if that's not the case you can remove it. If the performance problem continue, I'd advice you to try in a HTML/JS pure project, maybe you have a performance issue with React.

I hope it helps!

[29942016]

Could i trouble you to try the Armada model too? that one is borderline unusable for me.

Also I really appreciate your suggestions, I'll go and test them soon and hopefully get some good results too!

Edit:
useDevicePixels: false was the culprit :) thanks @Clebal you're a lifesaver. Gone from unusable to a steady framerate now!

[Clebal]

I was already testing the Armanda model, and it's pretty usable despite of it's a little bit slower (25-35 fps). I'm so glad it worked for you! Thank you 😄