GLSL 灰度着色器去除透明度

GLSL Grayscale Shader removes transparency

我是 GLSL 的新手,从简单的灰度阴影开始。我使用了GamesFromScratch教程的代码:

顶点着色器:

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoords;

void main() {
    v_color = a_color;
    v_texCoords = a_texCoord0;
    gl_Position = u_projTrans * a_position;
}

片段着色器:

#ifdef GL_ES
    precision mediump float;
#endif

varying vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;
uniform mat4 u_projTrans;

void main() {
        vec3 color = texture2D(u_texture, v_texCoords).rgb;
        float gray = (color.r + color.g + color.b) / 3.0;
        vec3 grayscale = vec3(gray);

        gl_FragColor = vec4(grayscale, 1.0);
}

效果与问题:全部渲染成灰度,但是贴图的透明部分变白了。例如:一个简单的实心圆通常画成圆形。现在它是一个白框内的圆圈。在移除的透明部分旁边,alpha 的变化也不可见。

问题出在您的片段着色器中。你创建一个 vec3 color imagine (r,g,b) 然后你设置 gl_FragColor 到一个 vec4 (r,g,b,a)。使用灰度中的前三个,然后将 "a" 设置为硬编码的 alpha 值 1,移除所有透明度。

您可以从采样器中获取 rgba 并在最终的 vec4 中使用它的 alpha。

此外,如果您正在寻找更真实的灰度转换,一般标准是

color = 0.299 * r + 0.587 * g + 0.114 * b

https://en.wikipedia.org/wiki/Grayscale

我认为这些更改会对您有所帮助。

vec4 color = texture2D(u_texture, v_texCoords);
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
gl_FragColor = vec4(grayscale, color.a);

在我的更改中,我从纹理中读取带有 alpha 的颜色并将其应用于输出。