djeustice

PBR Texture [SOLVED]

Recommended Posts

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;
        });

OriginalTexture.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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);
        }); 

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

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);
 }); 

kayak-01.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.