1

I've drawn 300k lines on PixiJs, but the performance is terrible, any good tips to improve the performance?

Here is an example,and codepen Link.

I mainly want to make a previewer that can be zoomed and moved. It would be a lot faster to use a texture, but as the container gets bigger, the lines also get very wide, which is not what I want.

When I he dragged, only by a few frames. I simply output the fps in the console.

function draw(num) {
  const graphics = new PIXI.Graphics();
  graphics.lineStyle(2, 0xfeeb77, 1, 0.5, true);
  graphics.beginFill(0x650a5a);
  for (let index = 0; index < num; index++) {
    let x1 = Math.random() * 600;
    let y1 = Math.random() * 600;
    let x2 = Math.random() * 600;
    let y2 = Math.random() * 600;
    graphics.moveTo(x1, y1);
    graphics.lineTo(x2, y2);
  }
  graphics.endFill();
  container.addChild(graphics);
}

draw(300000);

Thank you for your help !

gejun
  • 13
  • 3
  • 1
    Drawing 300K lines is a huge amount, especially with pixi which is known to be inefficient. I'd suggest to use a texture while zoomed out. Once you zoom in a lot so that enough of the lines are entirely out of view you can add some logic to skip drawing those and it might be fast enough to work in real time. – mousetail Jun 14 '22 at 07:27
  • I don't see problem in panning/zooming. The initial rendering takes a couple of secs, but after that it works very well. Are you sure your browser/OS supports WebGL? – Mario Vernari Jun 14 '22 at 07:42
  • @MarioVernari, When I move or zoom, the fps is already only a few frames. So I want to explore some other ways to improve performance. – gejun Jun 14 '22 at 08:24
  • @mousetail,Thank you for your suggestion, I'm still Pixi's rookie, do you have a simple code example for the implementation? – gejun Jun 14 '22 at 08:27
  • This should help you: https://stackoverflow.com/questions/16203760/how-to-check-if-line-segment-intersects-a-rectangle – mousetail Jun 14 '22 at 08:29
  • @mousetail,It's kind of like culling? – gejun Jun 14 '22 at 08:33
  • Yes, it's the same concept. In your case it's even more efficient since all your objects are the same shape and 2d. – mousetail Jun 14 '22 at 08:34
  • For something as simple as this, why not directly use canvas and cut out the middle man? – somethinghere Jun 14 '22 at 08:38
  • @mousetail,i get this,I will try it later! – gejun Jun 14 '22 at 08:49
  • @somethinghere,I thought maybe leveraging the middleman would help performance? – gejun Jun 14 '22 at 08:51
  • I mean, most of the times it will not as the middle man has to obviously do middle man work that eats up some computing cycles you wouldn't have to spend otherwise. The middleman is usually there to make interfacing with the core things a little easier, to deal with some complexities of the native APIs, but I'm sure for this relatively simple task, a canvas and a context is all you need. (don't forget: in the end the middle man is also just using canvas and a context) – somethinghere Jun 14 '22 at 08:55
  • @gejun i would suggest to search for "mesh", "shared geometry", "particle container" - and already mentioned "culling". Those concepts should help in your case. Try to search in https://github.com/pixijs/pixijs/issues and https://github.com/pixijs/pixijs/discussions – domis86 Jun 15 '22 at 06:50
  • btw: recently PixiJs added some supoprt for culling: https://twitter.com/PixiJS/status/1506793629561540612 – domis86 Jun 15 '22 at 06:56
  • You might also try rendering your complex drawing as a texture, using https://pixijs.download/dev/docs/PIXI.CanvasExtract.html. Then you can paste that texture into a `TilingSprite` and only set the UV coordinates / zoom level of the texture inside the TilingSprite. That way the image will remain small and the amount of lines you draw should not matter at all. – Kokodoko Jun 24 '22 at 11:51

0 Answers0