[SOLVED] Overlay mesh with Alpha Blend


We made our own shadow for some furniture. To do so, had a ‘floor’ in our mesh instances and we put a material with just the shadow, so opacity Alpha. So basically, the material is transparent except for the shadow parts.
But we get does results when the meshes overlay:

In other software like Cinema 4D, etc. you can overlay meshes with alpha, but can you do this with Playcanvas? Is there an option we overlooked? or Is there a work around?

Thanks in advance

Easy thing!

In the material, Opacity map, look up for “Alpha Test”, it’s rght below “Intensity”. Set it to anything above “0”, even if it’s a really small number, and you should be good to go.

I use this trick all the time :slight_smile:

Also you could use the Ambient Occlusion channel, which is meant to be used for what you are trying to do. Performance will be better as well.

Alpha Test is not giving me the best of quality :confused:

I don’t know if Ambient occlusion will solve our problem, because we have chaises under tables. So in our case a transparency over another transparency. Like the table has the same mesh for the shadow

That looks like it is doing it’s either alpha or not. Try changing the blending on the material to be BLEND_NORMAL in the editor: https://developer.playcanvas.com/en/api/pc.StandardMaterial.html#blendType

1 Like

I don’t seems to have the option normal :thinking:

Try additive or additive alpha.

Both gives me this

Can you share the project or create one with just enough to show the problem please?

Here is the link to a project that we recreated the problem:

We are open to any types of solutions as long as the quality stays. So don’t be shy.

I can’t the exact same problem in the project you have shared? I’ve added a floor to make it easier to see. What else should I be seeing here?

Well, you should see conflict between planes when you move the camera to certain angles.

Like some shadows disappearing, planes are glitching like white flashes, etc. I can show it in a video if you want

Ah, I see.

If you mean this:

Then that looks like Z fighting where two polygons are in exactly the same place.

I’ve moved one table up by 0.002 and made the shadows not write to the depth buffer.


Project: https://playcanvas.com/editor/scene/731883

Well, for the small ones, we are not in the same y, but this still happens

Has you can see part of the left table has no shadow anymore.



This seems to work nicely! Thanks!

I knew that there what an option that we overlooked!

Quick question, what is a depht buffer and what does it affect and do?

The reason why it disappears is because it is difficult to draw transparent materials over one another without knowing the order from the camera.

Therefore the ‘fix’ here is to not write the transparent materials to the Z buffer which allows other materials to render behind it despite the render order.

It’s not a perfect solution so you may find scenarios where this method gives odd results.

Each render frame, the Z buffer (also called a depth buffer) is cleared (by the camera in this case) and written to by every polygon rendered to the screen. What is written to the depth buffer is how far the polygon rendered was from the camera.

If another polygon tries to render in the same camera space, the render will check the depth buffer to see if it is closer to the camera than what has already been rendered. If it is, it will render it to the screen. If not, it doesn’t get rendered.

That’s the gist, graphics programming isn’t my forte so there may be a few technical inaccuracies.