CODEWITHSUNDEEP
webglalphablendingglblendfunc
Spongman
Spongman

Reputation: 9881

WebGL blendFunc bug or misunderstanding?

I'm trying to draw a semi-transparent black triangle on a black background.

enter image description here

Here's my sample: http://codewithoutborders.com/posted/blend.html

The blendFunc is set and enabled (line 151):

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

The buffer is cleared to black (line 129):

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

The shader fills with semi-transparent black (line 10):

gl_FragColor = vec4(0.0, 0.0, 0.0, .5);

I would expect the triangle to be black, since the docs state that

result = {foreground}*sourceAlpha + {background}*(1-sourceAlpha)
       = (0,0,0,.5)*.5 + (0,0,0,1)*.5
       = (0,0,0,.75)

which is black, right?

so where does the grey come from?

Upvotes: 1

Views: 2407

Answers (1)

Spongman
Spongman

Reputation: 9881

(how embarrasing. answering my own question 3 minutes after posting, but not before significant hair loss)

the grey comes from the white background of the HTML page showing through after 'punching' a 3/4-transparent hole though the otherwise-black canvas.

adding

style="background:black;"

to the tag solves the problem.

[gman's comment, below, is a better fix]

Upvotes: 4

Related Questions