Model interactions performances issues

Hello everyone!

we’re facing some issues with the ShapeDiver viewer that are impacting mainly our phone/tablet users but also some desktop ones.

On a phone/tablet when the model is getting rendered it happen very often that the whole browser tab is fully reloading without any alert or warning. It seems that the device memory or processor are not able to handle the processes triggered by the Viewer.

On Desktop we never had this reload but it happen sometimes to see these kinds of errors in the console :

index-c4294c62.js:52 Uncaught RangeError: Array buffer allocation failed
    at arrayBufferConstructor_DoNotInitialize (<anonymous>)
    at new Uint16Array (<anonymous>)
    at qr.copy (index-c4294c62.js:52:99605)
    at qr.clone (index-c4294c62.js:52:102272)
    at Nn.copy (index-c4294c62.js:52:113819)
    at Nn.clone (index-c4294c62.js:52:113609)
    at index-c4294c62.js:6312:24823
    at TLe.load (index-c4294c62.js:6312:24961)
    at mze.updateData (index-c4294c62.js:6355:46924)
    at mze.updateNode (index-c4294c62.js:6355:50605)
index-c4294c62.js:30 Uncaught TypeError: Cannot read properties of null (reading '3')
    at Module.fme [as transformMat4] (index-c4294c62.js:30:87940)
    at PJ.unproject (index-c4294c62.js:39:237338)
    at JLe.pointerEventToRay (index-c4294c62.js:6355:41711)
    at zze.pointerEventToRay (index-c4294c62.js:6467:19776)
    at zFe.pointerEventToRay (index-c4294c62.js:6540:65105)
    at BVe.onPointerOut (index-c4294c62.js:6540:155540)
    at index-c4294c62.js:30:131978
    at Array.forEach (<anonymous>)
    at Wve.onPointerOut (index-c4294c62.js:30:131965)

or

Processing: image.png…

When facing those, the model disappear from the Viewer and we need to close the tab or sometimes the whole browser in order to be able to reload correctly the model. It seems that some objects are stored in the browser local storage or cache.

In our app we’re manipulating quite often the model materials to do these things:

  • mouse hover on some object by updating the object material
  • object selection by manipulating the object material
  • object visibility by manipulating the material opacity

To do those things we use the updateVersion method on the parent node of the object we want to update

This is our model : pr-02-vp-20240829-var143-sd-upload
You should be able to access our app with this model already loaded from this private link : The Wooder - Configurateur

After hours spent on tracking every method processing time and optimizing everything we can on our code we’re a bit stuck and can’t see where the issue comes from.

Any help would be really appreciated!

Thanks.

Reviewing the application’s source code will be essential to identifying this problem. Please register for an onboarding session here, during which we will be able to do this with you.

Hello @snabela
I’ve booked a session for next Tuesday.

I’ll be with our front end developer.
Thanks.

1 Like

@snabela attaching some additional info

Here’s a screengrab of the issue

To reproduce with this model : https://www.shapediver.com/app/m/pr-02-vp-20240910-var145-sd-upload-2

  • use this JSON for the cabinetJsonInput parameter
  • modify a few values and paste it in the Input (I usually use this to beautify my JSON https://jsonformatter.org/, then modify a few numerical values, then minify it and paste it on the phone)
  • usually on the 2nd or 3rd re-rendering of the model the page reloads (be careful to not reuse an already cached rendering of the model)

{"general":{"Generate 2D drawings":false},"plinthAttributes":{"PlinthType":1,"PlinthHeight":80,"PlinthOffset":20,"PlinthExistence":true,"PlinthThickness":19},"volumeAttributes":{"level_0":{"level_1":{"ID_0":{"do_ex":true,"do_hS":false,"do_pT":true,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":1,"div_ex":true,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"3","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":0,"level_2":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":"0","do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"ID_0":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":0}}},"ID_1":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":2,"div_ex":true,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":100,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":1,"level_2":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":"0","do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"ID_0":{"do_ex":true,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":22,"do_dw_rV":"0","hT":"1","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":0},"ID_1":{"do_ex":true,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":2,"div_ex":true,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":22,"do_dw_rV":"0","hT":"1","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":1,"level_3":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":"0","do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"ID_0":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":0},"ID_1":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":1}}}}},"ID_2":{"do_ex":true,"do_hS":false,"do_pT":true,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"3","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":2},"ID_3":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":5,"div_ex":true,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":50,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":3,"level_2":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":"0","do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"ID_0":{"do_ex":true,"do_hS":true,"do_pT":true,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":2,"div_ex":true,"div_ori":true,"div_dT":false,"div_dV":"","div_rV":0,"do_dw_rV":"0","hT":"3","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":0,"level_3":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":"0","do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"ID_0":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":0},"ID_1":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":1}}},"ID_1":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":true,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"1","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":1},"ID_2":{"do_ex":true,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":22,"do_dw_rV":"0","hT":"1","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":2},"ID_3":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":3},"ID_4":{"do_ex":false,"do_hS":false,"do_pT":false,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":false,"div_am":0,"div_ex":false,"div_ori":false,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false,"id":4}}}},"do_ex":false,"do_hS":false,"do_pT":true,"do_spl":false,"do_sA":2,"do_T":0,"dw_ex":false,"dw_pT":true,"div_am":4,"div_ex":true,"div_ori":true,"div_dT":false,"div_dV":false,"div_rV":0,"do_dw_rV":"0","hT":"0","dw_md_div_am":1,"dw_md_div_dT":false,"dw_md_div_dV":false}},"carcassAttributes":{"size":{"depth":900,"width":1800,"height":1200},"thickness":{"door":23,"topPanel":"19","backPanel":"20","leftPanel":"19","rightPanel":"19","bottomPanel":"19","interiorVerticalPanel":"19","interiorHorizontalPanel":"19"},"panelPriority":{"backOverpass":false,"sideOverpass":true}},"tablePanelAttributes":{"depth":1650,"width":1485,"existence":true,"thickness":50}}

