lst60916 Posted August 8, 2017 Share Posted August 8, 2017 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 8, 2017 Share Posted August 8, 2017 You may need to affect the pbr material to meshes Quote Link to comment Share on other sites More sharing options...
lst60916 Posted August 8, 2017 Author Share Posted August 8, 2017 Hi, Deltakosh You mean affecting in blender or BabylonJS ? Could you explain it more ? Thank you very much Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 8, 2017 Share Posted August 8, 2017 in babylon.js you will have to cycle through all meshes and set mesh.material = pbr Quote Link to comment Share on other sites More sharing options...
lst60916 Posted August 8, 2017 Author Share Posted August 8, 2017 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 Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted August 8, 2017 Share Posted August 8, 2017 Do you mind reproducing the PBR setup you used in the playground? Quote Link to comment Share on other sites More sharing options...
lst60916 Posted August 10, 2017 Author Share Posted August 10, 2017 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 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted August 10, 2017 Share Posted August 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
lst60916 Posted August 10, 2017 Author Share Posted August 10, 2017 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 Quote Link to comment Share on other sites More sharing options...
JCPalmer Posted August 10, 2017 Share Posted August 10, 2017 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. Quote Link to comment Share on other sites More sharing options...
lst60916 Posted August 12, 2017 Author Share Posted August 12, 2017 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.