Static pixi stage: different ticker for rendering and for interactions?

[Sébastien Lorber]

Hi,

 

I have a very simple pixi application where I draw colored rectangles on a canvas on sitting on top of an html image background: https://build-iiygaoarfn.now.sh/

 

The stage does not really change over time, the only thing that changes is that when a rectangle is hovered on mouse events, the rectangle is highlighted (color/opacity) may change.

 

The problem is that my app can have like 6000 small rectangles on the same page, and the default Application ticker makes the browser work unnecessarily because it keeps re-rendering the same thing over time (until an interaction happen)

 

I've tried to disable the Application ticker and render myself when needed, but if I don't use a ticker it seems my js listeners are not called at all so interactions are not working anymore.

Is there a way to get my JS listeners be fired (interactive sprites), without using a render loop, so that my stage is not re-rendered on every frame?

 

 

 

 

 

[ivan.popelyshev]

Most of events are handled at the same time as mouse event is fired, so it should work, that means you are doing something wrong.

Also , I've told you to copy Application class and make your own.

Interactions are handled in shared ticker, not application one, and its not clear when is it called, because my suggest about moving InteractionManager outside was not accepted by other members of pixijs core team.

 

[ivan.popelyshev]

I suggest you place breakpoints in InteractionManager and figure out what happens when mousedown event is fired.

[Exca]

Interactions should not be dependant on the render-loop. Atleast my projects work properly with click & touch interactions even if I disable render loop. Do you have the broken version online somewhere?

[Sébastien Lorber]

Thanks, you are right.

Interactions did fire, it's just my refactor that broke listener registration...

I'm stil using Application, it's just I made it not autoStart, and I actually never start the underlying ticker.  I keep using the Application because it's constructed for me by the lib but it's clearly a hack, but it works fine like that.

I re-render my stage whenever the containers are changing, or when a word rectangle is hovered (when interaction listeners are fired), and not on every frame anymore.

 

Just wondering, when an item is hovered, is there a way to render only that item, or can I always re-render the whole stage?

 

https://build-lbilsfzcxu.now.sh/

 

[Exca]

Whole stage gets rerendered.

There are few hacks how you could make partial rererenders (multiple canvases, drawing everything to single texture and then just using that etc.), but those would be worse performancewise in your application.

[Sébastien Lorber]

@ivan.popelyshev wouldn't it make sense for Application to support a new option like "onlyRenderDirty" and a application.dirty = true attribute? that would permit to support my usecase more easily

 

https://github.com/pixijs/pixi.js/blob/dev/src/core/Application.js#L135

 

Something like

 

render()
	{  if ( options.onlyRenderDirty && this.dirty) {     this.renderer.render(this.stage);     }
	}

[Sébastien Lorber]

Thanks @Exca that's what I thought. There are opacity level differences so I guess it's technically not possible to erase a rectangle of a given opacity and redraw another one at the same place.

If there was not this opacity thing, would there be a solution to just re-draw a rectangle over the already-rendered rectangle so that it gets covered? (just for curiosity)

[Exca]

With 2d canvas yes, with webgl I don't think so.

[ivan.popelyshev]

Application is the basic class, its supposed to be cloned. Any extra capabilities will make it more difficult for people to clone.