5

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>
Alex Coulombe
  • 87
  • 1
  • 7
  • Where's your code? Transparent PNGs on the web work as you'd expect; anything underneath will show through the transparent areas. If you're rendering a transparent PNG in a `canvas`, that's completely different—but you haven't provided any useful information so it's impossible to provide contextual help. – André Dion Apr 26 '17 at 15:31
  • Sorry-- code and examples added. – Alex Coulombe Apr 26 '17 at 15:59
  • Your code looks like it should work, perhaps add `transparent="true"` to the ``? (note to others, the HTML markup in this question is used by the A-Frame library to render a WebGL context, so it's not a standard `` on top of other DOM elements) – Don McCurdy Apr 26 '17 at 21:00
  • Didn't work. Check out the new codepen example I added at the bottom-- illustrates the issue perfectly. – Alex Coulombe Apr 26 '17 at 21:49

1 Answers1

13

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

ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • This was super helpful! Works perfectly on PNG transparent backgrounds but not so well on gradients. Is there a way to get it to work on gradients too? – jshaw3 Oct 27 '17 at 20:51