Aframe - PNG with transparency in front of entity

Question

Maybe this isn't specific to Aframe so apologies if this is more of a general html question, but if you have a PNG with transparency and put it in front of another image or any object with opacity less than 1.0, the transparent part of the PNG masks out what's behind it. Is there a way to solve this without positioning the PNG behind the other entity?

Here's an example of a png behaving how it's supposed to in front of primitives. It works because the primitives are all at full opacity: https://codepen.io/iBrews/pen/dWNymp

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-assets>
<img id="pngImage" crossorigin="anonymous" 
src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
</a-assets>

<a-scene>
<a-image position = "0 1.5 -1" width="1" height="1" src="#pngImage"></a-image>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

Here's an example of my problem. A png with transparency masks out ALL images behind it regardless of whether or not they have transparency, and any primitives with opacity of less than 1.0 https://codepen.io/iBrews/pen/ZKLpqp

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>

<a-assets>
<img id="transpImage" crossorigin="anonymous" src="http://ekladata.com/hXTGfWnZm170W274zDRObDlqOlc.png">
<img id="flatImage" crossorigin="anonymous" src="https://upload.wikimedia.org/wikipedia/commons/e/e9/Felis_silvestris_silvestris_small_gradual_decrease_of_quality.png">
</a-assets>

<a-scene>
<a-image position = "0 1.6 -1" width="1" height="1" src="#transpImage"></a-image>
<a-image position = "1 1.8 -1.5" width="1" height="1" src="#transpImage"></a-image>
<a-image position = "-.7 2 -1.5" width="1" height="1" src="#flatImage"></a-image>

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-box position="-1 0.5 -3" opacity= ".5" rotation="0 45 0" width="1" height="1" depth="1" color="#4CC3D9"></a-box>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>

Answer 1

You can set the material's alphaTest to 0.5. On A-Frame master (shipping to 0.6.0), you could do:

<a-image material="alphaTest: 0.5"> or perhaps <a-image alpha-test="0.5"></a-image>

On A-Frame 0.5.0, you can do it manually:

<script>
  AFRAME.registerComponent('alpha-test', {
    dependencies: ['material'],
    init: function () {
      this.el.getObject3D('mesh').material.alphaTest = 0.5;
    }
  });
</script>

<a-image src="#transpImage" alpha-test></a-image>

Pen: https://codepen.io/mozvr/pen/jmyVRG