How to get antialiased render output like this

Questions
1

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
2

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

2 Likes
3

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

4

Use the setHardwareScalingLevel method for that.

1 Like
5

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

6

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

7

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.

8

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
9

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.

10

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?

11

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

12

This PG should help:

1 Like
13

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

14

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 .

15

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
16

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.

17

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
5 Likes
18

@Evgeni_Popov Im trying to do something exactly like this and the PG example is helping. Can you explain why the setTimeOut of 500ms is needed. its almost like each half a second we need to stop and restart the render loop. but why is this needed? Im confused by this.

19

It’s only specific to the Playground, because it adds its own renderLoop to the engine. We must wait for the function to be added before removing it (by calling stopRenderLoop) and adding our own.

In your own context, you can avoid the setTimeout / stopRenderLoop parts.

2 Likes
20

Ahh that makes sense. Thanks for the clarification, this little PG example should be pinned its a gem.

1 Like