Add Shadows for Transparent Objects

[gkjohnson]

A first pass at shadows for transparent objects as discussed in #10600.

I've modified an example here on another branch so you can see how the shadows are affected and the artifacts associated with this technique:

As I mentioned before the artifacts are pretty apparent but can be hidden a bit by setting the shadow radius to a good value. There may be some other shadow sampling techniques that can better hide the dither pattern.

[gkjohnson]

I just resolved the conflicts and made a few updates including using an 8x8 dither pattern as Babylon used. The example on another branch from the original post has been updated, as well, with a larger shadow map (2048 x 2048). Right now shadow transparency is universally toggled with renderer.shadow.dithering (like you mentioned in #10600 (comment)) but it could be set per light -- perhaps that's a better place for it? It would be nice to move most / all shadowmap flags to the lights if possible I think.

And cc @donmccurdy -- you've mentioned an interest in introducing alpha hashing previously and this may be a start. The approach used here for shadows is just a 2d pattern seeded by screen space position so it's consistent but there could be other options in the future. For shadows, at least, using an alpha hash approach like you mention here might be noisier (even if it doesn't change per frame thought it might not be so noticeable) but would allow shadows of overlapping objects with the same alpha to to get darker:

[donmccurdy]

For alpha hash we'd probably want texture-space or object-space coordinates, but no matter here. I do see pretty noticeable banding though, viewed from an angle.

... and I'm wondering if a small blue noise texture would do better? We can figure out how to embed it in the source code as a Uint8Array or Data URI if it gives good results.

[gkjohnson]

For alpha hash we'd probably want texture-space or object-space coordinates, but no matter here

Yeah I've taken a look at that presentation -- it is a slightly different technique but we could provide options to use various clipping approaches for transparency. Alpha hashing does look really noisy, though. Is it often used without some kind of temporal accumulation like TRAA?

Regarding the banding, though, I'm not sure if there's a great way to avoid a pattern here -- here's what the shadows would look like with blue noise (I've written a blue noise generator here):

https://raw.githack.com/gkjohnson/threejs-sandbox/bluenoise-shadows/screendoor-transparency/index.html

And here's the same demo with a 4x4 bayer pattern:

https://raw.githack.com/gkjohnson/threejs-sandbox/master/screendoor-transparency/index.html

I'm not sure if I feel it's a lot better.

[donmccurdy]

Alpha hashing does look really noisy, though. Is it often used without some kind of temporal accumulation like TRAA?

I don't think it needs to be (example: https://twitter.com/thespite/status/1221532206562258945), but, yeah there's certainly a grain. For alpha hashing (or even just starting with alpha dither, no per-object hash) I think I'd prefer a noise pattern to a screen grid. But for the shadows, agreed, the Bayer pattern appears to be working better. Tweaking the shadow radius seems to hide the banding, depending on the angle etc., that could work for now. 👍

[LinoPhil]

"mrdoob modified the milestones: r123, r124 23 minutes ago" :(
Why ?

[Mugen87]

@LinoPhil The milestone modification happens automatically when the assigned milestone is released and the PR is still open.

[LinoPhil]

@Mugen87 ok, but the feature itself, you are not satisfied with the quality or is it breaking something? The demos look promising to me and im looking forward to use it in our viewer.

[Mugen87]

@LinoPhil Sorry, there was just no opportunity to deeply review this PR so far. There are so many of them (with different priorities and complexities) and time is unfortunately limited.

[LinoPhil]

Just want to give a push. Maybe after 3 years (initial ticket 10600) its time to finish?

[gkjohnson]

Looks like this feature has been added into react-three-fiber's Drei based on this PR. It was also added into Babylon (also based on my original sandbox example 😅) and Playcanvas, as well.

[Mugen87]

Yes, we should rebase and merge the PR!

[Mugen87]

This should be MeshDistanceMaterial.

[Mugen87]

I've reviewed the PR today and apart from the above tiny issue, the code looks good 👍 !

A bit that is missing are updates to the program cache key computation which was differently implemented in 2019. During rebase, ditherTransparency needs to be added to the getProgramCacheKeyBooleans() function.

[iefreer]

we have same issue when rendering hair(transparent texturing) shadow, looking forward to get this feature in next release, thanks for the good work.