javascript - WebGL fragment shader opacity - Stack Overflow

admin管理员组

文章数量:1344334

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 pletely transparent. I'm thinking that I need a vec4 for that, right?

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 pletely transparent. I'm thinking that I need a vec4 for that, right?

• javascript
• webgl
• glsl
• shader

Share Improve this question Follow asked Aug 26, 2013 at 8:35 Alex WeylandAlex Weyland 17722 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

You need to turn on the blending.

See http://www.senchalabs/philogl/PhiloGL/examples/lessons/8/ and http://learningwebgl./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.

本文标签： javascriptWebGL fragment shader opacityStack Overflow