How to draw anti aliased lines in OpenGL ES 2.0?

Question

I am trying to draw some contours that I have stored as vertex arrays:

 typedef struct
{
    float* vertices;
    int nrPoints;
}VertexCurve;

list<VertexCurve> CurveList;

I am using some samples from an opengl es 2.0 book : http://opengles-book.com/

The drawing method looks like this:

    void Draw ( ESContext *esContext )
{
   UserData *userData = (UserData*)esContext->userData;
   
   // Set the viewport
   glViewport ( 0, 0, esContext->width, esContext->height );
   
   // Clear the color buffer
   glClear ( GL_COLOR_BUFFER_BIT );

   // Use the program object
   glUseProgram ( userData->programObject );

   //glEnable(GL_SAMPLE_ALPHA_TO_COVERAGE);
   //glEnable(GL_SAMPLE_COVERAGE);
   //glSampleCoverage(0.5, GL_FALSE);
   glEnableVertexAttribArray ( 0 );

   //glLineWidth(1);

   for (list<VertexCurve>::iterator it = CurveList.begin();
            it != CurveList.end(); it++)
   {
       // Load the vertex data
       glVertexAttribPointer ( 0, 3, GL_FLOAT, GL_FALSE, 0, (*it).vertices );

       glDrawArrays ( GL_LINE_LOOP, 0, (*it).nrPoints );
   }

   eglSwapBuffers ( esContext->eglDisplay, esContext->eglSurface );
}

Also the results for the drawing are:

What i need is to have smoother lines (anti-aliased) and from what I read, in OpenGL ES 2 that can be done with multisampling. You can see from the code that I have tried using some methods specific to this technique but I was unable to fully understand their usage and got bad results:

If someone can explain to me how to get anti-aliased lines and make the contours smoother, I will be very grateful.

Answer 1

Multisampling can be enabled or disabled using the token GL_MULTISAMPLE, and by default it is enabled.

In order to find out whether multisampling is supported by the currently active EGL surface, query the value of GL_SAMPLE_ BUFFERS: here 1 means supported, 0 indicates not supported. GL_SAMPLES then tells how many samples per pixel are stored.

So all I had to do was add those 2 attributes in the context attribute list :

    EGLint attribList[] =
   {
       EGL_RED_SIZE,       8,
       EGL_GREEN_SIZE,     8,
       EGL_BLUE_SIZE,      8,
       EGL_ALPHA_SIZE,     (flags & ES_WINDOW_ALPHA) ? 8 : EGL_DONT_CARE,
       EGL_DEPTH_SIZE,     (flags & ES_WINDOW_DEPTH) ? 8 : EGL_DONT_CARE,
       EGL_STENCIL_SIZE,   (flags & ES_WINDOW_STENCIL) ? 8 : EGL_DONT_CARE,
       EGL_SAMPLE_BUFFERS, (flags & ES_WINDOW_MULTISAMPLE) ? 1 : 0,
       EGL_SAMPLES, 4,
       EGL_NONE
   };

I set EGL_SAMPLE_BUFFERS to 1 to have a multisample buffer and EGL_SAMPLES to 4 , in so having 4 samples per pixel (FSAA x4).

Answer 2

To be able to do multisampling, you need a multisample framebuffer. On most OpenGL-ES implementations this is done by creating a multisampled Frame Buffer Object, render to that, then copy its contents to the screen framebuffer.