Is it possible to optimize instances - add/remove instance dynamically?

i am beginner, trying to learn from examples, recently i ran into instanced shoes .

tried to recreate my own version of it. but instead of simple model i used complex glb, which decreased performance drastically.

i saw that to draw amount of models inside instance example used range attribute. but i realized that it still renders the amount of giver array(just shows the range of models).

i would like to know if there is any method to only render the amount of shoes dynamically:
increasing number of shoes - add more shoes
decreasing number of shoes - remove extra shoes form render

Yeah, you can initially create the instanced mesh with the count = max. number of instances you will ever have. Then, in each frame or whenever you like, set the instancedMesh.count property (always below the max), and only that amount of the matrices array will be rendered. To arrange the matrices is up to you.


the range in that component is setting the count, it will only render as much, not more. but even instancing has limits when it comes to heavier models. in the sandbox the bottleneck is actually the raycasting.

1 Like

here is the deployment it works fine on firefox, but i get worse performance on other browsers for some reason…

here is the source code as well

if anyone got time to take a look thanks ))

@Hawasaki7 not sure what you’ve done for the performance to have dropped so much maybe @drcmda has some pointers on your implementation but here’s an example with around 300 ( 50 on mobile ) of the models running pretty rapid… this is using vanilla three js not r3f, i need to get into r3f as something like this seems so much easier to implement…

@forerunrun can i have the source code for it, i would take a look and try to figure out what i might be doing wrong , i thought it was because of the model i used , but clearly it’s not the case. thanks

You can use inspector to see the index.js file but it’s here