Can we make an object not self-shadow while it still casts shadows on other objects?

Questions
,
1

Is it possible to make a specific object not self-shadow?

For example, in the following codepen, the Plane has a shadow artefact. It is using a modified version of Three.js (see pull request) where Planes are not rendered reverse-sided so that they cast shadows.

I could try modifying light shadow bias, to reduce the artefacting, but this gives the shadows unwanted distance from their objects:

In this case, I believe that if I could simply turn of self-shadowing for the planes, then the problem would be gone without introducing other artefacts.

Is there a way to make an object (f.e. a flat Plane) not shadow itself but still cast shadows?

2

Switching the PlaneGeometry to a 0 height BoxBufferGeometry fixes the shadow artefacts:

3

@looeee True, but then the edges of the zero-thick box are dark. Notice the PlaneGeometry version has perfect edges. If one thing is fixed, then another artefact happens. :laughing:

Even if Three.js doesn’t have the ability to make an object not self-shadow, is it possible for that to be implemented?

EDIT: Man, this really bugs me about shadows! What I am aiming to make is a UI toolkit with perfect shadows. I think this matters in a UI toolkit, unlike with 3D games where there’s so much happening in a scene that small shadow artefacts are hardly important and will go unnoticed. But when you have a couple UI widgets, the artefacts will be very obvious.

4

@looeee Here’s a pen with the “dom element” rotated 90 degrees:

It seems to have thickness even though the BoxGeometry has 0 thickness. Is it possible to get rid of that apparent thickness?

5

Hmm, yeah it seems like 0 height boxes actually do have some height.

I tried giving it a very tiny height and that works but reintroduces the same shadow artefacts as with a plane.

However, giving the box a very tiny negative height, and no shadow bias, seems to do the trick:

6

The thickness went away, indeed, but the shadow on the plane is not rendering any more. Compare my second example (with the peter panning but the planes have shadow),

with your negative size trick:

With every solution there’s another problem. :joy:

7

The best I was able to do with careful tweaking of the shadow settings:

I agree that it’s not ideal to have to do such painstaking tweaking by hand to get good shadow results. I wonder if this is an issue with three.js or just in the nature of shadow maps?

It probably still has some tiny thickness, perhaps you can remove this by adding a transparent material to the edge faces of the rectangle?

8

Here’s your last pen, but replaced BoxBufferGeometry with PlaneBufferGeometry, so the width is actually 0 (and it is using my Three.js fork that casts shadows for Planes), and the results are just about the same:

At this point, I think the only artefacting is due to the shadow bias issue.

I guess this is as close as we can get, for this particular case.

The downside of this is that cases might vary, they might be in different size scales, etc, so simply setting this bias setting for a library (f.e. my infamous project) may not cause all scenes to look as good as this one with zero-thick planes. It’d be great to have a non-use-case-specific solution. But for that maybe we’d have to improve shadow-mapping in general, I think Three.js just uses the same technique as many other engines.

I don’t remember where I read specifically, but other frameworks have some extra features for dealing with shadow maps, like “normal bias” as well as some other things to account for planes that approach angles perpendicular to the camera like in my case here, where the shadow can be adjusted just for the steep planes. I haven’t seen these features in Three.js yet. Maybe something to look into later…

9

@mrdoob ^