Render Anti-Aliased Lines with Textures => searching for very simple example

Question

... where they explain how to draw an antialiased line.

Exactly what I want!
but...

I don't understand how to achieve that for a simple line. I have found the online version of the book (the article is kind of derived from the book), i have downloaded the sample code (showing a stick figure doing fancy moves), but there is so much mambojambo going on... some strange python script... circles as png-images and as header files, almost everything is written in cpp, files i copy to my project produce lots of errors that i can't resolve properly and so on and so on. And I think I don't need all of that fancy stuff, since I only want to draw lines in a simple cocos2d based app [Btw.... I didn't want to use AA, but my lines are thicker than 5px which makes them have ugly holes when connected (f.e. in a circle made of several lines) so that I must use AA as it seems].

So does someone have or found a tiny little piece of runnable sample code using the principle explained in the linked article ?

Notes:

In the picture you see the holes:
http://pimml.de/circles.png
Here you will find the code of the mentioned stickman (AA Lines): http://examples.oreilly.com/9780596804831/readme.html#AaLines

This is how I draw my circles:

int segments = 80;
CGFloat width = 100;
CGFloat height = 100;
CGPoint center = ccp(800,200);  

glDisable(GL_TEXTURE_2D);
glDisableClientState(GL_TEXTURE_COORD_ARRAY);
glDisableClientState(GL_COLOR_ARRAY);
//glEnable(GL_LINE_SMOOTH); // doesn't work on device
glTranslatef(center.x, center.y, 0.0);
glLineWidth(3.0f);
GLfloat vertices[segments*2];
int count=0;
for (GLfloat i = 0; i < 360.0f; i+=(360.0f/segments))
{
    vertices[count++] = (cos(degreesToRadian(i))*width);
    vertices[count++] = (sin(degreesToRadian(i))*height);
}
glVertexPointer (2, GL_FLOAT , 0, vertices); 
glDrawArrays (GL_LINE_LOOP, 0, segments);

glEnableClientState(GL_COLOR_ARRAY);
glEnableClientState(GL_TEXTURE_COORD_ARRAY);
glEnable(GL_TEXTURE_2D);

score 2 · Answer 1 · answered Jan 23 '11 at 17:10

Thanks to Paul Haeberli, here is some code he shared with me for drawing antialiased boxes, points, and lines:

/*
 *   Antialised 2D points, lines and rectangles for iOS devices
 *
 *   The feathered edge of these primitives is width/2.0.
 *
 *   If you are working in screen space, the width should be 1.0.
 *
 *       Paul Haeberli 2010
 *
 */
void fillSmoothRectangle(CGRect *r, float width)
{
    GLfloat rectVertices[10][2];
    GLfloat curc[4]; 
    GLint   ir, ig, ib, ia;

    // fill the inside of the rectangle
    rectVertices[0][0] = r->origin.x;
    rectVertices[0][1] = r->origin.y;
    rectVertices[1][0] = r->origin.x+r->size.width;
    rectVertices[1][1] = r->origin.y;
    rectVertices[2][0] = r->origin.x;
    rectVertices[2][1] = r->origin.y+r->size.height;
    rectVertices[3][0] = r->origin.x+r->size.width;
    rectVertices[3][1] = r->origin.y+r->size.height;

    glEnableClientState(GL_VERTEX_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, rectVertices);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    rectVertices[0][0] = r->origin.x;
    rectVertices[0][1] = r->origin.y;
    rectVertices[1][0] = r->origin.x-width;
    rectVertices[1][1] = r->origin.y-width;
    rectVertices[2][0] = r->origin.x+r->size.width;
    rectVertices[2][1] = r->origin.y;
    rectVertices[3][0] = r->origin.x+r->size.width+width;
    rectVertices[3][1] = r->origin.y-width;
    rectVertices[4][0] = r->origin.x+r->size.width;
    rectVertices[4][1] = r->origin.y+r->size.height;
    rectVertices[5][0] = r->origin.x+r->size.width+width;
    rectVertices[5][1] = r->origin.y+r->size.height+width;
    rectVertices[6][0] = r->origin.x;
    rectVertices[6][1] = r->origin.y+r->size.height;
    rectVertices[7][0] = r->origin.x-width;
    rectVertices[7][1] = r->origin.y+r->size.height+width;
    rectVertices[8][0] = r->origin.x;
    rectVertices[8][1] = r->origin.y;
    rectVertices[9][0] = r->origin.x-width;
    rectVertices[9][1] = r->origin.y-width;

    glGetFloatv(GL_CURRENT_COLOR, curc);
    ir = 255.0*curc[0];
    ig = 255.0*curc[1];
    ib = 255.0*curc[2];
    ia = 255.0*curc[3];

    const GLubyte rectColors[] = {
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
    };

    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_COLOR_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, rectVertices);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, rectColors);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 10);
    glDisableClientState(GL_COLOR_ARRAY);
}

void drawSmoothLine(CGPoint *pos1, CGPoint *pos2, float width)
{
    GLfloat lineVertices[12], curc[4]; 
    GLint   ir, ig, ib, ia;
    CGPoint dir, tan;

    width = width*8;
    dir.x = pos2->x - pos1->x;
    dir.y = pos2->y - pos1->y;
    float len = sqrtf(dir.x*dir.x+dir.y*dir.y);
    if(len<0.00001)
        return;
    dir.x = dir.x/len;
    dir.y = dir.y/len;
    tan.x = -width*dir.y;
    tan.y = width*dir.x;

    lineVertices[0] = pos1->x + tan.x;
    lineVertices[1] = pos1->y + tan.y;
    lineVertices[2] = pos2->x + tan.x;
    lineVertices[3] = pos2->y + tan.y;
    lineVertices[4] = pos1->x;
    lineVertices[5] = pos1->y;
    lineVertices[6] = pos2->x;
    lineVertices[7] = pos2->y;
    lineVertices[8] = pos1->x - tan.x;
    lineVertices[9] = pos1->y - tan.y;
    lineVertices[10] = pos2->x - tan.x;
    lineVertices[11] = pos2->y - tan.y;

    glGetFloatv(GL_CURRENT_COLOR,curc);
    ir = 255.0*curc[0];
    ig = 255.0*curc[1];
    ib = 255.0*curc[2];
    ia = 255.0*curc[3];

    const GLubyte lineColors[] = {
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, ia,
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
    };

    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_COLOR_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, lineVertices);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, lineColors);
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 6);
    glDisableClientState(GL_COLOR_ARRAY);
}


void drawSmoothPoint(CGPoint *pos, float width)
{
    GLfloat pntVertices[12], curc[4]; 
    GLint   ir, ig, ib, ia;

    pntVertices[0] = pos->x;
    pntVertices[1] = pos->y;
    pntVertices[2] = pos->x - width;
    pntVertices[3] = pos->y - width;
    pntVertices[4] = pos->x - width;
    pntVertices[5] = pos->y + width;
    pntVertices[6] = pos->x + width;
    pntVertices[7] = pos->y + width;
    pntVertices[8] = pos->x + width;
    pntVertices[9] = pos->y - width;
    pntVertices[10] = pos->x - width;
    pntVertices[11] = pos->y - width;

    glGetFloatv(GL_CURRENT_COLOR,curc);
    ir = 255.0*curc[0];
    ig = 255.0*curc[1];
    ib = 255.0*curc[2];
    ia = 255.0*curc[3];

    const GLubyte pntColors[] = {
        ir, ig, ib, ia,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
        ir, ig, ib, 0,
    };

    glEnableClientState(GL_VERTEX_ARRAY);
    glEnableClientState(GL_COLOR_ARRAY);
    glVertexPointer(2, GL_FLOAT, 0, pntVertices);
    glColorPointer(4, GL_UNSIGNED_BYTE, 0, pntColors);
    glDrawArrays(GL_TRIANGLE_FAN, 0, 6);
    glDisableClientState(GL_COLOR_ARRAY);
}

score 1 · Accepted Answer · answered Sep 16 '10 at 02:37

1

I ran into that issue as well. I spent a while figuring this out... I used a solution similar to this one for a while (via walterBenjamin on Apple.com):

https://devforums.apple.com/message/264670

This works, it is easy and it looks nice, but it still isn't the best (for what I am doing). In the end, I wrote my own solution that combined GL Paint particle drawing with his solution of point-to-point line drawing.

I made an array and at touchesBegin, touchesMoved, I added a point to it:

[currentStroke addObject:[NSValue valueWithCGPoint:point]]

Then I iterate through the strokes, such as you see in GL Paint using GL_Points.

answered Sep 16 '10 at 02:37

Beaker

1,633
13
22

No worries. Hope it helped an sorry I didn't see it sooner! – Beaker Sep 17 '10 at 07:42
Well, you are new here, so I it's even an honer that mine was the first question you answered, while I believed nobody would answer it anymore. But I have to admit that I also already successfully implemented the AALine with textures technique two days ago (after lots of pain cause of so much c++ elemts and libraries I didn't understand and the mix into the obj-c cocos2d framework). Yours worked immediately and now I will clean my code, optimize it and then I will decide by performance which technique to use. – Allisone Sep 17 '10 at 08:07
Maybe I will also find some time to post some clear and simple example of the other technique here. – Allisone Sep 17 '10 at 08:08
Hah, thanks. I would like to post the code, but I am under NDA... which is annoying. Anyway, I can't post the code but if you have specific questions, I'm sure I can answer them without getting into much trouble. A note on performance. The GL_Paint method looks great for user drawn lines, better than the tangent method from the apple forums, just because it is so much smoother. However, it can get slow and I had to spend a chunk of time on optimization... – Beaker Sep 17 '10 at 08:46

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

Maybe you can see this. I resolve the problem from that link for opengl-es.

edited May 23 '17 at 12:24

Community

1
1

answered Sep 08 '10 at 23:57

AechoLiu

17,522
9
100
118

Did it work on a 10 px Circle ? Do you have working Sample Code ? – Allisone Sep 09 '10 at 00:16
My problem is that my texture is drawn with rectangle, and the edges needs anti-alias. When surveying this site and getting the link, I solve my problem by redraw edge lines again. It works well now. But my codes is opengl-es, not cocos2d. – AechoLiu Sep 09 '10 at 00:22
Cocos2d uses OpenGL-es. It's just a nice framework with lots of easy to use stuff like sprites, menus, animations, scene transitions etc. – Allisone Sep 09 '10 at 00:28
Maybe I will learn Cocos2d one day. But my project currently use iPhone-SDK and opengl-es. I am not boss, so ... – AechoLiu Sep 09 '10 at 00:57

Render Anti-Aliased Lines with Textures => searching for very simple example

3 Answers3