CODEWITHSUNDEEP
three.js
AlvinfromDiaspar
AlvinfromDiaspar

Reputation: 6814

THREE.js - Drawing large amount of objects dynamically?

I have a large amount of 3D objects (i.e. asteroids) that I would like to render. I know I can merge all geometry into a single one OR I can use a buffer-geometry (are these the same thing?).

However, my asteroid objects always come and go. At any given second more asteroids could be created and placed into the scene.

* Question * How to handle rendering this dynamic set of objects without having to re-create buffers or merge geometries (as these take a big hit on performance)?

I suspect that either the dynamic nature of the scene or the buffering must go.

Upvotes: 0

Views: 1244

Answers (1)

WacławJasper
WacławJasper

Reputation: 3364

One way to handle this is to merge all the asteroids into one geometry, but make note where each individual asteroid lies in the merged geometry (index + count). Then when an asteroid needs to be deleted, just set the position data of the relevant segment for that asteroid to 0. Eg, suppose if the merged geometry is from 3 asteroids, asteroid A from 0 to 10, B from 10 to 20; C 20 to 30. To delete asteroid B is to just setting the position data from 10 to 20 in the merged geometry to 0.

If you need to dynamically "create" new asteroids, you also need to store the segments you created holes at in your merged geometry. Continuing from the example above, if you need to add asteroid D you just fill position data from 10 to 20 (from "deleting" B) to whatever D is. Obviously, if there is no more segment holes left when you need to create a new asteroid, you need to enlarge the entire merged geometry and handle accordingly.

Upvotes: 2

Related Questions