How important is not redrawing graphics?

[Estatematt]

Hi all.  I'm just learning pixi and I'm trying to adapt a canvas app to pixi.  In my canvas app, I had one method, drawAll().  It would loop through my data structure and draw everything to the context, even if it was exactly the same as the frame before.  I'm wondering how important it is performance-wise to reduce this sort of behavior. 
Can I clear/redraw a single PIXI.Graphics every frame and get the same 60fps?  Or should I restructure my application to keep track of a couple hundred separate PIXI.Graphics objects so that I can ignore recalculating the coordinates of all my shapes?  This would obviously be more of a pain in the ass.

 

Hope this makes sense without an example since my application is three thousand lines long.

[ivan.popelyshev]

Hello to you, and congratulations with first post!

Graphics object is very specific, if you clear() it, then all polygon coords will be re-calculated, and that's not good for javascript performance (recalculating graphics._webgl)

However, simple properties like "position", "scale", "rotation", "pivot" you can change every frame, its not a problem

Are you sure you need Graphics and not Sprites or Spine objects?

[Exca]

If the whole frame stays intact then you could do some logic to prevent render from being called in these situations. I have an invalidate-flag for that purpose which I update whenever rendering related values are changed or if there are tweens/animations playing.

Skipping idle frames is a great way to make sure mobile users dont drain their batteries as much as they would otherwise.

[Estatematt]

Yes.  My application draws lines on a grid and allows you to edit their brightness.  (here's a youtube demo of an old native version)

Before I had this sort of code.

for i in mySegments{
    mySegments.paint(context)
}

This obviously has to change now.  What I'm worried about mostly is once I've created my segment object and added it's PIXI.Graphics to the stage, how to keep track of it, edit, and delete it.

[Estatematt]

@Exca

Yes, I actually don't call draw in my canvas app unless there's user input since it's not a game.   I was considering putting an isDirty flag on each object with it's own Graphics so that I could call object.draw and not worry about recalculating all the coordinates in javascript.  I'm more worried about what pixi is doing in that situation.

[Exca]

Based on the video you have lots of static lines. Instead of changing the color of the line & redrawing it you could use tint property. For example draw it with full white color and then just tint it to wanted color. Clear & redraw when user does something to actually change the line.

That way the graphics doesn't get redrawn every frame but the tinting is done to the sprite that represents the graphics-object in it's current state. (I'm not 100% sure pixi does it this way, but quickly browsing through the source codes I'm pretty sure this is how it works).

[Estatematt]

@Exca  The tint is an intesting idea.  I was going to try and go through the GraphicsData and edit the coordinates and colors.  The demo you see there is actually written for openGL and it goes into the stack and does the same thing.  It was just a nightmare to code.

[ivan.popelyshev]

On 17.03.2016 at 6:21 PM, Estatematt said:

@Exca  The tint is an intesting idea.  I was going to try and go through the GraphicsData and edit the coordinates and colors.  The demo you see there is actually written for openGL and it goes into the stack and does the same thing.  It was just a nightmare to code.

That's also good idea, but dont forget to change webgl dirty flag

[xerver]

What I did before when making a "grid" background for an editing app I made, I drew one rect to a canvas and used that as the texture for a TilingSprite. When the user changed settings for what the grid should look like, I just redrew that one small square and updated the tiling texture.

[Estatematt]

@xerver Did exactly that! Worked like a charm

@ivan.popelyshev I did that with tinting worked great!  Curiously it did *not* work with lineColor in but so be it!