Web worker still janks main thread

I’m having a strange issue with a fairly complex ThreeJS scene. I’ve spent a few days moving the entire 3D scene to an offscreencanvas and I’ve moved the loading of my GLB files and texture maps to a web worker. This all works and I’m able to render the scene and it all looks the same as it did before, when I had a traditional canvas element.

However, I have a loading spinner on my page and after all the assets have loaded and I render the scene, the spinner starts janking. I’ve tried adopting a method where all my 3D objects are invisible and I reveal them one at a time, on each iteration of the render loop until they are all visible, and I can clearly see my spinner is becoming janky when the scene renders some glass objects with reflections on. I saw this same behaviour before, with the traditional canvas so I guess this is an intensive undertaking for the renderer.

But why am I seeing this jank on the main thread!? I’ve had a look through Chrome’s Memory tab but I must confess I don’t really know what I’m looking at in there. I can’t share a demo, unfortunately because the project is commercially sensitive and still in R&D, but can anyone shed any light at all on what on earth is happening please? Or perhaps point to me how I might be able to see separate memory threads in Chrome’s dev tools? Perhaps my web worker has simply max’d out its thread?

Thanks so much for any pointers

EDIT:

@Kaiido Loading the GLB and image files is now faster and has no effect on the main thread, so using the web worker isn't entirely for nothing.

Here is a screen grab of Chrome's Performance tab, but to be honest I don't really know what I'm looking at! :

and here's what I see when I type about:gpu:

So I guess it really is just the demands I'm putting on the Graphics Card? At the end of the day, I have a fairly complex 3D character with skeleton animations and facial morphs in an office environment, but I've already spent weeks reducing the sizes of my texture maps, changing to the simplest 3D material types in ThreeJS and massively optimising my animation frames. I don't know what more I can do! And I'm also revealing as single 3D object at a time so that the renderer can take a breath in between initialising each one.

Is there really no way to use the separate memory threads available on my GPU? :o(

The Web-Worker + OffscreenCanvas setup will allow to move all the CPU work on a concurrent thread.

But the GPU work is still done on a single GPU process. So if your GPU process is locked by one of the threads, the other one will also be locked, even if the CPU thread is actually free.

You can check your dev-tools's Performance tab to check exactly where's the bottleneck in your app, and if indeed it's in the GPU thread that it locks.
One long-shot workaround could be to force your spinner to use software acceleration instead of GPU acceleration. Not seeing how it's done currently it's hard to tell what you should change, but you can start a deaccelerated 2D canvas doing canvas.getContext("2d", { willReadFrequently: true }) and you can probably use that 2D context do implement your spinner.