title: Better overlapping points in OpenGL
body: <p>I'm using <a href="https://stackoverflow.com/questions/50209783/how-to-draw-outline-of-a-point-in-opengl/50248137?noredirect=1#comment87521448_50248137">this method</a> to simulate the outline of a point. </p>
  
  <pre><code>GLfloat points[graph-&gt;vertexCount * 6];
  GLfloat outlinePoints[graph-&gt;vertexCount * 6];
  
  for (int i = 0 ; i &lt; graph-&gt;vertexCount; i++) 
  {
      outlinePoints[i*6] = (graph-&gt;vertices[i].x / (backingWidth/2) ) - 1;
      outlinePoints[i*6+1] = -(graph-&gt;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-&gt;vertices[i].x / (backingWidth/2) ) - 1;
      points[i*6+1] = -(graph-&gt;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, &amp;outlinePoints[2]);
  glDrawArrays(GL_POINTS, 0, graph-&gt;vertexCount);
  
  // for red points
  glEnable(GL_POINT_SMOOTH);
  glPointSize(DOT_SIZE*scale); 
  glVertexPointer(2, GL_FLOAT, 24, points);
  glColorPointer(4, GL_FLOAT, 24, &amp;points[2]);
  glDrawArrays(GL_POINTS, 0, graph-&gt;vertexCount);
  </code></pre>
  
  <p>The points display as I wish when there is no overlapping.</p>
  
  <p><a href="https://i.stack.imgur.com/KEq6H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KEq6H.png" alt="enter image description here"></a></p>
  
  <p>But when one point overlaps another point, the white outline is covered by the red point.
  <a href="https://i.stack.imgur.com/cz2Eh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cz2Eh.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p>It should be like this:</p>
  
  <p><a href="https://i.stack.imgur.com/TdZMO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TdZMO.png" alt="enter image description here"></a></p>
  
  <p>How can I do that?</p>
  
  <p>------------  <strong>Temporary solution edited on 12th</strong>  ------------</p>
  
  <pre><code> for (int i = 0 ; i &lt; graph-&gt;vertexCount; i++)
  {
      GLfloat points[6];
      GLfloat outlinePoints[6];
  
      outlinePoints[0] = (graph-&gt;vertices[i].x / (backingWidth/2) ) - 1;
      outlinePoints[1] = -(graph-&gt;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, &amp;outlinePoints[2]);
      glDrawArrays(GL_POINTS, 0, 1);
  
      // red points
      points[0] = (graph-&gt;vertices[i].x / (backingWidth/2) ) - 1;
      points[1] = -(graph-&gt;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, &amp;points[2]);
      glDrawArrays(GL_POINTS, 0, 1);
  }
  </code></pre>
  
  <p>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?</p>
  
  <pre><code>    glPointSize(DOT_SIZE*scale);
      glVertexPointer(2, GL_FLOAT, 24, points);
      glColorPointer(4, GL_FLOAT, 24, &amp;points[2]);
      glDrawArrays(GL_POINTS, 0, 1);
  </code></pre>