OpenGL ES 使用GLKit繪制正方體并旋轉(zhuǎn)

準備工作

首先我們使用Xcode新建一個Single View App工程，在ViewController里面導入 <GLKit/GLKit.h> 庫信认，并且需要在工程中導入一張圖片，將圖片渲染到正方形表面上均抽。

我們首先定義一個枚舉類型的結(jié)構(gòu)體嫁赏，用來表示正方體的頂點坐標(類型為GLKVector3三維坐標)，紋理坐標(類型為GLKVector2二維坐標)油挥，法線(類型為GLKVector3三維類型)潦蝇，并且定義一個正方體的頂點數(shù)量的常量 kCoordCount

typedef struct {
    GLKVector3 positionGoord; //頂點坐標
    GLKVector2 textureCoord; //紋理坐標
    GLKVector3 normal;  //法線
} CSVertex;

//頂點數(shù)量, 正方體有6個面，每個面有2個三角形深寥，每個三角形有3個頂點
static NSInteger const kCoordCount = 36;

定義幾個全局變量用來保存當前狀態(tài)

@property (nonatomic, strong) GLKView *glkView;
@property (nonatomic, strong) GLKBaseEffect *baseEffect;
@property (nonatomic, assign) CSVertex *vertexes;

@property (nonatomic, strong) CADisplayLink *displayLink;
@property (nonatomic, assign) NSInteger angle;
@property (nonatomic, assign) GLuint vertexBuffer;

在viewDidLoad方法里面調(diào)用2個方法commonInit和addCADisplayLink, 這兩個方法的具體實現(xiàn)步驟請繼續(xù)看攘乒。
commonInit 這個方法里面主要是OpenGL ES相關(guān)的初始化工作，先設置當前content上下文惋鹅，創(chuàng)建glkView并添加代理方法GLKViewDelegate, 要開啟深度緩存后將glkView添加到當前控制器的view中则酝。接下來獲取紋理圖片并設置參數(shù)，具體代碼如下：

