WebGL片段着色器不透明度

Question

好吧,首先,我是GLSL着色器的新手,我正试图绕着下面的着色器

#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);
    }

到目前为止,我知道它给了我一个径向梯度(也许).我真正想知道的是如何使它完全透明.我想我需要一个vec4,对吧？

Answer 1

你需要打开混合.

请参阅http://www.senchalabs.org/philogl/PhiloGL/examples/lessons/8/和http://learningwebgl.com/blog/?p=859.

如果不进行混合,深度和颜色缓冲区将会更新,而无需考虑之前缓冲区中的内容,它只会覆盖数据.通过混合,并根据您使用的混合函数的类型,缓冲区将使用将预先渲染的数据转换为计数的数据进行更新.

这是你感兴趣的部分:

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

希望这可以帮助.