title: How to avoid transparency overlap using OpenGL?
body: <p>I am working on a handwriting application on iOS. I found the sample project "GLPaint" from iOS documentation which is implemented by OpenGL ES, and I did something modification on it.</p>
  
  <p>I track the touch points and calculate the curves between the points and draw particle images alone the curve to make it looks like where the finger passby. </p>
  
  <pre><code>glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
  glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, brushData); // burshData is from CGImage, it is 
  
  // vertexBuffer is generated based on the calculated points, it's just a sequence of point where need to draw image.
  glVertexPointer(2, GL_FLOAT, 0, vertexBuffer); 
  glDrawArrays(GL_POINTS, 0, vertexCount);
  
  glBindRenderbufferOES(GL_RENDERBUFFER_OES, viewRenderbuffer);
  [context presentRenderbuffer:GL_RENDERBUFFER_OES];
  </code></pre>
  
  <p>What I got is a solid line which looks quite good. But now I want to draw semi-transparent highlight instead of solid line. So I replace the particle image with a 50% transparency one without changing code.</p>
  
  <p><a href="https://twitter.com/jun_jia0127/status/287132486004248576/photo/1" rel="noreferrer">Result of 50% transparency particle image</a></p>
  
  <p><img src="https://i.stack.imgur.com/uHp1J.png" alt="Result of 50% transparency particle image"></p>
  
  <p>There is something wrong with blend.</p>
  
  <p><a href="https://twitter.com/jun_jia0127/status/287132555986231296/photo/1" rel="noreferrer">What I need</a></p>
  
  <p><img src="https://i.stack.imgur.com/QHxap.png" alt="What I need"></p>
  
  <p>I draw three points using the semi-transparency particle image, and the intersection area should keep 50% transparency.</p>
  
  <p>What's the solution?</p>