How to do anti-aliasing for RenderTargetTexture

Questions
, , ,
1

Hey guys! I have a PG example here: https://playground.babylonjs.com/#69DRZ1#526

As you may see, I just rendered three rectangles in my rttScene and saved them as a RenderTargetTexture object. Then, I applied this texture to the shaderMaterial property of a big rectangle in my mainScene.

The problem is that the edges of the rectangles in RenderTargetTexture is so obvious that I need to get rid of. (This is only a demo here, in my real project, lines even become dashedlines…)

withRTT
withRTT957×929 6.93 KB

withRTT2
withRTT2957×933 13.9 KB

This phenomenon only shows up when I render my rttScene as a texture. If you commit line 29-36 and line 42-55, you will see the rectangles are well rendered in the rttScene before it becomes a texture!

(This is the scene without RTT, everything seems to be perfect!)

withoutRTT
withoutRTT901×926 4.71 KB

I guess there must be a way to make my RTT / render result more precise, just like the last image, but I do not know whether I should change the settings of my RTT or do anti-aliasing in my shaders. Hope anyone could help and fix this problem! (best to fix in this PG~)

2

cc @Evgeni_Popov

3

You should enable MSAA antialiasing by doing rtt.samples = 4; (or more than 4, depending on your GPU - see engine.getCaps().maxMSAASamples) on your RTT.

2 Likes
4

Thank you very much! I tried your method in this PG, and it solved half of my problem!

The scene now seem to be really smooth now, yet if you could click on one of the plane in the scene, it would show you the lighted edges, as the image below:

click
click958×932 23.7 KB

As you could see, there are still strong aliasing on the edges!
This rectangle is rendered by tmpScene with a postprocess, so I wonder how to fix this problem? Is it due to my algorithm in postProcessFragmentShader? I already set this tempRTT samples = 4!

5

Your post process line 138 doesn’t have MSAA enabled: postProcess.samples = 4;

You can also try to use FXAA: new BABYLON.FxaaPostProcess("fxaa", 1, tmpCamera);.

I enabled both in this PG:

2 Likes
6

Thanks! It looks so cool now! Besides I don’t even need to change my shaders! Cooool!

1 Like