Any way to speed up drawing lots of primitives?

[bauerj]

I'm working on a project that uses Pixi.js to disable basically a lot of differently colored polygons (tetragons). You can view a live-demo here.

 

The code that creates the polygons looks like this:

var segment = new PIXI.Graphics();segment.beginFill(color);segment.lineStyle(that.options.lineWidth, 0x000000, 1);segment.moveTo(a.x, a.y);segment.lineTo(ab.x, ab.y);segment.lineTo(cd.x, cd.y);segment.lineTo(c.x, c.y);segment.endFill();stage.addChild(segment);

There are thousands of polygons like this. I need to clear the stage after every rendering process, because basically everything changes.

 

Rendering the scene takes more than 50ms, even for very small datasets. This leads to a very laggy user experience while interacting with the script (you can try to rotate it by drag-and-drop in the live demo).

 

Most of the time gets spent in CanvasContext2d.fill and CanvasContext2d.stroke. I tried to use webgl for rendering but that was even slower and had no antialiasing.

 

Am I using Pixi.js wrong? Is there any way to speed it up?

[themoonrat]

WebGL will still be just as slow because it uses the standard canvas API to draw the shape, before saving that to a texture that WebGL can use. It's similar to how non bitmap text works too.

So, you are limited in speed by that API. 

You need to find some way of creating the polygon, saving off it's texture, which is then drawn that as it moves, so you're avoiding the constant polygon re-creation. Could you create the polygon at its largest size, then scale and move the texture created to the correct location?

[xerver]

Quote

WebGL will still be just as slow because it uses the standard canvas API to draw the shape, before saving that to a texture that WebGL can use. It's similar to how non bitmap text works too.

That isn't true, we calculate geometry and draw it using the stencil buffer, no use of standard canvas API involved for WebGL.

Quote

There are thousands of polygons like this. I need to clear the stage after every rendering process, because basically everything changes.

Are you creating a Graphics object for each polygon? If so, that will be slower than a single Graphics object. Also, recalculating and retriangulating thousands of polygons every frame is really expensive.

 

If you have to recalculate thousands of polygons every frame, you just probably won't be able to get good fps in JS for that. You need to find a way to either update existing polygons, and change only what you need to. Instead of wiping and redrawing every frame.