Three.js Gets laggy after few route changing with Vue.js

Hi guys!

I have a problem with optimisation of my Three.js code. To give you some overview in my web app there are two pages that I want to have 3D effects. Some model loading and (more importantly) HDRI loading.

Thing is, on Firefox everything works like a charm but on chromium-based browsers, after some Vue.js route changing (changing route via navbar, without reloading the page) both scenes get extremely laggy. I am aware that everytime route is changed scene is made up from scratch and all resources are loaded again and again, stacking somewhere in RAM and I assume that’s the problem because:
image

My theory is also reinforced by the fact that quick “f5” refresh solves the issue - untill I change the route again few times, then it’s laggy again :wink:

Maybe I should use one renderer in whole app and just set-up the scenes on route change - let me know guys what you think!

Is there any way to reuse old context or optimise it in some way?

Looking forward for any help haha
Best regards

Be sure to dispose of things, particularly renderer.dispose(), when you no longer need them. I don’t think the browser’s garbage collection will necessarily clean up unused WebGL resources after route changes.

:point_up: This is the approach I would recommend. Create your WebGL context once, and load all textures, shaders, geometries only once. When you don’t need it to be visible, hide the canvas with v-show, instead of using v-if to prevent it from being destroyed. This way you can show/hide it an infinite number of times without having to re-load all your assets each time.

Just make sure you pause your render loop when the canvas is not visible! :wink:

1 Like