A configurator that leaks a texture per click, then fixed
"extra textures" counts textures above the number when each run began.
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
leaky extra textures after 1: +1 | after 5: +5 | after 20: +20
dispose old extra textures after 1: +1 | after 5: +1 | after 20: +1
reuse one extra textures after 1: +1 | after 5: +1 | after 20: +1
256 x 256 RGBA with mipmaps is about 341 KB each: 20 leaked colours cost about 6.7 MB