question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

screen shot 2017-09-11 at 11 23 37 am

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 ?

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:11 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
gg4ucommented, Sep 18, 2017

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

1reaction
ivanpopelyshevcommented, Sep 11, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

performance PIXI : no GPU used? event handlers taking way ...
The second thing I don't get is why an event (pointerDown) takes longer and longer to be handled, as long as the graph...
Read more >
PIXI.js performance optimization - Stack Overflow
Your performance issue comes from CPU, not the GPU. For depth 8, drawing a single frame takes 60ms on my PC (Intel Core...
Read more >
WebGL best practices - Web APIs - MDN Web Docs - Mozilla
The minimum requirements for WebGL are quite low. In practice, effectively all ... Use webgl.flush() when not using requestAnimationFrame.
Read more >
Pixi.js performace tweaks. - HTML5 Game Devs Forum
Is it cpu bound (profiler helps with this) or is gpu the culprit. One good way to start is to check the amount...
Read more >
Optimizing JavaScript Event Listeners for Performance
Event delegation promotes binding as few DOM event handlers as possible, since each event handler requires memory. For example, let's say that ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found