LibGDX 如何使用 Sprites 和 SpriteBatch 在单个位置组合 2 个纹理以进行多纹理

Question

使用 LibGDX，我编写了一个非常简单（也是我的第一个）片段着色器，它设置了两个不同的纹理，第一个是要绘制到屏幕上的图像，第二个是 alpha 透明蒙版。这是片段着色器：

#ifdef GL_ES
    precision mediump float;
#endif

varying vec4 v_color;
varying vec2 v_texCoords;
uniform sampler2D u_texture;
uniform sampler2D u_mask;

void main() {
    vec4 texColor = texture2D(u_texture, v_texCoords);
    vec4 maskColor = texture2D(u_mask, v_texCoords);
    gl_FragColor = vec4(
        vec3(v_color * texColor),
        maskColor.a
    );
}

u_texture 是要绘制的图像，u_mask 是带有透明度信息的纹理。

然而，我真正想做的是利用Sprite 和TextureAtlas 类来引用着色器的几个TextureRegion 实例。这是我的渲染代码：

shaderBatch.setProjectionMatrix(camera.combined);
shaderBatch.begin();

// ... some housekeeping code ...

Sprite overlapAlphaMask = maskTextureAtlas.createSprite("mask", 4);
Sprite overlapSprite = spriteTextureAtlas.createSprite("some-tile", 8);
// Or some other index in the texture atlas

overlapAlphaMask.getTexture().bind(1);
alphaMaskShader.setUniformi("u_mask", 1);

overlapSprite.getTexture().bind(0);
alphaMaskShader.setUniformi("u_texture", 0);

shaderBatch.draw(overlapSprite, worldX, worldY, 1.0f, 1.0f);

虽然这至少在运行和渲染某些东西，但它从maskTextureAtlas 中拾取了错误的纹理区域。我的猜测是这里还有更多工作要做，因为着色器不会有任何关于overlapAlphaMask 精灵的知识 - 如何绘制它，纹理坐标是什么等等。

我假设 SpriteBatch.draw() 方法负责从传入的 overlapSprite 中获取正确的信息，所以我希望着色器中的 vec2 v_texCoords 已正确设置以绘制它，但是这些第二个纹理/sampler2D 统一属性的坐标是错误的。这是我第一次尝试使用着色器，所以我确定我缺少一些基本的东西！

--- 更新---

到目前为止，我的谷歌搜索显示我可能需要通过顶点着色器进行更多设置。我正在使用这个（默认？）libGDX 顶点着色器：

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoords;

void main() {
    v_color = a_color;
    v_texCoords = a_texCoord0;
    gl_Position = u_projTrans * a_position;
}

Answer 1

正如 Dietrich Epp 所指出的，我需要通过顶点缓冲区将额外的纹理坐标发送到顶点和像素着色器。我已经通过编写自己的SpriteBatch 类实现来实现这一点，该类一次设置两个textures（不是TextureRegions），并使用几个稍微扩展的着色器批量绘制这些，如如下：

顶点着色器

attribute vec4 a_position;
attribute vec4 a_color;
attribute vec2 a_texCoord0;
attribute vec2 a_texCoord1;

uniform mat4 u_projTrans;

varying vec4 v_color;
varying vec2 v_texCoords0;
varying vec2 v_texCoords1;

void main() {
    v_color = a_color;
    v_texCoords0 = a_texCoord0;
    v_texCoords1 = a_texCoord1;
    gl_Position = u_projTrans * a_position;
}

这是默认的顶点着色器，但 attribute vec2 a_texCoord 替换为一组两个 tex 坐标，生成的 varying vec2 v_texCoordsX 用于传递给片段着色器。然后通过顶点缓冲区发送这个额外的attribute vec2。

片段着色器

#ifdef GL_ES
    precision mediump float;
#endif

varying vec4 v_color;
varying vec2 v_texCoords0;
varying vec2 v_texCoords1;
uniform sampler2D u_texture0;
uniform sampler2D u_texture1;

void main() {
    vec4 texColor = texture2D(u_texture0, v_texCoords0);
    vec4 maskColor = texture2D(u_texture1, v_texCoords1);
    gl_FragColor = vec4(
        vec3(v_color * texColor),
        maskColor.a
    );
}

同样，片段着色器现在接收两个 sampler2D 纹理以供采样，以及一对纹理坐标供每个参考。

SpriteBatch 类变化的关键在于扩展构造函数中的Mesh 定义：

    mesh = new Mesh(Mesh.VertexDataType.VertexArray, false, size * 4, size * 6, new VertexAttribute(VertexAttributes.Usage.Position, 2,
            ShaderProgram.POSITION_ATTRIBUTE), new VertexAttribute(VertexAttributes.Usage.ColorPacked, 4, ShaderProgram.COLOR_ATTRIBUTE),
            new VertexAttribute(VertexAttributes.Usage.TextureCoordinates, 2, ShaderProgram.TEXCOORD_ATTRIBUTE + "0"),
            new VertexAttribute(VertexAttributes.Usage.TextureCoordinates, 2, ShaderProgram.TEXCOORD_ATTRIBUTE + "1"));

上面的最后一行是新添加的，a_texCoord1 的一对坐标。 draw() 方法传递了两个 Sprite 或 TextureRegion 实例，并稍微扩展为为顶点数组的每个点/索引的每组顶点传递 2 个额外的浮点数。最后对着色器进行了一点补充，以绑定两个纹理并将制服设置为：

    shader.setUniformi("u_texture0", 0);
    shader.setUniformi("u_texture1", 1);

而且它有效！我的临时解决方案是将两个精灵相互重叠地绘制到屏幕上，将透明度信息写入显示缓冲区，但由于SpriteBatch 对每个纹理进行批处理，并且我的图像被分割成多个纹理，这导致不可接受的性能损失，此解决方案已修复 :)