Detect when view has been rendered?

[patrickfabrizius]

Hi!

Is there a way to know when a container is fully rendered? I often trigger animations after setting up a view (container with sprites, text, rects etc) but on slower computers the animations are sometimes half-way done before the actual view is rendered. 

I use PIXI.loader with a progress that waits for all assets to load, so everything should be in memory. Not sure if the delay is because some textures are not fully stored in memory or if it's the actual rendering of sprites. 

I have looked at container.renderable, container.worldVisible, sprite.texture.baseTexture.isLoading / hasLoaded, but they are no different right after initializing my view from a couple of seconds later. 

What I'm basically looking for is a container.isRendered, or a sprite.isRendered so I can iterate thru them and call an event telling my game the view is fully rendered?

I've noticed that the main thread is often hogged (requestAnimationFrame) for 100-1000 ms after initializing the view, I guess I could use the first requestAnimationFrame after init but that seems unreliable. 

Anyone else with the same problem and/or a smut solution?

[xerver]

Rendering is synchronous. When renderer.render() returns, all of it has been rendered.

[Fatalist]

3 hours ago, patrickfabrizius said:

I guess I could use the first requestAnimationFrame after init but that seems unreliable

It should be reliable, that's what requestAnimationFrame is for.

Another way -  use readPixels to force synchronization. Put this after .render() :

renderer.gl.readPixels(0, 0, 1, 1, renderer.gl.RGBA, renderer.gl.UNSIGNED_BYTE, new Uint8Array(4));

 

31 minutes ago, xerver said:

Rendering is synchronous

 

-  on the javascript side, but it can take some time before the GPU actually renders things on the screen.

[patrickfabrizius]

5 hours ago, Fatalist said:

It should be reliable, that's what requestAnimationFrame is for.

Another way -  use readPixels to force synchronization. Put this after .render() :

renderer.gl.readPixels(0, 0, 1, 1, renderer.gl.RGBA, renderer.gl.UNSIGNED_BYTE, new Uint8Array(4));

Thanks guys!
Ok, so (simplified), instead of: 

container.addChild(mySprite);
startAnimations();

I should be able to do something like: 

container.addChild(mySprite);
requestAnimationFrame(() => { startAnimations() });

And the startAnimations() method would run first after everything is up and ready?

I tried it, and it seems to work. Just worried that requestAnimationFrame in some odd cases would find an available frame before the PIXI internals are completed, but it should be safe you think? 

The other method looks interesting, but only seems to apply to the GL renderer? I still use canvasRenderer for some devices, since GL is still poorly implemented in eg IE and Safari ... 

[xerver]

7 hours ago, Fatalist said:

  on the javascript side, but it can take some time before the GPU actually renders things on the screen.

It should flush with the rest of the browser render though, shouldn't be a case where the page is rendering but your webgl app isn't (which is what I understood to be what OP said was happening, maybe I misread).

[Fatalist]

10 hours ago, patrickfabrizius said:

And the startAnimations() method would run first after everything is up and ready?

Yes.

10 hours ago, patrickfabrizius said:

Just worried that requestAnimationFrame in some odd cases would find an available frame before the PIXI internals are completed

render() is synchronous, nothing can run after you call it and before it returns. And requestAnimationFrame guarantees the GPU is done drawing as well.

10 hours ago, patrickfabrizius said:

The other method looks interesting, but only seems to apply to the GL renderer? I still use canvasRenderer for some devices, since GL is still poorly implemented in eg IE and Safari ... 

For canvas there is a similar trick with getImageData(), but requestAnimationFrame is better anyway.

 

7 hours ago, xerver said:

shouldn't be a case where the page is rendering but your webgl app isn't

The way I understood, the problem is that he wants to have let's say a 2-second animation, but because initial rendering takes 1 second, he sees a frozen screen for 1 second and then only one second of animation.

[patrickfabrizius]

Thanks, will continue testing, works like a charm thus far. 

7 hours ago, Fatalist said:

The way I understood, the problem is that he wants to have let's say a 2-second animation, but because initial rendering takes 1 second, he sees a frozen screen for 1 second and then only one second of animation.

My problem is that I prep the view (create sprites etc) and then instantly init my animations. I have a requestAnimationFrame-dependent animation module that counts ticks since last call, and animate accordingly (so that animations run for the same amount of time regardless of FPS). The first requestAnimationFrame after the animation has been created has a high tick-value (in some cases up to 500ms because everything is frozen due to rendering), thus an animation with a duration of say 1000 ms could start animating from the middle once the container is displayed.

[themoonrat]

I believe some of your pause maybe due to uploading textures to the GPU for the first time. You may want give the prepare plugin a go

http://pixijs.download/v4.3.4/docs/PIXI.BasePrepare.html

renderer.plugins.prepare.upload(textureOrContainer);

Upload all of your textures after loading has ended, but before you've hidden the loading screen.

 

[patrickfabrizius]

Thanks, I'll check it out!

8 minutes ago, themoonrat said:

I believe some of your pause maybe due to uploading textures to the GPU for the first time. You may want give the prepare plugin a go