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

Questions
, , ,
1

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

2

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.

3

: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