Jump to content

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 : 

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

Link to comment
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 :(

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...