# How do I achieve supersampling / anti-aliasing in pixel shaders?

I am trying to write a couple pixel shaders to apply to images similar to Photoshop effects. For example this effect:

But I noticed there is aliasing in my resulting image (the above image is a sample from the linked website).

What can I do to prevent this? I couldn't find any article that explains how to solve this. I read some techniques like rendering in a higher resolution and then downsizing the image, but I need to solve this in a pixel shader capacity.

-
To do supersampling, determine 4 point coordinates in your pixel (e.g. lying in regular grid), look for 4 color samples in your texture and then compute an average. – Ivan Kuckir Mar 22 '13 at 14:09
Thanks I did something like that but got a blurry result. Even in places where there is little effect, i.e. the center of the image. Also I am not sure how much of a bigger rectangle should I use around the pixel. I used very small and gradually increased but didn't get anti-aliasing but blurry result. – Joan Venge Mar 22 '13 at 14:14
Blurry result means, that your 4 points are too far from each other. You should determine, how "wide" is your pixel and then your grid can look like gl_FragCoord.xy + ( one of (0,0) , (0,.5) , (.5,0) , (.5,.5) ) * pixelWidth – Ivan Kuckir Mar 22 '13 at 14:19
Yes I tried very small values too but then I didn't get anything different than 1 sampling. I increased the values using 0.001, and they were still blurry. Is this the only way? – Joan Venge Mar 22 '13 at 14:45
You dont use 0.001 for pixel cordinates, that is not even in the same space. you have to calculate the aspect for a pixel by doing. float pixelWidth = 1.0f / WIDTH; float pixelHeigh = 1.0f / HEIGHT; and when sampling you do, gl_FragCoord + ( pixelWidth * amountOfPixelOffset ); this should most likley reduce the bluryness. – Tordin Mar 22 '13 at 17:22

Super Sampling

Super sampling and anti-aliasing are two different things. Super sampling is just rendering a frame at a higher resolution so that you have more information . This higher-resolution image is then down-sampled. This is especially useful when objects are very thin and might have been missed when sampling on a lower resolution. Down sampling from a higher resolution means they still have some influence. However since you can't super sample in a shader let's move on!

There are actually several techniques for shader based anti-aliasing. You could look up papers and example code of FXAA and MLAA. A nice comparison of quality can be found here. Let me out-line the general idea.

A naive approach to anti-aliasing would just be to gather information from neighboring pixels. While this does get rid of jagged edges somewhat it also blurs important details.

FXAA and MLAA are used in modern graphics pipelines where the normals, depth, and color information is often available separately even during the post-processing step. FXAA and MLAA use the color and depth/and or normal information to compute where edges occur. An edge could be the pixels on the line between the roof of a house and the horizon. These kinds of edges can be blurred to decreased aliasing without losing too much details in textures.

-