There are currently three popular approaches swapping materials and textures. In either case, you only need one copy of the geometry in the scene. You do not need to duplicate the geometry for each material variant.
Adding materials "on the fly" by hosting textures at a URL
In this scenario, the model you upload to Sketchfab is more or less a blank canvas, with objects and materials separated and named in a convenient way to manipulate them in real time. In the case of a chair, for example, you might have separate materials defined for the legs, the upholstery, etc. Then, you have sets of material settings and associated textures, defined and hosted on your site.
- Minimizes initial load time (the absolute bare minimum is in the viewer download itself)
- It's easy to add new materials/textures/configurations because they are hosted and defined outside the viewer
- 3D model setup is easier, you just need to build the right meshes and separate materials
- You need to host textures somewhere and fetch them at runtime - Can add latency to the UX, depending on implementation
Here's an example: https://jsfiddle.net/PadreZippo/n06vewm9/
When you change the material, we fetch the textures and update the scene.
Including all needed configurations as "dummy" materials in the scene
For performance reasons, textures that exist in 3D Settings but are not actually used by a material are not loaded in the viewer, and are therefore not available to the Viewer API. So, in this scenario, you have every possible material in the original file uploaded to Sketchfab and/or edited in our 3D settings. For example, a single polygon hidden inside the scene for each material. Then, as the materials all exist in the scene already, it's relatively trivial to copy them from the "dummy" material to the real material applied to a mesh, using the Viewer API.
- It's convenient to have all the materials ready-to-go in the scene
- There's almost no latency when switching materials because they've all been loaded already
- All textures are hosted and optimized by Sketchfab, including multi-resolution versions for desktop VS mobile
- Can lead to longer initial load time (every material and texture needs to load before the viewer can render)
- 3D model setup is more complex, you need to have every option built into the scene
- It's harder to add new materials in the future (the original model needs to be re-uploaded with the new materials added, compared to just hosting a new material and adding it to your code)
Here's an example: https://jsfiddle.net/PadreZippo/30qjfmg5/
Generating entire materials “on the fly” and applying them to objects arbitrarily
The createMaterial and assignMaterial functions allow you to generate completely new materials and apply them to objects. You are not bound by the material list that exists in the scene.
- Gives you the most flexibility
- Allows you to bypass the 100 material limit
- It’s the most complex solution to code as you need knowledge of both material channels and scene graph nodes
- There will be similar latency in fetching textures if required
Here’s an example: https://jsfiddle.net/PadreZippo/prqwak6h/
The two cubes share a single material in the scene, but you are able to apply different materials to the two geometry nodes separately.