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:
If used with material="depthTest: false;"
it appears behind other transparent images:
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:
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;