Pixi.js: How to render and interact with 100.000 sprite withou drop performance ?

[khiemntu]

I want to draw 100k srpite on a map and click or hover on each sprite. But I have a big problem that when i load 100k sprite, the performance very poor, I can not pan the map because it lagging so much. I used Particle Container but i can not interact with each sprite. Are there any solution for this problem ?

[angiagia]

You do not need to draw all 100000 sprites at the same time. My best solution when encountering this problem is to just draw a part of its display above the game frame. Then every time you move the view frame, it will check and show whether the sprites are on the view and display it.

[khiemntu]

I also think it but when i loop 100k object to display or hidden, it cost
many time
On Thu, Dec 27, 2018 at 11:16 AnDG [e-mail] wrote:

You do not need to draw all 100000 sprites at the same time. My best
solution when encountering this problem is to just draw a part of its
display above the game frame. Then every time you move the view frame, it
will check and show whether the sprites are on the view and display it.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/pixijs/pixi.js/issues/5311#issuecomment-450070178,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJNGCbqAJGUztrusgALfPMrhoE_BFywtks5u9EmWgaJpZM4ZiPe8
.

[angiagia]

The problem is that you initialize too many objects at the same time, you just need to initialize some objects at the beginning, then mark them and check with the map coordinates. If it is in your map, create and display it. This will avoid testing 100k objects multiple times

[khiemntu]

Thank for your solution. But in my application, i want to load all 100k sprite object to screenview. I use particle container and it make performance better so much, but i can not interactive with each sprite. Are there any solution to load all 100k sprite and can interactive each sprite ?

[ivanpopelyshev]

I made solution for that for commercial project.

Its based on shader animations, a special algorithm that uploads only parts of changed children, and a tracking pixel! If every shader knows that on mousePos object number is rendered instead of color, you can readPixels that number after frame render and omit whole interaction JS cycle. It took two weeks or so to debug.

Wanna try repeat that? =)

[khiemntu]

Im also doing a commercial project, i need load 100k to 200k vessel on the
map (leaflet), that is the reason i need to load all because when you zoom
out to view all map, all vessel will display. The particle container can
render whole vessel above but can not click or hover on it. Are there any
solution to solve this problem ?
On Sat, Dec 29, 2018 at 07:42 Ivan Popelyshev [e-mail]
wrote:

I made solution for that for commercial project.

Its based on shader animations, a special algorithm that uploads only
parts of changed children, and a tracking pixel! If every shader knows that
on mousePos object number is rendered instead of color, you can readPixels
that number after frame render and omit whole interaction JS cycle.

Wanna try ? =)

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/pixijs/pixi.js/issues/5311#issuecomment-450448692,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AJNGCcZ2N8y4sUZk3ecjjAf4k1Hn65szks5u9rpngaJpZM4ZiPe8
.

[Cristy94]

But do you see anything with 100k sprites on screen, isn't it just a big mess? What about clustering the markers so they get groupped by some criteria?

[Inateno]

To create the 100k instances you can create a instantiation loop in a setInterval or whatever, and creating like 5k every 16-30ms (which would require ~1sec to reach 100k, better than freezing the whole app).

Then for click detectin I would use something custom. One event on the container, then use an octree to detect what is under you current x-y, it require you to code again the "collisions detection" but it's not the most complicated :)

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.