drawing performance optimization help

Recommended Posts

I use pixi.js to draw some lines.when there are many lines, render speed becomes slow, can anyone help me to optimize performance of it? thanks for help.

I gave up using Graphic API to draw because it could not set the lineCap and lineJoin style of lines. 

I made a pen here :

Share this post

Link to post
Share on other sites

I'm afraid you have to implement LineCap and LineJoin for us , make PR for pixijs :) 

As an alternative, you can teach pixijs v4 TextureManager to upload only part of texture (the one where line is), you have to use getImageData and texSubImage2D.

In any case, the task requires you to move from being user to pixijs dev.

Its in my TODO list for next month, you can also wait for it.

Share this post

Link to post
Share on other sites

However, I doubt WebGL will get the same quality of lines even if we add caps and joins. WebGL2 and MSAAx2 will help but thats in the future.

What if you dont redraw everything here, but draw lines on top of existing ones? 

for(let i=0;i<len;i++)
      const p = this.points[i];
      const tx = p.x;
      const ty = p.y;
      i === 0 ? ctx.moveTo(tx,ty) : ctx.lineTo(tx,ty);

I understand that there'll be lineJoin problem, maybe its possible to fix with some clip() operations if we determine the rect that is changed in particular time... That's hard task :(

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

  • Recently Browsing   0 members

    No registered users viewing this page.