My Pixi.js ticker stops all application. (browser crashed)

[dylanju]

Hi. I'm not a html5 game developer but Front-end developer trying to draw a line chart with pixi.js.

So, my question is not about the html5 game but just about how can I use pixi.js correctly. I was recommended this forum from pixi.js official site.

 

Anyway, the problem is chrome browser stopped after about 2 minutes later ticker started.

See this code (https://www.pixiplayground.com/#/edit/S~1QvhfSNDyACDvb0nkfc)

 

It's a simple code for a line chart.

1. Add a basic PIXI container
2. Draw the first line with 4 dots.
3. Add next line every second using PIXI ticker and Change line x position.

It works nicely at the moment But about 2 minutes later, the browser is crashed.

I don't know why and how can I fix it.
Help me!

 

[ivan.popelyshev]

You can maintain 2 or more Graphics objects and delete the old one when it goes outside the screen, creating new one at the right side. Or just clear() and move it to right.

Also I saw that you depend on RAF too much, if you switch tabs and then switch back, something wrong can happen

2 minutes is strange, i think it'll crash later. First you'll have too many lines inside and everything will disappear because we have only 16-bit indices at the moment. It'll become slow because of constant reupload. The next day it will crash.

Are you on linux?

[dylanju]

@ivan.popelyshev Thanks to your answer.

I'm using mac OS mojave.

and the crash time is not exact 2 minutes, it's about 2~3 min.

 

I understood that I have to maintain 2 or more Graphics to delete some lines.

But still cannot understand what is mean "depend on RAF too much, if you switch tabs and then switch back, something wrong can happen"
Is it means that there is much calculation in ticker? likes addLind(), moveLine()?
so it causes something wrong when clicking other links? 

[ivan.popelyshev]

I dont want to think about it, i just switched the tab and switched it back and saw a problem, It doesn't matter, in long run you'll fix it somehow. I could have solution ready for you but i dont  

[Exca]

The problem with that is that the line gets really long as new points are added to it and old points are not removed.

Do you need to have it scroll back? If not, then you could keep track of all the points line needs to draw and clear the line graphics every time new line is added and remove the  points that have gone past the screen.

[dylanju]

@Exca Thanks for your advice.

Now I don't need it to scroll back function so I'll try that.

but if I want to need scroll back someday, how can I handle many lines?
Where can I find some tutorial or guide about this?

[ivan.popelyshev]

I have a general idea about that kind of things. "maintain a window of x2 camera size, refill or spawn new elements when camera touches it, move the window.". I have implementation here : https://github.com/ivanpopelyshev/pixi-starfighter , but it requires hour or two of investigating the tilemap. Its very rare that people understand this thing from one sentense , but I do not have any other ideas how to explain it except that code. You need a window and if there are lag spikes - you need to add chunks to it.

[Exca]

Keep a list of points and only draw the section you actually need to show. That way you wont need to upload a very large amount of vertices to gpu.

Another way to optimize a large set of lines would be to use rendertextures, though if the lines are dynamic then that wont be of help. But for static lines you could build a rendertexture for every 2048 (or lower) pixels and draw the line into that, then clear the line and start drawing again. Then when the old portion would need to be shown you could just use that texture instead of a line.

[dylanju]

@Exca Wow. It's a brilliant solution for me. very very thanks again.

Last question (minor) is that
I attached a new line using .moveTo(endPoints) and .lineTo(nextPoints) instead of adding a new line using new Graphic().

Can you recommend which way is correct or better?

[dylanju]

@ivan.popelyshev yes sir! I'll study your code.

Maybe...do you recommend using PIXI.Texture likes Tilemap?

[ivan.popelyshev]

The code i have there is for general case, whether its backed by Graphics or pixi-tilemap or just sprites.

I dont understand your question

I recommend to use one graphics per many lines, but not just ONE graphics. That's "chunk" optimization, i dont have small example for it, only big ones like https://github.com/ivanpopelyshev/bombermine-shuffle , thats very old one that doesnt use pixi.