Shadow Contact in Babylon - ambient occlusion

I’d like to do some sort of ambient occlusion on the main plane.
I saw this example in ThreeJS, would it be possible to make it in BabylonJS too?

If so, where should you start?
I think that basically you should create a texture in which to write the z-buffer by taking the scene from below. Then create a shader that uses it to create the shadow and apply a blur effect on it.

https://threejs.org/examples/webgl_shadow_contact.html

You can use an orthographic camera that renders from behind in a render target texture, and use that texture as the emissive texture of the plane:

We don’t have a depth material, so I created a material plugin to emulate it.

1 Like

Perfect, now I’m going to implement it in my project, you’ve been really helpful.

A thousand thanks

Could this be added as a built in feature? I’ve tried using ssao2 for contact shadows but it was hard for me to get it to look good without messing up the ssao effect in the rest of the scene.

We’ll have to discuss this with the team, but it’s something that could happen!

In the meantime, you can use the PG I’ve provided to take advantage of this feature.

1 Like

I think if it were integrated into Babylon
it would be nice to be able to define this type of shadow for any plane,
the top of a table, a front face of a wall, etc. Maybe with a flag that allows you to define the shadow texture as static without updating it in real time every time for the entire scene.

Hi, today I implemented your code and I’m really satisfied with the first result.
Thank you.

Now I should try to create this plane on top of any object, for example a table top, by placing the plane above it at a distance of 0.001.

Would it be possible to show only the shadow on the table top and thus let the table material shine through?

This is the idea but there could also be another way.

A thousand thanks

Same as usual, @Evgeni_Popov this looks great !!! I wonder how it can be reused/documented in a way it would benefit others in an easy sharable way ?

Here’s how you can do it on a plane with an opacity texture:

I think we should discuss how we can package it so that it’s easy for users to take advantage of it…

1 Like

nice work , just thinking ahead , maybe it should also have means to just render it once , less processing for scenes where you know the assets would be static…

Hello and thanks,

I think it might be interesting to create a class, for example:

floorPlane = new ShadowPlane( x, y, z, width , height, normal, minZ , maxZ );

floorPlane.renderList.push( mesh )

onRender()
{
floorPlane.update();
}

ShadowPlane.update()
{
if the distance of the mesh from the plane is between minZ and maxZ then render mesh
}

It would be interesting to be able to create multiple planes, and insert the normal of the plane as a method parameter. (see the image with the walls)

Thanks for your feedback!

We’ve added it to our to-do list, but we may not be able to do it for version 7.0, as the release is close and we still have a number of things to finish.