[SOLVED] Order priority, blending and Z-fighting problems

Hi,

I’m trying to blend shadows. In fact, they are basic planes with opacity mask. If I put two planes on top of each other, they are not blending together.

Also, depending on the orientation of the camera, I can see one plane and on other orientation, I can see the other planes. It is like a Z-fighting even if a plane is at 0.0025 m (2.5mm) on Y-axis over the other.

  • How can I blend these textures together?

  • Why a plane or another can be visible depending the angle of the camera?

  • Is there another way to achieve what I want?

Image 1: Big shadow is on top of a small one
image

Image 2: Small shadow is on top of the big one from another angle
image

Hi @Mystik,

That is quite normal in 3D rendering: proportionally large objects in one/two axises compared to other side have trouble when doing blended rendering.

For blended objects the order is being calculated using the model AABB which in these cases due to lack of precision can lead to z-fighting.

You can try a couple of things:

  • if you are able, put your shadows in a single texture/plane
  • increase your camera near plane distance / decrease the far plane, this will increase precision
  • use a custom sorting function for those two planes on their mesh instance, to add your custom logic on their render order:

https://developer.playcanvas.com/en/api/pc.MeshInstance.html#calculateSortDistance

Here is another explanation on the matter:

also, remember to disable Depth Write for shadow materials - that’s in Other section of the materials.

2 Likes

Disabling “Depth Write” fixed my problem here.

But, what is the effect of “Depth Write” exactly?

The engine renders a special viewport map called depth map to be used to sort the order of blended meshes.

Disabling Depth Write will exclude this material (and all mesh instances using it) from getting rendered in that map. So they will not be taken into account for blending ordering.

2 Likes

Thank you for your super fast response (<1 min)! :innocent:

2 Likes