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

希望这会有所帮助。