iphone - OpenGL ES 未按预期工作

Question

我有一个 GLKView，它几乎可以显示我想要的形状，但有一些东西仍然无法按预期工作。

      3_______________________2
      |\                     /|
      | \_ _ _ _ _ _ _ _ _ _/ |
      | /4                 5\ |
      |/_____________________\|
      0                       1

• texture mapping 在正面起作用，其他两个面不起作用，缺少三角形。

• 当我使用颜色时，表面看起来像我想要的那样，但是背面没有连接到点 4 和 5 形成的边缘(看我提供的图以上)。
  我想要(如果你从侧面看的话)三个面形成一个等边三角形。

我已经暂时注释掉了代码的纹理映射部分，以便您可以根据需要进行测试。

在这里我设置了我的 View (注意我的 View 的尺寸。坐标系工作正常，没有摆弄低值。面看起来不错，但它们不好看，正如我所说的在后面连接):

    EAGLContext * context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    OpenGLShape *view = [[OpenGLShape alloc] initWithFrame:CGRectMake(0, 200, 320, 80) context:context];
    view.delegate = view;
    [view setupGL];
    [self.view addSubview:view];

- (void)setupGL {

    [EAGLContext setCurrentContext:self.myContext];

    //glEnable(GL_CULL_FACE);


    self.effect = [[GLKBaseEffect alloc] init];

    BOOL useTexture = NO;

    // Create default framebuffer object.
    glGenFramebuffers(1, &defaultFrameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER, defaultFrameBuffer);

    if(useTexture){
        NSDictionary * options = [NSDictionary dictionaryWithObjectsAndKeys:
                              [NSNumber numberWithBool:YES],
                              GLKTextureLoaderOriginBottomLeft,
                              nil];

        NSError * error;
        NSString *path = [[NSBundle mainBundle] pathForResource:@"blogcell@2x" ofType:@"png"];
        GLKTextureInfo * info = [GLKTextureLoader textureWithContentsOfFile:path options:options error:&error];
        if (info == nil) {
            NSLog(@"Error loading file: %@", [error localizedDescription]);
        }
        self.effect.texture2d0.name = info.name;
        self.effect.texture2d0.enabled = true;

        glGenBuffers(1, &texArray);
        glBindBuffer(GL_ARRAY_BUFFER, texArray);
        glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
        glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 0,0);
        glBufferData(GL_ARRAY_BUFFER, sizeof(TexCoords), TexCoords, GL_STATIC_DRAW);


    }else{

        glGenBuffers(1, &colArray);
        glBindBuffer(GL_ARRAY_BUFFER, colArray);
        glEnableVertexAttribArray(GLKVertexAttribColor);
        glVertexAttribPointer(GLKVertexAttribColor, 4, GL_FLOAT, GL_FALSE, 0, 0);
        glBufferData(GL_ARRAY_BUFFER, sizeof(Color), Color, GL_STATIC_DRAW);
    }

    glGenRenderbuffers(1, &depthBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, depthBuffer);
    glRenderbufferStorage(GL_RENDERBUFFER, GL_DEPTH_COMPONENT16, 320.0f, 80.0f);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_DEPTH_ATTACHMENT, GL_RENDERBUFFER, depthBuffer);

    glEnable(GL_DEPTH_TEST);

    glGenBuffers(1, &vertexArray);
    glBindBuffer(GL_ARRAY_BUFFER, vertexArray);
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition,3,GL_FLOAT,GL_FALSE,0,0);
    glBufferData(GL_ARRAY_BUFFER, sizeof(Vertices), Vertices, GL_STATIC_DRAW);




    self.effect.transform.projectionMatrix = GLKMatrix4MakePerspective(51.4f,4.0f, 0.1f, 10.75f);
   rotMatrix = GLKMatrix4Translate(self.effect.transform.modelviewMatrix,0, 0, -3);


}




- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {

    self.opaque = NO;
    glClearColor(0.0f, 0.0f, 0.0f, 0.0f);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

    [self.effect prepareToDraw];

    glDrawArrays(GL_TRIANGLES, 0, sizeof(Vertices));
}

红色 = 正面(由点 0123 组成)

蓝色 = 背面(顶部 - 由 4523 点组成)

绿色 = 背面(底部 - 由点 0154 组成)

白色 = 背景

为了查看它们是否混合/剔除等，我还制作了半透明的面孔(alpha = 0.5)。

Answer 1

在 OpenGL 中，相机始终位于 {0,0,0}，改变位置的是 3D 世界。

对于正交投影，投影矩阵由下式给出:

self.effect.transform.projectionMatrix = GLKMatrix4MakeOrtho(left, right, bottom, top, front, back);

正交投影中的物体在靠近或远离相机时看起来大小相同。

透视投影中的物体在远离相机时看起来会变小。

对于透视投影，投影矩阵由下式给出:

self.effect.transform.projectionMatrix = GLKMatrix4 GLKMatrix4MakePerspective (fov, aspect, front, back);
);

对于透视投影，视场 (fov) 就像真实相机上的一样，对于小值，透视几乎不明显，对于大值，透视投影导致的失真是大。

fov 角度以弧度为单位，可以调整直到场景看起来适合您的应用程序

aspect 是水平和垂直查看区域之间的屏幕纵横比。

出于实际原因，fov 以度数指定，因此可以像下面这样使用

GLKMatrix4MakePerspective(fov * M_PI / 180.0f,
                                          screenWidth / screenHeight,
                                          front, back);

在透视投影中，近裁剪平面需要大于零，因此您需要向模型 View 矩阵添加一个平移，将世界与相机稍微分开。

这个翻译在模型 View 矩阵中指定

self.effect.transform.modelviewMatrix = GLKMatrix4MakeTranslation(0, 0, -frontClippingPlane);

更新

裁剪体积需要包括所有顶点以避免z-fighting使用前裁剪平面，在这种情况下，透视投影中的最终平移需要稍微远一些

self.effect.transform.modelviewMatrix = GLKMatrix4MakeTranslation(0, 0, -frontClippingPlane - 0.1f);

要旋转模型并将其平移到最终位置，您需要按如下方式组合两个转换:

GLKMatrix4 rotation = GLKMatrix4MakeRotation(angle*M_PI/180, 1, 0, 0); // angle in degrees and x,y, and z coordinates for the rotation axis
GLKMatrix4 translation = GLKMatrix4MakeTranslation( 0, 0, -front - 0.1f);
self.effect.transform.modelviewMatrix = GLKMatrix4Multiply(rotation, translation); // the order matters

以下是OpenGL的旋转轴和方向，即right-handed

这是最终效果