lst60916

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

Recommended Posts

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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.