Sketchfab Forum

Viewer API Swapping materials

viewer-api
materials

(Revolution3d) #1

Hey guys,

I'm new to the Viewer API and I have a simple question:

Is it possible to change an object's material to another material that is in the scene?

There seem to be methods in the API that allow you to access a list of materials and update their parameters or textures. There are also methods to access the scene graph and individual nodes in the scene. What I want to do is change the material that a particular node is using to a different material from the list.

Thanks in advance,
Adrian


#2

Hey Adrian,

I didn't try it yet, but you could use getMaterialList to list all the materials in the scene, swap the stateSetIDs and update it. Something like:

api.getMaterialList( function( err, materials ) {

    var materialToUpdate = materials[0];
    var materialToCopy = materials[1];

    materialToCopy.stateSetID = materialToUpdate.stateSetID;

    api.setMaterial( materialToCopy, function() {
        console.log( 'Material updated' );
    } );

} );

(Revolution3d) #3

Thanks James, That worked perfectly.

Before I go too far down this track, I'm interested to know if there is a more elegant solution for what I am trying to achieve.

I am uploading a model (in this case a house) and I would like to use the viewer API to let users swap out materials e.g. change bricks to wood planks etc. My current plan is to embed all the necessary materials into the 3D file by just having a cube for each material and simply hide these cubes so the user can't see them. Then at runtime, using the code you've provided, I can fetch the material I need and swap it out as required.

It seems like a cleaner solution might be to create my own materials at runtime, rather than fetch ones already in the scene... is this possible?


#4

You can update materials and even add textures on the fly. Here are the examples from the official docs:

https://sketchfab.com/developers/viewer/functions#api-setMaterial
https://sketchfab.com/developers/viewer/functions#api-addTexture

That's how it's usually done, but I do sort of like your solution! I can't really speak to which would be more performant for an individual model, but if you have different models using the same set of options, it might be better to create all the materials at runtime to avoid all the extra invisible cubes, materials, etc.


(Nhm Gallery) #5

I've been looking at customising the viewer so that materials are modified on the fly as well, in my case i'm looping through the material list (10 materials on model) and changing the opacity of all the materials (making them transparent) except the one i want to highlight which is left as is. This is working fine but i noticed that the first time the materials are modified in this way there's a long pause (1-2 seconds) in the viewer which freezes the camera/interaction, however subsequent material changes are fine.
Are there any initialisation processes when a material's properties are first accessed/modified that might cause this?
I didnt try it on other material properties apart from opacity yet.


(Stephomi) #6

Depending of your material parameters, we might require a new shaders.
Shader compilation can take some times.

Unfortunately, we don't have much control on the speed of this operation as it's done by yout GPU and the browsers.

We can only reduce the number of shader used in our scene (by trying to re-use the same one), but that's a complex problem to solve since we might loose performance on runtime then.

ps: Once we create a shader, we'll re-use it if it's already present, that's why there's no subsequent freeze.