Shadows on both sides of double sided material

I am preparing an installation for audiovisual festival. While what I am looking for is easy to do with Unreal I d like to challenge myself and do it with the BJS. While the best approach to achieve this is not clear to me.

How would you approach something like this? The idea is to have an object inside the sphere being visible only as a shadow + very close to the surface of the sphere because of fog inside.

This should work by default if you turn the ping pong ball backface culling mode off:

https://playground.babylonjs.com/#IFYDRS#256

Look under the ground in the pg above

1 Like

If you want it to work with an object with an interior and exterior (like a ping pong ball), I think you will need to do a little more (but maybe there’s an easier way):

https://playground.babylonjs.com/#JBJAZ7#1

You can see the shadow from the outside, from the inside and from the back. You need separateCullingPass=true to get rid of artifacts when rendering the sphere with transparency enabled.

THanks! I am getting somewhere close enough but the problem I have now is that contact shadows are never blurred so there is actually no feeling of a volume https://playground.babylonjs.com/#8A2BHY#65 any thoughts?

PCF/PCSS are not supported for point lights, it would be too taxing on perf because of the 6 shadow maps rendering that we must perform. Only poisson, exponential and close exponential filtering are supported.

Directional does not produce any difference in shadow size when the object moves which is a no go. Hemisphere just does not work. https://playground.babylonjs.com/#8A2BHY#66

What would be your recommendation?

Maybe you can modify the darkness value based on the position of the cube? You won’t have soft shadows but at least a sense of the cube position based on the shadow intensity:

https://playground.babylonjs.com/#8A2BHY#67

Hehe, thanks nice hack, but this is far from the level of quality expected from an art festival piece. Shadows of the parts that are further to the surface should be blurred otherwise the feeling of volume is lost.

Maybe try with a spot light instead:

https://playground.babylonjs.com/#8A2BHY#68

1 Like