Examples: Improve WebGPU AO example #31538
Conversation
|
Please do not add too many effects at once. SSR usage here will totally kill the performance for many devices. I have now 3 FPS on my mac mini with M2 Pro. The previous version had 60 FPS. I'm curious, on what device are you testing this PR? Besides, the SMAA usage worsens the AA quality. The previous TRAA produces an image with less aliasing.
I wanted to pick a room environment since to me it's ideal for showcasing AO. At the time when adding the example, I've found this one at Sketchfab and thought it's appropriate. I like the minimalistic style and other better looking assets had not the appropriate CC license. |
|
|
||
| // ao | ||
|
|
||
| aoPass = ao( scenePassDepth, scenePassNormal, camera ); | ||
| aoPass.resolutionScale = 0.5; // running AO in half resolution is often sufficient |
There was a problem hiding this comment.
I would advice to revert this change as well. Half resolution AO is quite common and the performance lost running full resolution is usually not worth the quality gain.
There was a problem hiding this comment.
This is at 0.5:
Screen.Recording.2025-07-31.at.6.05.47.PM.mov
This is at 1.0:
Screen.Recording.2025-07-31.at.6.07.51.PM.mov
Maybe 0.25 with denoising could be better?
However, to me it's weird that the plant is producing a shadow like that in the window behind it.
The plant should be receiving light from the window and now casting a shadow in the window.
There was a problem hiding this comment.
A TAA performs some sort of denoising so I found a separate denoise pass is not necessarily required.
Also not that the way we apply AO at the moment means we attenuate the entire scene. A more physically correct approach would compute AO before the beauty pass and then just attenuate the indirect light. This requires a more complex setup though.
Besides, as long as transparent object write into the depth buffer, they are affected by the SSAO computation. The given window is especially challenging since although light travels through it, it can receives shadows because of its dull/milky surface. I guess the issue could be mitigate somewhat with a directional light shining through the window but that would require AO only attenuates the indirect light.
There was a problem hiding this comment.
Ah I see...
Another issue I noticed with TRAA is that it requires velocity and ...
When I tried to add metalness to mrt() I ran into this:
There was a problem hiding this comment.
I guess we have to start pack things a bit^^. We end up with too many color attachments.
|
BTW: I'm totally fine with replacing the asset if we find a better one. There are surly better picks. But we should try to update the example so the current performance level is retained. |
I'm using a Macbook Pro (M1 Pro)
TRAA was showing continuous glitches when combined with SSR: Screen.Recording.2025-07-31.at.6.01.20.PM.mov |
|
Yes, the TRAA+SSR combination still requires some fine-tuning. The overall performance of SSR also needs an improvement. |
|
For testing: https://rawcdn.githack.com/mrdoob/three.js/bedroom/examples/webgpu_postprocessing_ao.html On a Pixel 8A, it's 13 FPS (new) vs 47FPS (current). |
|
I've reduced the AO quality, hopefully now it runs faster? |
|
Still 4 FPS. The major performance killer is the full-resolution SSR. |
|
I highly recommend we leave SSR out of the AO demo. The example should showcase AO with a best possible performance. If you are not happy with the asset, we can search for a new one. |
|
Once I'm done with the DoF and blur stuff, I'll revisit the SSR. Maybe we can switch to a different implementation that gives us more stable results and a better performance. The current |
|
That would be great! |
|
Just updated the example using the latest SSR. |
|
Both the Pixel 8A and the iMac with M2 Pro and 5K Display run the example with 60 FPS now 🎉 . |
|
|
||
| postProcessing.outputNode = traaPass; | ||
| ssrPass = ssr( scenePassColor, scenePassDepth, scenePassNormal, customMetalness, camera ); | ||
| ssrPass.resolutionScale = 1.0; |
There was a problem hiding this comment.
1 is the default now so this line can be removed.
Description
Spent some time trying to make this example look prettier.
I'm still not happy with it...
I'm not sure this is the best scene to showcase AO. May be better to showcase SSR with it.
@Mugen87 Why did you pick this scene? The textures are pretty low-res, specially the tree one.
There's also a mesh with a clouds texture outside the windows that is not visible.