Jump to content

Stop the PIXI rendering loop when texture are updated


Recommended Posts

Hi guys,

I have the following problem:


I have an app that shows 100 Sprites, but these change their texture on user interactions.

The problem is that I'd like to stop the PIXI animation loop after textures are updated (to stop the app using CPU while idle), but I can't.

The animation loop is simple:

animationLoop = function () {        var self = this;        self.renderer.render(self.stage); // Render the Stage        // Check if still animating        if (self.animating) {            // Continue animation loop (used with bind to have the right scope)            requestAnimationFrame(self.animationLoop.bind(self));        }};

I created some code to stop the animation after the textures are updated.

Pratically, after the method "sprite.setTexture()" is invoked on every Sprite, I just call

self.animating = false;

So that the animation loop ends.

But it doesn't work: PIXI needs a (random) number of iterations of the rendering loop to update textures!

So: is there any way to know when the texture are all updated?




Link to comment
Share on other sites

This doesn't directly address your question but in the context of your code above you should be using animationLoop.call, not animationLoop.bind.

like this:


In your code you are creating a new function object every frame unnecessarily. If you used Function.call instead then you would just be calling your existing function in the context you give it, rather than creating a new function.


Function.bind creates a new function in the specified context and returns a reference to it. So you should generally only call bind once and store the return value


var boundLoop = this.animationLoop.bind(this);

then you could pass that var to the RAF instead:

Link to comment
Share on other sites

Hi zarstar,


you need to provide some more code to solve this issue.

How and when do you start the loop?


Personally I would never stop the loop but do something like:

...this.boundLoop = this.loop.bind(this);...loop: function () { if(this.animating || this.forceRendering) {  this.renderer.reder(this.stage);  this.forceRendering = false; } requestAnimationFrame(this.boundLoop);}

That way you can stop the whole rendering process by setting this.animating = false, and still be able to force the rendering for the next frame without running into the issue that you render multiple times per frame by setting this.forceRendering = true;


Also your code looks weird. "animationloop = function" looks like a variable, but then you are referencing a property with the same name "this.animationloop". So, I'm not really sure what you are doing.

Link to comment
Share on other sites

Sorry Sebastian, it was "Pseudo code". I can't paste the whole code: it's too long.


However this is the "actual code" that I have now (I still have to remove the .bind()):

    ViewManager.prototype.animationLoop = function () {        var self = this; // Own reference for inner functions        var self = this; // Own reference for inner functions        TWEEN.update(); // Update animations        self.renderer.render(self.stage); // Render the Stage        // Check if still animating or if there are updates        if (self.animating || self.updatesCount !== 0) {            // Continue animation loop (used with bind to have the right scope)            requestAnimationFrame(self.animationLoop.bind(self));            self.flag = 0;        } else if (self.updatesCount === 0) {            if (self.flag < 50) {                requestAnimationFrame(self.animationLoop.bind(self));                self.flag += 1;                console.log(self.flag)            } else {                console.log("stop")            }        }    };

Pratically it runs 50 rendering loops after all updates are complete, but it still doesn't work: some sprites are updated and some sprites aren't.
But it's a "rendering problem", because in the exact moment that I replay the loop, they are updated (even if they are very big textures, so it means that they were downloaded and applied, just not rendered).

N.B.: the "self.flag" was just a testing variable.


Link to comment
Share on other sites

It could be connected with this PIXI code:

PIXI.WebGLFastSpriteBatch.prototype.renderSprite = function(sprite){    //sprite = children[i];    if(!sprite.visible)return;    // TODO trim??        if(sprite.texture.baseTexture !== this.currentBaseTexture)        {            this.flush();            this.currentBaseTexture = sprite.texture.baseTexture;            if(!sprite.texture._uvs)return;        }    ......


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