How to get antialiased render output like this

I wonder about this output . Please have a look into the following link. I think, this is built by BabylonJS. But How to get this much of antialiased rendering. What are the effects might be applied in this.

https://www.citroen.in/citroen-c5-Aircross-car-configurator

Thanks in advance.

1 Like

They are using super sampling: on my computer, the canvas is 5000x2000!

1 Like

Thanks for your reply @Evgeni_Popov . How to use super sampling, Can you please share any docs or playground related to that

Use the setHardwareScalingLevel method for that.

1 Like

I am already using “setHardwareScalingLevel” Property with the value of 0.5 @Evgeni_Popov . But Still the aliasing is there

Try with 0.25 instead. Also, you can try MSAA:

No Improvement @Evgeni_Popov . Supersampling with the following lines done something.

new BABYLON.PassPostProcess("scale_pass", 4.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);


      new BABYLON.PassPostProcess("scale_pass", 2.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);

      new BABYLON.PassPostProcess("scale_pass", 1.0, camera, BABYLON.Texture.BILINEAR_SAMPLINGMODE);

But the performance is very poor ( Drop of FPS ) while using that. How to handle effectively. and how to render scene when camera view matrix change.

You can also try the FXAA post process, but then I’m out of solutions.

I don’t really understand what’s the link with the view matrix(?)

1 Like

I mean, I need to render on demand. When ever the I rotate or zoom the arc rotate camera, then only the scene should render.

So only call scene.render() at that time and not when the scene is static. This can help: Detecting when the camera (FreeCamera or ArcRotateCamera) is moved by the user?

Thanks for your reply @Evgeni_Popov . Can you please share a playground on this?

This PG should help:

1 Like

it works @Evgeni_Popov Thank you. But still aliasing doesn’t get solved

I got something similar to the reference project, by using SuperSampling. But the One I missed is, They are using some filter to get rid off aliasing when the user stop his activity. If we rotate the car and leave it, it is antialiasing itself and then the rendering process get stopped until the next interaction by the user. I am also stopping the rendering like that. But antialiasing like that is not working in mine .

Maybe for the last frame they are supersampling even more, as they can afford it (there won’t be any call to scene.render until the camera moves again)?

1 Like

I don’t think so @Evgeni_Popov . Because, if they do like that, then the canvas size should be increased at the last frame , right? . I am not sure about it. But I need to know how to downsample that while moving camera and how to supersample at that last frame. Can you please do a small PG on it, It will be very helpful to me and someone else.

You can do something like this:

https://www.babylonjs-playground.com/#UD9LU6#40

When the camera stops, it:

  • supersamples x2
  • sets the MSAA value to the max value supported by the GPU
  • sets the anisotropic filter to the max value supported by the GPU
2 Likes