title: How to properly blend colors across two triangles and remove diagonal smear
body: <p>I am learning WebGL and I've drawn a full screen quad with colors for each vertex. No lighting or normals or perspective matrix or depth buffer; I'm just drawing a gradient background. This is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/6oOgx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6oOgx.png" alt="full screen gradient"></a></p>
  
  <p>It looks good but I cannot help noticing the diagonal smear from the bottom right to the top left. I feel this is an artifact of linear interpolating the far opposite vertices. I'm drawing two triangles: the bottom left, and the top right. I think I would get similar results using OpenGL instead of WebGL.</p>
  
  <p>Given the same four colors and the same size rectangle, is there a way to render this so the edge between the two triangles isn't so apparent? Maybe more vertices, or a different blending function? I'm not sure exactly what the colors should be at each pixel; I just want to know how to get rid of the diagonal smear.</p>