OpenGL ES 2.0 PNG Alpha 通道

Question

我刚刚学习使用适用于 Android 的 OpenGL ES 2.0。我一直在尝试简单地在屏幕中间显示纹理，这很简单，但我似乎无法让 PNG alpha 正常工作。图像将显示为黑色背景，或者整个图像将稍微混合到背景颜色中，具体取决于我使用的设置。

为了达到这一点，我所遵循的实际教程从未具有透明度，因此我尝试使用通过搜索找到的代码进行工作，并且可能刚刚错过了一个重要步骤。不过，我已经进行了大量搜索来解决这个问题，但我还没有看到任何答案，其中有我的设置没有的东西。我已经尝试了 glBlendFunc 的每种组合，但没有成功。

我想如果我尝试粘贴所有可能与此相关的代码，这个问题就会显得非常臃肿，所以我很乐意发布你们要求的任何代码。我非常感谢任何有关我下一步应该尝试的想法。

编辑::这是我的片段着色器，我认为这就是原因。这是我从未真正找到透明度工作的好例子的唯一部分，其他所有内容都与我在其他地方看到的相匹配。

        final String fragmentShader =           
        "precision mediump float;       \n"  
        + "varying vec2 v_Color;          \n"     
        + "uniform sampler2D s_baseMap;   \n"
        + "void main()                    \n"     
        + "{                              \n"
        + "  vec4 baseColor;              \n"
        + "  baseColor = texture2D( s_baseMap, v_Color );   \n"
        + "   gl_FragColor = baseColor;     \n"    
        + "}                              \n"; 

它从来没有明确地对 alpha 执行任何操作，它来自一个毕竟不使用它的示例，但我仍然对片段着色器了解不多，因为当它将图像混合到其中时，它似乎“有点”工作背景，我认为它正在以某种形式与阿尔法一起工作，但我只是设置了一些错误。

编辑::这是“loadTexture”方法。它与我试图学习的 openGL ES 2.0 书中的示例大致相同，但进行了一些更改，似乎使图像更接近正常工作。

    private int loadTexture ( InputStream is )
{
    int[] textureId = new int[1];
    Bitmap bitmap;
    bitmap = BitmapFactory.decodeStream(is);
    byte[] buffer = new byte[bitmap.getWidth() * bitmap.getHeight() * 4];

    for ( int y = 0; y < bitmap.getHeight(); y++ )
        for ( int x = 0; x < bitmap.getWidth(); x++ )
        {
            int pixel = bitmap.getPixel(x, y);
            buffer[(y * bitmap.getWidth() + x) * 4 + 0] = (byte)((pixel >> 16) & 0xFF);
            buffer[(y * bitmap.getWidth() + x) * 4 + 1] = (byte)((pixel >> 8) & 0xFF);
            buffer[(y * bitmap.getWidth() + x) * 4 + 2] = (byte)((pixel >> 0) & 0xFF);
        }

    ByteBuffer byteBuffer = ByteBuffer.allocateDirect(bitmap.getWidth() * bitmap.getHeight() * 4);
    byteBuffer.put(buffer).position(0);

    GLES20.glGenTextures ( 1, textureId, 0 );
    GLES20.glBindTexture ( GLES20.GL_TEXTURE_2D, textureId[0] );

    GLES20.glTexImage2D ( GLES20.GL_TEXTURE_2D, 0, GLES20.GL_RGBA, bitmap.getWidth(), bitmap.getHeight(), 0, 
                          GLES20.GL_RGBA, GLES20.GL_UNSIGNED_BYTE, byteBuffer );

    GLES20.glTexParameteri ( GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MIN_FILTER, GLES20.GL_LINEAR );
    GLES20.glTexParameteri ( GLES20.GL_TEXTURE_2D, GLES20.GL_TEXTURE_MAG_FILTER, GLES20.GL_LINEAR );
    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 );

    return textureId[0];
}