- (void)commonInit {
    //1.創(chuàng)建content
    EAGLContext *content = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    //設置當前content
    [EAGLContext setCurrentContext:content];

    //2. 創(chuàng)建GLKView
    self.glkView = [[GLKView alloc] initWithFrame:CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width) context:content];
    self.glkView.backgroundColor = [UIColor clearColor];
    self.glkView.delegate = self;

    //3.使用深度緩存
    self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    //默認是（0闰集，1）沽讹，這里用于翻轉(zhuǎn)Z軸般卑，使正方形朝屏幕外面
    glDepthRangef(1, 0);

    //4.將GLKView添加到view上
    [self.view addSubview:self.glkView];

    //5.獲取紋理圖片
    NSString *imagePath = [[NSBundle mainBundle]pathForResource:@"timg" ofType:@"jpg"];
    UIImage *image = [UIImage imageWithContentsOfFile:imagePath];

    //6.設置紋理參數(shù)
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft: @(YES)};
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:image.CGImage options:options error:NULL];

    //7.使用baseEffect
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.name = textureInfo.name;
    self.baseEffect.texture2d0.target = textureInfo.target;
    //開啟光照效果
    self.baseEffect.light0.enabled = YES;
    //漫反射顏色
    self.baseEffect.light0.diffuseColor = GLKVector4Make(1, 1, 1, 1);
    //光源位置
    self.baseEffect.light0.position = GLKVector4Make(-0.5, -0.5, 5, 1);

    /*
    解釋一下:
    這里我們不復用頂點，使用每 3 個點畫一個三角形的方式爽雄，需要 12 個三角形蝠检，則需要 36 個頂點
    以下的數(shù)據(jù)用來繪制以（0，0挚瘟，0）為中心叹谁，邊長為 1 的立方體
    */

    //8.開辟頂點數(shù)據(jù)空間（數(shù)據(jù)結(jié)構(gòu)SenceVertex大小 * 頂點個數(shù)kCoordCount）
    self.vertexes = malloc(sizeof(CSVertex) * kCoordCount);

    //前面
    // 前面
    self.vertexes[0] = (CSVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};
    self.vertexes[1] = (CSVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
    self.vertexes[2] = (CSVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
    self.vertexes[3] = (CSVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
    self.vertexes[4] = (CSVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
    self.vertexes[5] = (CSVertex){{0.5, -0.5, 0.5}, {1, 0}, {0, 0, 1}};

    // 上面
    self.vertexes[6] = (CSVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 1, 0}};
    self.vertexes[7] = (CSVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
    self.vertexes[8] = (CSVertex){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
    self.vertexes[9] = (CSVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
    self.vertexes[10] = (CSVertex){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
    self.vertexes[11] = (CSVertex){{-0.5, 0.5, -0.5}, {0, 0}, {0, 1, 0}};

    // 下面
    self.vertexes[12] = (CSVertex){{0.5, -0.5, 0.5}, {1, 1}, {0, -1, 0}};
    self.vertexes[13] = (CSVertex){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
    self.vertexes[14] = (CSVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
    self.vertexes[15] = (CSVertex){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
    self.vertexes[16] = (CSVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
    self.vertexes[17] = (CSVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, -1, 0}};

    // 左面
    self.vertexes[18] = (CSVertex){{-0.5, 0.5, 0.5}, {1, 1}, {-1, 0, 0}};
    self.vertexes[19] = (CSVertex){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
    self.vertexes[20] = (CSVertex){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
    self.vertexes[21] = (CSVertex){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
    self.vertexes[22] = (CSVertex){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
    self.vertexes[23] = (CSVertex){{-0.5, -0.5, -0.5}, {0, 0}, {-1, 0, 0}};

    // 右面
    self.vertexes[24] = (CSVertex){{0.5, 0.5, 0.5}, {1, 1}, {1, 0, 0}};
    self.vertexes[25] = (CSVertex){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
    self.vertexes[26] = (CSVertex){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
    self.vertexes[27] = (CSVertex){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
    self.vertexes[28] = (CSVertex){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
    self.vertexes[29] = (CSVertex){{0.5, -0.5, -0.5}, {0, 0}, {1, 0, 0}};

    // 后面
    self.vertexes[30] = (CSVertex){{-0.5, 0.5, -0.5}, {0, 1}, {0, 0, -1}};
    self.vertexes[31] = (CSVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
    self.vertexes[32] = (CSVertex){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
    self.vertexes[33] = (CSVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
    self.vertexes[34] = (CSVertex){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
    self.vertexes[35] = (CSVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, 0, -1}};

    //開辟頂點緩存區(qū)
    glGenBuffers(1, &_vertexBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
    GLsizeiptr bufferSizeBytes = sizeof(CSVertex) * kCoordCount;
    glBufferData(GL_ARRAY_BUFFER, bufferSizeBytes, self.vertexes, GL_STATIC_DRAW);

    //頂點數(shù)據(jù)
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(CSVertex), NULL + offsetof(CSVertex, positionGoord));

    //紋理坐標
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(CSVertex), NULL + offsetof(CSVertex, textureCoord));

    //法線數(shù)據(jù)
    glEnableVertexAttribArray(GLKVertexAttribNormal);
    glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(CSVertex), NULL + offsetof(CSVertex, normal));
}

addCADisplayLink方法里面主要是添加一個周期性調(diào)用的定時器，我們使用的是CADisplayLink來計時,這個計時器屬于QuartzCore.framework中, 具體可以參考該篇博客 (https://www.cnblogs.com/panyangjun/p/4421904.html)

- (void)addCADisplayLink {
    //定時器提供一個周期性調(diào)用
    self.angle = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

定時器計時的方法實現(xiàn) update,主要是根據(jù)時間變化刽沾，實時改變正方體旋轉(zhuǎn)角度

- (void)update {
    //1.計算旋轉(zhuǎn)度數(shù)
    self.angle = (self.angle + 5) % 360;
    //2. 修改baseEffect
    self.baseEffect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(self.angle), 0.3, 1, 0.7);
    //3.重新渲染
    [self.glkView display];
}

我們要實現(xiàn) GLKViewDelegate的代理方法本慕，這里主要是根據(jù)旋轉(zhuǎn)度數(shù)實時繪制圖形

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    //1.開啟深度測試
    glEnable(GL_DEPTH_TEST);
    //2.清除顏色緩存區(qū)和深度緩存區(qū)
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    //3.準備繪制
    [self.baseEffect prepareToDraw];
    //4.繪圖
    glDrawArrays(GL_TRIANGLES, 0, kCoordCount);
}

最后一步我們要在 dealloc函數(shù)里面釋放頂點緩存區(qū)，計時器要失效處理

- (void)dealloc
{
    if ([EAGLContext currentContext] == self.glkView.context) {
        [EAGLContext setCurrentContext:nil];
    }
    if (_vertexes) {
        free(_vertexes);
        _vertexes = nil;
    }
    if (_vertexBuffer) {
        glDeleteBuffers(1, &_vertexBuffer);
        _vertexBuffer = 0;
    }

    [self.displayLink invalidate];
}

到此侧漓，我們使用GLKit已經(jīng)完成了對一個正方體的繪制和旋轉(zhuǎn)锅尘，具體實現(xiàn)效果請看下面gif圖片，完整的demo請戳這里CubeImageDemo

QQ20200728-163632-HD.gif