Question

我对GLSL很新，并开始使用简单的灰度阴影。我使用了GamesFromScratch教程的代码：

vertexshader：

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

Fragmentshader：

#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 = (color.r + color.g + color.b) / 3.0;
vec3 grayscale = vec3(gray);

gl_FragColor = vec4(grayscale, color.a);

在我的更改中，我使用纹理中的alpha读取颜色并将其应用于输出。

GLSL灰度着色器消除了透明度

2 个答案: