Three.js: webgl_loader_gltf memory problem

[harry-liu]

Description of the problem

in this tutorial, after switch models for many times the memory is grow quickly, is there any way to fix it?

https://threejs.org/examples/webgl_loader_gltf.html

Three.js version

• [ ] Dev
• [x] r89
• [ ] ...

Browser

• [x] All of them
• [ ] Chrome
• [ ] Firefox
• [ ] Internet Explorer

OS

• [x] All of them
• [ ] Windows
• [ ] macOS
• [ ] Linux
• [ ] Android
• [ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

[looeee]

Confirmed on Windows 10, Chrome Version 64.0.3282.71 (Official Build) beta (64-bit).

RAM usage is steady about 120mb, but every time I switch models GPU memory use jumps ~200mb.
Pretty soon it gets maxed out and then I get a black screen with the dreaded "Rats! Webgl hit a snag" message.

[takahirox]

The issue confirmed.

That example creates a new scene and a new renderer when switching model.
I speculate old resources aren't disposed correctly.

I'll look into later...

[donmccurdy]

I wonder if we should simplify the glTF examples... right now they’re more unit tests than anything else, and not a very helpful reference for developers... opened https://github.com/mrdoob/three.js/issues/13041

[mrdoob]

Closing this in favour of #13041

[takahirox]

I confirmed that main source of the issue is old resources aren't released.
Probably it wouldn't be better to switch model in an example, releasing all unnecessary resources with .dispose() while running application is a bit complicated for users as an example.
So, I think #13041 is one of the best ways for us.

(But I'm still wondered why old WebGLRenderer instance isn't automatically released... who holds the reference?)

BTW I found one minor feedback about resource management, I'll make PR later.