Sign in to follow this  
coolblue

Force Graphics object to render on change graphicsData

Recommended Posts

I have a PIXI.Graphics object called lines to which I add lines using moveTo/lineTo and that works great.

But, in my render loop, I refresh the lines by modifying lines.graphicsData.shape.points, but the rendered image of the line is not updated.

Why is that?

I would really like to draw a bunch of lines one time and thereafter, just adjust their geometry in the graphicsData array.

I have an array of objects with a dynamic population (but not too dynamic) and time-varying (per tick) positions.

I want to have a d3 style enter, exit, update and merge approach so I don't have to waste time clearing and re-drawing graphics elements every tick (they are lines in this case).

The result I get is that the graphics are not updated. The Graphics object shares a container with another sub-container which has sprites in it.

I tried setting things to dirty and various other things as shown in the following code...

function updatePosition() {        if(!lines.graphicsData.length) return;        lines.graphicsData.forEach(function(g) {            var d = g.__datum__;            g.shape.points.forEach(function(p, i, a){                a[i] = [                    d.x, d.y,                    d.x - d.v.x,                    d.y - d.v.y                ][i];            });            //g.points = g.shape.points.concat(g.shape.points.slice(2));  // had no effect        });        lines.dirty = lines.boundsDirty = lines.glDirty = true;        lines.updateLocalBounds();        //lines.renderWebGL(renderer); // also had no effect    }
I'm seeing that the bound data and the GraphicsData.shape.points are updating as expected, but GraphicsData.points - which is added during the render - is not updated and the image rendered is also static.

How can I force the graphicsData array to re-render?

Here is a gist that demonstrates the issue.

Here is a workaround but I'd rather understand why the first option fails...

Share this post


Link to post
Share on other sites

There was another "dirty" flag that I didn't notice: clearDirty.  This is set to true by Graphics.prototype.clear and setting it manually forced the redraw.

 

The difference between my workaround and my base case was that i had to clear the object before redrawing.

 

Bottom line: the Graphics object is only updated if it has been cleared.

Share this post


Link to post
Share on other sites

There was another "dirty" flag that I didn't notice: clearDirty.  This is set to true by Graphics.prototype.clear and setting it manually forced the redraw.

 

The difference between my workaround and my base case was that i had to clear the object before redrawing.

 

Bottom line: the Graphics object is only updated if it has been cleared.

Would you mind putting in an issue on GitHub? That sounds like we could make it better.

Share this post


Link to post
Share on other sites

Yep, I'll do that... after I get my thoughts together... I'm still doing experiments to understand how this all works and I am formulating a few ideas about how to develop this object. It already has a nice, atomic structure: I like the graphicsData array and I'm experimenting with an API for that to expose interactive graphics elements (maybe it's a bit heavy for gaming? but I'm interested in data viz...). So anyway, I'll write something up when I come up for air. :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.