Better overlapping points in OpenGL

问题

I'm using this method to simulate the outline of a point.

GLfloat points[graph->vertexCount * 6];
GLfloat outlinePoints[graph->vertexCount * 6];

for (int i = 0 ; i < graph->vertexCount; i++) 
{
    outlinePoints[i*6] = (graph->vertices[i].x / (backingWidth/2) ) - 1;
    outlinePoints[i*6+1] = -(graph->vertices[i].y / (backingHeight/2) ) + 1;
    outlinePoints[i*6+2] = 0.9;
    outlinePoints[i*6+3] = 0.9;
    outlinePoints[i*6+4] = 0.9;
    outlinePoints[i*6+5] = 1.0;

    points[i*6] = (graph->vertices[i].x / (backingWidth/2) ) - 1;
    points[i*6+1] = -(graph->vertices[i].y / (backingHeight/2) ) + 1;
    points[i*6+2] = 1.0;
    points[i*6+3] = 0.0;
    points[i*6+4] = 0.0;
    points[i*6+5] = 1.0;
}

// for outline points
glEnable(GL_POINT_SMOOTH);
glPointSize(DOT_SIZE*scale*1.2); 
glVertexPointer(2, GL_FLOAT, 24, outlinePoints); 
glColorPointer(4, GL_FLOAT, 24, &outlinePoints[2]);
glDrawArrays(GL_POINTS, 0, graph->vertexCount);

// for red points
glEnable(GL_POINT_SMOOTH);
glPointSize(DOT_SIZE*scale); 
glVertexPointer(2, GL_FLOAT, 24, points);
glColorPointer(4, GL_FLOAT, 24, &points[2]);
glDrawArrays(GL_POINTS, 0, graph->vertexCount);

The points display as I wish when there is no overlapping.

But when one point overlaps another point, the white outline is covered by the red point.

I think the reason is that the outline points are all put into an array and rendered before all the red points. The rendering order should be "(white point, red point), (white point, red point)...", something like white point and red point are grouped.

It should be like this:

How can I do that?

------------ Temporary solution edited on 12th ------------

 for (int i = 0 ; i < graph->vertexCount; i++)
{
    GLfloat points[6];
    GLfloat outlinePoints[6];

    outlinePoints[0] = (graph->vertices[i].x / (backingWidth/2) ) - 1;
    outlinePoints[1] = -(graph->vertices[i].y / (backingHeight/2) ) + 1;
    outlinePoints[2] = 0.9;
    outlinePoints[3] = 0.9;
    outlinePoints[4] = 0.9;
    outlinePoints[5] = 1.0;

    glPointSize(DOT_SIZE*scale*1.3); 
    glVertexPointer(2, GL_FLOAT, 24, outlinePoints);
    glColorPointer(4, GL_FLOAT, 24, &outlinePoints[2]);
    glDrawArrays(GL_POINTS, 0, 1);

    // red points
    points[0] = (graph->vertices[i].x / (backingWidth/2) ) - 1;
    points[1] = -(graph->vertices[i].y / (backingHeight/2) ) + 1;
    points[2] = 1.0;
    points[3] = 0.0;
    points[4] = 0.0;
    points[5] = 1.0;

    glPointSize(DOT_SIZE*scale);
    glVertexPointer(2, GL_FLOAT, 24, points);
    glColorPointer(4, GL_FLOAT, 24, &points[2]);
    glDrawArrays(GL_POINTS, 0, 1);
}

The above code can draw points as I expect, but the following code have to run twice when each point is drawing, just don't know how much it will impact the rendering speed if points increase?

    glPointSize(DOT_SIZE*scale);
    glVertexPointer(2, GL_FLOAT, 24, points);
    glColorPointer(4, GL_FLOAT, 24, &points[2]);
    glDrawArrays(GL_POINTS, 0, 1);

来源：https://stackoverflow.com/questions/50253903/better-overlapping-points-in-opengl

标签

ios

objective-c

opengl-es

render

point