android - 渲染时，淡出纹理在相同的实体纹理上看起来很糟糕

Question

我正在使用 OpenGL ES 2.0 为 Android 编写手机游戏。目前我正在尝试制作一个带有法术的卷轴，在游戏中应该是这样的:

这将是 GUI 的一个元素，玩家可以在其中选择他当前想要施放的法术。如您所见，法术数量可能超过滚动条的宽度，因此玩家应该能够左右滚动法术以显示更多法术。这些靠近边缘的应该淡出。

我的游戏有两个“层次”:GUI 和游戏本身。我在单个 GUISurfaceView 中渲染两者:透视投影中的游戏世界和游戏世界前面正交的 GUI。事实上，每个 GUI 元素都有相同的网格:由两个三角形面组成的平面。当我需要矩形时，我只需修改比例矩阵。

我想我可以通过 3 层 GUI 来实现上面的效果:

1. 前景(随着 alpha 逐渐淡化):

..................................................... ...................................................

1. 低于前景的法术:

1. 咒语背景:

如您所见，背景的边缘和前景的边缘完全相同，除了 Alpha channel 。所以它们应该完美对齐并允许这种淡出效果。它们是 - 至少在 Paint.NET 中(我上传了所有 3 层滚动的 .pdn 文件 here )。但不是在渲染的 OpenGL 中。相反，它看起来像这样(没有任何拼写图标):

如您所见，有一些较暗的区域，其中前景使用 alpha 进行渐变。好像前景和背景没有完全对齐。我完全不明白为什么。

• 我已确保模型(平面)处于相同的世界坐标(Z 除外)并且具有相同的大小(确切地说，它们是正方形)，
• 我打开了 alpha 混合，并根据与相机的距离对具有 alpha 混合纹理的模型进行排序，
• 我试过关闭 mipmap 的自动生成，但没用，

• 我已经检查了我的飞机的网格和它的 UVMap 是否有不准确的数字。在 Wavefront 中，平面网格看起来像这样:

  o Plane
  v 1.000000 0.000000 0.000000
  v 0.000000 0.000000 0.000000
  v 1.000000 1.000000 -0.000000
  v 0.000000 1.000000 -0.000000
  vt 0.000000 1.000000
  vt 1.000000 1.000000
  vt 0.000000 0.000000
  vt 1.000000 0.000000
  vn 0.000000 0.000000 1.000000
  f 2/1/1 1/2/1 4/3/1
  f 1/2/1 3/4/1 4/3/1
  

• 我的着色器看起来像这样:

顶点着色器:

    uniform mat4 uMVPMatrix;
    uniform mat4 uMVMatrix;
    uniform mat4 uNormalMatrix;

    attribute vec4 aPosition;
    attribute vec3 aNormal;
    attribute vec4 aColor;
    attribute vec2 aTexCoord;

    varying vec4 vColor;
    varying vec3 vNormal;
    varying vec3 vPosition;
    varying vec2 vTexCoord;

    void main() 
    {
        vColor = aColor;
        vNormal = aNormal;
        vTexCoord = aTexCoord;

        vPosition = vec3(uMVMatrix * aPosition);
        gl_Position = uMVPMatrix * aPosition;
    }

fragment 着色器:

    precision mediump float;

    uniform sampler2D uTexture;
    uniform bool uHasTexture;
    uniform vec4 uDiffuse;

    varying vec4 vColor;
    varying vec3 vNormal;
    varying vec3 vPosition;
    varying vec2 vTexCoord;

    void main()
    {
        vec4 texColor;
        if (uHasTexture)
            texColor = texture2D(uTexture, vTexCoord);
        else texColor = vec4(0, 0, 0, 0);

        vec4 color = vColor * texColor;
        gl_FragColor = vec4(color.rgb * uDiffuse.rgb, texColor.a * uDiffuse.a);
    }

您知道为什么会发生这种情况吗？也许由于某种原因，它无法按照我想的那样完成？如果是这样，您能否建议任何其他方法来做到这一点？

Answer 1

可能您的纹理与下方纹理的颜色不同。 IE。颜色位也在褪色，不仅仅是 alpha 部分。

那么你应该使用 GLES20.glBlendFunc(GLES20.GL_ONE,GLES20.GL_ONE_MINUS_SRC_ALPHA); 作为你的混合函数。