Geek asks and answers

How does blending work with GLSL ES shaders in WebGL?

I am trying to get a simple effect for display using WebGL. Naturally, this means that I am using the fragment shader language defined in the GLSL ES 1.0 specification.

The code I'm working with is pretty much copied from other sources. It sets the square and uses the fragment and vertex shaders to determine the colors of the pixels. The following code will simply display a white square.

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

However, if I changed the alpha component to 1.0, then a black square will appear instead.

gl_FragColor = vec4(0.0, 0.0, 0.0, 1.0); // displays a black square

I assume that the color output by the fragment shader should be combined with some previous color. How can I make sure that only the last color (regardless of its alpha value) is what is actually selected as the displayed color?

Or maybe my order is wrong. Perhaps there is a later phase that combines with the color from the fragment shader to produce white. In any case, I know that some kind of confusion is occurring, because when I change the alpha value to 0.5, I get a gray square. I just want to know where the white color comes from? And how do I get rid of it?

As far as I can tell, the problem is not related to the mix function. The code is on github here . Try it on Google Chrome or Firefox.

+3
3

WebGL. , DOM -, . DOM . . , WebGL. , WebGLContextAttributes. :

WebGLContextAttributes . , . , - HTML .

, , , , WebGL Javascript

gl = canvas.getContext("experimental-webgl", { alpha: false } );
+4

, , , .

WebGL, :

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

-.

, , . , gl.enable(gl.BLEND);.

Update: , , , , . , , , gl.disable(gl.BLEND)

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

(glsl, webgl ..), alpha, , RGBA. , 0.0, 0.0, 0.0, 0.0 , 0,0 -. , .

0.0, 0.0, 0.0, 1.0 1,0--. , . , 100% .

, ( ).

, , .

max/min, - ( ) 0 255. 0 , 255 - .

So, in your case, you are asking for a square with 0 red, 0 green and 0 blue (which is just black). However, when you set the transparency (alpha channel) to zero, it appears as white (or, more likely, transparent, and everything behind it is white). When you set the alpha transparency to .5, it displays black (like 0,0,0), but only half visible. When you set alpha transparency to 1.0, it displays a completely opaque black square.

Make sense?

+1
source

More articles:


All Articles