Problem Loading Meshes with Textures

[aburbanol]

I downloaded this mesh (.gltf) and I’m having problems visualizing it correctly in my game. I tried the following steps in order to understand, but I didn’t find any clue.

1. I used the https://sandbox.babylonjs.com/ to check if it was complete.

Image .gtlf

2. I exported the file using the sandbox to a .babylon fil, then I use sandbox to visualize the just created .babylon and I got this:

mesh .babylon

Here, you see the mesh in a different position and with a very different size and rotation (is losing some information from one format to another?)
3. I use the assets manager and the SceneLoader.ImportMesh to import the .gtlf file and I got the mesh all black, with the animation working and I’m able to change the scale and the position.

Image loaded mesh from .gltf file

4. When I load the generated .babylon file, I got a huge mesh that I can not manipulate (change position or scale).

Image loaded mesh from .babylon file

5. I used a loading example jus to try this mesh and be sure that was not realted with anything else.

Isolated load using load mesh example

How I can make the mesh has the original textures?
Why there is strange behavior with the .babylon loaded mesh (position and scaling)?

[gbz]

I think the unexpected position, rotation, and scaling when exporting to .babylon can be fixed by referring to Mixamo - Babylon.js Documentation. Search the phrase Apply on this linked page (Position, rotation xyz all need to be set to 0, and scaling xyz need to be set to 1).

Edit: Sketchfab allows you to download in .fbx format (as well as .gltf). I’d recommend using the .fbx format. Then you can follow the guide linked above, and you should get the result files below. You can try dragging the .babylon tree in the .zip file below in https://sandbox.babylonjs.com/, and you should see your tree animating.

tree.zip (158.4 KB)

[aburbanol]

Woww @gbz thanks a lot for the time and effort you took to help me!

[aburbanol]

Dear @gbz, I still have problems with the .babylon loaded mesh with position and rotation, that I dont have with the .gltf file:

1. The is placed under the ground and still black:

code + image

meshTask = assetsManager.addMeshTask(“t02”, “”, “scenes/low_poly_tree_wind/”, “tree.babylon”);
meshTask.onSuccess = function (task) {
console.log(task);
task.loadedMeshes[0].parent = scene.getMeshByName(“ground”);
var x=45;
let z=45;
var y = ground.getHeightAtCoordinates(x, z);
task.loadedMeshes[0].position= new BABYLON.Vector3(x, y, z);
}

2. About the files you sent me back, the .babylon is loading in the Sandbox correctly, but when I open it the one on Blender, It has no textures (Is the first time I use Blender), Is it normal?.
   
   

[gbz]

@aburbanol

assetsManager

Response to Question 1:
Could you try creating a Babylon Playground reproducing this issue?

Loading the .babylon file exported from the .fbx file in Blender using AssetManager should load the tree into the scene upright with the tree’s base at (0, 0, 0) I think. And I’d expect setting its position to new BABYLON.Vector3(x, y, z) to move it to the desired location…

Answering Question 2:
The white color in Blender is normal. In the Youtube video sent, I had to change the materials due to a .babylon export error. You can show colors in the Viewport Display as shown in the image below:

The Viewport Display color is not the same as the Material’s Base Color. The Base Color is exported into the .babylon file. The Viewport Display has white color as default.

[aburbanol]

Thanks @gbz again. I have been stuck for 5 days to put a simple 3D model. I followed your advice to pass to the PG (here) where I could reproduce that the loaded mesh can not be positioned (task02), but an Instance of it can (task1). Does this make sense to you? check out under the terrain that there is this loaded tree of the second task, but not where I placed it.

Summary

btw, I could not reproduce the black surface as it is happening locally (self-hosted web).

[gbz]

@aburbanol, I couldn’t figure this out yet, but I added two console.log() statements in https://playground.babylonjs.com/#YB006J#210.

I hope someone else who has more experience with .position and .absolutePosition can help out here. I included a comment // source of problem! in the above playground.

newMeshes[0].position is equal to (45, 1.35, 45) as expected, but newMeshes[0].absolutePosition is equal to (0, 0, 0). I tried using .setAbsolutePosition(), but didn’t seem to work.

@Deltakosh

[Deltakosh]

Hey!

absolutePosition is evaluated during mesh.computeWorldMatrix()

So you can either call this function or call getAbsolutePosition() which will do it for you:
https://playground.babylonjs.com/#YB006J#211

[gbz]

Thank you, @Deltakosh!

In the playground you provided, newMeshes[0].position is equal to (45, 1.35, 45), but newMeshes[0].getAbsolutePosition() is equal to (0, 0, 0). We’re hoping to get the absolute position to equal position (45, 1.35, 45).

Edit: Just did console.log(newMeshes[0]), and saw these. Not sure if relevant

[aburbanol]

Hi guys,

I dont know if it is relevant or not, but my work around is that the original mesh loaded is not possible to manipulate (Is it a bug?), However, if you create a new instance var newInstance = newMeshes[0].createInstance("i" + index); you can manipulate its position and rotation.

Image with manipulated .babylon meshes

Thanks to @gbz explanations, I downloaded a couple of models, edit them in Blender and exported to “.babylon” and I’m able to place them every I want with different positions and scales. What worries me, is if I need to load several models and I have to duplicate them all, is going to deteriorate my apps performance.

On the other hand, the .gtlf behavior is different. You can manipulate the rotation, scale and position, but the material is always black.

[gbz]

@aburbanol, have you tried using BABYLON.SceneLoader.ImportMesh from this documentation instead of BABYLON.AssetsManager.addMeshTask? I haven’t had too much issues with ImportMesh, and I haven’t used addMeshTask before. Also there is ImportMeshAsync to load assets in parallel.

Also, I think your approach using createInstance is a good idea according to the documentation, since you might be creating many trees.

[aburbanol]

Yes, I tried with both and had the same result, you can’t manipulate the first. I did the experiment in the same scene loading with both approaches.

I prefer to use BABYLON.AssetsManager, because it allows me to control the loading, change the message, etc.

[Deltakosh]

Ok my bad…here is the correct one: https://playground.babylonjs.com/#YB006J#217

[aburbanol]

@Deltakosh, I’m so sorry but when I see that exxample there is the same problem. The 2 tree you can see are from the other task. The lin 171 console.log(newMeshes[0].getAbsolutePosition()) still print (0,0,0) and the tree is under the ground.
@Deltakosh Do you have a different result in your browser? Can you see 3 trees on the ground?

[Deltakosh]

Ok for some reasons, it works only when you click twice on RUN.

[aburbanol]

Therefore is a bug? I’m planning to host this page so there will not be a ‘play’ button.

[Deltakosh]

No I meant: it is probably a cache issue linked to the PG itself. It will work flawlessly locally

[Amal_Duriseti]

@aburbanol - this is probably 2 late for u

but for anyone encountering this problem - the babylon playground default scene spawns with light already constructed - if u are loading a mesh locally it will appear black unless you also spawn a light even if the textures are properly loaded and applied

code:

var scene = new BABYLON.Scene(engine);
new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);
BABYLON.SceneLoader.ImportMesh(...)