Anti aliasing filter effect to the camera

Hi,
Please have a look into this,

Scroll down to the 360 DEGREES OF CARISMA . you will see a car model. While rotating that car, you can see so many aliasing on the edges. But, when you leave the interaction, all aliasing will be antialiased. At that time, if you see sharply on those aliasing, something will running on those aliasing edges in the opposite direction to antialias those aliasing effect. What is the process takes place on that? any ideas?

2 possibilities :slight_smile: turning on off MSAA or FXAA during manipulation to improve speed and also super sampling (increasing the canvas resolution) when everything is paused.

This gives a slow frame when it is all static but with a better quality.

2 Likes

Thanks for your reply @sebavan . It don’t think the canvas resolution gets changed. But I am not sure about it. FXAA and MSAA also I am using. But I couldn’t see that running effect on it to antialias. and I am not getting this much of antialiased output. So, I thought, something other than this is there.

The “360 Degrees of Carisma” experience doesn’t load for me


If it’s loading correctly for you, could you record a short video so we could see the intended effect?

It would also be great if you could share your project so we could compare what you currently have. Best of all would be if you can recreate it in the Playground so we can easily tweak it :slight_smile:

1 Like

haha. I don’t know how to create it @DarraghBurke that’s what my question. Then How can I recreate it on a Playground. I can share another reference , since you are not able to see 360 Degrees of Carisma.

https://imaginator.tatamotors.com/safari/#/build/showcase

Looks similar to what we are doing. I explained it here: Support for TAA (Temporal Anti-Aliasing) - #3 by Kesshi

2 Likes

Wow. Thanks @Kesshi . I think so. The explanation given by you in that shared post is looking similar to what I need. But How to achieve it and I couldn’t see the video you have shared in that post. Any playground or sample codes for it?

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)