Stop the PIXI rendering loop when texture are updated

[zarstar]

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?

 

Thanks

 

[alex_h]

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:

requestAnimationFrame(self.animationLoop.call(self));

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

eg

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

then you could pass that var to the RAF instead:

requestAnimationFrame(boundLoop);

[zarstar]

Thank you Alex_h!
I knew how bind worked, but I really didn't think about it... it could improve the performance!

[Sebi]

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.

[zarstar]

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.


 

[zarstar]

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

https://github.com/GoodBoyDigital/pixi.js/blob/master/src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js#L122

[zarstar]

I also tried to check at PIXI.Texture.frameUpdates and PIXI.texturesToUpdate, but their length is always 0 after a render loop (while the Sprite aren't updated yet).

[zarstar]

So isn't there any reference in PIXI about the Sprite Textures that still need to be rendered?