I would like to use billboards/textures/sprites (not sure of the terminology) with a depth attribute at each pixel so that I can have intersecting spheres that are properly rendered (as in the image). Does three-js support billboards with depth right out of the box, or do I need to write a shader, etc? I want to avoid the performance issues that would arise with many spheres and a full 3D model/mesh for every one.
It’s probably more correct to say that you want a depth texture in the fragment shader so you can sample the depth of the scene. Unfortunately, this is not supported with the default materials. Ideally, you render the scene and save the depth information into a texture. A second render pass draws the particles and blends them onto the scene. To do this, you need a custom shader material. The following thread is related to this topic and might be helpful: