Add shadow map support for RectAreaLights (brainstorming, R&D)

[bhouston]

Description of the problem

It would be very useful for realism to support shadows on RectAreaLights.

I am unsure of the best technique to use here as I have not researched it yet beyond some quick Google searches. I am not yet sure what is the accepted best practice in the industry?

Two simple techniques I can think of:

• one could place a PointLightShadowMap at the center of a rect area light and it would sort of work.
• less accurate, one could place a SpotLightShadowMap with a fairly high FOV (upwards of 120 deg, but less than 180 deg as that would cause it to fail) at the center of the rect area light and point it in the light direction.

(I believe with the spot light shadow map you may be able to get better results for large area lights if you moved the shadow map behind the area light surface so that the front near clip plane in the shadow map frustum was roughly the side of the area light as it passed through the area light plane. I believe I read this in some paper once, but I can remember the source of it.)

[bhouston]

/ping @abelnation if you have any ideas as you are the current resident Area Light expert. :)

[WestLangley]

I refactored the area light code and I am familiar with it, too. For shadow support, see https://eheitzresearch.wordpress.com/705-2/.

[bhouston]

For shadow support, see https://eheitzresearch.wordpress.com/705-2/.

Interesting. I think that may be a bit too computational intensive for WebGL at this time though as it makes an assumption that ray tracing is hard ware accelerated. It is likely years before that comes to WebGL unfortunately.

[bhouston]

I've of the opinion that while my two suggestion (point or spot light shadows) are not physically accurate when it comes to soft shadows, they are better than no shadow and are both very fast (as fast as our other shadows at least) and easy to implement (as the code already exists.)

[WestLangley]

@bhouston Oh, yeah... there is also #13057.

If you read the entire discussion, I think the consensus was to add 'cookie' support to SpotLight, which would presumably allow for a rectangular shadow.

[gkjohnson]

NVidia's Percentage Closer Soft Shadows do a decent job of approximating area light shadows. I was toying with hacking them in to a THREE.js scene here: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. It's using a directional light shadow map, at the moment, but a spotLight one might be better.

They're not perfect solution, though -- they have some artifacts when shadow edges get closer to each other and require a lot of samples to get a really smooth shadow.

[Mugen87]

Looks great! But your demo runs with just 6 FPS on my iMac ^^

[looeee]

I'm getting 60fps on a GTX 970m.

[Mugen87]

1 FPS on my Pixel 😢

[bhouston]

There is already a pcss implementation in three.js that myself and oreshant wrote a while back. Best regards, Ben Houston http://Clara.io Online 3d modeling and rendering

…

On Sat, Jul 21, 2018, 11:02 PM Garrett Johnson ***@***.***> wrote: NVidia's Percentage Closer Soft Shadows <http://developer.download.nvidia.com/shaderlibrary/docs/shadow_PCSS.pdf> do a decent job of approximating area light shadows. I was toying with hacking them in to a THREE.js scene here: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. It's using a directional light shadow map, at the moment, but a spotLight one might be better. They're not perfect solution, though -- they have some artifacts when shadow edges get closer to each other and require a lot of samples to get a really smooth shadow. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#14161 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAj6_RuFJPv7y5DbEfJnDu26DB3cD2bhks5uI-tJgaJpZM4UQODd> .

[Mugen87]

There is already a pcss implementation in three.js that myself and oreshant wrote a while back.

https://threejs.org/examples/#webgl_shadowmap_pcss

This runs with nice 60 FPS on my iMac^^.

[gkjohnson]

There is already a pcss implementation in three.js that myself and oreshant wrote a while back.

I hadn't seen that! It looks good. I didn't know you could generate poisson disk-like values that way -- it looks like it has a nicer distribution and gives better results than the way I was using. I may borrow that if you don't mind!

1 FPS on my Pixel 😢

Ha! It wasn't working on my phone, either. I didn't optimize it at all and there's a lot of work going on in loops that could be moved out.

@bhouston's implementation is pretty fast, though. Maybe there's some variant of this that can be used for area light shadows? It would be nice to have any kind of shadow support for area lights so this type of implementation could be more easily plugged in.

[sam-g-steel]

NVidia's Percentage Closer Soft Shadows do a decent job of approximating area light shadows. I was toying with hacking them in to a THREE.js scene here: https://gkjohnson.github.io/threejs-sandbox/pcss/index.html. It's using a directional light shadow map, at the moment, but a spotLight one might be better.

They're not perfect solution, though -- they have some artifacts when shadow edges get closer to each other and require a lot of samples to get a really smooth shadow.

Nice! It's not perfect but it looks better than no shadow... I get 30fps on my Asus ROG Phone 2.
And 45fps on my integrated graphics laptop.