着色器绘制出乎意料的透明背景答案

【问题标题】：Shaders draw unexpected transparent background着色器绘制出乎意料的透明背景
【发布时间】：2019-11-26 04:49:26
【问题描述】：

我有一个新类 MyActor 扩展 Actor，其中应用了着色器。

但是，着色器会意外填满透明背景。

MyActor内的draw()方法代码如下：

@Override
    public void draw(Batch batch, float parentAlpha) {
        if(shaderProgram!=null)
        {
            batch.setShader(shaderProgram);           
        }

        if(!drawParentAtBack)super.draw(batch, parentAlpha); // by default is false
        Color c = getColor(); // used to apply tint color effect
        batch.setColor(c.r, c.g, c.b, c.a * parentAlpha);
        if ( isVisible() )
        {            
                if(displayFrame !=null) // a textureregion
                {
                    batch.draw(displayFrame,
                            getX(),getY(),
                            getOriginX(),getOriginY(),
                            getWidth(),getHeight(),
                            getScaleX(),getScaleY(),
                            getRotation());
                }           
        }
        if(drawParentAtBack)super.draw(batch, parentAlpha);

        if(shaderProgram!=null)
        {
            batch.setShader(null);
        }
}


public void setShader(String vs, String fs){
        vertexShaderCode   =    Gdx.files.internal("shaders/" + vs + ".vs").readString();
        fragmentShaderCode = Gdx.files.internal("shaders/" + fs + ".fs").readString();
        shaderProgram = new ShaderProgram(vertexShaderCode, fragmentShaderCode);
        if (!shaderProgram.isCompiled())
        {
            d( "Shader compile error: " + shaderProgram.getLog() );
        }
    }

我的定义是这样的：

     MyActor myActor1;myActor2;
     ..... // setting up myActor1 & myActor2
     myActor1.setShader("default","greyScale");
     myActor2.setShader("default","greyScale");

我来自this tutorial的简单shaderCodes：

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

我的顶点着色器代码来自this tutorial：

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

我的预期结果图像是带有透明背景的灰色形状，但结果是这样的：

没有着色器的示例形状图像：

请帮忙。

【问题讨论】：

标签： libgdx glsl shader

【解决方案1】：

一般来说，透明度达到Alpha Blending。片段的 alpha 通道控制透明度，必须设置。

在片段着色器中，纹理的 alpha 通道被省略：

gl_FragColor = vec4(grayscale, 1.0);

将纹理的 alpha 通道 (u_texture) 设置为输出的 alpha 通道 (gl_FragColor.a)：

#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() {

        // read RGB color channels and alpha channel
        vec4 color = texture2D(u_texture, v_texCoords);

        float gray = (color.r + color.g + color.b) / 3.0;
        vec3 grayscale = vec3(gray);

        // write gray scale and alpha channel
        gl_FragColor = vec4(grayscale.rgb, color.a);
}

【讨论】：