Callback or event when first frame is rendered?

Questions
,
1

Is there some way to know exactly when the first frame is rendered to the canvas for the purpose of hiding the loader at the right time without seeing a black canvas? I am already using the callback from TextureLoader to update progress of my loader, but this does not correspond with the first frame being rendered. The best I can do right now is add an additonal 1 or 2 second delay after all assets are loaded before hiding my loader, but this isn’t ideal because different systems take more or less time to render the first frame. Thanks for your help.

2

You can render the first frame outside the animation loop at the end of your module code and add some calls before or after that.

Then you can start the animation loop.


function render() { renderer.render(scene, camera) }

const animationLoop = newtime => {
  ...
  requestAnimationFrame(animationLoop);
  ...
  render();
};

// code before the first render

render(); // first time render

// code after the first render

animationLoop(); // start animation loop
2 Likes
3

How would this help? I still don’t know how long the first render will take.

4

if you put your code here, it’ll be executed right after the first render is finished, regardless of how long it would take.

5

@neoshaman –

This is just some additional explanation. Rendering does not happen automatically. Your program initiates (triggers) the first render. So you have a full control when the first render will start. You might consider these options for hiding the loader icon:

  • First prepare all necessary things (incl loading assets) and then initiate the first render. This is what @tfoller suggests you, and I also think this is the best way. The code that @tfoller provided above is for manual handling of the animation loop. If you use the automatic handling with the setAnimationLoop method, then call this method after loading all assets, to achieve the same result.
  • Alternatively, you can start the rendering as it is now, but add a flag, that is set at the end of the animation loop function. Inside the loop you check the flag, and if it is not set, then this is the first render and you can hide the loader icon. This is not so good approach, because you will keep checking the flag at every loop.

– Pavel