How can I add a gltf model to Aframe & AR.js with an alpha channel?

Question

--Update-- I have added this code and it seems to have helped. I can see that the glass is now clear, but it's still incredibly dark.

Warning: I'm a newbie to WebAR (and coding in general).... but rest assured I have scoured the internet for days trying to figure this out.

I am trying to use a gltf model with AR.js and Aframe to make a WebAR experience. Here is a portion of my code:

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> 
<script src="build/aframe-ar.js"></script> 
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>

<!-- marker -->
<a-marker type='pattern' url='https://raw.githubusercontent.com/merowell/Evidence-Collection-Procedures/master/assets/markers/patt/pattern-biological-1.patt'>

<!-- add .gltf model-->
    <a-entity gltf-model="https://raw.githubusercontent.com/merowell/Evidence-Collection-Procedures/master/assets/models/biological/biological.gltf" position="0 0 0" crossOrigin="anonymous" rotation="0 0 0" scale=".3 .3 .3">
    </a-entity>

I have figured out how to get the gltf model to work with textures, but I still cannot seem to get the exact look I'm going for. Mostly, the glass on the bottles are supposed to be clear and not opaque. I imported and edited the model in Blender 2.82. I am using the Principled BSDF node and have set the Blend mode to "alpha blend"

Here is a screenshot:

After exporting the model, I tested it in the gltf validator and it looks like I want it to. Here is a screenshot:

Unfortunately, the active marker does not display it in the same way. Maybe there is something else I need to do to make the alpha channels work? Or perhaps it's an error in my code? Here is a screenshot of the active marker:

Finally, I have tried adding the model as a glb file instead, listed as an asset. But when I list assets within the a-scene tag, the webcam won't deploy. However, I have read other people use this method.

merowell merowell · Accepted Answer · 2020-02-15T21:16:45

EDITED-- problem still persists.... the models are only transparent in relation to other models. But you can not see the real world environment through the transparent material (as you can with a wavefront obj)

This solved the issue... and I just had to go to the blender file and re-export the model with a lighter color in order to get it to look the way I want.

How can I add a gltf model to Aframe & AR.js with an alpha channel?

1 Answers