LibGDX使用SpriteBatch时的模板缓冲区问题

Question

这是我之前问题和帖子的延续，可以在这里看到。感谢我在那里收到的答案，我觉得我能够更接近我的目标，并进一步学习OpenGL，但是在弄清楚如何使用模板缓冲区的基础知识后，我遇到了一个问题。

当我将精灵绘制到模板缓冲区时，它会绘制整个正方形区域，而不仅仅是像我曾经幼稚地希望的那样不完全透明的像素。我对其发生的原因有些模糊的理解，但我不确定解决方案在哪里。我已经对蒙版进行了相当多的实验，并修改了spritebatch使用的着色器以丢弃低alpha片段，但似乎我无法看到更大的画面。

作为问题的一个视觉例子，我将继续使用我在上一个问题中使用的示例。现在，尝试在彼此之上绘制两个圆（使它们完美混合，不重叠），我得到了下图：

所以，基本上，我是否可以在LibGDX的Sprite和SpriteBatch功能上利用模板缓冲区来处理复杂形状（圆只是一个示例），或者我需要寻找其他替代方案？

    Gdx.gl.glClearColor(1, 1, 1, 1);
    Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT);

    Gdx.gl.glEnable(GL20.GL_BLEND);
    Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
    Gdx.gl.glEnable(GL20.GL_DEPTH_TEST);
    Gdx.gl.glDepthMask(true);

    batch.begin();
    sprite.draw(batch);
    sprite2.draw(batch);
    batch.end();

    Gdx.gl.glDisable(GL20.GL_DEPTH_TEST);

- Synthetik

Answer 1

图形模板写入/测试发生在片段级别。当您绘制一个圆时，实际上是绘制了一组可能被纹理化的片段的四边形。问题在于，在进行片段的模板测试时，GPU并不关心您将什么颜色写入片段中。因此，您需要丢弃那些不希望编写模板值的四边形部分的片段。

简而言之，在片段着色器中使用 "if(gl_FragColor.a < 0.01) discard;" 确保生成一组片段（和模板值）的圆。

- Darth Zaloj

Answer 2

也许这可以帮助你。 我用混合和深度测试解决了同样的问题。 首先，您需要清除深度和颜色位。

Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

然后你需要开启一些GL功能：

Gdx.gl.glEnable(GL20.GL_BLEND);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
Gdx.gl.glEnable(GL10.GL_DEPTH_TEST);
Gdx.gl.glDepthMask(true);

之后，您可以绘制您的对象。在我的项目中类似这样：

shapeRenderer.setColor(c.getR(), c.getG(), c.getB(), FIELD_ALPHA);
shapeRenderer.filledCircle(p.getPos().x + s.getOffset().x, ApplicationEnv.SCREEN_HEIGHT - p.getPos().y + s.getOffset().x, b.getRadius());

重要提示！绘制完成后，您需要调用end()函数关闭spriteBatch（或其他操作），并禁用深度测试功能：

Gdx.gl.glDisable(GL10.GL_DEPTH_TEST);

结果： 之前 之后

- user2329816

---

你的结果基本上符合我的要求，但是示例中似乎缺少一些东西。使用上面的代码似乎没有改变显示效果，与叠加透明精灵时通常得到的效果相同（类似于您的“before”图像）。我也尝试了不同的深度测试方式来解决这个问题，但是即使是在什么都不做的简单设置下，我也找不到让它工作的方法。至少，感谢您向我展示了可以通过这种方式实现该效果。 - Synthetik

也许你没有设置Gdx.gl.glClearColor(0.9f, 0.9f, 0.9f, 1); - 在我的情况下用灰色填充背景。我只在绘制“不重叠”的圆时使用深度测试。由SpriteBatch绘制的正方形和其他对象无需进行深度测试。或者你可以将你的代码片段发送到这里或者发给我。 - user2329816

抱歉最近太忙了，导致回复有些延迟！目前我正在使用一个基本的测试项目来尝试解决这个问题。在上面，我发布了我的整个渲染方法，当我按照你之前发布的内容进行操作时，结果只是两个重叠的圆圈，类似于你的“before”图像。基本上，仅仅像那样启用深度测试似乎并没有改变它的绘制方式，所以我认为我在中间缺少了一些关键的设置行，但是尽管我一直在尝试，我也找不到我缺少的东西。 - Synthetik