Jump to content

Force Graphics object to render on change graphicsData


coolblue
 Share

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

Link to comment
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.

Link to comment
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.

Link to comment
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. :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...