Too many graphics is too slow

[liajoy]

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();

graphics.beginFill(0xFF3300);
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) {
    return;
  }
  graphics.moveTo(points[idx - 1].x,points[idx - 1].y);
  graphics.lineTo(point.x, point.y);
})

 

[ivan.popelyshev]

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.

[liajoy]

thanks a lot!