JavaScript 2D rendering library [pixie.js vs three.js]

Question

There are few JavaScript libraries allowing for rendering 2D graphics using WebGL. I have found out, that the most popular are three.js and pixi.js. Both of them allow you to use WebGL or canvas renderer (for devices dont supporting WebGL).

I want to ask you which of these libraries is better under the following termns:

• I want it to use only with 2D graphics, so 3D support is completely optional.
• The performance is very important - a lot of elements, text, ability to smoothly scale, translate them etc. is crutial.
• The canvas renderer (when device does not support WebGl is important) and I would love to see the same (or very simmilar) result using both renderers.

If there is another library, that I should concider in this particullar situation, feel free to tell about it :)

Answer 1

I have the exact same use case and just tried both. Loading a lot of static sprites (from the same image) is faster in three.js for 5000 sprites and above, but animating only a few of those sprites give better framerates in pixi (again, for 5000 sprites). (This was tested on Chrome and IE9 on desktop)

The biggest difference was with the Canvas renderer, where pixi's autodetect gives the same results as the WebGL (if slower) for the same code, but three.js's Canvas renderer doesn't support the Sprite type meaning to achieve portable code you have to use Particles. If you don't use sprites all that much and mostly have quads or triangles, that wouldn't be an issue.

If availability of tutorials and such is at all an issue, three.js is more established, so there's more material.

Otherwise, for up to about 2-3k elements rendered at the same time, I'd go with pixi.

Answer 2

Worked a lot with pixi.js, and currently working with three.js.

pixi.js is based on AS3 API, that has been used for flash games. That mean that the API (structure) has been tested and tried since way for longer than three.js. (only used both for 2D)

three.js being more popular, it might be more up to date on some edge cases. For example it has more flexibility than pixi.js on adding a shader. pixi.js does not yet have the possibility to add a "raw" shader, without anything appended at the top of the shader code. That is important for specifying shader version "#version 300 es" (pixi.js use an older version by default).