How to export from Blender Tower of Babel and support PBRMaterial Texture

[lst60916]

Hi my friends,

 

Recently I read the tutorial of PBRMaterial here

https://doc.babylonjs.com/overviews/physically_based_rendering_master

I wanna display the object exporting from Blender by Tower of Babel (TOB)

However, it comes out with all-black on my object(mesh)

 

The code is jus like the following :  

var texture_from_file = new BABYLON.Texture("dress.jpg", scene);
        
var pbr = new BABYLON.PBRSpecularGlossinessMaterial("pbr", scene);

for (var i = 0; i < scene.meshes.length; i++){
            scene.meshes[i].material.diffuseTexture = texture_from_file;
}

Any advice to let me display the mesh with PBRMaterial (or similar texture) ? 

Thank you so much

[GameMonetize]

You may need to affect the pbr material to meshes

[lst60916]

Hi, Deltakosh

 

You mean affecting in blender or BabylonJS ?

Could you explain it more ?

 

Thank you very much

[GameMonetize]

in babylon.js  you will have to cycle through all meshes and set mesh.material = pbr

[lst60916]

Sorry that I don't explain well!

Actually I set all mesh.material = pbr.

It shows all-black color

I'm wondering the reason .

 

Thanks so much

[GameMonetize]

Do you mind reproducing the PBR setup you used in the playground?

[lst60916]

On 2017/8/9 at 3:27 AM, Deltakosh said:

Do you mind reproducing the PBR setup you used in the playground?

Hi, Deltakosh !

sorry for the late reply.

I find it hard to implement on the playground since I don't know how to import Qi / TOB.js file .

the source code is just like this,

// You have to create a function called createScene. This function must return a BABYLON.Scene object
// You can reference the following variables: scene, canvas
// You must at least define a camera
// More info here: https://doc.babylonjs.com/generals/The_Playground_Tutorial




var createScene = function() {

    var imported = document.createElement('script');
    imported.src = "https://palmer-jc.github.io/lib/QueuedInterpolation.1.1.min.js";
    document.head.appendChild(imported);

    var imported = document.createElement('script');
    imported.src = "https://tteset.000webhostapp.com/TOB_body_pg.js";
    document.head.appendChild(imported);


	var scene = new BABYLON.Scene(engine);
	var camera = new BABYLON.ArcRotateCamera("Camera", 0, Math.PI / 2, 12, BABYLON.Vector3.Zero(), scene);
	camera.attachControl(canvas, true);


    var human;

//    var left = document.getElementById("left");

        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        //scene = new BABYLON.Scene(engine);

        TOB_body_pg.initScene(scene);
        /*
        var camera = scene.getCameraByID("Camera");
        camera.wheelPrecision = 10;
        var light = new BABYLON.PointLight("spot", BABYLON.Vector3.Zero(), scene);
        light.intensity = 1.0;
        */
        
        scene.autoClear = false; // keep bg white

        // Creates, angles, distances and targets the camera
	    var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0.2 , -0.7, -2.0), scene);
        
        // This positions the camera
        scene.activeCamera = camera;
        camera.setPosition(new BABYLON.Vector3(0.2 , -0.7, -5.0));

        // This attaches the camera to the canvas
        camera.attachControl(canvas, true);
        
	   /**************************************************************/

        // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
        //var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
	    //Create a light
        var light1 = new BABYLON.HemisphericLight("Omni1", new BABYLON.Vector3(-1.8, -1.5, -2.0), scene);
        var light2 = new BABYLON.HemisphericLight("Omni2", new BABYLON.Vector3( 1.8, -1.5, -2.0), scene);

        console.log(camera.position);
        
        scene.beforeCameraRender = function () {
            //light1.position = camera.position;
            //light2.position = camera.position;
            light1.intensity = 0.7;
            light2.intensity = 0.7;    
            
        };

        /************************* Load Human *************************************/
        
        var pbr = new BABYLON.PBRMaterial("pbr", scene);
        human = scene.meshes[0];
        human.material = pbr;
        pbr.albedoTexture = new BABYLON.Texture("https://tteset.000webhostapp.com/dress.jpg", scene);
        pbr.reflectivityColor = new BABYLON.Color3(1.0, 0.766, 0.336);

        pbr.useMicroSurfaceFromReflectivityMapAlpha = true;
    
        
        human.position = new BABYLON.Vector3(0.2 , -1.5, -2.0);            
        human.alwaysSelectAsActiveMesh = true;
        human.material.specularColor = BABYLON.Color3.Black();
        
 
   
        console.log(scene.meshes);

        scene.executeWhenReady(function() {
            engine.runRenderLoop(function () { 
                scene.render();                 
                var fpsLabel = document.getElementById("fpsLabel");
                fpsLabel.innerHTML = engine.getFps().toFixed() + " fps";
            
                     });
        });
        

        //Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });






	return scene;
};

could you give me some advice to make PBR material on TOB output come true ?

 

Thank you so much

[JCPalmer]

Hi, I make Tower of Babel exporter, but do not know about pbr.  Couple of things:

• I made a playground template for TOB.  You just paste the output file at the bottom of the editor window.  When you wish to save it, and you get a too big error.  Then you will have to host your TOB export file as well.  This is primatives.js in the example.  Any loads will fail the first time, when you have 2 dynamic JS scripts, but it is sufficient to use for help.
• Also, while it is not my bandwidth, you should probably point to your own version of QI, not the one I have I.  1.1 is not quite done, so this might be good for now, but later you will have much better control publishing your own work with a copy you control.

[lst60916]

19 minutes ago, JCPalmer said:

Hi, I make Tower of Babel exporter, but do not know about pbr.  Couple of things:

• I made a playground template for TOB.  You just paste the output file at the bottom of the editor window.  When you wish to save it, and you get a too big error.  Then you will have to host your TOB export file as well.  This is primatives.js in the example.  Any loads will fail the first time, when you have 2 dynamic JS scripts, but it is sufficient to use for help.
• Also, while it is not my bandwidth, you should probably point to your own version of QI, not the one I have I.  1.1 is not quite done, so this might be good for now, but later you will have much better control publishing your own work with a copy you control.

Hi, JCPalmer !

Thank you for the advice and great work!

It is really meaningful to me.

I updated the playground and showd the fail case.

It can be displayed by clicking 'run' button

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

 

Thank you so much

[JCPalmer]

Sure.  Couple things I can see are:

• when I rotate the mesh,  it seems like there are 2.  Is that supposed to like that?  If the non-moving one is a cape,  adding a material to it might make it more easy to see your mesh. Leaving it out might even be better.
• You added renderloop & resize code.  This is required in your code, but the playground takes care of this for you.  Makes it easier to demonstrate issues.
• If you are going to have 1 of these you do not need to use MeshFactory, or even generate one.

var face_mesh = new TOB_body_pg.Body("body", scene);

The material part, you need someone else to look at.

[lst60916]

Hi

Thanks for your advice!

However the material I still need some help.

Would you please tell me who is familiar with this topic?

 

Thanks  a lot