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

Question

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

这将是 GUI 的一个元素，玩家可以在其中选择他当前想要施放的咒语。正如你所看到的，可能有比滚动宽度允许的更多的法术，所以玩家应该能够左右滚动它们以显示更多。靠近边缘的这些应该淡出。

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

我认为我可以通过 3 层 GUI 来实现上述效果：

1. 前景（随着 alpha 逐渐消失）：

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

1. 前景下方的法术：

1. 咒语的背景：

如您所见，除了 Alpha 通道外，背景的边缘和前景的边缘完全相同。所以它们应该完美对齐并允许这种淡出效果。它们是 - 至少在 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;
    }

片段着色器：

    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); 作为你的混合函数。