Reuse of textures and geometries

Questions
1

Hi!

I would like to know which is the most efficient way of reusing geometries and textures in ThreeJS.

Let’s say I have three files (mesh1.js, mesh2.js and mesh3.js for example), using the same PBR material (with textures) and the same geometry. Nevertheless, in each file I want to display the geometry with a different color.
I load the PBR material and the geometry file in a fourth file (loader.js) and make them globally available using window.externalMaterials and window.externalGeometry.

Which is the most efficient way of using these geometries/textures in order to avoid unnecesary copies while displaying meshes with different colors/maps? Does cloning save resources vs reloading the model in each file?

Thanks in advance!!

2

If you have <100 draw calls in the scene then you probably don’t need to mess with this, but InstancedMesh allows you to draw the same mesh (and material) in different locations, with different colors:

https://threejs.org/examples/?q=instanc#webgl_instancing_raycast

It is not possible to use this technique with different textures for each instance; for that I think you will just need separate Mesh instances sharing the same Geometry with different Materials. Or something much more complex with a custom shader and a texture atlas.

2 Likes
3

Perfect, thank you very much for your help!