solved PBR Texture [SOLVED]

[djeustice]

Hello.  I exported a Kayak model from Substance Painter 2 as a glTF with the Metallic Roughness configuration.  The Kayak has a red/yellow gradient png texture on it.  Exporting from Substance Painter 2 gave me  Kayak_baseColor.png, Kayak,_normal.png, and Kayak_occlusionRoughnessMetallic.png textures.  In my Babylon JS scene, I import the model (Kayak.gltf)and am trying to switch the Kayak_baseColor.png  to Lime_baseColor.png on load.  The Kayak loads into the scene with it's red/yellow gradient png texture on it, but doens't switch to the lime texture on load..  Am I missing PBR properties?  Or are my properties wrong?  Thanks.

    var myKayak2;
        BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
            myKayak2 = newMeshes[0]; 
            
            var LimeTexture = new BABYLON.PBRMetallicRoughnessMaterial("Lime", scene);
            LimeTexture.albedoTexture  = new BABYLON.Texture("models/Lime_b aseColor.png", scene);
            LimeTexture.metallic = 0;
            LimeTexture.roughness = 1.0;
            myKayak2.material = LimeTexture;
        });

 

I tried changing the PBR material definition to this but still no luck:

    var myKayak2;
        BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
            myKayak2 = newMeshes[0]; 
            
            var LimeTexture = new BABYLON.PBRMaterial("Lime", scene);
            LimeTexture.albedoTexture = new BABYLON.Texture("models/Lime_baseColor.png", scene);
            LimeTexture.metallic = 0;
            LimeTexture.roughness = 1.0;
            myKayak2.material = LimeTexture;
        });

[Sebavan]

The material you are changing is not on the correct mesh: meshes[0] is the root node not having any material. So two choices:

1. find in the list of meshes the correct one and update its material.

2. listen to the material event on the loader and swap properties here:

https://www.babylonjs-playground.com/#Z5NWIE

[mr_pinc]

Everything Sebana said is correct.  Also you're going to lose the normal map and occlusion roughness maps when you reassign the material.  You should either make sure to copy them over or just modify the base color of the existing PBRMetallicRoughness

[djeustice]

I found the correct mesh.  It's newMesh[6];  To modify the base texture of the existing PBRMetallicRoughness, I've been trying out the code below.  It doesn't work.  But is this the right idea?  I don't want to reassign the material and lose the other maps, just change the current texture.  Thank you.

 

        myKayak2 = BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
            myKayak2 = newMeshes[6];
            myKayak2.albedoTexture = new BABYLON.Texture("models/Lime_baseColor.png", scene);
        }); 

[mr_pinc]

In your example you are modifying the texture on the mesh, you should modify it on the material.  I'm not sure if the default material has an albedoTexture property, you should look at the docs to make sure but my first statement is still correct, modify the material, not the mesh.  

[Sebavan]

PBRMetallicRoughness uses baseTexture instead so it should be:

myKayak2 = BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
            myKayak2 = newMeshes[6];
            myKayak2.material.albedoTexture = new BABYLON.Texture("models/Lime_baseColor.png", scene);
        }); 

but the importer imports materials as multimaterial not pbr and the submaterials are PBRMaterial not PBRMetallicRoughness so please use albedoTexture:

function createScene() {
    var scene = new BABYLON.Scene(engine);
    scene.createDefaultCameraOrLight(true, true, true);

    // Load the model
    var loader = BABYLON.SceneLoader.ImportMesh("", "https://www.babylonjs.com/Assets/DamagedHelmet/glTF/", "DamagedHelmet.gltf", scene, function (meshes) {
        // Create a camera pointing at your model.
        scene.createDefaultCameraOrLight(true, true, true);
        scene.activeCamera.beta -= 0.2;

        var helper = scene.createDefaultEnvironment();
        helper.setMainColor(BABYLON.Color3.White());
    });

    loader.onMaterialLoaded = function(material) {
        material.albedoTexture = new BABYLON.Texture("textures/tree.png", scene);
    }

    return scene;
}

https://www.babylonjs-playground.com/#10D6YT#53

 

[djeustice]

This code works!  Thank you guys for your help!

myKayak2 = BABYLON.SceneLoader.ImportMesh("", "models/", "Kayak.gltf", scene, function (newMeshes)  {
      myKayak2 = newMeshes[6]; 
       myKayak2.material.subMaterials[0].albedoTexture = new BABYLON.Texture("models/Lime_baseColor.png", scene);
 });