Rendering on Dynamically created objects

i have created a project using THREE.js in which we can draw shapes like line,polyline,polygon,rectangle dynamically as well as we can edit the shapes like Rotate,copy,move etc.we also give the provision of select all (Cltr+A) for selecting objects in scene just like in Other CAD software’s. But when we draw and select more than 10000 objects and try to edit it got slow down.
I had search a lot and find a concept of instancedbuffergeometry but as per my knowledge instancedbuffergeometry is used for shapes which are not dynamically added.So how to deal with this.Is there any other solution to deal with it ?

Thanks & Regards

Instancing uses buffer attributes you will use in the vertex shader for positions and rotations of each instance for example. For dynamic objects there can be done several optimizations, anyway using spatial management is an option to split bunches of instanced chunks not only to reduce rewrite of the item stack to reasonable chunk sizes, but also to cull those, since culling won’t be done for instances outside the camera frustum.

You basically can still work with dynamic items, but need to rewrite the data to your InstancedBufferAttribute’s after deleting a item.

Could you share the project if it’s open source. Since there is not much resources for learning, I am trying to learn through source code.


1 Like