CODEWITHSUNDEEP
opengl-eswebglshaderblending
Cosmologicon
Cosmologicon

Reputation: 2167

OpenGL blending renders black on black as gray?

I'm working in webGL. I'm pretty new to OpenGL. Having trouble with the blending function. My options look like:

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

I render a source rectangle with color [0,0,0,0.5] on top of a destination background with color [0,0,0,1]. Based on everything I've read, I expect the result to be black. Instead it looks to be about 25% white. Here's what I get when I render red and black rectangles with alpha values ranging from 0.0 to 1.0.

View live demo and source here. Am I misunderstanding the blending function, and if so, how do I get what I expect? Thanks!

Upvotes: 4

Views: 1167

Answers (1)

Kirill Dmitrenko
Kirill Dmitrenko

Reputation: 3629

You should specify separate function for alpha:

gl.enable(gl.BLEND);
gl.blendEquation(gl.FUNC_ADD);
gl.blendFuncSeparate(
    gl.SRC_ALPHA,
    gl.ONE_MINUS_SRC_ALPHA,
    gl.ONE,
    gl.ONE_MINUS_SRC_ALPHA
);

Upvotes: 6

Related Questions