drawing performance optimization help

[superliwei]

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 : 
https://codepen.io/superliwei/pen/XyydVy

[ivan.popelyshev]

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.

[ivan.popelyshev]

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

[SalahCgp]

H,  superliwei, did you find any solution?

I am having the similar problem.