如何在 webgl 中用 alpha 绘制两个纹理

Question

我想绘制一个纹理并在上面绘制另一个具有透明背景的纹理。所以透明部分显示第一个纹理。

我调用 gl.clear 一次，然后为渲染上的每个纹理调用 gl.drawElements。但是输出是，透明部分的透明纹理是黑色的，即清晰的颜色。就好像第一个纹理从未被绘制过，而第二个纹理仅在透明背景下绘制。如何解决这个问题？

  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
  gl.enable(gl.BLEND);
  gl.enable(gl.DEPTH_TEST);


gl.clear()

for each texture:

  gl.drawElements();

另一个渲染问题是，对于纹理 A 和 B，我为纹理 A 调用 gl.drawElements，然后为 B。但是 A 在输出时位于 B 之上。

所以问题是gl.enable(DEPTH_TEST);

我删除了它，现在可以正常使用了。我想知道为什么。

Answer 1

So the problem was gl.enable(DEPTH_TEST); I removed it and it works fine now. I wonder why.

我由此得出结论，您在距相机相同距离处绘制了两个带纹理的对象。 glDepthFunc 的默认值为 GL_LESS，因此只有当片段的 window space z 值低于深度缓冲区中已有的值时，片段才会通过深度测试.当您绘制第一个纹理四边形时，深度缓冲区将设置为这些值，您需要将第二个对象移近以使其通过深度测试，或者将 glDepthFunc 设置为 GL_LEQUEAL 意味着更少比 或等于 。但是，由于在您的场景中根本不需要深度测试，因此禁用它无论如何都是性能方面最有效的方法。

如何在 webgl 中用 alpha 绘制两个纹理

How to draw two textures with alpha in webgl

javascript

html

opengl-es

webgl