title: Gradient "miter" in OpenGL shows seams at the join
body: <p>I am doing some really basic experiments around some 2D work in GL. I'm trying to draw a "picture frame" around an rectangular area. I'd like for the frame to have a consistent gradient all the way around, and so I'm constructing it with geometry that looks like four quads, one on each side of the frame, tapered in to make trapezoids that effectively have miter joins. </p>
  
  <p>The vert coords are the same on the "inner" and "outer" rectangles, and the colors are the same for all inner and all outer as well, so I'd expect to see perfect blending at the edges.</p>
  
  <p>But notice in the image below how there appears to be a "seam" in the corner of the join that's lighter than it should be.  </p>
  
  <p>I feel like I'm missing something conceptually in the math that explains this. Is this artifact somehow a result of the gradient slope? If I change all the colors to opaque blue (say), I get a perfect solid blue frame as expected.</p>
  
  <p><strong>Update:</strong> Code added below. Sorry kinda verbose. Using 2-triangle fans for the trapezoids instead of quads.</p>
  
  <p>Thanks!</p>
  
  <p><img src="https://i.stack.imgur.com/2BdFa.png" alt="alt text"></p>
  
  <pre><code>glClearColor(1.0, 1.0, 1.0, 1.0);
  glClear(GL_COLOR_BUFFER_BIT);
  
  glEnableClientState(GL_VERTEX_ARRAY);
  glEnableClientState(GL_COLOR_ARRAY);
  
  // Prep the color array. This is the same for all trapezoids.
  // 4 verts * 4 components/color = 16 values. 
  GLfloat colors[16];
  colors[0] = 0.0;
  colors[1] = 0.0;
  colors[2] = 1.0;
  colors[3] = 1.0;
  colors[4] = 0.0;
  colors[5] = 0.0;
  colors[6] = 1.0;
  colors[7] = 1.0;
  
  colors[8] = 1.0;
  colors[9] = 1.0;
  colors[10] = 1.0;
  colors[11] = 1.0;
  colors[12] = 1.0;
  colors[13] = 1.0;
  colors[14] = 1.0;
  colors[15] = 1.0;
  
  // Draw the trapezoidal frame areas. Each one is two triangle fans.
  // Fan of 2 triangles = 4 verts = 8 values
  GLfloat vertices[8];
  
  float insetOffset = 100;
  float frameMaxDimension = 1000;
  
  // Bottom 
  vertices[0] = 0;
  vertices[1] = 0;
  vertices[2] = frameMaxDimension;
  vertices[3] = 0;
  vertices[4] = frameMaxDimension - insetOffset;
  vertices[5] = 0 + insetOffset;
  vertices[6] = 0 + insetOffset;
  vertices[7] = 0 + insetOffset;
  glVertexPointer(2, GL_FLOAT , 0, vertices); 
  glColorPointer(4, GL_FLOAT, 0, colors);
  glDrawArrays(GL_TRIANGLE_FAN, 0, 4);    
  
  // Left
  vertices[0] = 0;
  vertices[1] = frameMaxDimension;
  vertices[2] = 0;
  vertices[3] = 0;
  vertices[4] = 0 + insetOffset;
  vertices[5] = 0 + insetOffset;
  vertices[6] = 0 + insetOffset;
  vertices[7] = frameMaxDimension - inset;    
  glVertexPointer(2, GL_FLOAT , 0, vertices); 
  glColorPointer(4, GL_FLOAT, 0, colors);
  glDrawArrays(GL_TRIANGLE_FAN, 0, 4);    
  
  /* top &amp; right would be as expected... */
  
  glDisableClientState(GL_COLOR_ARRAY);
  glDisableClientState(GL_VERTEX_ARRAY);
  </code></pre>