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

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 ?

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

[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