CODEWITHSUNDEEP
3dtransparencyblenderaframe3d-model
Tiago Peres
Tiago Peres

Reputation: 15550

A-Frame ignoring 3D model's slightly transparent materials

I've created a 3D model using Blender that has three materials with some transparency and exported as .glb.

3D model

When I test it in the browser, even though the structure is the same, the materials are not

A-Frame 3D model colors don't add up

Read the troubleshooting guide for 3D models and didn't see anything like this.

As mentioned here, tested uploading it to Clara.io but got the same result as the one in the browser

Clara.io 3D Octant

Tested exporting the file again, visualizing in different browsers and adding to A-Frame's <a-entity gltf-model="#octant"> and <a-asset-item id="octant" src="octant.glb">:

Check the Glitch version here

Tried simplifying the shader

Simplify shader

but that also didn't work

A-Frame nooooo

Upvotes: 1

Views: 1338

Answers (1)

mrossman
mrossman

Reputation: 589

I think the solution is to set transparency via the alpha parameter of the base color, NOT the alpha you see directly on the shader node. See the 'A' at the bottom of this base color picker:

See the 'A' at the bottom of this base color picker.

Also ensure the blend mode is "Alpha Blend". Then, in A-Frame, add a material component to your model's entity with transparent: true.

Working demo on glitch: https://aframe-transparent-material.glitch.me/

Working demo with transparent planes

(see notes below for another demo without the weird color issues)

I've also included the .blend file in the Glitch assets for you to peek at.

NOTES

  • For the model you shared, transparency blending is not perfect --- some colors seem to be blending with others but then different colors are not blending. This is because Three.js renders transparent objects from the back to the front, but when many planes intersect like that, there is no clear front to back ordering. A workaround to this is to split your planes into 4 smaller planes (and adjust their origins) so that there is no intersection and a clear depth order. Here is a modified version of the Glitch demo with that implemented, as you can see the transparency works perfectly now.

  • As far as I know Blender gLTF export only understands the Principled BSDF shader node, so your mix / transparent node setup would not work

  • I noticed that when using the broader "alpha" setting on the principled shader, exported to .glb, and then re-imported into Blender, it converted it into mix / transparent nodes. So this could explain why the regular "alpha" parameter is not being recognized by the gLTF importer in Three.js

Upvotes: 3

Related Questions