--Latest Update-- I've included this code and it appears to have made a difference. The glass is now clear, but still quite dark.
Note: I'm new to WebAR (and coding in general).... but I've spent days researching online to solve this issue.
I am attempting to create a WebAR experience using a gltf model with AR.js and Aframe. Below is a snippet 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 managed to make the gltf model work with textures, but I'm still struggling to achieve the desired look. Particularly, the glass on the bottles should be transparent, not opaque. I imported and edited the model in Blender 2.82. I used the Principled BSDF node and set the Blend mode to "alpha blend"
Here's a screenshot: https://i.sstatic.net/n3YWC.png
After exporting the model, I tested it in the gltf validator and it looked as expected. Here's a screenshot: https://i.sstatic.net/u91O5.jpg
Unfortunately, the active marker doesn't display it the same way. Maybe there's something else I need to do to make the alpha channels work? Or could it be an error in my code? Here's a screenshot of the active marker: https://i.sstatic.net/ZSqmw.jpg
Lastly, I attempted to add the model as a glb file instead, listed as an asset. But when I include assets within the a-scene tag, the webcam won't load. However, I've seen others use this method successfully.