Add shadow map support for RectAreaLights (brainstorming, R&D) #14161
Comments
|
/ping @abelnation if you have any ideas as you are the current resident Area Light expert. :) |
|
I refactored the area light code and I am familiar with it, too. 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. |
|
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.) |
|
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. |
|
Looks great! But your demo runs with just 6 FPS on my iMac ^^ |
|
I'm getting 60fps on a GTX 970m. |
|
1 FPS on my Pixel 😢 |
|
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>
.
|
https://threejs.org/examples/#webgl_shadowmap_pcss This runs with nice 60 FPS on my iMac^^. |
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!
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. |
Nice! It's not perfect but it looks better than no shadow... I get 30fps on my Asus ROG Phone 2. |
|
Here is an example of raytraced shadows in three.js only the shadow component is being shown in these videos. 60+fps with 1 shadow sample per pixel... With some smart filtering the results could look pretty good. https://youtu.be/O21mKUtMtSg This could be used to help with rect area light shadows. A live web demo is in the works. Related |
|
Very nice! |
|
Related issue: I don't know how to implement some sort of shadows with the current IBL code. Say that I want to add a |
|
I've been playing around with several ray traced effects.
Of the 3 I think per-pixel GI which would work with IBL is the hardest to achieve real time frame rates. However, per-vertex GI and might be possible at good frame rates. The ray tracing code is being written with the idea that vertex and fragment shaders will be able to use it. |
|
@mrdoob, @WestLangley,
|
|
Ok, after looking into it... It looks like it is in model view space... Is there a good way to get the light positions in world space? Modify WebGLRender to send in both world and view space? |
|
Ok, I got it working with a point light... now to test rect area lights!
|
|
Is there a way to just jitter lights sources within the emission volume and
accumulate in order to get soft shadows in something like 32 renders that
you just accumulate?
I view this as something that works well with the sub-pixel camera jitter
that I accumulated in the TAA Three.js example.
…On Sat, Dec 21, 2019 at 10:04 PM Samuel Sylvester ***@***.***> wrote:
Ok, I got it working with a point light... now to test rect area lights!
[image: image]
<https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issuecomment-568228766>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ>
.
--
*Ben Houston*CTO
*M: *+1-613-762-4113
bhouston@threekit.com
Ottawa, ON
[image: threekitlogo1568384278.png] <https://www.threekit.com/>
Create a better visual customer experience with Threekit
<https://www.threekit.com/>
[image: Learn how to scale product visuals with your growing business]
<http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76>
|
|
To be clear I think the way to jitter in a rect light is to have a single
point light that you move along the emission surface. You need a good
sampling method like Poisson Disk or something,
https://www.google.com/search?q=Poisson+Disk. And then the resulting
shadows should be soft and appropriate for a rect light.
Although I have been confused on the FOV one should set on the point light,
and maybe you should always point it in the normal direction from the rect
area surface? It is these minor details that have keep me from actually
going forward with an implementation of accumulative sampled emission
source-based shadows.
…On Mon, Dec 23, 2019 at 9:00 AM Ben Houston ***@***.***> wrote:
Is there a way to just jitter lights sources within the emission volume
and accumulate in order to get soft shadows in something like 32 renders
that you just accumulate?
I view this as something that works well with the sub-pixel camera jitter
that I accumulated in the TAA Three.js example.
On Sat, Dec 21, 2019 at 10:04 PM Samuel Sylvester <
***@***.***> wrote:
> Ok, I got it working with a point light... now to test rect area lights!
>
> [image: image]
> <https://user-images.githubusercontent.com/10963749/71316445-4b18bb00-2435-11ea-94d9-c2f0f4116097.png>
>
> —
> You are receiving this because you were mentioned.
> Reply to this email directly, view it on GitHub
> <#14161?email_source=notifications&email_token=AAEPV7MQQB4SDPHJAOA5YXTQZ3KLVA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHPHXHQ#issuecomment-568228766>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/AAEPV7JKIZ62J3YXCVVYHVDQZ3KLVANCNFSM4FCA4DOQ>
> .
>
--
*Ben Houston*CTO
*M: *+1-613-762-4113
***@***.***
Ottawa, ON
[image: threekitlogo1568384278.png] <https://www.threekit.com/>
Create a better visual customer experience with Threekit
<https://www.threekit.com/>
[image: Learn how to scale product visuals with your growing business]
<http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76>
--
*Ben Houston*CTO
*M: *+1-613-762-4113
bhouston@threekit.com
Ottawa, ON
[image: threekitlogo1568384278.png] <https://www.threekit.com/>
Create a better visual customer experience with Threekit
<https://www.threekit.com/>
[image: Learn how to scale product visuals with your growing business]
<http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76>
|
|
@bhouston I think #14048 is what you are talking about. I liked the demo with the twisted knot lighting source . I guess the problem that I saw is that the reflection of the light source never resolved to the correct image. One plus for the ray-traced shadows is that It be used to handle transparent shadows. It can also be used for Global Illumination and many other lighting effects. |
|
<#14048> is what you are talking
about.
Sorry, I tend to forget what I previously suggested, but at least I am
consistent.
I liked the demo with the twisted knot lighting source . I guess the
problem that I saw is that the reflection of the light source never
resolved to the correct image.
It is because he isn't doing random sampling but an exhaustive sampling
method -- he is also doing a much harder light source than just a
rectangular area. His method would be slow accumulative with rasterization
rendering or ray tracing -- it is the sample method that was wrong, not the
technique. Also you can multiple light samples per render if you are so
inclined. I think that 32 to 256 renders on the high end is needed,
depending on the light type and the number of light samples per render. At
60 fps is this 1 - 4 seconds. I think of it as a simplified "instant
radiosity" solution.
You are right that ray tracing is amazing. I just thought that jittering
lights is easier than redoing the whole lighting system, and then you also
have a good solution for real-time, the shadows just are hard and then on
stop they soften to perfection, and the render algorithm doesn't switch,
just things jitter and accumulate.
…On Mon, Dec 23, 2019 at 11:03 AM Samuel Sylvester ***@***.***> wrote:
@bhouston <https://github.com/bhouston> I think #14048
<#14048> is what you are talking
about.
I liked the demo with the twisted knot lighting source . I guess the
problem that I saw is that the reflection of the light source never
resolved to the correct image.
One plus for the ray-traced shadows is that It be used to handle
transparent shadows. It can also be used for Global Illumination and many
other lighting effects.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#14161?email_source=notifications&email_token=AAEPV7L4ZVKQJILFWZQ6JE3Q2DOLPA5CNFSM4FCA4DO2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEHRNA4I#issuecomment-568512625>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAEPV7LXP5CSOMBZF2BMNR3Q2DOLPANCNFSM4FCA4DOQ>
.
--
*Ben Houston*CTO
*M: *+1-613-762-4113
bhouston@threekit.com
Ottawa, ON
[image: threekitlogo1568384278.png] <https://www.threekit.com/>
Create a better visual customer experience with Threekit
<https://www.threekit.com/>
[image: Learn how to scale product visuals with your growing business]
<http://signatures.threekit.com/uc/5d0cfd47860b6864aee40938/c_5da8cc74c90a0e0043fe0323/b_5dade3e4e85fae00caea3d76>
|
|
@bhouston I like solution proposed in #14048... especially for simple geometries like a rect light. Regarding the ray tracing... On desktop class hardware the ray tracing solution works in real-time at 1spp. See... https://youtu.be/amX3icmbpzY. I have not yet tested mobile. In the demos that I've been working on, the lighting term is calculated using existing code but the shadow is ray traced instead of shadow mapping. |
|
@mrdoob, @bhouston And I have it running real-time on my laptop and on my cellphone... Laptop demo... https://youtu.be/MKCKXRVks3I I also improved the distribution of the shadow samples to improve shadow realism |
|
@mrdoob, @WestLangley , @bhouston and others I got shadows for rect area lights working with raytracing.
Some improvements to the distribution of shadow samples are in the works. Also, it looks like for area lights 2 shadows will need to be calculated for each light. A diffuse shadow and a specular shadow. At present only the diffuse shadow is being calculated. I plan on setting up a live website with this demo and also pushing these changes to my fork of three soon |
|
That's looking great! Does it only use a single depth texture too? |
|
Still working on the ray-tracing fork... I hope to have more to show in a few weeks. |
|
Below are some pics of the noise filter... Update 3/28/2020 |
|
Eagerly waiting for this feature ( nearly 3 years since its proposal ). Wondering if there's any PR raised for it. |
|
I saw this on twitter today:
https://drive.google.com/file/d/1q0q0zMp15syTtPW_T4DtMKxbGhz_SzG5/view |
|
It does appear this isn't a real-time algorithm though. It is very nice.
The paper lists render times +10s per frame.
…On Thu, Jun 24, 2021 at 7:26 AM Mr.doob ***@***.***> wrote:
I saw this on twitter today:
https://aakashkt.github.io/
[image: Screenshot 2021-06-24 at 13 26 09]
<https://user-images.githubusercontent.com/97088/123255111-5dbaf700-d4e7-11eb-9bc4-d42312d8573e.png>
https://drive.google.com/file/d/1q0q0zMp15syTtPW_T4DtMKxbGhz_SzG5/view
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#14161 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AAEPV7JFQMV23ST5RGDXCW3TUMJAFANCNFSM4FCA4DOQ>
.
--
Ben Houston, CTO https://threekit.com
613-762-4113 / http://calendly.com/benhouston3d
|
|
Oh... |
|
Currently testing some shadowing techniques for rectangle lights. |
|
Alright - I've been working on this problem a lot more and I've made some progress. I decided to go with @bhouston's solution of a spot-light with a high fov (150 in this demo) and a near plane aligned with the rectarealight. Results are promising. mmmshadows_DxPmLdyt.4.mp4rotate.mov(100 FPS on an M1 Macbook Pro) Caveats: ATM I'm fitting the near plane to the light manually. If anyone has big math brain, how to do this automatically? Very hacky PCSS implementation (also kinda slow). Final thing should probably use a more efficient algo - maybe VSM? Lighting is also currently done is post-processing pass (for ease of testing). A simple nDotL model is used - not accounting for the area of the RectArea light. For the final thing the shadowing should be integrated with the default THREE.JS lighting setup. |
|
Hmm... The shadows look strange to me... 🤔 |
Oh, I see... |
Don't worry - I'll fix this later when integrating with built-in shadow system. |
|
@mrdoob - Here is an example with an actual RectAreaLight. Does it look more accurate? real.mov |
|
Hmm... I think these shadows are supposed to be way softer... Screen.Recording.2022-06-08.at.11.52.25.AM.mov |
|
Yea - thats definitely a limitation of the spot-light-esqueness of the technique. I'm just basically doing spot light shadow map + some near plane modification + high fov + pcss. The issue with uber-soft shadows like that is that not only are they really performance intensive to generate they also break often due to the way pcss finds blockers. The radius is simply too large. Then again this could be cuz i am dum and implemented the algo wrong.
(Example of artifacts - credit @gkjohnson ) Upon further examination - I don't think there is much hope for progress down this avenue - the reason being is that gkjohnson's pcss example from all the way back https://gkjohnson.github.io/threejs-sandbox/pcss/index.html still does a great job of approximating area light shadows - the best I think we can get with this technique. Another thought I had was the use of dual paraboloid mapping - just one paraboloid for the rectarealight. It would certainly be efficient and do a better job than a high-fov frustum. I'm just not sure of how well it'd integrate into the current three.js core. |
|
I've made a bit of progress over the fast few months - current working demo is here https://n8python.github.io/rectLightShadow/ This shadows properly obey the shape of RectAreaLights (try rotating the emitter for a funky shadow dance), though they are a bit slow and might not be entirely physically accurate (idk i am smol brain). |
|
It does a decent job against actually physically accurate results: Mine: The only issue is that the blender render was much softer than mine - I had to make the light 5x bigger on both axes to get comparable softness. Here's a light of the same size as the blender render - I think the disparity is because I'm using raymarching, not raytracing. |
|
@N8python good job!! runs at 60fps on my laptop |
|
@marcofugaro TYSM! You must have one powerful laptop ;) |
|
On my eight(!) year old 5k iMac the demo still runs at 30 FPS which is quite remarkable considering the complexity of the effect. 👍 |
|
Runs at 4 FPS (with denoise) and 6-7 FPS (without) on my five-year-old laptop ;-) |
WOAH! That's kinda crazy. And I didn't even optimize it - there's still a plethora of unnessacary texture fetches to work on. |
Can't win em all 😢 |
|
30 FPS on 2019 13'' Macbook Pro without denoise. With denoise, 42 FPS. Loving it 🥇 |
That's just a AMD video card from 2014 :-) (AMD A8-7410 APU with AMD Radeon R5 Graphics) |
Awesome! I get 60-90 FPS w/ denoise on a 2021 M1 Mac. |
|
Works with skinned meshes too!
|
|
It’s possible to use directional light shadows with a very long and wide frustum to simulate RectAreaLight shadows without expensive PCSS. See here. It uses a directional light shadow map. Note that the max size of the frustum before objects no longer have light is the dims of |
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:
(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.)
The text was updated successfully, but these errors were encountered: