Progressive anti aliasing and soft shadows

Demos and projects
1

Based on my example in this thread: Anti aliasing filter effect to the camera
I created another quick example which combines progressive anti aliasing with progressive soft shadows. You can see it here: Babylon.js Playground
While moving the camera there is no AA and hard shadows. After stopping movement the AA and shadow quality will progressively increase.
As i wrote already a predefined sampling pattern should be used to get best quality instead of the random sampling in my example.

7 Likes
2

Thanks @Kesshi . It will be very useful. And I have a doubt. What do you mean by “predefined sampling pattern”

3

I think i answered that here already: Anti aliasing filter effect to the camera - #13 by Kesshi

1 Like
4

This is fantastic, thank you so much for taking the time to put together a playground and for sharing it with the community! Instant bookmark for me :slight_smile:

One question: is it possible to reduce the jitter of the shadows when the camera first stops moving? I know this is part of the technique to get softer shadows, but I wonder if there’s any way to make it smoother for the user.

1 Like
5

Hi, the jitter can be reduced by using a better sample pattern (the order of the samples is important) but it will still be noticable. One idea i had (but never tried) is to hide this process from the user. Every single rendered frame of it is currently visible. In theory it should be possible to render a number frames in the background and then showing the improved image to the user by fading it in.

2 Likes
6

Hi @Kesshi,

thank you very much for providing this pg! I like this progressive anti aliasing a lot. Unfortunately I wasn’t able to implement it into my rendering on demand process correctly.

I only want to render the scene if the camera is moved to supersample on the last frame. After that I want to anti alias the scene for 50 frames with your code. So I adjusted your code a little bit but it breaks the anti aliasing effect.

Here I created a pg: https://playground.babylonjs.com/#Y34IWK#4

Do you know what’s the problem here?

Best

EDIT:

The problem was that I created the lastFramePass before the praaCombinePass. Working now: https://playground.babylonjs.com/#Y34IWK#5