Serializing .babylon to gltf + bin

[Ravi]

Hi,

I am trying to convert .babylon file to .gltf format using following method

  let returnData = SERIALIZERS.GLTF2Export.GLTF(this._scene, finalPath);

returnData data gives me .bin and .gltf files Object. But the "texture" object is not present in .gltf data, due to which texture is not getting applied to the model.

Please suggest on the same.

[GameMonetize]

Hello!

would you mind creating a repro in the playground?

[Ravi]

@Deltakosh

As I have transfered the serialized scene to server and saved to file, I could not simulate this behavior in playground. But I am providing all the required details below.

I am using angular 4 for serialization abd below are the babylon package versions used.     

"babylonjs": "^3.2.0-alpha4",
"babylonjs-serializers": "^3.2.0-alpha4",

Import Statement:
import * as SERIALIZERS from 'babylonjs-serializers';

Scene Loading Method:
createScene() : BABYLON.Scene {
    // create a basic BJS Scene object
    this._scene = new BABYLON.Scene(this._engine);
    //Adding a light
    
    //let light = new BABYLON.PointLight("omni", new BABYLON.Vector3(0, 50, 0), this._scene);
    let light1 = new BABYLON.HemisphericLight("hemiLight", new BABYLON.Vector3(0, 6.7849, -6.7849), this._scene);
    light1.setEnabled(true);
    light1.intensity=1;
    light1.diffuse = new BABYLON.Color3(1, 1, 1);
    light1.specular = new BABYLON.Color3(1, 1, 1);
    light1.groundColor = new BABYLON.Color3(0, 0, 0);

    let light2 = new BABYLON.PointLight("pointLight", new BABYLON.Vector3(0, 45.4121, -102.6933), this._scene);
    light2.setEnabled(true);
    light2.intensity=0.2;
    light2.diffuse = new BABYLON.Color3(1, 1, 1);
    light2.specular = new BABYLON.Color3(1, 1, 1);
    light2.direction = new BABYLON.Vector3(0, 0, 1);

    //Adding an Arc Rotate Camera
    let camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), this._scene);
    camera.attachControl(this._canvas, false);
    let skeleton;
    // The first parameter can be used to specify which mesh to import. Here we import all meshes
    BABYLON.SceneLoader.ImportMesh(null, "assets/box/", "Anim-Earth-Cube.babylon", this._scene, function (newMeshes, particleSystems, skeletons) {
        // Set the target of the camera to the first imported mesh
        //console.log("Meshesh: " + newMeshes);      
    });

    this._scene.executeWhenReady( () => {
        
        this.serializeScene();
    });

  return this._scene;
}

Scene Serialization Method:
serializeScene() : void {
  console.log("Start Serializing scene... ");

  // Serailize to GLTF 
  let returnData : SERIALIZERS._GLTFData; 
  returnData = SERIALIZERS.GLTF2Export.GLTF(this._scene, "assets/box/cube_texture.png");

  // Serialize Scene to server
  <Code will go here>
  
  console.log("End Serializing scene... ");

}

I have observed that reference to cube_texture.png is not coming inside .gltf file after serialization.

However when I tried exporting same model from Blender, I can see images section generated in the .gltf file as mentioned below.
"images" : [
    {
        "uri" : "cube_texture.png"
    }
],
Attachments:
simple_model.zip (Model used)
serialized_gltf_bin_texture.zip (Files after serialization)

Please share your views.

[GameMonetize]

@kcoley should be able to help

[kcoley]

Hi @Ravi.  Thanks for providing the information.  Looking at your Babylon file, it seems to expect to use StandardMaterial, which I am currently working on implementing.  In the meantime, you can subscribe to this issue to track progress:
https://github.com/BabylonJS/Babylon.js/issues/3601

Thanks and feel free to flag any issues you run into with the glTF serializer!

[Ravi]

Hi @kcoley, Thanks for the update, appreciated. If you could let us know expected date of release that would be of great help.

[kcoley]

Hi @Ravi, sorry for the late response (didn't turn on notify for replies).  I am working on an update relatively soon for Standard Materials.  We are working on an approximation to convert to glTF PBR materials and are making sure it is good enough before we push out the change.  I hope to get this out by tomorrow, or early next week at the latest.  Thanks for your patience!

[dmko]

I'm playing around with glTF and the babylon demo scene in that editor looks great (plastic, metal, spheres, fast load time...)

Has anyone got a glTF version of it available for testing outside of babylon? I'll look into converting it myself, just thought someone might have already done it

 

[Ravi]

Didn't get you. Can you please elaborate "glTF version of it" means? 

[dmko]

hehe - seems I had a few tabs open and got a bit confused about which thread I was responding to It's totally relevant here though!

I'd like to get the scene shown at http://editor.babylonjs.com/ as a glTF file w/ assets, would be great if someone had that available

[Guest]

It is not a scene per se but you can find it again here:

https://www.babylonjs-playground.com/?28

And then you can rely on https://github.com/BabylonJS/Babylon.js/tree/master/serializers/src/glTF/2.0 to serialize a glb/gltf version of it