Anti aliasing filter effect to the camera

This is so cool :heart_eyes: If you are able to share anything about your technique I think it would be super useful to the community :slight_smile:

1 Like

I can’t share our solution directly because its based on a lot of custom code regarding the render loop and camera handling. I can’t promise something but if i have some free time in the next days i will try to recreate a simplified example in the playground.

3 Likes

Would be nice to add it as a standard Babylon pipeline :slight_smile:

1 Like

I got a basic version working: Babylon.js Playground
I don’t know if its the best way to do it but i need access to the previously rendered frame in the shader. For this i used an additional PassPostProcess to store the frame data.
Things which could be improved and what we are doing in our app:

  • to improve quality a predefined set of camera sampling offsets should be used (instead of random ones)
  • stop rendering after the last sampling step to prevent further battery drain on mobile devices
5 Likes

Wow. Thanks a lot @Kesshi . I think, it will work. I am going to try this. But one thing I couldn’t understand. What are you saying in following point.

Currently the distribution of the samples is random. That means the quality of the resulting image depends on the random number genererator. If you want to make sure that the samples are equally distributed, you have to use a predifined set of sample points. Here are the patterns which are used in DirectX for example: D3D11_STANDARD_MULTISAMPLE_QUALITY_LEVELS (d3d11.h) - Win32 apps | Microsoft Docs

1 Like

@Kesshi Since, this method is combining multiple frames to show the antialiased output, We can’t show any of the animations in other objects also. For example, if we want to showcase some product, then we need to apply this effect to the particular product. I need to do some animations on the background continuously. So, is there any possibility to make it like layer. What I am trying to say is, This antialiasing effect needs to be apply on the particular model not on the entire scene. I know, this is configuring the frame, But still I am just asking to know the possibilities.

This anti aliasing works by shifting the camera. That means everything rendered by this camera is affected.
You sayed you want to have animations in the background only. Maybe you could use multiple cameras. One for background and one for foreground objects. The postprocessing should be applied to the foreground camera only.

How can we merge multiple cameras in a single view port ? Is it possible?

Very much possible :smiley: Layer Masks and Multi-Cam Textures | Babylon.js Documentation (babylonjs.com)

I’m trying using this method, but if I enable imageProcessing color banding issues come up. You can see it also in the playground using the inspector and enabling the imageProcessing.
So I was wondering what could be the problem, but I can’t figure it out.

Can you share a PG/screenshots of the issues?

Here’s a screenshot, thank you for the support.
I think that if the model would be simplier, you could see the banding also on it (I would like to change the loaded model, but I didn’t find the babylon model assets url, sorry).

P.S.: unfortunately the uploaded image is too compressed to see a real difference :frowning:

@Evgeni_Popov may have an idea of what’s going on :slight_smile:

Would you have the link to the PG?

Sure, it is the PG @Kesshi shared

Here’s the steps:

  1. open the inspector. The rendering will be altered because there isn’t the event on resize of the container, but you just have to move the camera to reset.
  2. on the inspector click on rendering pipeline > default
  3. you’ll find image processor already enabled, but I’m not sure it is working. Anyway, disable and re-enable it. The rendering will be altered again, move the camera to reset.
  4. now you can see the banding issue on the background

I just tried that but i can’t reproduce your issue on my side. I tried in chrome and firefox.

does look like it happens with rendering pipeline only. it might be related to the praa process in place in the playground here

Yup, testing with the default rendering pipeline PG: DefaultRenderingPipeline | Babylon.js Playground (babylonjs.com), I don’t see the banding there

I found a playground similar to my project and I added the TAA post process and the default pipeline.
Now you can see the issue as the demo starts (especially on the blue sphere and the clouds in the background).

I noticed that if you create the default pipeline after the TAA postprocess and pass postprocess the issue appear, but if you create the default pipeline before those pp the issue is not present.