Applying material not working with .glb/.gltf but works with .obj

[cricket]

Hello

I am unable to apply material to objects loaded in .gltf/.glb format but am able to do so for objects loaded in .obj formal.

I have attached chair_gltf.png, chair_obj.png and relevant code below.

I would like to create a demonstration in the babylon playground but cant since I dont know how to add assets to the playground.

Questions

1) Can someone help me figure out how to apply materials to models loaded via gltf?

2) How does one add static assets to babylon playground?

function addObject(scene, model){
  var scale = model.scale;
  var pos = function(t) {
      t.loadedMeshes.forEach(function(m) {
        console.log(m.material)
        m.scaling = new BABYLON.Vector3(scale,scale,scale);
        let materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
        materialSphere1.alpha = 0.5;
        materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);
        m.material = materialSphere1;
        console.log(m.material)
      });
  };
  var loader = new BABYLON.AssetsManager(scene);
  let file_dir = dirname(model.gltf_url).substring(1) + '/'
  let file_name = basename(model.gltf_url)

  var object = loader.addMeshTask(model.title, "", file_dir, file_name);
  object.onSuccess = pos
  loader.load();
}

 

[GameMonetize]

ping @Luaacro

[julien-moreau]

Hi @cricket !

Do you confirm that applying a new material on a binary version of the gltf (.glb) doesn't work too ?

[cricket]

@Luaacro 

Yes. It does not work with both gltf and glb. However, I must mention that I used node obj to gltf/glb and cesium online converter to convert existing obj files.

[julien-moreau]

Very good thanks for the links!

It'll be quicker if you send me as PM your project file with the gltf file. Then I'll try to find the problem using your project and fix the gltf loader in this case

Thank you !

[cricket]

@Luaacro I have this playground to demonstrate the issue. The chair on the left is glb and the chair on right is obj. The relevant code follows

    // create loader
    var loader = new BABYLON.AssetsManager(scene);
    var glbTask = loader.addMeshTask("batman", "", "https://dl.dropboxusercontent.com/u/28136236/models/chair/", "chair.glb");
    var objTask = loader.addMeshTask("batman", "", "https://dl.dropboxusercontent.com/u/28136236/models/chair/", "chair.obj");

    // function that takes a mesh and applies pink material
    function applyMaterialToMesh(mesh){
        var materialSphere1 = new BABYLON.StandardMaterial("texture1", scene);
        materialSphere1.diffuseColor = new BABYLON.Color3(1.0, 0.2, 0.7);
        mesh.material = materialSphere1;
    }

    // applies pink material and move mesh one to left
    objTask.onSuccess = function (task) {
        task.loadedMeshes[0].position.x += 1
        applyMaterialToMesh(task.loadedMeshes[0])
    }

    // applies material but does not move to left
    glbTask.onSuccess = function (task) {
        applyMaterialToMesh(task.loadedMeshes[0])
    }

I hope this suffices. The code in my project is slightly convoluted. 

Relevant files are here

Edited December 3, 2016 by cricket
Added link to assets

[julien-moreau]

Okay, I found the issue in the glTF loader. In fact, you applied the material but the asynchronous nature of the loader erased the material you just applied.

I'm fixing it and will create a pull request

Thanks for this feedback

[julien-moreau]

Created here : https://github.com/BabylonJS/Babylon.js/pull/1557

[cricket]

Thank you. Just to confirm, if I download https://github.com/BabylonJS/Babylon.js/blob/master/dist/preview release/loaders/babylon.glTFFileLoader.min.js file things should work?

[julien-moreau]

Yes it should work, like glTFFileLoader.js which is just the non-minified version