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.
@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…
@Lawrence3DPK 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