Unexpected sprite transparency

Is this the result you are looking for?

https://jsfiddle.net/56ecvyfh/

Setting depthTest to false is the usual way if you don’t want an object to be depth tested. Besides, it’s important to understand that sprites are transparent by default and thus rendered along other transparent objects. Depending on how objects are sorted according to their depth, you see the mentioned artifacts. This is actually not a bug but a limitation of the standard depth sorting of three.js and other 3D engines.

A simple workaround is to force your sprite to always be rendered last by setting Sprite.renderOrder to 1. This will override the default sorting.

3 Likes