我明白代码在做什么，但不可否认，它仍然让我有点困惑，所以由于我缺乏知识，我可能会错过一些明显的东西。

我没有看到我的代码的任何其他部分看起来可能会导致我遇到的那种问题，但是编程总是充满了意想不到的事情（尤其是在 OpenGL 的世界中），所以如果你认为其他的东西是因为我也一定会把它发布给你。抱歉给大家带来麻烦了！

Answer 1

更改

 for ( int y = 0; y < bitmap.getHeight(); y++ )
    for ( int x = 0; x < bitmap.getWidth(); x++ )
    {
        int pixel = bitmap.getPixel(x, y);
        buffer[(y * bitmap.getWidth() + x) * 4 + 0] = (byte)((pixel >> 16) & 0xFF);
        buffer[(y * bitmap.getWidth() + x) * 4 + 1] = (byte)((pixel >> 8) & 0xFF);
        buffer[(y * bitmap.getWidth() + x) * 4 + 2] = (byte)((pixel >> 0) & 0xFF);
    }

为

 for ( int y = 0; y < bitmap.getHeight(); y++ )
    for ( int x = 0; x < bitmap.getWidth(); x++ )
    {
        int pixel = bitmap.getPixel(x, y);
        buffer[(y * bitmap.getWidth() + x) * 4 + 0] = (byte)((pixel >> 16) & 0xFF);
        buffer[(y * bitmap.getWidth() + x) * 4 + 1] = (byte)((pixel >> 8) & 0xFF);
        buffer[(y * bitmap.getWidth() + x) * 4 + 2] = (byte)((pixel >> 0) & 0xFF);
        buffer[(y * bitmap.getWidth() + x) * 4 + 3] = (byte)((pixel >> 24) & 0xFF);
    }

包含 Alpha 信息，然后只需

GLES20.glBlendFunc(GLES20.GL_SRC_ALPHA, GLES20.GL_ONE_MINUS_SRC_ALPHA);
GLES20.glEnable(GLES20.GL_BLEND); 

在绘制纹理之前添加即可。完成后请记住禁用 GL_BLEND。

Answer 2

您很可能希望使用glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)作为混合函数，并且您必须确保将纹理的Alpha值写入到gl_FragColor片段着色器输出变量。

为了使所有这些工作正常，您上传的纹理数据必须包含 Alpha 值，并且您必须使用支持 Alpha 通道（RGBA、RGBA8 等）的纹理格式。

您可以通过简单地将 alpha 值路由到 RGB 颜色分量并检查获得的图像来验证这一点。

编辑：

在您的图像加载代码中，您忘记复制 Alpha 通道！尝试一下 davebytes 给出的建议。

Answer 3

你的初始着色器很好。 alpha 是颜色操作中固有的，它只是可能无法应用，具体取决于混合/模式/等。

鉴于如果您执行 fragcolor = base.aaa，您的纹理会显示为黑色，这意味着您的纹理数据是“坏”的。

看看你的纹理负载，是的，这是错误的。你永远不会复制alpha，只复制rgb。假设 java 将字节数组清除为 0，则所有 alpha 都将为零，这将导致您的黑匣子，当您启用 alpha 混合时，这将导致图像“消失”。

而不是所有手动复制之类的东西

  bitmap = BitmapFactory.decodeStream(is);  
  GLES20.glGenTextures ( 1, textureId, 0 );
  GLES20.glBindTexture ( GLES20.GL_TEXTURE_2D, textureId[0] );
  GLUtils.texImage2D(GLES20.GL_TEXTURE_2D, 0, bitmap, 0);

为了简化您的生活，您可以简单地正常加载位图并使用 GLUtils 帮助程序上传，而不是直接使用 glTexImage2d：类似的东西， 。然后启用混合，如果没有预乘，则使用 src+invsrc 混合模式，然后渲染，您应该得到所需的结果。