Рендеринг сглаженных строк с текстурами => поиск очень простого примера - PullRequest
Новая
       18

Рендеринг сглаженных строк с текстурами => поиск очень простого примера

2 голосов
/ 09 сентября 2010

Есть этот сайт ...

... где они объясняют, как нарисовать сглаженную линию.

Именно то, что я хочу!
но ...

Я не понимаю, как этого добиться для простой линии. Я нашел онлайн-версию книги (статья отчасти взята из книги), я скачал пример кода (показывающий фигурку, делающую причудливые движения), но там происходит так много мамбо-джамбо ... что-то странное скрипт Python ... круги в виде png-изображений и заголовочных файлов, почти все написано на cpp, файлы, которые я копирую в свой проект, выдают множество ошибок, которые я не могу исправить должным образом, и так далее, и так далее. И я думаю, что мне не нужны все эти причудливые вещи, так как я хочу рисовать линии только в простом приложении на основе cocos2d [Кстати ... Я не хотел использовать AA, но мои линии толще, чем 5px, что делает их безобразными при подключении (например, по кругу, состоящему из нескольких линий), так что я должен использовать AA, как кажется].

Итак, кто-то нашел или нашел крошечный кусочек работающего примера кода, используя принцип, описанный в связанной статье?

Примечания:

  1. На картинке вы видите отверстия:
    http://pimml.de/circles.png

  2. Здесь вы найдете код упомянутого крупье (линии AA): http://examples.oreilly.com/9780596804831/readme.html#AaLines

  3. Вот как я рисую свои круги: 

    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);

Ответы [ 3 ]

2 голосов
/ 23 января 2011

Спасибо Полу Хеберли, вот какой-то код, которым он поделился со мной для рисования сглаженных прямоугольников, точек и линий: 

/*
 *   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);
}
1 голос
/ 16 сентября 2010

Я тоже столкнулся с этой проблемой.Я потратил некоторое время на выяснение этого ... Некоторое время я использовал решение, похожее на это (через walterBenjamin на Apple.com):

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

Это работает, этолегко и выглядит красиво, но все же не самое лучшее (для того, что я делаю).В конце концов, я написал свое собственное решение, которое объединило рисование частиц GL Paint с его решением рисования линий точка-точка.

Я создал массив и при касанияхBegin, touchesMoved добавил к нему точку:

[currentStroke addObject:[NSValue valueWithCGPoint:point]]

Затем я перебираю штрихи, как вы видитеGL Paint с использованием GL_Points.

0 голосов
/ 09 сентября 2010

Может быть, вы можете увидеть это .Я решил проблему по этой ссылке для opengl-es.

...