Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to render and interact with 100.000 sprite withou drop performance ? #5311

Closed
khiemntu opened this Issue Dec 27, 2018 · 8 comments

Comments

Projects
None yet
6 participants
@khiemntu
Copy link

khiemntu commented Dec 27, 2018

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

This comment has been minimized.

Copy link

angiagia commented Dec 27, 2018

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

This comment has been minimized.

Copy link
Author

khiemntu commented Dec 27, 2018

@angiagia

This comment has been minimized.

Copy link

angiagia commented Dec 27, 2018

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 khiemntu closed this Dec 27, 2018

@khiemntu khiemntu reopened this Dec 27, 2018

@khiemntu

This comment has been minimized.

Copy link
Author

khiemntu commented Dec 27, 2018

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

This comment has been minimized.

Copy link
Member

ivanpopelyshev commented Dec 29, 2018

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

This comment has been minimized.

Copy link
Author

khiemntu commented Dec 29, 2018

@Cristy94

This comment has been minimized.

Copy link
Contributor

Cristy94 commented Jan 8, 2019

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

This comment has been minimized.

Copy link

Inateno commented Feb 21, 2019

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.