Jump to content

Too many graphics is too slow


Recommended Posts

Use Pixi to make a paint app. when mousemove to draw a circle or line or other graphics.

If a graphics has more than 1000 items, the fps will be 30 - 40, may be more lower.

Is this a wrong way to make brush in Pixi?

Should i create another canvas to draw lines and make it as a texture of a pixi Sprite?

Also wonder why drawCircle has more perfomance overhead?

In Pixi' webgl render, there is not 'lineCap = round', so I have to draw circle every time to simulate a round lineCap line, is any better way to do this?

var graphics = new PIXI.Graphics();

const lineWidth = 100;
const points = new Array(600).fill('').map(v => ({
	x: Math.random() * 300,
  	y: Math.random() * 300
graphics.lineStyle(lineWidth, 0xeeeeee,1);
points.forEach((point, idx) => {
  if(!idx) {
  graphics.moveTo(points[idx - 1].x,points[idx - 1].y);
  graphics.lineTo(point.x, point.y);


Link to comment
Share on other sites

Every moveTo spawns a new shape. However if you render the element , next lineTo will also spawn new shape, because finishPoly() or whatever it is will be called.

Approach for drawing app:  to collect all the brushes in current stroke as sprites inside container. Render it to renderTexture when the stroke is complete.

It wont degrade over time, and it'll give you more stuff. For example, if that container is inside an AlphaFilter, or ColorMatrixFilter, you can adjust color/alpha of the whole stroke, not individual brushes. In that case C* A + C*B  !== C * (A+B) where C is alpha-color manipulation and A,B are two brushes.

There's a small drawing app that shows it: https://github.com/wonderunit/alchemancy , however beware of strange manipulations with filters, they really made it too difficult. Just look at the code and do something like that but without filters.

Smaller example: https://pixijs.io/examples/?v=next#/demos/mask-render-texture.js , however its better to move render() away from drag, just add new brush to some temporary container and render all of them when mouse is up.

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.

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.


  • Recently Browsing   0 members

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