Problem about memory when "lazy loading" glb files

Hi everybody,
I’m new here, glad I joined this community.
About my problem.

I have a list 475 *.fbx files, then I built a console C# program, to convert and compress in mass with draco to *.glb file base on fbx2gltf.
Now I have a list 475 *.glb files, with max file size about 15Mb, min file size about 3kb. With total 211Mb.

I have a viewer and use GLTFLoader to load 10 files/time.

When finish, browser take 1,5 Gb memory for this tab. And It’s not smooth when I rotate, zoom in/out in viewer.
So what should I do to improve performance ?
Thank you very much.

async function loadModelsInBatches(files, batchSize = 10) {
    const loader = new GLTFLoader();
    const dracoLoader = new DRACOLoader();
    dracoLoader.setDecoderPath('files/draco/');
    loader.setDRACOLoader(dracoLoader);

    for (let i = 0; i < files.length; i += batchSize) {
        const batchFiles = files.slice(i, i + batchSize);
        const loadPromises = batchFiles.map(file => {
            return new Promise((resolve, reject) => {
                loader.load(file, (gltf) => {
                    const object = gltf.scene;
                    viewer.context.getScene().add(object);
                    resolve(object);
                }, (xhr) => {
                    const percentComplete = Math.round((xhr.loaded / xhr.total) * 100);
                    console.log(`Loading ${file}: ${percentComplete}% complete`);
                }, (error) => {
                    console.error(`Error loading GLTF model from ${file}:`, error);
                    reject(error);
                });
            });
        });

        const loadedObjects = await Promise.all(loadPromises);
        console.log(`Batch ${i / batchSize + 1} loaded and added to the scene.`);
        loadedObjects.forEach(object => disposeHierarchy(object, disposeNode));
    }

    console.log("All models have been loaded in batches.");

    viewer.context.fitToFrame();

    function disposeNode(node) {
        if (node.material) {
            node.material.dispose(); 
        }
        if (node.geometry) {
            node.geometry.dispose(); 
        }
        if (node.texture) {
            node.texture.dispose(); 
        }
    }

    function disposeHierarchy(node, callback) {
        node.children.forEach(child => disposeHierarchy(child, callback));
        callback(node);
    }
}

Is it persistently not-smooth, or just sometimes stuttering but eventually returning to stable FPS?

Hi, the Flow as above will be smooth with a model of about 4-5000 objects.
If it’s around 10,000 objects, it’s not smooth when I drag the mouse and rotate it around. A few seconds later the rotation is smooth. But when I release the mouse and rotate to another angle, it doesn’t feel very smooth.

If you’re rendering 10k uninstanced objects, I’d be surprised to be getting any FPS at all :eyes: Consider optimising the scene a little.

This is most likely caused by materials setup - the first time a material appears in the camera viewport, it’s compiled on the GPU, which causes a short frame stutter.

Are you using raycasting? If the camera stutters only when the rotation is initiated, there’s a chance you’re doing some heavy calculations when pointer is pressed?

1 Like