Hi, folks,
I’m a beginner of Babylon, I am learning it thru the “build a village” tutorial, and found one interesting thing,
The scene in this playground looks a little lighter and brighter than another playground, in which the village was just imported from a glb file.
Why does it ? Any clue ?
Hello and welcome!
The example in the first PG uses Standard materials.
When they exported to GLB format they are converted to PBR materials.
Standard materials and PBR materials have different lighting.
Here is the example of the first PG with PBR materials instead of Standard ones - https://playground.babylonjs.com/#KBS9I5#36922
Quite similar to your second example.
2 Likes
Hi and welcome to our Forum,
I’ve nothing to add to the above answer which is ‘to the point’ 
Actually, I hope this answered your question and in case, you should also mark @labris answer as a solution (unless you have more questions to it?). It’s good practice to mark your solved problem as… solved It prevents others from wasting time looking at a topic that is…well, solved 
Another good practice, is to use the correct category. The Tutorials and tips category typically is ment to share your own tutorials and tips. Not to create a new topic questionning it 
Reason why I humbly allowed myself to move your topic to the Questions category
Thanks again for joining us and until we chat, have a great day 
thank u very much for your explanation!
Another question, as I exported the scene I expect the looking should be the same when I import it, that’s my real problem, so now It seems I have to export it thru babylon format, right ?
But When I did it, more strange thing happened, the semi-houses all lost their material, when I opened the chrome network console, the semihouse.png was not loaded, only cubehouse.png and roof.jpg there. why ?
got it. will do it next time!
thanks for your reminding 
The one of possible solutions is to use PBR materials and export as GLB.
Hmm, but why didn’t the babylon format work as expected?
It works for me.
I opened the Playground https://playground.babylonjs.com/#KBS9I5#78 then opened the Inspector then exported to .babylon then opened in Sandbox, everything is OK.
One thing you may do is to check if your texture URLS are absolute or relative, and use what is working.
1 Like
hi, @labris I still wanna dig more. It indeed works in online sandbox, but not in my local app. I created my project following this vite+ts tutorial Babylon.js docs
and my code is like this:
import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import { Engine, Scene, Mesh } from "@babylonjs/core";
import * as BABYLON from "@babylonjs/core";
class App {
constructor() {
// create the canvas html element and attach it to the webpage
var canvas = document.createElement("canvas");
canvas.style.width = "100%";
canvas.style.height = "100%";
canvas.id = "gameCanvas";
document.body.appendChild(canvas);
// initialize babylon scene and engine
var engine = new Engine(canvas, true);
var scene = new Scene(engine);
const camera = new BABYLON.ArcRotateCamera("camera",
-Math.PI / 2,
Math.PI / 2.5,
15,
new BABYLON.Vector3(0, 0, 0)
);
camera.attachControl(canvas, true);
camera.attachControl(canvas, true);
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
light.intensity = 1.0;
// uncomment this line to build village and export the scene
// this.buildVillage();
// comment the above line and uncomment the following line to import the scene
BABYLON.SceneLoader.ImportMesh("", "/assets/meshes/village/", "scene.babylon");
// hide/show the Inspector
window.addEventListener("keydown", (ev) => {
// Shift+Alt+I
if (ev.shiftKey && ev.altKey && ev.keyCode === 73) {
if (scene.debugLayer.isVisible()) {
scene.debugLayer.hide();
} else {
scene.debugLayer.show();
}
}
});
// run the main render loop
engine.runRenderLoop(() => {
scene.render();
});
}
buildVillage = () => {
const ground = this.buildGround();
const detached_house = this.buildHouse(1);
detached_house.rotation.y = -Math.PI / 16;
detached_house.position.x = -6.8;
detached_house.position.z = 2.5;
const semi_house = this.buildHouse(2);
semi_house.rotation.y = -Math.PI / 16;
semi_house.position.x = -4.5;
semi_house.position.z = 3;
const places = []; //each entry is an array [house type, rotation, x, z]
places.push([1, -Math.PI / 16, -6.8, 2.5]);
places.push([1, 15 * Math.PI / 16, -4.1, -1]);
places.push([1, 5 * Math.PI / 4, 0, -1]);
places.push([1, Math.PI + Math.PI / 2.5, 0.5, -3]);
places.push([1, Math.PI + Math.PI / 2.25, 0.75, -7]);
places.push([1, Math.PI / 1.95, 4.5, -3]);
places.push([1, Math.PI / 1.9, 4.75, -7]);
places.push([1, -Math.PI / 3, 6, 4]);
places.push([2, -Math.PI / 16, -4.5, 3]);
places.push([2, -Math.PI / 16, -1.5, 4]);
places.push([2, -Math.PI / 3, 1.5, 6]);
places.push([2, 15 * Math.PI / 16, -6.4, -1.5]);
places.push([2, 15 * Math.PI / 16, -2.1, -0.5]);
places.push([2, Math.PI + Math.PI / 2.1, 0.75, -5]);
places.push([2, Math.PI / 1.9, 4.75, -1]);
places.push([2, Math.PI / 1.9, 4.75, -5]);
places.push([2, -Math.PI / 3, 5.25, 2]);
//Create instances from the first two that were built
const houses = [];
for (let i = 0; i < places.length; i++) {
if (places[i][0] === 1) {
houses[i] = detached_house.createInstance("detached" + i);
}
else {
houses[i] = semi_house.createInstance("semi" + i);
}
houses[i].rotation.y = places[i][1];
houses[i].position.x = places[i][2];
houses[i].position.z = places[i][3];
}
}
buildGround = () => {
//color
const groundMat = new BABYLON.StandardMaterial("groundMat");
groundMat.diffuseColor = new BABYLON.Color3(0, 1, 0);
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 15, height: 16 });
ground.material = groundMat;
}
buildHouse = (width) => {
const box = this.buildBox(width);
const roof = this.buildRoof(width);
return BABYLON.Mesh.MergeMeshes([box, roof], true, false, null, false, true);
}
buildBox = (width) => {
//texture
const boxMat = new BABYLON.StandardMaterial("boxMat-" + width);
if (width == 2) {
boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/semihouse.png")
}
else {
boxMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/cubehouse.png");
}
//options parameter to set different images on each side
const faceUV = [];
if (width == 2) {
faceUV[0] = new BABYLON.Vector4(0.6, 0.0, 1.0, 1.0); //rear face
faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.4, 1.0); //front face
faceUV[2] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //right side
faceUV[3] = new BABYLON.Vector4(0.4, 0, 0.6, 1.0); //left side
}
else {
faceUV[0] = new BABYLON.Vector4(0.5, 0.0, 0.75, 1.0); //rear face
faceUV[1] = new BABYLON.Vector4(0.0, 0.0, 0.25, 1.0); //front face
faceUV[2] = new BABYLON.Vector4(0.25, 0, 0.5, 1.0); //right side
faceUV[3] = new BABYLON.Vector4(0.75, 0, 1.0, 1.0); //left side
}
// top 4 and bottom 5 not seen so not set
/**** World Objects *****/
const box = BABYLON.MeshBuilder.CreateBox("box", { width: width, faceUV: faceUV, wrap: true });
box.material = boxMat;
box.position.y = 0.5;
return box;
}
buildRoof = (width) => {
//texture
const roofMat = new BABYLON.StandardMaterial("roofMat");
roofMat.diffuseTexture = new BABYLON.Texture("https://assets.babylonjs.com/environments/roof.jpg");
const roof = BABYLON.MeshBuilder.CreateCylinder("roof", { diameter: 1.3, height: 1.2, tessellation: 3 });
roof.material = roofMat;
roof.scaling.x = 0.75;
roof.scaling.y = width;
roof.rotation.z = Math.PI / 2;
roof.position.y = 1.22;
return roof;
}
}
new App();
I can export the scene.babylon in my local inspector and import it to the online sandbox, everything looks fine. But if I imported it in my local app like the above code, the semi-house’s material just lost. From the inspector, you can notice that there is no material linked to it in the second box_merged mesh, while in sandbox the material is linked as expected…
Anything I have missed in importing the mesh ?
The first thing I see is that you are mixing imports.
Try to remove this line
import * as BABYLON from "@babylonjs/core";
and add missing imports (Vector3, ArcRotateCamera etc) here:
import { Engine, Scene, Mesh } from "@babylonjs/core";
Then remove BABYLON. everywhere in your code.
Thanks for reminding this, I removed this line:
import { Engine, Scene, Mesh } from "@babylonjs/core";
and add BABYLON. prefix on all classes, which is consistent with the babylon online tutorial.
Same thing happened 
Could you share your project on Github?
Nevermind. I was wrong. Thanks @mawa for pointing it out 
2 Likes
sure, you can use this project of the tmp_share branch mybabylon/build-a-village at tmp_share · flybywind/mybabylon · GitHub
The last parameter of mergeMeshes (set to true here) is supposed to create and auto-assign a mutimat. I wouldn’t know why the material is undefined in the inspector. Likely something else must have gone wrong there (because the auto create and assign multimat clearly works - I do this all the time)
1 Like