# 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. Commented Mar 22, 2013 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. Commented Mar 22, 2013 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 Commented Mar 22, 2013 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? Commented Mar 22, 2013 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. Commented Mar 22, 2013 at 17:22