5
\$\begingroup\$

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

enter image description here

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.

Improve this question
\$\endgroup\$
7
  • \$\begingroup\$ 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. \$\endgroup\$
    – Ivan Kuckir
    Mar 22, 2013 at 14:09
  • \$\begingroup\$ 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. \$\endgroup\$
    – Joan Venge
    Mar 22, 2013 at 14:14
  • \$\begingroup\$ 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 \$\endgroup\$
    – Ivan Kuckir
    Mar 22, 2013 at 14:19
  • \$\begingroup\$ 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? \$\endgroup\$
    – Joan Venge
    Mar 22, 2013 at 14:45
  • \$\begingroup\$ 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. \$\endgroup\$
    – Tordin
    Mar 22, 2013 at 17:22

1 Answer 1

Reset to default
2
\$\begingroup\$

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!

Shader based anti-aliasing

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.

Improve this answer
\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .