Proper way of doing blending in WebGl

Question

I have a couple of problems when doing blending in WebGL. One of them is the way that colors are rendered regardless of the alpha value when blending is on. Meaning darker colors are always blended with what is underneath, even when alpha is set to 1.0. Yes, the more brighter colors are rendered differently depending on the alpha value, so there isn't a problem in the way I set up my shaders, I think.

That again I haven't had a chance to render a full scene yet, I am currently doing only testing with WebGl, so I only draw simple object on top of the default background. Will these blending problems be "fixed" once I render every bit of the screen using objects, or is this a limitation with WebGL?

Answer 1

Try setting the blend function like this:

 gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

That should be the default, at least it seems to be in Firefox.