Full Scene Graph with Pixijs

[b2spirit 0]

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!

[grovesNL 0]

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.

[xerver 286]

Pixi is a scene graph, if you move a parent container. The children will move with it.

[d13 105]

 

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

 

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

[grovesNL 0]

Typically a node graph is similar to the following structure:

 

 

The nodes are the circles which would be draggable. In my case the circles are Pixi sprite and the lines are drawn in a Graphics instance.

[b2spirit 0]

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. 

[TheBuffer 0]

This project may help you: https://github.com/felixmaier/Lamella

 

Screenshot's say:

[grovesNL 0]

 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.

[b2spirit 0]

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 . 

[grovesNL 0]

No problem, glad to help!