WebGL fragment shader opacity

3
votes

Alright, first off, I'm pretty new at GLSL shaders, and I'm trying to wrap my head around the following shader

#ifdef GL_ES
    //precision mediump float;
    precision highp float;
    #endif

    uniform vec2 uTimes;

    varying vec2 texCoord;
    varying vec2 screenCoord;

    void main(void) {
        vec3 col;
        float c;
        vec2 tmpv = texCoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
        c = exp(-pow(length(tmpv) * 1.8, 2.0));
        col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
        gl_FragColor = vec4(col * 0.5, 0);
    }

So far, I know it gives me a radial gradient (perhaps). What I'd really like to know is how to make it completely transparent. I'm thinking that I need a vec4 for that, right?

1
javascriptwebglglslshader

1 Answers

9
votes

You need to turn on the blending.

See http://www.senchalabs.org/philogl/PhiloGL/examples/lessons/8/ and http://learningwebgl.com/blog/?p=859‎.

Without blending, depth and color buffers will be updated without taking care what was previously in the buffer, it will just overwrite data. With blending on, and depending on what type of blending function are you using, buffers will be updated with data that takes previsouly rendered data into a count.

This is the part that is interesting for you:

gl.blendFunc(gl.SRC_ALPHA, gl.ONE);
gl.enable(gl.BLEND);
gl.disable(gl.DEPTH_TEST);

Hope this helps.