how to achieve anti-aliasing in perspective mode?

Question

I want to draw some parallel lines. At first I used gl.LINES but the problem was that the rendered line was one pixel wide at any point on the screen, whether it was very close or very far from the camera.

So instead, I rendered thin rectangles:

As you can see, they now get thinner as they get farther from the camera, but now I get all these ugly aliasing artifacts. Is there a "correct" way to do this in OpenGL/WebGL?

Answer 1

There's a couple of ways to tackle this.

(1) As others have mentioned, just run with super or multisampling.

(2) Use a shader. If you are using Es2/WebGL you are doing that already. But instead of outputting a constant color, write a color plus an alpha that determines how close you are to the line. And then enable blending with that alpha.

One very easy way to do this is to just map a texture as an alpha channel on your rectangle.

Alternatively you can draw 2 quads instead of one and compute the distance in the shader. Then map the distance with a ramp function to alpha.

Answer 2

If you're using GLUT, you can try something like this-

glutInitDisplayMode(GLUT_MULTISAMPLE);// along with all the other flags

If you're not using GLUT, then you can find a very helpful topin on the subject here. Every platform allows you to do multisampling after getting the OpenGL context.