Sign in to follow this  
liajoy

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

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

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.