Pixi.js: performance PIXI : no GPU used? event handlers taking way too long to respond?

[gg4u]

Hi all, could someone help in briefing out how to debug and improve performance of my design?

My project is a graph-layout.
I am using containers() to group nodes' elements (as sprites with textures and other graphics() elements decorating the node).
I am binding events to each node: pointerDown and pointerUp.
I am implemented culling of nodes and edges: at render time for each element, I check if it is in viewport.
As a test, I am using the same layout engine I use for SVG version - still, webgl degrades worsely than SVG - very bad on iphone.

I tried to open profiler in chrome.
The first thing I don't understand is that there is no GPU memory: should it be used, shouldn't it ? Everything is on CPU.

The second thing I don't get is why an event (pointerDown) takes longer and longer to be handled, as long as the graph gets expanded.

PointerDown should fires instantly; instead, I can see it get slower and slower because filter is visually rendered after 1 - 2 seconds as soon as the graph get expanded of a few nodes.
The graph is actually expanded at pointerUp, but despite all the core computation for adding new nodes, edges and fetch new content is here, I don't see delay in handling the event.

This is the function of my handler, where ùi`is a Container() object.

ui.on('pointerdown', function(e){

        e.stopPropagation();

        touchStart = new Date();

        ticker.start();

        ui.selectedMarker.filters = [glowFilter];

        // update graphicsData object of a node 
        updateSelectedNodeInfo( node.id );

        // this code loads asynchronously content in my app, unless it is already cached
        if ( node.id != proxyPage.history[proxyPage.history.length - 1]) {
            proxyPage.history.push(node.id);


            param = {
                pageids : graph.getNode(node.id).data.source
            };

            observePage( param, pageCallback, setOpenFromGraph(false));

        };

    });

```
ui.on('pointerup', function(e){

    e.stopPropagation();

    ui.selectedMarker.filters = null;

    ticker.stop();

    var timeTouch = new Date() - touchStart;

    if ( timeTouch > touchDuration ) {

       // update graph
        param = {
            limit : getQueryLimit( node ),
            offset : getOffsetLimit( node )
        };

        addNeighbors(node, param);

    } 
} );

