Why model graphics appear wrong when working with more than one base color texture?

Questions
1

Hi. I’m trying to import units for a game. The units have multiple meshes (e.g. one for the horse, one for the man, one for the weapon).

Model’s format is .obj, there’s also a mtl file and two texture files (for the model that looks wrong).

For some reason, some of the unit look ok and some don’t. What seem to be happening is that the ones that looks wrong are at the ones that have 2 baseColor files instead of one. But I don’t know why this would make a difference. You can see the problem here:

looks-bad
looks-bad562×696 594 KB

But it looks god when I open it with Windows 10 (Visor 3d).

Also other units with only one baseColor, they look good.

This is the organization of the file:

file-mlt file-org

And this is the initialization code:

        const scale = Archive.models[model.key].scale; // Cambiar esto, no debería acceder a archive

    // this set multimaterial = true when there is more than 1 material
    const multiMaterials = !!task.loadedMeshes.find(m => {
       return _.get(m, "material._diffuseTexture.name") !== undefined &&
       _.get(task.loadedMeshes[0], "material._diffuseTexture.name") !== _.get(m, "material._diffuseTexture.name");
     });

    const modelMesh = BABYLON.Mesh.MergeMeshes(task.loadedMeshes, true, true, undefined, false, multiMaterials);
    
    modelMesh.scaling = new BABYLON.Vector3(scale, scale, scale);

    modelMesh.setEnabled(false);

For creating them we are using new instances.

Initially I thought it could be because the merge meshes but the same happend when I tried t use a TransformNode instead of mershing the meshes.

UPDATE: to clarify, the problem seem to be that for certain angles certain parts of the image become transparent (e.g. the soldier in the image has beard, but it doesn’t show for some reason in Babylon, although is visible when opening the file in Windows). This is how the soldier should look:

correct_unit

2

Hi hhaamm,

I’m not sure why this would have happened, but it looks like your rendering isn’t writing to the depth buffer correctly, causing meshes to render on top of each other when they shouldn’t. In the first image you posted, for example, I suspect the character’s beard is being drawn, but it’s being drawn first and then painted over by meshes (hat, then head, then shirt) because the meshes can’t tell when they’re supposed to be behind each other. Can you create a Playground with this asset that shows the issue? This will be much, much easier to diagnose if we can actually see it in action. Thanks!

1 Like
3

A possible explanation on why your meshes don’t write to the depth buffer is that their materials are flagged as transparent. Try to see if material.alpha < 1 or the value of material.transparencyMode or if the diffuse texture has an alpha channel that is enabled.

1 Like
4

I’ve created this playground:
https://www.babylonjs-playground.com/#8VDI1Z#7

You need to disable security protections in the browser for it to work, because it loads the model from an external URL.

5

Your materials are transparent because they use an opacity texture.

As they are transparent, they don’t write into the depth buffer, that’s why you can see some triangles pop/depop according to the camera movements (meshes are simply sorted from back to front before being rendered).

map_d corresponds to the opacity texture in the .mtl file. You can either remove this entry if you don’t need it, else you can try to set material.needDepthPrePass property to true (it can work, but it can also add other artifacts…).

3 Likes
6

Thanks a lot! It worked after I removed the map_d line.