Monitor Geometries and Textures in Three.js GPU Memory

This article explains how to monitor active geometries and textures in GPU memory using the WebGLRenderer.info object in Three.js. You will learn how to access real-time memory telemetry, understand the specific properties of the info.memory object, and use this data to detect and prevent memory leaks in your 3D WebGL applications.

Understanding the renderer.info Object

In Three.js, the WebGLRenderer contains an info property. This property is an object that holds series of statistical information about the current state of the WebGL context and GPU memory.

By querying renderer.info.memory, you can get a direct count of the active resources currently allocated in GPU memory. This is crucial because JavaScript’s garbage collector cannot automatically free GPU resources; they must be tracked and disposed of manually.

Accessing Memory Statistics

The renderer.info.memory object contains two primary properties for tracking assets:

• geometries: The total number of active geometries currently registered in GPU memory.
• textures: The total number of active textures currently registered in GPU memory.

Here is how you can access these values in your JavaScript code:

// Assuming 'renderer' is your Three.js WebGLRenderer instance
const activeGeometries = renderer.info.memory.geometries;
const activeTextures = renderer.info.memory.textures;

console.log(`Active Geometries: ${activeGeometries}`);
console.log(`Active Textures: ${activeTextures}`);

Implementing Real-Time Monitoring

To effectively monitor your application’s memory footprint during runtime, you can log these values inside your main animation loop or update a diagnostic UI overlay.

function animate() {
    requestAnimationFrame(animate);

    // Render the scene
    renderer.render(scene, camera);

    // Output GPU memory info to the console or a DOM element
    document.getElementById('stats-overlay').innerText = 
        `Geometries: ${renderer.info.memory.geometries} | ` +
        `Textures: ${renderer.info.memory.textures}`;
}

Detecting Memory Leaks

The primary use case for monitoring renderer.info.memory is identifying memory leaks during object creation and destruction.

When you remove a mesh from your scene using scene.remove(mesh), the underlying geometry and texture remain in GPU memory. If you do not explicitly release them, the geometry and texture counts in renderer.info.memory will continuously rise as you spawn new objects.

To properly free GPU memory, you must call the .dispose() method on the geometry and material textures:

function removeMeshAndCleanGPU(mesh) {
    scene.remove(mesh);

    // Free the geometry from GPU memory
    if (mesh.geometry) {
        mesh.geometry.dispose();
    }

    // Free the texture from GPU memory
    if (mesh.material) {
        if (mesh.material.map) mesh.material.map.dispose();
        mesh.material.dispose();
    }
}

By calling .dispose(), you will see the geometries and textures counts inside renderer.info.memory immediately decrease, confirming that the GPU memory has been successfully freed.