Skip to main content

Managing Materials in the Viewer API

James
  • Updated

    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.

    Pros:

    • 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

    Cons:

    • 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.

    Pros:

    • 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

    Cons:

    • 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.

    Pros:

    Cons:

    • 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.

    Related articles