title: WebGL alpha blending
body: <p>I'm trying to layer one texture over another, but I'm having alpha blending issues around the edges. I've tried many blending combinations with no luck. Where am I going wrong?</p>
  
  <p>Current state of framebuffer (opaque):</p>
  
  <p><img src="https://i.stack.imgur.com/MwvYf.png" width="250"></p>
  
  <p>Transparent texture rendered in off-screen framebuffer:</p>
  
  <p><img src="https://i.stack.imgur.com/fwpd3.png" width="250"></p>
  
  <p>Result when I try to blend the two. Notice the edges on the circle:</p>
  
  <p><img src="https://i.stack.imgur.com/rPBbV.png" width="250"></p>
  
  <p>Here's the blendFunc:</p>
  
  <pre><code>_gl.blendFuncSeparate( _gl.SRC_ALPHA, _gl.ONE_MINUS_SRC_ALPHA, _gl.ONE, _gl.ONE_MINUS_SRC_ALPHA );
  </code></pre>
  
  <p>Here's the shader. Just basic rendering of a texture:</p>
  
  <pre><code>uniform sampler2D texture;
  varying vec2 vUv;
  
  void main() {
      vec4 tColor = texture2D(texture, vUv);
  
      gl_FragColor = tColor;
  }
  </code></pre>