Import .obj with transparent textures

Hello,

I try to import a .obj file with textures which png files should be transparent but are not.

My mesh should be like this :

and it is like that

the foliage of the tree should be rendered and it is not probably because my materials are not transparent.

Sorry, i cannot make a PG because i don’t know how to import the .obj file and the .mtl and all the materials.

Could you help me ?

Thanks,

Boris

You could share your obj + mtl + textures here so that we could have a look in the sandbox.

the easiest to load external assets is to follow: Using External Assets In the Playground | Babylon.js Documentation

Yes, i’m used to dropbox but i don’t know how to submit the dependencies (mtl file and png textures).

Can you tell me how to save the sandbox to share it ?

Just share a zip with everything in with us :slight_smile:

Here it is :slight_smile:

@bghgary I know you played quite a bit with obj, does the file look correct to you ?

I’m not sure how obj supports alpha, but at least one of the problems is that the texture doesn’t have alpha because it’s a jpg which can’t store alpha information.

4 Likes

@bghgary i’ve downloaded the files from Turbosquid and tried to import them on babylon without changing anything. I don’t know which is the engine installed on the Turbosquid website but it seems to work with jpeg files and transparent textures.

It looks like the “mask” textures are supposed to hold the opacity channel

If we look inside the .mtl file, it has lines like:
map_d gleditsia triacanthos flowers mask.jpg
According to this MTL OBJ materials file (paulbourke.net) reference, map_d refers to a “dissolve texture”.

map_d -options args filename
Specifies that a scalar texture file or scalar procedural texture file
is linked to the dissolve of the material. During rendering, the map_d
value is multiplied by the d value.

As it turns out, we do support this in the .obj loader. When I open the tree model in the Sandbox, I can see the material has the correct opacity map
image
But the leaves are still fully opaque.

If I open it up with the texture inspector and paint transparent pixels, then the material becomes transparent in those places


So the root of the problem is that we expect opacity textures to hold the opacity data in the alpha channel, but this model is using black/white to represent opacity instead.

Not sure if this is something we would want to address on the .obj loader side, or on the material side. @bghgary what do you think? Worth nothing that this model is broken in the exact same way in Blender.

6 Likes

The opacity map as @DarraghBurke points out is an RGB mask. Since .mtl files don’t specify how this works (at least not from what I can find online), Babylon just treats these as a luminance texture expecting the value to come from the alpha channel of the texture and defaults to alpha blend. There is a flag on the texture to switch this to RGB, opacityTexture.getAlphaFromRGB = true. There is a mode on material to set it to alpha mask material.transparencyMode = BABYLON.Material.MATERIAL_ALPHATEST. These both need to be set for this model to look right.

If I do this manually in the sandbox, then it looks like this:

I don’t know if we can automatically do this for the obj loader since it’s not clear what conventions obj is using.

2 Likes

Maybe it would be easier to transform the jpg into png format with transparency.

But i don’t know on which image files i have to do this. Only on the color files or bump files and mask files too ?

How do you access to opacityTexture.getAlphaFromRGB property through the sandbox?
I don’t see it when I’m on the opacity texture

Just add the alpha information in your color textures, others doesn’t need to.

I did it with the console.

BABYLON.Engine.LastCreatedScene.materials.forEach(material => { if (material.opacityTexture) material.opacityTexture.getAlphaFromRGB = true; })
1 Like

If you are getting the model from TurboSquid, there should be an option to download a glTF right? glTF doesn’t have these problems since the spec is much more clear about how to render it.

1 Like

No, most of the 3d objets formats are .obj, .fbx, .max or .blend.

Here’s the list ot the available extensions.

You can move it in alpha for all the mask textures.

@bvaisman does this solution work for you?

1 Like

Perfect…

Thank you

1 Like