Unexpected sprite transparency


I’m making a little sprite for a pointer, and I want this sprite to always be on foreground, so I set depthFunc: THREE.AlwaysDepth to its material. But the result when the sprite appears in front of a transparent material is unexpected, firstly it’s not always on foreground, and secondly there seem to be a blending issue of sort. This not happens when the background material is not transparent.

I’m making a SpriteMaterial from a CanvasTexture to avoid loading an image, I don’t know if it’s related to my problem…

Fiddle here

That’s what the issue looks like :

That’s what I want it to look like :

I’m not sure if it’s a bug of if I’m doing something wrong…

Is this the result you are looking for?


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.

1 Like

Hi @Mugen87,

I actually know renderOrder but I was mistakenly hoping that depthFunc: THREE.AlwaysDepth would help me in defining this Sprite as the object that must always be rendered on top, whatever the other objects renderOrder. I’m working on pieces of code that might be used by other people, whose use of renderOrder I don’t know, so besides checking every other object renderOrder at runtime and setting it higher (which seems messy and not efficient), I don’t know how to do.

Anyway it’s not very important, I will get away with setting the renderOrder very high and hopping that nobody will have difficulties.

Thank you :blush:

EDIT: Seems to work well if I set renderOrder to Infinity