How can I determine the appropriate time to hide the loading screen after the model has been loaded with gltfLoader and before the scene is rendered?

Question

How can I determine the appropriate time to hide the loading screen after the model has been loaded with gltfLoader and before the scene is rendered?

I am currently working on a project using threejs version 106, where I have integrated both the webGLRenderer and CSS2DRenderer.

My main challenge lies in loading a glb model and displaying a loading progress bar utilizing the onProgress callback of the loader. Although I am able to hide the loading screen once the progress reaches 100% and trigger the renderer, there is a delay in rendering the geometries on the canvas.

Is there a way for me to determine when the assets are fully displayed on the screen so that I can remove the loading screen without causing any delays for the user?

Any assistance on this matter would be highly appreciated.

javascript three.js loader gltf

Answer 1

Answer №1

After your geometry and textures are done loading, they reside in RAM but are yet to be transferred to the GPU. The transfer to the GPU occurs only when you execute render(scene, cam) for the first time, provided these elements are part of the scene. This process often causes a bottleneck that results in a delay. The larger the assets, the longer the delay. My advice is to wait until after the initial rendering is complete before hiding the loading screen:

onLoadComplete() {
    update();
}

var firstRender = true;
function update() {
    // Initially, this may cause a slight pause
    renderer.render(scene, camera);

    // Hide loading bar after the first render
    if (firstRender) {
        firstRender = false;
        hideLoadScreen();
    }

    // Subsequent frames should run smoothly afterward
    requestAnimationFrame(update);
}

There are tools available that can assist in pre-uploading these assets to the GPU, eliminating the need to wait for the first frame.

renderer.initTexture(texture) can be utilized once each texture has completed loading.
renderer.compile(scene, cam) can be used to pre-compile materials & shaders if they are available before the geometry finishes loading.

Answer 2

After your geometry and textures are done loading, they reside in RAM but are yet to be transferred to the GPU. The transfer to the GPU occurs only when you execute render(scene, cam) for the first time, provided these elements are part of the scene. This process often causes a bottleneck that results in a delay. The larger the assets, the longer the delay. My advice is to wait until after the initial rendering is complete before hiding the loading screen:

onLoadComplete() {
    update();
}

var firstRender = true;
function update() {
    // Initially, this may cause a slight pause
    renderer.render(scene, camera);

    // Hide loading bar after the first render
    if (firstRender) {
        firstRender = false;
        hideLoadScreen();
    }

    // Subsequent frames should run smoothly afterward
    requestAnimationFrame(update);
}

There are tools available that can assist in pre-uploading these assets to the GPU, eliminating the need to wait for the first frame.

renderer.initTexture(texture) can be utilized once each texture has completed loading.
renderer.compile(scene, cam) can be used to pre-compile materials & shaders if they are available before the geometry finishes loading.

How can I determine the appropriate time to hide the loading screen after the model has been loaded with gltfLoader and before the scene is rendered?

Answer №1

Similar questions

Steps to reinitialize the error code after removal from the roster

Leveraging Vue properties within CSS styling

Converting user input from a string to an object in JavaScript: a comprehensive guide

Locate the Highest Number within a Multi-Dimensional Array and Store it in a Fresh Array

What is the process for obtaining a compilation of warnings from the next.js terminal?

Having trouble passing arguments to button methods in jasmine when applying vue and moment libraries

MongoDB does not treat aggregate match pipeline as equal to in comparisons

Troubleshooting problem with custom Angular directive integrating KineticJS

Show the Canvas element at the back of the DIV

What is the best method for showing jQuery/Javascript functions in the HTML <pre> element as a string

React- hiding div with hover effect not functioning as expected

Tips for resetting form fields and clearing previous values before resubmitting the form, allowing for a fresh start with empty fields

Ensuring form input validity in real-time using jQuery's keyup event

Please reset the form fields after the most recent edit

using props as arguments for graphql mutation in react applications

Conceal a division based on its numerical position

What is causing JS to malfunction and preventing App Scripts from running `doGet()` when using either `e` or `event` as parameters?

What is the best way to paginate a dynamically updated data table using AJAX in Laravel?

Three.js does not seem to be rendering the 3D text as expected

What makes Next.js API so special?