Aframe - PNG with transparency in front of the entity
Maybe this is not Aframe, so sorry if this is more of a generic html question, but if you have a PNG with transparency and put it in front of another image or any object with an opacity less than 1.0, the transparent part of the PNG masks then what's behind it. Is there a way to solve this without positioning the PNG behind another object?
Here's an example of a png that behaves like before primitives. This works because the primitives are all in 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 is an example of my problem. Png with transparency masks ALL images behind it regardless of whether they have transparency or any primitives with opacity 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>
source to share
You can set the alphaTest material to 0.5. In the A-Frame master (send up to 0.6.0) you can do:
<a-image material="alphaTest: 0.5">
or maybe <a-image alpha-test="0.5"></a-image>
In 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>
source to share
If you add code for your transparent .png after other images, it will not add transparency to other images.
<a-scene>
<a-image position = "-.7 2 -1.5" width="1" height="1" src="#flatImage"></a-image>
<a-image position = "0 1.6 -1" width="1" height="1" src="#transpImage"></a-image>
</a-scene>
source to share