title: WebGL: How to correctly blend alpha channel png
body: <p>I'm pretty new to OpenGL and even newer to WebGL. I'm trying to draw a textured quad with an alpha channel. However I just can't get the blending right.</p>
  <p>This is the result I'm looking for</p>
  <p><img src="https://i.stack.imgur.com/TF3Nf.png" alt="This is the result I'm looking for" /></p>
  <p>And this is what the WebGL result looks like</p>
  <p><img src="https://i.stack.imgur.com/MAvX6.png" alt="And this is what the WebGL result looks like" /></p>
  <p>As you can see there is kind of a white outline on the dice edges, where in the original image, there is not.</p>
  <p>This is how I do my blending in WebGL</p>
  <pre class="lang-js prettyprint-override"><code>gl.clearColor(0.5, 0.5, 0.5, 1);
  gl.disable(gl.DEPTH_TEST);
  gl.enable(gl.BLEND);
  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  </code></pre>
  <p>Here is my fragment shader:</p>
  <pre class="lang-c prettyprint-override"><code>precision mediump float;
  
  varying vec2 vUV;
  
  uniform sampler2D texture;
  
  void main(void) {
      vec4 frag = texture2D(texture, vUV);
      gl_FragColor = frag;
  }
  </code></pre>
  <p>Any idea why this is happening? I'm not creating mipmaps, BTW.</p>