How to do anti-aliasing for RenderTargetTexture

Hey guys! I have a PG example here:

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…)

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!)

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~)

cc @Evgeni_Popov

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.


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:

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!

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:


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

1 Like