```

The effect I would like to have is that pointerDown() is responsive, independently if graph is still updating: a user should be able to see that node has been touched, I will be ok if then there is some time to wait.

What would you suggest to try improve performance?
Do you have suggestions for a better design, of the app of for handling events ?
How to free CPU and use GPU instead ?

[ivanpopelyshev]

The second thing I don't get is why an event (pointerDown) takes longer and longer to be handled, as long as the graph gets expanded.

Try specify filterArea for it so it doesnt try to calculate getBounds() of many objects that are inside the container. It shouldnt try to render 8000x1000because pixi clips the area, but calculation of area itself takes a long time. You can also override container calculateBounds() that way it doesnt go inside to all elements and returns something easy-calculated.

[ivanpopelyshev]

refs: https://github.com/pixijs/pixi.js/blob/dev/src/core/display/Container.js#L343

also, filterArea is in absolute coordinates, and calculateBounds operate with locals. choose the one you like more.

I will try to add "ignoreBounds" or something like that in future pixi versions so people will be able to ignore large arrays of objects in this calculation.

[gg4u]

Hi @ivanpopelyshev.
From your example, I understand that Container() would calculate the bounds going down to all children. It is possible to override the bounds with a rectangle areas.

I have not found filterArea on the documentation, but addBoundArea - is this that you mean?
Description is still incomplete (TODO)
http://pixijs.download/v4.2.3/docs/PIXI.Bounds.html#addBounds

Would you mind to provide an example to override the bound area of a container?

You mean something like ?

// overriding bounds, attempting to reduce lag time for listener events binded to Container()

ui._calculateBounds() = ui._bounds.clear();
ui._calculateBounds() = ui._bounds.addBoundsArea( new PIXI.Bounds(), new Rectangle( ui.position.x, ui.position.y, LENGTH_SIDE, LENGTH_SIDE) )

ui.on("pointerDown", myFunction)

Or do you mean to clear all bounds of children of ui Container() (since I won't use them for interaction) ? How to do this?

Structure is:
ui \\ container
ui.addChild( obj)
ui.addChild( obj2 )
...
\\ and for each
obj._calculateBounds() = null;
obj2._calculateBounds() = null;

?

[bigtimebuddy]

filterArea: http://pixijs.download/release/docs/PIXI.Container.html#filterArea

[ivanpopelyshev]

Something like that might work:

container.calculateBounds = function() {
    this._bounds.clear();
    this._bounds.addFrame(this.transform, x1, y1, x2, y2); //i dont know where to get those coords, its related to your architecture.
    this._lastBoundsID = this._boundsID;
}

And if you know for certain global coordinates of container, just do this:

container.filterArea = new PIXI.Rectangle(global_x, global_y, width, height);

I'm sorry that docs dont contain these things :(

P.S.
Judging by this snippet, I advice you to read the book . PIXI is working on top of javascript, and while tutorials work for everyone, most of advices in "issues" section dont work unless you know the language enough :(

obj._calculateBounds() = null;
obj2._calculateBounds() = null;

P.P.S. However, we are happy to help if you code something and it somehow doesnt work and you stuck

[ivanpopelyshev]

You can also make your own version of container (different syntax in ES5 and ES6, so i cant just post it) and override calculateBounds for entire class.

[gg4u]

thank you for your suggestions and for willingness to help if get stucked!
I tried filterArea, override of calculateBounds and hitArea associated to a container, but don't see a "quantitative" improvement in responsiveness of events.

What is hitting the most is the rendering of links, which I render as a graphics and still using culling techniques.
What I don't get is why the events gets longer to get triggered - in the example I gave, I think it should be executed immediately (pointerDown) and then all layout and rendering (in pointerUp) would follow.

@ivanpopelyshev , to try reduce impact of rendering graphics objects for visualising the links, I was trying to use Sprites and textures instead ( so that I can reuse the texture of 1pixelx1pixel ).
I am having a challenge in properly computing the coordinates between two vertexes.

Given that coordinates of vertexes are links properties, the following is working fine:

        graphics.lineStyle( 10, 0xcccccc, 1);
        graphics.moveTo(link.from.x, link.from.y);
        graphics.lineTo(link.to.x, link.to.y);

For the sake of trying to optimise performance, I am trying to replace graphics with sprites.
I use the same coordinates, but it looks like they are handled differently: the sprites do not overlap the graphics (link.to vertex is misplaced).

Attempt 1:

// link.from is the origin vertex

// compute angle in radiants of "link.to" vertex.
var angle = Math.atan2(link.to.y - link.from.y, link.to.x - link.from.x);

// compute length of the edge
var distance  = Math.sqrt( Math.pow(Math.abs(link.to.x - link.from.x),2) + Math.pow(Math.abs(link.to.y - link.from.y),2) );

// set bitmap origin to link.from vertex and rotate from there:
link.bitmap.position.set(link.from.x, link.from.y);
link.bitmap.rotation = angle;
link.bitmap.width = distance;

// result will place the edge over the origin correctly, but mismatch the coordinate of link.to point, despite same coordinates will work with graphics method above.
// Therefore I try:

Attempt 2:

// assign coordinates that are properly handled by graphics methods, to variables I pass to Sprite
var fromPoint = graphics.moveTo(link.from.x, link.from.y);
var toPoint = graphics.moveTo(link.to.x, link.to.y);

link.bitmap.position.set(fromPoint.x, fromPoint.y);
link.bitmap.rotation = angle;
link.bitmap.width = distance ;

// result is that toPoint and fromPoints shares the same coordinates.
// How is that possible since the coordinates are different using graphics methods ?

Any suggestions?
With SVG I can reach about 600 nodes, completely decorated.
But with PIXI, I can't use it on mobile, for interaction of events associated to nodes get slower and slower.

@ivanpopelyshev finally - thanks for suggestions in javascript book - yes I am aware I need to improve theory, I am learning by examples so far! For suggestions, if you could debrief the architecture design I chose with a skype call and willing to suggest improvements oh well, you are so welcome. My goal is to clone a native app whose I am the designer, but not the coder, and re-build the code in pixi.

[ivanpopelyshev]

Ok, now I understand more, 600 nodes? that's not that big. I think listeners are leaking somewhere.

My goal is to clone a native app whose I am the designer, but not the coder, and re-build the code in pixi.

I also learned JS by examples because I needed to port things into web 👍 I like how people with different backgrounds meet in open-source, you have interesting blog.

Skype call is ok, lets schedule it, mail to ivan.[email protected] . < pixi promotion >If everything goes fine, you will be able to thank us later on patreon.com/user?u=2384552 or help to create an article about it and open-source

[gg4u]

@ivanpopelyshev thank you so much Ivan, very kind of you. I have been busy in working activities these days, and coding in spare time: apologise for not coming back to you earlier. Meanwhile, I was able to make some progress. I will spend my bonus of a call with you a bit later, once I tried all considerations I am learning about.

[themoonrat]

Closed due to inactivity. Hope you got the help you needed :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.