Jump to content

Any way to speed up drawing lots of primitives?


bauerj
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...