15

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
Wojciech Danilo
  • 11,573
  • 17
  • 66
  • 132
  • 2D element should always be created with common 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 recommend 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 Apr 24 '15 at 11:16
  • @Silom I completely 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 recommendation, it makes perfect sense. If you've got any other suggestions I would love to hear them! – Wojciech Danilo Apr 24 '15 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 Apr 26 '15 at 07: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 Jan 10 '16 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 Feb 04 '16 at 13:42
  • I've built this recently for handling mouse interaction simply in THREE.js: http://codepen.io/killroy/pen/dMzLMq Once it's done, it works quite well. This is work in progress, but is pretty reliable so far. – Killroy Apr 01 '16 at 22:33
  • @Silom I know of the 3D transform trick for HTML but with SVG, it still triggers repaint: no green rectangles with HTML DOM (http://codepen.io/monfera/pen/qNVzBm) but flashing green with SVG (http://codepen.io/monfera/pen/JKOqyY) - it uses regular `translate` but I formerly tried it with 3D transforms too. Dev tools -> Rendering -> Paint Flashing in Chrome. – Robert Monfera Nov 16 '16 at 18:02

1 Answers1

1

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?

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.

Entity Black
  • 3,401
  • 2
  • 23
  • 38
  • 1
    I made this in THREE.js: http://codepen.io/killroy/pen/WwEQze You can crank it up to 10 million 32x32 pixel sprites at 30fps+ no problem. Each with controllable 3d position and properties. Could easily be used to render a node cloud. But yes, WebGL only. – Killroy Apr 01 '16 at 22:38