Multiple instancing object on a page threejs

Questions
,
1

Hi All,

I’m new to threejs, I have a requirement which should have 1000’s objects to be rendered on a page with minimum GPU usage by reducing the draw calls. The 1000 objects should be represented as 3 types of objects[as shown in the attached screenshot example]. I tried doing it through instancing and was able to achieve the 1000 objects rendered on a single draw call; however, with instancing I couldn’t able to change the material or geometry for each of the instances.

So, I’m wondering is it a good idea to have 3 instances to render 3 kinds of objects with different materials and geometry? can somebody please help? or point me in the right direction?

image
image1756×1006 233 KB

Thanks in advance.

2

Assuming I understood your use case correctly then yes, this would be the correct approach. Meaning you would have three objects of InstancedMesh for representing each type of object.

1 Like