Hacker News Reader

The comparison was unfair it was only moving the positions of the rectangles each frame for paper.js, and two.js but for pixi.js it was redrawing them from scratch which means it had to retesselate everything every frame.

I made a PR to fix it and its much better: https://github.com/slaylines/canvas-engines-comparison/pull/...

It is still not the optimum way to do it in pixi.js but it at least matches the other examples now.

View on HN

I'm not familiar with PixiJS in any way other than knowing that it's a game engine. What is the difference between doing single PIXI.Graphics for the whole canvas vs PIXI.Graphics for every rectangle? Pros / cons?

I see you saw the response on the issue, for anyone else this was the response:

The golden rule is the less you have to clear() and redraw the insides of the graphics the faster it's going to be as pixi.js has to convert your draw commands to triangles to pass to WebGL, if you're just moving the position of something it can use the already calculated triangles and just add an offset before drawing whereas previously you were generating new triangles and hardbaking the position into the triangles each frame.

Because you move each rectangle at a different rate I used a separate graphics instance so that we could move them without having to redraw them.

Reply on news.ycombinator.com