Specular/Glossiness material to Metal/Rough material conversion

Questions
1

Hello everyone, I’m having a problem with Three.js no longer supporting specular/glossiness materials. I saw that with glTF Transform it might be possible to convert the material, but I’m having trouble doing it. So, I was wondering if using babylon this conversion process is automatic?

2

Hello and welcome!

How do you convert with glTF Transform? Is it possible to share your model?
You may also use PBRSpecularGlossinessMaterial - Babylon.js docs

3

How do you convert with glTF Transform?

Is it possible to share your model?

Unfortunately, I cannot, but I must emphasize that it is not just one model but several models that are created dinamically by a server and received by my web app

You may also use PBRSpecularGlossinessMaterial

Are you telling me that I could use the model directly without converting it? Can I create metallic textures to simulate the metalness?

4

You may try to drag your model into Sandbox and see what will happen.

Regarding other questions, I believe the simplest example of your model would help greatly to answer in the most precise way :slight_smile:

5

Ok then, here you can find the gltf model

6

I converted your GLTF file into GLB though GLTF-Transform CLI with the next command:

gltf-transform metalrough fefco.gltf fef2.glb

Here is the result in the Sandbox.

image
image1920×1080 199 KB

The original (without conversions from spec/gloss to metal/rough) looks more than very much similar.

image
image1920×1080 195 KB

There is also some z-fighting in the right upper corner.
I believe you may completely drop off the textures and change all GLTF materials to the new PBR materials with the needed metal/roughtness values (if the materials are always the same, there is no need to use extra materials with each model).

7

Here is the converted GLB file in zip archive:
fef2.zip (17.7 KB)

1 Like
8

I believe you may completely drop off the textures and change all GLTF materials to the new PBR materials with the needed metal/roughtness values

Are you suggesting that I should convert the material from the GLTF model (which is of type specularGlossiness) to PBR metal/roughness using gltf-transform?

I would also be fine with using specularGlossiness materials; I would like to be able to modify the textures based on the materials. Let me explain better: for example, in the Babylon sandbox, when I load the original model, I see 3 materials. If I click on one of them, I can see all the associated texture channels. I would like to act on those textures by first selecting the material, but I’m unable to retrieve the materials; it seems like my code cannot find them. Could you write me a code that takes a GLTF specularGlossiness model and puts the materials present in the model into an array so that I can then manage them later?

image

My code:

private materials: BABYLON.PBRSpecularGlossinessMaterial[] = [];  // Array to collect all materials

loadModelIntoScene(url: string) {
  const pluginExtension = ".gltf";

  BABYLON.SceneLoader.ImportMesh("", "", url, this.scene, (newMeshes) => {
    newMeshes.forEach(mesh => {
      // Check if the material is of type PBRSpecularGlossinessMaterial before adding it to the array
      if (mesh.material instanceof BABYLON.PBRSpecularGlossinessMaterial) {
        this.materials.push(mesh.material);
      }
    });
 
  }, null, (error) => {
    console.error('An error happened:', error);
  }, pluginExtension);
}
9

Would be great to share in the playground what you tried first and the missing part as it is easier to read.

In your case it will always be instanceof PBRMaterial but the material will be in spec/gloss as no metallic or roughness values have been set Babylon.js docs

10

Here is the simplest PG to get all materials from the model - https://playground.babylonjs.com/#S7E00P#432

1 Like