Jump to content

Run code after everything is rendered


Recommended Posts

Hi! I have pixijs app v5.2.0. There I have few filters, meshes, textures. 

I need to save result as an image. 
How can I determine when everything will be rendered,  filters applied, vertices updated and to call my save function? 
Is there some general event or best practice?

Link to comment
Share on other sites

In both cases you have to use webgl readPixels(), and pixi does it through "extract" renderer plugin or system, i dont remember where is it, please look up in the docs. I also suggest to read it sources code and prepare to debug it if something goes wrong - it really is not rocket science and there were many bugs there.

1. You can capture frame just after it being rendered, for that you have to add a ticker entry with even lower priority than render. Or change app render function. Read about gameloop here: https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

2. You can render it separately into RenderTexture of same size as screen. - That can be done at any moment , not just after render.

Do not use extract(container) because that way the size of texture will depend on size of container which can be big, who knows how many elements you have outside the screen.


Link to comment
Share on other sites

@ivan.popelyshev Thx for reply!
If I'm not mistaken ticker is more like eternal loop and does not help me to determine when all effects(changes to app) will be finished.
Within ticker I'm able to check when my mesh vertices are applied for instance but also I need to be sure everything is done. And it would be nice to react immediately within some event. 
Is there any way to achieve this?

Link to comment
Share on other sites

oh, changes, you mean all textures loaded? That's why pixi loader exists. However, if you use Texture.from() you can also do it -  check that all your textures are "valid", maybe with events from "baseTexture.on('loaded')" or just checking field "valid" all the time.

The trick I told you about putting it in ticker - its because you cant just read pixels from current screen at any time, it doesnt work on some devices. You have to do it just after render(), or do it in RenderTexture.

when my mesh vertices are applied for instance

Those things can be lazy only inside one frame. There's no delay between frames, like if you modified mesh after 6th frame, in 7th frame it will be shown for sure. The only real problem is textures or you doing some lazy stuff that pixi doesnt know about :)

Edited by ivan.popelyshev
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.

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.


  • Recently Browsing   0 members

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