What dispose() frees, one step at a time
Ten 1 x 1 pixel textures keep the counts easy to read. The pattern is the same for 2048 x 2048 ones.
three.js uploads geometries, textures and shaders to the GPU and never frees them by itself. dispose() frees them, but only the one object you call it on. A configurator that makes a texture per click leaks until the tab dies.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 4 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write swapMap(material, newTexture) that never leaks, and does not free a texture that is the same as the new one.
You remove a mesh with scene.remove(mesh) and renderer.info.memory.textures does not change. Why, and what do you add?
Explain it without notes
A configurator's memory grows by 340 KB at every colour click. Find the cause and give two fixes.
Why must you dispose a material's textures separately?
Console
Nothing logged yet.Expected console output
start geometries 0, textures 0, programs 0
10 things drawn once geometries 10, textures 10, programs 1
removed from the scene geometries 10, textures 10, programs 1
geometry.dispose() on all geometries 0, textures 10, programs 1
material.dispose() on all geometries 0, textures 10, programs 0
texture.dispose() on all geometries 0, textures 0, programs 0
one thing drawn again geometries 1, textures 1, programs 1