2

我正在模拟 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 在每一帧中都是恒定的，但渲染的图像不是！而且我认为它与深度缓冲区有关。

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

在此处输入图像描述 在此处输入图像描述

4

0 回答 0