Geek asks and answers

Blending with HTML Background in WebGL

I draw flat colors and textures in a WebGL canvas. My colors and textures have different alpha values, and I want them to be mixed correctly. I want to have a transparent background (they should be mixed with the HTML content that is under the canvas).

In webgl I use

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

It works correctly when the HTML background is black. But when I set the JPG template as the background, I draw a black triangle (alpha = 1) and a white triangle (alpha = 0.5), I see a background pattern where the triangles intersect with each other. Is this the right behavior?

+5
source share
1 answer

My previous answer was actually incorrect. This is the expected result of what you are describing.

gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) means the resulting alpha

A_final = A_s * A_s + (1 - A_s) * A_d

( = 1)

1 * 1 + (1 - 1) * 0 == 1 + 0 == 1

, . , ( =.5),

.5 * .5 + (1 - .5) * 1 == .25 + .5 == .75

, , , , .

OpenGL, . , FBO . .

- - gl.ONE, gl.ONE_MINUS_SRC_ALPHA,

A_final = A_s + (1 - A_s) * A_d

-. , - gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA. gl.blendFuncSeparate gl.blendFunc, - .

gl.BlendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA);

( WebGL , , , ). , ( , gl_FragColor vec4(.5, .5, .5, .5)),

gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)

, , .

- , WebGL, ( ), WebGL , ( vec4(1., 1., 1., .5) , undefined, / , ). gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA) OpenGL, .

+12

More articles:


All Articles