在iOS OpenGL ES 2.0中双面绘制纹理时的Z-fighting

Question

我在iOS中模拟页面翻转，我试图在页面的两边绘制不同的纹理。但是我发现即使我没有改变任何顶点或texCoords，渲染的页面仍在颠倒。

以下是每帧中调用的代码：

glEnable(GL_DEPTH_TEST);
glEnable(GL_CULL_FACE);
glCullFace(GL_BACK);

...

Shader2D* shader = [Shader2D getInstance];
glUseProgram(shader.shaderProgramID);
glVertexAttribPointer(shader.vertexHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*)vertices);
glVertexAttribPointer(shader.textureCoordHandle, 2, GL_FLOAT, GL_FALSE, 0, (const GLvoid*)texCoords);
glEnableVertexAttribArray(shader.vertexHandle);
glEnableVertexAttribArray(shader.textureCoordHandle);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, [[textures objectAtIndex: 0] textureID]);
glUniformMatrix4fv(shader.mvpMatrixHandle, 1, GL_FALSE, (const GLfloat*)&mvpMatrix);
glUniform1i(shader.texSampler2DHandle, 0);
glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, (const GLvoid*)page.frontFaces);
glDisableVertexAttribArray(shader.vertexHandle);
glDisableVertexAttribArray(shader.textureCoordHandle);

glUseProgram(shader.shaderProgramID);
glVertexAttribPointer(shader.vertexHandle, 3, GL_FLOAT, GL_FALSE, 0, (const GLvoid*)vertices);
glVertexAttribPointer(shader.textureCoordHandle, 2, GL_FLOAT, GL_FALSE, 0, (const GLvoid*)texCoords);
glEnableVertexAttribArray(shader.vertexHandle);
glEnableVertexAttribArray(shader.textureCoordHandle);
glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, [[textures objectAtIndex: 1] textureID]);
glUniformMatrix4fv(shader.mvpMatrixHandle, 1, GL_FALSE, (const GLfloat*)&mvpMatrix);
glUniform1i(shader.texSampler2DHandle, 0);
glDrawElements(GL_TRIANGLES, numIndices, GL_UNSIGNED_SHORT, (const GLvoid*)page.backFaces);
glDisableVertexAttribArray(shader.vertexHandle);
glDisableVertexAttribArray(shader.textureCoordHandle);

...


glDisable(GL_DEPTH_TEST);
glDisable(GL_CULL_FACE);

值得一提的是，我使用不同的指数绕线顺序为双方。 page.frontFaces是逆时针定义的，page.backFaces是顺时针定义的。

这是我的着色器：

static const char* fragmentShader2d = MAKESTRING(
precision mediump float;
varying vec2 texCoord;

uniform sampler2D texSampler2D;

void main()
{
    gl_FragColor = texture2D(texSampler2D, texCoord);
}
                                              );

static const char* vertexShader2d = MAKESTRING(
attribute vec4 vertexPosition;
attribute vec2 vertexTexCoord;

varying vec2 texCoord;

uniform mat4 modelViewProjectionMatrix;

void main()
{
    gl_Position = modelViewProjectionMatrix * vertexPosition;
    texCoord = vertexTexCoord;
}
                                              );

SCREENSHOT ：

在我的代码中，页面的正面是红色，带有白色字符，背面是橙色和黑色。从图像中可以看出，页面的背面在正面右边缘附近不规则地绘制。显然，此时只应绘制页面的正面。

值得注意的是，在两个图像中，顶点和texCoords保持不变。事实上，顶点和texCoords在每个帧中都是常量，但渲染的图像是 NOT ！我认为这与深度缓冲有关。

只有八个三角形代表页面的网格。忽略视频背景是很好的。