How to create intersections between transparent 3d models?

I’m having trouble intersecting two quads or 3d models in unity. If the material is set to Opaque, there is no problem at all. This is the result:

However, just set the same material to transparent and the weird stuff starts happening:

Always either one of the squares is completely in front of the other. It depends on the distance between them and the camera. I’ve learned to tweak it so I can choose which material is painted over (for example decreasing the render queue number of the lower) but I’m not able to obtain a cut between the two. I’m almost sure this has something to do with how the z-buffer works but I couldn’t find any good workaround.

There must be a way of doing this, since it is a very common feature in video games, specially for vfx (or just think of rainbow circuit in Mario Kart!). See what happens when trying to create a simple vfx of two cylinders one inside the other:

In this case, the inner cylinder is showing on top of the outer one and also the back face is doing weird things when rendered (look at the red arrow).

You can easily reproduce this with two quads in a new scene. Just create a new material and set it to transparent. I’m using the standard render pipeline but I think this also happens in the URP.

:roll_eyes:

This is common problem with no perfect solution, google “transparent sorting” and you can find a lot of similar questions and potential solutions.

In general the problem is that opaque uses zbuffer by default and you can discard pixels behind, but transparents should not or you would cover other potential transparent object. You can enable zwrite, but this will break the rendering.
Transparent meshes are sorted usually from camera distance, but both cylinders are in exactly the same position, so engine can’t determine sorting properly.
Often you can solve this problem with good placement of transparent elements or setting the render queue to enforce something is rendered always before/after.

Hi Qriva. Thanks for the response!
I understand that if elements are in same position you cannot know which one goes in front. But shouldn’t this get calculated by geometry? It makes no sense to use pivots to know what is in front or behind.

What do you mean? It’s sorted by meshes, not triangles. First of all I can’t imagine sorting milions of triangles every frame, and even if you did that what about shaders? Instead of changing shader like 2-5 times it would be like at least hundreds.
Assuming you have just one mesh from what I know it’s rendered in order specified by mesh, but that is fixed during export.

I understand but if that were true, how would they create something like Mario Kart’s rainbow circuit? I don’t think they would do it by chunks. And how would you do something as common as a transparent texture underwater?

I don’t know how mario rainbow map works, never played it, but the common tool is queue order to enforce something is rendered before/after. Also there are different engines and tricks to do stuff. Why spliting maps into chunks is bad idea? This is usually the case to get better performence by culling objects.

In any case personally I don’t know any magic tools to fix transparency sorting. I am aware of good placement, rendering order (queue), order of triangles inside mesh, multiple passes, perhaps there are some stencil tricks, but I don’t know any magic bullet (however I am not expert in this topic).

I think it is a bad idea because the chunks should be super small so as to avoid this. Just look at the cylinders I used as example. See the backface artifact to the left? I believe things like that would happen all the time. But this is just an assumption. Maybe they are using other techniques to simulate transparency while using opaque renderers… I don’t know. But it is really surprising for a newbie in 3d games like me that you cannot correctly render a simple transparent cylinder with backface rendering on…