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

我想画一个纹理，再画一个上面有透明背景的纹理。因此，透明部分显示第一个纹理

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

  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和纹理B调用gl.drawerelements，但A在输出时位于B之上

所以问题是gl.enableDEPTH_测试

我把它取下来了，现在可以用了。我想知道为什么

所以问题是gl.enableDEPTH_测试； 我把它取下来了，现在可以用了。我想知道为什么

我由此得出的结论是，在距离摄影机相同的距离处绘制两个纹理对象。glDepthFunc的默认值是GL_LESS，因此只有当片段的窗口空间z值低于深度缓冲区中的值时，它才能通过深度测试。绘制第一个带纹理的四边形时，深度缓冲区将设置为这些值，您需要将第二个对象移近以使其通过深度测试，或者将glDepthFunc设置为GL_LEQUEAL，意思是小于或等于。但是，由于在您的场景中根本不需要深度测试，因此禁用它将是最有效的方法