iphone - iOS OpenGL ES 2.0 で両側にテクスチャを描画すると Z ファイティングが発生する

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;
}
                                              );

スクリーンショット:

私のコードでは、ページの表側は赤で白い文字があり、裏側はオレンジと黒です。画像からわかるように、ページの裏面は、表面の右端付近に不規則に描かれています。どうやら、現時点では、ページの表面のみを描画する必要があります。

両方の画像で、頂点と texCoords が同じままであることに注意してください。実際のところ、頂点と texCoords は各フレームで一定ですが、レンダリングされた画像はそうではありません。そして、それは深度バッファに関連していると思います。

ページのメッシュを表す三角形は8 つだけです。そして、ビデオの背景を無視するのは良いことです。