WebGL片段着色器不透明度 [英] WebGL fragment shader opacity

问题描述

好的，首先，我是GLSL着色器的新手，我正在尝试将头缠绕在以下着色器上

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

到目前为止，我知道它可能会给我一个径向渐变.我真正想知道的是如何使其完全透明.我在想为此需要vec4，对吗?

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?

推荐答案

您需要打开混合.

请参见 http://www.senchalabs.org/philogl/PhiloGL/示例/课程/8/和 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.

这是您感兴趣的部分:

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

希望这会有所帮助.

这篇关于WebGL片段着色器不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！