OpenGL ES 2.0 Android Alpha 显示为黑色答案

【问题标题】：OpenGL ES 2.0 Android Alpha Shows as blackOpenGL ES 2.0 Android Alpha 显示为黑色
【发布时间】：2016-05-20 18:58:50
【问题描述】：

我能够成功地将位图渲染到纹理上并将其显示在手机屏幕上没问题。我正在尝试做的是在它上面渲染另一个 PNG 的纹理。覆盖 png 包含一些透明 (alpha) 像素。

我可以在背景纹理图像上渲染叠加层，但是当我这样做时，透明像素似乎被渲染为半透明黑色？除非黑色实际上来自我设置为黑色的纹理背景...是否有人对我可能做错了什么或其他方式来实现这种预期效果有任何建议？

顶点着色器：

private final String vertexTextureShaderCode =
                "attribute vec4 aPosition;"+ // Position of out Vertex
                "attribute vec2 aTexPosition;"+ // Position of our texture contained in the vertex
                "varying vec2 vTexPosition;"+ //
                "void main(){"+
                "    gl_Position = aPosition;"+
                "    vTexPosition = aTexPosition;"+
                "}";

片段着色器：

private final String fragmentTextureShaderCode =
            "precision mediump float;" +
            "uniform sampler2D uTexture;" + // Our Background Image  ( Our uploaded image)
            "uniform sampler2D uOverlay;"+ // Our Ovrelay image
            "varying vec2 vTexPosition;" +
            "void main() {" +
            "  vec4 colImage = texture2D(uTexture,vTexPosition);" +
            "  vec4 colOverlay = texture2D(uOverlay, vTexPosition);"   +
            "  gl_FragColor = mix(colImage, colOverlay, 0.7);" +
            "}";

画框法

 public void drawOverlay(Context context,int resourceId){
    BitmapFactory.Options opts = new BitmapFactory.Options();
    opts.inScaled = false;

    Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), resourceId,opts);

    // Bind our TEXTURE_COORDS to the array
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D,mTexturePointer[1]);

    // Create the nearest filter TEXTURE_COORDS
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_NEAREST);
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_NEAREST);
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_S, GLES20.GL_CLAMP_TO_EDGE);
    GLES20.glTexParameteri(GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_WRAP_T, GLES20.GL_CLAMP_TO_EDGE);

    // Use Android GL Utils to specify a 2d TEXTURE_COORDS image from our bitmap
    GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

    bitmap.recycle();

    GLES20.glBindFramebuffer(GLES20.GL_FRAMEBUFFER, 0);
    GLES20.glUseProgram(mProgram);

    // ENable bledning

//       GLES20.glEnable(GLES20.GL_BLEND);
//
//        // User SRC_OVE
//        GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA);

    // get handle to vertex shader vPosition member
    mPositionHandle = GLES20.glGetAttribLocation(mProgram, "aPosition");
    mTextureHandle = GLES20.glGetUniformLocation(mProgram, "uTexture");
    mTextureOverlayhandle = GLES20.glGetUniformLocation(mProgram, "uOverlay");
    mTexturePositionHandle = GLES20.glGetAttribLocation(mProgram, "aTexPosition");

    GLES20.glVertexAttribPointer(mTexturePositionHandle, 2, GLES20.GL_FLOAT, false, 0, mTextureBuffer);
    GLES20.glEnableVertexAttribArray(mTexturePositionHandle);

    // ACTIVATING OUR FIRST TEXTURE, I.E our background image.
    GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTexturePointer[0]);
    GLES20.glUniform1i(mTextureHandle,0);

    // ACTIVATE OUR SECOND SECOND I.E our overlay
    GLES20.glActiveTexture(GLES20.GL_TEXTURE1);
    GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, mTexturePointer[1]);
    GLES20.glUniform1i(mTextureHandle,1);

    // Prepare the triangle coordinate data
    GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX, GLES20.GL_FLOAT, false, 0, vertexBuffer);

    // enable a handle to the triangle vertice
    GLES20.glEnableVertexAttribArray(mPositionHandle);

    // clear the colors
    GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT);

    GLES20.glDisable(GLES20.GL_DEPTH_TEST);

    GLES20.glEnable(GLES20.GL_BLEND);

    // User SRC_OVER
    GLES20.glBlendFunc(GLES20.GL_ONE, GLES20.GL_ONE_MINUS_SRC_ALPHA);
    // Draw the square
    GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, vertexCount);

    // Disbale the vertex array
    GLES20.glDisableVertexAttribArray(mPositionHandle);

}

在我的片段着色器中使用混合方法是正确的方法吗？我是否应该将 2 个图像绘制到 1 个纹理（sampler2D）中，而不是使用 2 个 sampler2D 对象的混合？如果是这样，我该怎么做。每次我尝试将前景纹理直接绘制在背景纹理上。

【问题讨论】：

据我记得位图对象（和底层的skia库）使用预计算的alpha...所以通过BitmapFactory加载alpha的png纹理不起作用...当我玩opengl时，我使用了本机libpng 用于加载
是的，预乘 alpha 似乎确实是导致此问题的原因。然而，许多资源指向使用 GLES20.BLEND 作为解决此问题的方法。在我的情况下它似乎不起作用

标签： android opengl-es

【解决方案1】：

好的，解决了我自己的问题。

我试图为一个纹理绘制 2 个不同的位图，但使用相同的纹理句柄来执行此操作。上面发布的片段着色器不正确，无法获得这种类型的结果。在 2 个纹理上使用“混合”不是正确的方法。

正确的方法是只使用 1 个纹理，但为我的背景纹理和前景纹理设置一个句柄。在 draw() 方法中，我首先设置背景图像，就像通常一样使用 glDrawArrays(...)，然后设置前景图像（使用正确的指针）以使用另一个 glDrawArrays 绘制前景图像(...) 打电话。

【讨论】：