Force Graphics object to render on change graphicsData

[coolblue]

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

[coolblue]

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.

[xerver]

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.

[coolblue]

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.