CODEWITHSUNDEEP
transparencyaframegltf
scuba-accident
scuba-accident

Reputation: 45

How can I get textures with alpha on 3D models working in A-Frame?

I made a 3d model with a .png texture that has an alpha channel. The texture does not render correctly in A-Frame. I created the model in Autodesk Maya and exported the model as .OBJ. Then, I used obj2gltf to convert from .obj to .gltf format. The transparency does not appear correctly in A-Frame. There are some rendering problems with the model as shown in the images.

The model renders incorrectly in all the browsers I tested it in: Chrome, Firefox and Safari (iOS). When exporting from obj2gltf, the model does not show any transparency when used without --checkTransparency. It does not work if it is called from <a-assets> or inline. I also imported the model into Blender and then exported as .gtlf using the blender gltf exporter, and A-Frame failed to recognize the transparency at all. The model does not appear correctly if loaded as an .OBJ with <a-obj-model> tags either.

<a-assets><a-asset-item id="tree" src="assets/tree02.gltf"></a-asset-item></a-assets>

<a-entity gltf-model="#tree" position="0 0 -10" material="alphaTest: 0.5"></a-entity>

https://i.sstatic.net/JQ3Fu.png This is how it shows up in A-Frame

https://i.sstatic.net/iuo0j.png This is what the model looks like in Maya, and how it should appear.

Upvotes: 2

Views: 1231

Answers (1)

feiss
feiss

Reputation: 156

Transparency seems to be working here, your problem seems to be the classic opengl sorting order + transparency + depth Buffer. Some leaves on the front render first than others, so back leaves don't render because there's something in front of them already. The optimal way of rendering all leaves would be pre sorting by distance to camera all leaves before rendering, but this is usually unfeasible when loading external models.

I'd recommend you to try activating side:double and depthTest: false in A-Frame's material. Also, use an obj model instead of a gltf, so you can use the material component with it (you cannot use material component with gltf models).

<a-entity obj-model="obj:#tree" material="src: #yourTreeTexture; side: double; depthTest: false">

depthTest will do the trick, although it may render over other stuff in your scene. Try to find the best alternative..

Upvotes: 3

Related Questions