Jump to content

Detect when view has been rendered?


patrickfabrizius
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 ... 

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...