How can I get better performance from the Viewer?

Help Developers
,
1

Hello, as I mentioned on another post, I’m working on a mobile app using Flutter and the Speckle Viewer, there are two things I’d like help with:

1- Performance isn’t great due to mobile hardware limitations, can I tweak the Viewer to maybe render the models in a lower resolution? Or maybe turn off the shadows?

2- The “Discussions” feature is something I want to implement in the app, is it an extension for the Viewer? How can I implement this in the Viewer?

Here’s a github page I’m using for testing, it’s the basic setup from the docs with a heavy model → https://matheus-rossetti.github.io/speckle_viewer_amv_vite/

It takes a while to load.

I look forward to contributing to Speckle in the future.

2

Hi @MatheuzDreher

Very interesting use case indeed!

Optimizing for mobile has not been one of our main focuses, however there are some things you can do in order to boost performance on low power devices especially. Several things come to mind actually, some already available in the viewer’s API, some less so but still achievable. I’ve made this live code example which compiles all of them together. Here’s what it contains:

Resolution Scaling

This has a big impact on performance, and even though it does not exist as a distinct feature in the viewer API, you can easily be implemented as shown in the live code example by extending the Viewer and overwriting it’s resize function to use scaled width and height, while keeping the underlying canvas style size the same so that it gets automatically scaled up/down. The value you scale the resolution by can vary based on your needs. In the example I’ve had it set to half res for example’s sake.

Render Output

By reducing the rendering pipeline output to just the color, you save a lot of GPU time by not rendering AO and it’s required additional passes. This is already available in the viewer API and it’s show in the live code example

/** Have the pipeline output only the color */
  viewer.getRenderer().pipelineOptions = {
    ...viewer.getRenderer().pipelineOptions,
    pipelineOutput: 2, // PipelineOutput.COLOR
  };

Disable Shadows

By disabling shadows you generally save GPU time by not requiring the fragment programs to sample the shadow texture. It’s already available in the API and it’s shown in the live code example

/** Disable shadows */
  viewer.getRenderer().setSunLightConfiguration({ castShadow: false });

Disable Multisampling

This is another thing that would go a long way to improving performance especially on low power devices like phones. Unfortunately, the viewer currently always employs multisampling and there is no (sane) way to turn it off.



I’ve tried the above steps while running the default model from your site on my shitty phone and from an unusable experience it became decent. By disabling multisampling it got beyond decent and even good however because that’s not yet available to turn off we’ll leave it out for now.

Resolution scaling and disabling multisampling are something we should definitely have available in the API as explicit options. Contributions are always welcomed, so if you fancy giving these a shot, feel free to do so! :winking_spockle:

This feature is a frontend specific one, so it the viewer library has nothing to do with it. I’m not the best person to give advice on how to implement it yourself, but maybe there is a way to use the already exiting implementation from our fronetend? Perhaps @dimitrie can provide more details here

Cheers

3

Unfortunately not an easy answer per se, beside “look at the code and copy paste what you need”. I appreciate this is not helpful, but the tl;dr of comments is:

  • they’re spatially positioned and keep track of camera location & target
  • we use the viewer’s api to project that in screen space, where we simply draw an absolute positioned div

On mobile, i believe the UX is rather simplified - you’d only need to do the projection for the location, and “on click” open up the comment thread in a sidebar.

A side question though now for the specklers here in: how could we make the viewer experience on mobile consistently better, given the tweaks above? The user story is simple: as a user, i want 60 fps on my (shit)phone too if possible.

Some thoughts:

  • fps monitor > disables stuff as alex demo’ed above if below x for y seconds post load
  • simply automatically disable stuff as alex demo’ed above on phones, and add settings to turn them back on