Awful aliasing when using post processing

Hi,
I want to use an outline effect, so I used postprocessing for my render, but the problem is it adds awful aliasing. Adding an FXAA or SMAA pass doesn’t help, it’s still very ugly.
Is there a way to use postprocessing and retain the built-in antialiasing? Why does it stop working in the first place when using postprocessing?

Here’s without post processing:

Here’s with post processing and FXAA

Any suggestions ? Is there a way to render normaly, then have an EffectComposer render my outline effect ? I would only have to render the transluscent red meshes in that Composer, so I guess it wouldn’t be too heavy

I have a few of suggestions for you

  • don’t use very thin geometry. This is a common thing, if you have a look at pretty much any AAA video game - you will see that they avoid having very thin geometry, because of aliasing mostly, it also can create shadow artifacts and various other nasty things, all because of aliasing, pretty much
  • use muti-sampled render targets, they allow for higher resolution, so you will see less aliasing
  • try other anti-aliasing techniques

there’s a really good article by Emil Perrson in SIGGRAPH 2012 that mentions thin geometry AA, here’s a relevant piece:

2 Likes

I don’t get it, even if you make your thin geometry thicker, eventually if you move back the camera enough they will get sub-pixel size, aren’t they ? How can you ensure something will never be sub-pixel size ?

1 Like

Not at all, but this is rather about the size, by being long and thin. Thin geometry is bad since even when it isn’t too long like phone wires, they go subpixel very quickly.

For the case of the OP i would suggest making these parts with repeated textures.

2 Likes

Thanks Usnul for your answer but:

  • The geometry is out of my control, the models are building converted from IFC files. We use them to show the buildings and the location of appartments in the building on a website where we sell appartments.
  • Multi sampled render targets could be a solution, but we target the best performance possible, we have to asume some of our customers will have old integrated graphics or not-so-great smartphones
  • I will try other AA techniques, but like I just said, performance is an issue so I may end up leaving the bad aliasing :confused:

What about rendering to the backbuffer, then render my outline effect in a texture that I will then render on top of the rest?

Be aware that it’s necessary to configure the resolution uniform of FXAAShader for a proper result. I’ve seen several users who missed this in their app.

I managed to get what I wanted, using the technique I described above:

  1. Render my scene with renderer
  2. Render composer with OutlinePass, to a renderTarget
  3. Render composer renderTarget texture on a quad in screen space

I had to tweak a few things in the OutlinePass to get it to render properly in the renderTarget, clear when needed, as well as changing the shader so that it drew the correct alpha (I was getting a black image with just the outline otherwise )

1 Like

hello,i have same question,but i dont know how to resolve to it,could you some code demo? thank you