javascriptthree.jstransparencyaframe

A-Frame cursor with transparent image has a wrong draw order

I have a transparent image cursor, that is, an image that is a child of the camera. 

<a-camera>
    <a-image position="0 0 -1" width="0.2" height="0.2" transparent="true" src="image.png">
</a-camera>

I’m having a tough time getting it to appear above other transparent images (such as the dinosaur). I'm seeing odd artifacts:

enter image description here

If used with material="depthTest: false;" it appears behind other transparent images:

enter image description here

There's a lot of material on StackOverflow about transparency with Three.js, but non of it pertains to A-Frame. I did try playing with the renderOrder property on various objects with no luck.

How can I solve this?

Relevant codepen:

https://codepen.io/OpherV/pen/oBqgBa?editors=1000

Solution

  • So as it turns out, sortObjects is explicitly changed to false by A-Frame, even though in ThreeJS it's true by default. I'm not sure why, as this isn't documented anywhere.

    It took a while to find this out but knowing this the solution is quite simple:

    document.querySelector('a-scene').renderer.sortObjects = true;