Adding GLTF model using scene.add() freezes the browser for 500+ms

Questions
, ,
1

Hello,

I’m creating a component for wordpress page, which will have multiple GLTF Models with animations.
since we cannot have 8+ webgl contexts in one page, and I cannot follow this :

because the component is different from page.

So, I’m using IntersectionObserver, whatever container comes in viewport, I append a canvas, add object to the scene and start rendering.

Now the problem is :
When adding model, i.e scene.add(model) everytime, The browser freezes for few milliseconds.
On profiling I can see 2 things taking up most of the resources :

  1. texImage2d
  2. getProgramInfoLog

Any ideas on how to make it smoother?

I can see there are some ways to load OBJ files, using WWOBJLoader2, but found no web worker way for GLTF,
and some more suggestions to use createImageBitmap or requestIdleCallback (These both are not supported in safari).

What are the options to smoothly add GLTF objects to the scene?

I need a solution which will work in all major browsers, so no experimental APIs,

Please suggest, I’d be really grateful

Thanks in advance!

1 Like
2

Are you working with Windows? There is a problem in Chrome (and other Chromium based browsers) in context with sRGB textures:

https://bugs.chromium.org/p/chromium/issues/detail?id=1256340

3

I am using windows, and a Chromium based browser,
I have also tested in Firefox as well, in that the texImage2D is not seeming to be the problem,
But the freeze is still the same,

three
three1176×424 38.4 KB

4

The decode overhead also seems to happen with Firefox.

You can workaround the issue by using WebGL1Renderer. However, that means you can’t use any WebGL 2 features.

5

I’ll give that a try, thanks :slight_smile:

6

How big are the GLTF files that you are loading?
If this helps: on my programs, I have an alternative scene with a rotating object that plays while everything is loading into your main scene. Once done, it switches to the main scene. It seems to transition well. One example is in the.solar system simulation that I am working on. It is a simple scene that, as far as I know should work on all browsers. I can post the code if you like.