Pixi.js and ThreeJS for an advanced web GUI
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
Answer
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.