制作一个平坦的OpenGL表面来应用纹理：我的代码的奇怪行为（图片添加供参考）

Question

我有一个非常简单的AR应用程序，其中我有一个我检测到的标记，然后在这个标记上，我创建一个openGL平面并应用纹理。我现在正在使用一个简单的方块。代码如下所示：

#define NUM_SURFACE_OBJECT_VERTEX 12
#define NUM_SURFACE_OBJECT_INDEX 12

static const float surfaceVertices[] =
{
     20, -20, 5, 
     20,  20, 5,
    -20,  20, 5, 
    -20, -20, 5
};

static const float surfaceTexCoords[] =
{
    1, 0,
    1, 1,
    0, 1,
    0, 0
};

static const float surfaceNormals[] =
{

};

static const unsigned short surfaceIndices[] =
{
    0, 1, 2,
    2, 3, 0
};

并且绘制它的代码如下所示：

QCAR::Matrix44F modelViewProjection;

ShaderUtils::translatePoseMatrix(
    0.0f, 0.0f, kObjectScale, &modelViewMatrix.data[0]);

ShaderUtils::scalePoseMatrix(
    kObjectScale,
    kObjectScale,
    kObjectScale,
    &modelViewMatrix.data[0]);

ShaderUtils::multiplyMatrix(
    &projectionMatrix.data[0],
    &modelViewMatrix.data[0],
    &modelViewProjection.data[0]);

glUseProgram(shaderProgramID);

glVertexAttribPointer(
    vertexHandle,
    3,
    GL_FLOAT,
    GL_FALSE,
    0,
    (const GLvoid*)&surfaceVertices[0]);

glVertexAttribPointer(
    textureCoordHandle,
    2,
    GL_FLOAT,
    GL_FALSE,
    0,
    (const GLvoid*)&surfaceTexCoords[0]);

glEnableVertexAttribArray(vertexHandle);
glEnableVertexAttribArray(textureCoordHandle);

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, [thisTexture textureID]);
glUniformMatrix4fv(
    mvpMatrixHandle, 1, GL_FALSE, (const GLfloat*)&modelViewProjection.data[0]);

glDrawElements(
    GL_TRIANGLES,
    NUM_SURFACE_OBJECT_INDEX,
    GL_UNSIGNED_SHORT,
    (const GLvoid*)&surfaceIndices[0]);

ShaderUtils::checkGlError("EAGLView renderFrameQCAR");

这是一个我正在旋转的测试纹理数组（实际上，所有的png都是相同的，我只是多次复制它们。它们的大小都是512x512px）：

 const char* textureFilenames[] = {
        "test.png", "test2.png", "test3.png", "test4.png", "test5.png", 
        "test6.png", "test7.png", "test8.png", "test8.png", "test10.png"} 

如果这些不是要显示的正确代码段，我很抱歉，但这是该程序的绘图部分。从本质上讲，这是我试图解决的示例代码，我刚刚用平面和纹理替换了他们使用的茶壶模型。

所以，有些要点需要注意：

1. 出于某种原因，当我使用上面的代码只有1到5个纹理时，一切都很好。我可以正常看到纹理，可以移动相机以查看不同的视角。我有一个每10秒更改纹理的功能，当只使用几个纹理时，一切都仍然正常。
2. 当使用更多时，比如说在10个或更多不同纹理之间旋转，我开始变得奇怪的行为，就像从屏幕向外突出的飞机。
   1. 如果您注意到我上面的代码，我会注释掉任何使用法线的内容。我实际上不知道法线表面的法线阵列是什么样的，所以我只是试着将所有代码都注释掉了。

我上传了一些照片供参考：

这是背景中的标记（一些木屑）和应用于表面的纹理的镜头。 Eveything似乎没问题。



这是一个角度拍摄的照片。此时，我只在代码中的5个纹理之间旋转。一切都还可以。



现在，我在这里尝试每10秒旋转10个纹理。即使在第一个纹理上，我也会得到一个如此突然出现的奇怪的平面：



为什么会出现这种情况？示例代码没有给我任何关于纹理加载的警告，我试图使纹理真的很小，但仍然是相同的行为。我如何声明顶点和索引有什么问题吗？是因为我遗漏了法线吗？

谢谢！

澄清

这些照片来自我的iPad 2.我的AR应用程序正在我的iPad上运行2.我正在使用我的macbook air来显示木片的标记。所以我的ipad正在识别我的macbook air上显示的标记图像，并在标记的顶部应用纹理。

Answer 1

似乎可以通过添加法线向量来修复！