Hello @Alan11,

thank you for your detailed report. We are currently looking into it!

One observation that I made already is that the line geometry is not very performant on iOS/mac devices. As you have a lot of lines on your object this might contribute to the problem. Maybe if you disable some of the lines, this could be a workaround for now.

We’ll update you as soon as we know about this issue.

Cheers, Michael

Hello @MajorMeerkatThe3rd

we will test this on a new model by going from dash lines to solid lines, + removing all the interior lines for drawers (removing what’s inside basically and only keep a crossed solid line on the front panel).

Let us know if you have more options to test.

Hello @Alan11,

the dashed lines aren’t even that big of an issue, but the lines around the knobs and handles are. On the browser side, there is no concept of rendering curves (or curved lines, circles, arcs, …), so curves are displayed with many small lines. This adds up to a lot of geometry.

Additionally, you can deactivate the caching from the viewer side by setting the general caching property to false. This should additionally free up some memory.

Removing the lines from the the knobs and handles will have the biggest impact though.

Cheers, Michael

Ok, let’s do in few steps.

  • update the model by removing dash lines + drawers interiors objets
  • add a control on our frontend to enable/disable the viewer caching prop so we could play around to see if there’s an impact or not
  • depending on the results we will think about a solution for the knobs, which I don’t see at the moment because we need to show them to our users. Is there another way to display rounded objects that is performing better?

Hello @Alan11,

Just so that there isn’t any misunderstanding. I didn’t mean to remove the knobs and handles completely, but currently you have lines around them. If it is possible to remove those lines, I’d suggest that.

Cheers, Michael

Ok, so you’re suggesting to just keep the material.
I’ll check that option with the guys in charge of the GH model.

Capture d’écran 2024-09-24 à 19.06.29

Hello @Alan11,

So the knobs and handles currently consist of the geometry with a material and a line surrounding it. The line is very fine and has a lot of segments which is definitely an issue with performance.

In this image I just extracted the line geometry of the knobs. I would suggest to remove that for performance reasons, if possible.

Cheers, Michael

Hello @MajorMeerkatThe3rd

we have removed the lines from all grips https://www.shapediver.com/app/m/pr-02-vp-20240925-var147-sd-upload-5/ but the issue is still happening…
After 4/5 updates of the model on my iPhone 15 Pro, the page reloaded.

Also I can replicate the crash with no grip on my model so it confirms that it’s something else.

Any other idea?

Hello @Alan11,

thank you for trying it out, we will investigate this further!

Cheers, Michael

We just made a new model where also removed all interior lines from drawers and removed dash lines from doors. It’s a bit harder to crash the Viewer but it’s still happening even without grips added to the model.

Please come back to us ASAP, as this is holding us from opening our service to the public.

Thanks.

We have disabled the viewer cache and the issue is still happening so it’s not related to this.
You can access our dev platform through this link if you want to have a try without the cache

DEV

Thank you @Alan11!

I just want to tell you that we are debugging this issue and will let you know once we have found the problem. Thank you for your patience.

Cheers, Michael

1 Like

Hello @Alan11,

please try your model again with the viewer version 3.3.3. This version includes some improvements regarding the memory management. In my tests on my iPhone 12 I was now able to load 20 consecutive updates without a crash (I just stopped at that point, it didn’t crash).

Please note that this version hasn’t been deployed yet to our platform, so the issue may still persist there for a few days.

Cheers, Michael

Hello @MajorMeerkatThe3rd
Ok, we’ll make the update through NPM and let you know.

Since the update to the 3.3.3 we had no page reload and no more memory error in the console!!
And the overall performance are way better.
We have enabled back the Viewer cache too.

This update saved our lives!

3 Likes

Many thanks for your trust in us!

1 Like