GPU overload in 3D configurator

Questions
,
1

Hi everyone!

I’m having some problems with a 3d configurator developed in Vue.js, and I’m wonder if some of you could help me understand where the problem is.

Basically, I have a scene with a chandelier, every piece of it is a GLTF model that I load into the scene (rosettes, cables, pendants), I have imported and used OrbitControls to let the user view the chandelier from every angle.

At the very beginning, the controls is very smooth, but when the user starts to change settings, like cable lengths, pendants and so on, the scene began to be very laggy. I’ve noticed that the GPU is overloaded.

Every time that I load a new model to substitute another one already loaded into the scene (if the user changes a pendant or the rosette, etc.), I run this code:

while (scene.children.length > 0) {
    scene.remove(scene.children[0]);
}

Yes, I know that it is not the most elegant and low resources consumption solution, but when the new model is loaded it should be ok.

So, why the GPU it’s getting saturated over time?

2

Removing things from the scene doesn’t remove resources from the GPU - a bit more details on that in the docs.