b2spirit

Full Scene Graph with Pixijs

Recommended Posts

Hello all,

 

I am quite new to working with pixi and my intention is to create a hierarchical tree structure kind of thing with nodes which are draggable. I have done some work and I currently have trouble getting the lines to move with the draggable nodes. 

 

My question is there any examples of full scene graphs with hierachies that I can refer to?

 

Cheers!

Share this post


Link to post
Share on other sites

I am working on something like this currently, but it's not generic enough to be shared. I'm using a single PIXI.Graphics instance to draw lines between nodes.

 

Each time a node is dragged, I clear the Graphics instance and redraw the updated lines. This achieves the functionality you described.

 

I do some optimizations here such as culling nodes outside of the viewport and lines that do not pass through the viewport. I also separate inactive lines (ie. lines that do not connect to the current node) to a separate container so I can continuously update active lines only (the lines that are moving with the current dragging action).

 

My solution works very well for tens of thousands of nodes, but there is noticeable lag when 10,000+ pipelines are drawn on the screen at once (you may never have this problem). To improve this I plan to move away from the Graphics approach to draw thick lines in the shader directly, but you may never require this if your hierarchies are not very complex.

 

If you want to share an example (either publicly or privately), I can try to assist.

Share this post


Link to post
Share on other sites

Are you trying to create a drag and drop interface for Pixi sprites?

 Sorry for the late reply. Yes, the nodes are dragging properly without issue, but the problem is with the lines. They duplicate. As Groves mentioned, I will try deleting the graphics instance. 

Share this post


Link to post
Share on other sites

 Sorry for the late reply. Yes, the nodes are dragging properly without issue, but the problem is with the lines. They duplicate. As Groves mentioned, I will try deleting the graphics instance. 

 

I don't delete it entirely - just graphics.clear() should be ok.

Share this post


Link to post
Share on other sites

Thanks Grove, I got it to work :). This is taking a bit of time since I am quite new to javascript programming and I am doing it outside my normal work. So my progress is quite slow. I'll probably have more questions later on :)

Share this post


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

  • Recently Browsing   0 members

    No registered users viewing this page.