The idea
Hi! I and a team of developers are creating an open-source graphical interface for interactive graph editing.
I want this interface to handle a big amount of connected nodes, allowing the user to move them, reconnect, zoom in/out etc. Each node could have text, buttons, sliders and other controls on top of it. Additional we want to create a pretty advanced, pluggable graphical interface - each panel would be a plugin - you can think of it like about web based eclipse. A panel could be te graph editor, a timeline or a 3D viewport.
The question
I would like to ask you, which library would give us more benefits - Pixi.js, ThreeJS or maybe other one? Maybe we should mix them - creating the interface in Pixi.js and some of the plugins that need 3D support in ThreeJS (I don't personally like this idea, because of lower "consistency").
Requirements
We want everything running in WebGL. A reason for that is, that we want to run the graph editor as smoothly as possible and considering the fact, that the graph editor needs to display the same controls that other parts of the GUI, it is reasonably to do it in one technology.
I'm looking for a library, that would give me the best performance and flexibility in creating such a big project, especially considering:
- ability to create custom HUD elements (sliders, buttons, graphs, etc)
- ability to handle big amount of elements - a caching / redrawing only needed part is important
- canvas fallback is important, but not crucial
The idea
Hi! I and a team of developers are creating an open-source graphical interface for interactive graph editing.
I want this interface to handle a big amount of connected nodes, allowing the user to move them, reconnect, zoom in/out etc. Each node could have text, buttons, sliders and other controls on top of it. Additional we want to create a pretty advanced, pluggable graphical interface - each panel would be a plugin - you can think of it like about web based eclipse. A panel could be te graph editor, a timeline or a 3D viewport.
The question
I would like to ask you, which library would give us more benefits - Pixi.js, ThreeJS or maybe other one? Maybe we should mix them - creating the interface in Pixi.js and some of the plugins that need 3D support in ThreeJS (I don't personally like this idea, because of lower "consistency").
Requirements
We want everything running in WebGL. A reason for that is, that we want to run the graph editor as smoothly as possible and considering the fact, that the graph editor needs to display the same controls that other parts of the GUI, it is reasonably to do it in one technology.
I'm looking for a library, that would give me the best performance and flexibility in creating such a big project, especially considering:
- ability to create custom HUD elements (sliders, buttons, graphs, etc)
- ability to handle big amount of elements - a caching / redrawing only needed part is important
- canvas fallback is important, but not crucial
- 2D element should always be created with mon web technologies, you can do a lot of things just using html5 and css3. If you want any High Level solutions for the 3d stuff go for Three.js, it is a proper library and gives you easy access to the gpu. I cant remend Pixi.js since this is only for Slider with animations and similar stuff (high level custom animations in less time but also with less performance). You can now either create a layer on top of you render loop to show of your "2D GUI" or put it all into the render loop (this of cause is slower since you need to render them per sec) – Silom Commented Apr 24, 2015 at 11:16
- @Silom I pletely understand that hmtl5 and css is the ultimate solution, but if you want to create a high performance node graph with zooming in / out and some fancy effects, that could handle thousands of nodes, I think much better performance we would gain using canvas / webgl, right? Because of that we are thinking about this solution. Thank you for the remendation, it makes perfect sense. If you've got any other suggestions I would love to hear them! – Wojciech Danilo Commented Apr 24, 2015 at 17:16
- For zooming in and out you can use the svg tag, vector based graphics are just made for such things. And you can use a canvas to interact with your graphs. The answer from Entity Black is what I wanted to tell you, I was just limited in characters. You have more options with Pixi and Three.js, but also more limitations, since both of them are based on a custom render loops (that actually is easy to blow up with overheads). – Silom Commented Apr 26, 2015 at 7:15
- 1 @Silom Browsers treat SVG on second class. Up till now you couldn't even style SVG with CSS in IE (but in general you want to use CSS rather than SVG element attributes for speed = GPU acceleration). SVG attribs e.g. transform aren't hardware accelerated (switch on 'Enable paint flashing' in Chrome Dev). Even in current browsers, CSS transforms of SVG elements aren't hardware accelerated. Also, SVG is a GPU memory hog if you zoom. Ironically, if you want navigable shape graphics with a few dozen or more elements, then WebGL, Canvas and even HTML+CSS are a lot more performant :-( – Robert Monfera Commented Jan 10, 2016 at 22:23
- @RobertMonfera interesting, still leaves you behind with no API you could quickly use to make clicks on shapes. I mean you end up using one of the massive libs or writing your own xyz cord checker for clicks on shapes. Btw. 3D transforms got their GPU support, I use it even if I just want to transform X or Y. – Silom Commented Feb 4, 2016 at 13:42
1 Answer
Reset to default 0but if you want to create a high performance node graph with zooming in / out and some fancy effects, that could handle thousands of nodes, I think much better performance we would gain using canvas / webgl, right?
No, I can't agree.
HTML is really very good in node manipulation and rendering. But ofc its weakness are those fancy effects you speak of.
On the other hand webgl is excellent for fancy effects, but has very poor node manipulation. Lets say on the first attempt you create each node as one draw call, 300 draw calls and you might be done. You will have to think and cheat and think and cheat to get rid of draw calls (webgl calls).
Example I have seen and so can speak about. Cocos2d-js might be more suitable then Pixi.js or ThreeJS. It is very good 2d free engine with free studio and powerful canvas fallback. There is also one basic fancy effect you might want, nine-slice. But even this simple nine-slice thing will make 9 draw calls and you can see your performance dropping fast. I also did performance tests with cocos2d and I can say 400 most simple sprites next to each other run only 30fps.
The reason why the performance is so low is the engine (whatever engine) has no information about what exactly are you trying to achieve. Most of the engines will offer you only one or two ways how to render something. And if I choose I want each single picture to be one sprite (one node), engine wont be able to simplify it.
If I were you, I wouldnt use any engine and would do it with webgl only. But it means you must know webgl and you don't have canvas fallback. Task seems to be very difficult and again some demonstations. Both ThreeJS and playcanvas engines have free editor in browser. Playcanvas released new version of editor just 2 days ago. And editors gui are HTML, both. We are talking about webgl engines that prefers HTML gui. Also a lot of game designers also prefered HTML.
So HTML is not bad option at all, but if you really need to use webgl you should be prepared. Your task might be impossible for engines.