javascript - 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);

希望这可以帮助。