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
2 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