GLSL 灰度着色器去除透明度

Question

我对 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 上的变化。

Answer 1

问题出在您的片段着色器中。您创建一个vec3 color想象 (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

Answer 2

我认为这些改变会对你有所帮助。

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 读取颜色并将其应用到输出。