與前面OpenGL中講到的三角形渲染類似，接下來我們將在iOS系統(tǒng)下探索如何渲染一個三角形。

1.了解GLKit

在學習如何渲染圖形之前，我們需要了解一個官方提供的framework,它就是GLKit.那么它是什么呢？簡單地解釋下，就是蘋果為了方便開發(fā)者使用OpenGL ES的api，在其基礎之上包裝了一層面向?qū)ο蟮拈_發(fā)模式(OpenGL面向過程開發(fā))。使大家更加方便高效的接觸OpenGL ES的圖形繪制。GLKit提供了很多載體，這里我們介紹下，經(jīng)常使用對象。

1.1 GLKView

GLKView是蘋果基于OpenGL ES之上封裝得一個渲染視圖（當然其它平臺也會有對應的視圖或者window），它能夠提供我們繪圖的能力，也是蘋果早期底層圖形渲染的基礎框架。

1.2 EAGLContext

和CGContext類似，EAGLContext是我們渲染圖形的上下文。

1.3 GLKBaseEffect

GLKBaseEffect是一個面向?qū)ο蟮闹鳎锩姘隧旤c著色器和片段著色器。

2.開始渲染

首先，我們需要創(chuàng)建一個渲染視圖GLKView.

2.1 GLKView創(chuàng)建

- (void)setupGLKView {
    // 初始化 EAGLContext
    EAGLContext *contxt = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    // 設置當前的上下文，替換默認的。
    [EAGLContext setCurrentContext:contxt];
    _context = contxt;

    // 出初始化GLKView
    _glkView = [[GLKView alloc] initWithFrame:self.view.bounds context:contxt];
    _glkView.delegate = self;
    // 設置渲染緩存樣式，通常有三個附加：顏色、深度、模板。
    _glkView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    _glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    _glkView.drawableStencilFormat = GLKViewDrawableStencilFormat8;
    _glkView.backgroundColor = UIColor.clearColor;
    [self.view addSubview:self.glkView];
    // 清除畫布背景色，并設置成新的背景色
    glClearColor(0.2, 0.2, 0.2, 1.0);
}

2.2 頂點數(shù)據(jù)創(chuàng)建

- (void)setupVertexBuffer {

    // 三角形 （頂點xyzw + 頂點顏色rgba）
    GLVertex vertex[] = {
        { {-0.5, 0, 0, 1}, {1, 0, 0, 1} },
        { {0, 0.5, 0, 1}, {1, 0, 0, 1} },
        { {0.5, 0, 0, 1}, {1, 0, 0, 1} },
    };

    // 創(chuàng)建并綁定頂點緩存
    GLuint vertextBufferID;
    glGenBuffers(1, &vertextBufferID);
    glBindBuffer(GL_ARRAY_BUFFER, vertextBufferID);
    // 拷貝數(shù)據(jù)到頂點緩存上 cpu -> gpu
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertex), vertex, GL_STATIC_DRAW);


    //打開頂點坐標訪問權限，iOS系統(tǒng)中默認關閉了Attribute通道。導致頂點著色器無法訪問頂點數(shù)據(jù)
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 4, GL_FLOAT, GL_FALSE, sizeof(GLVertex), NULL + offsetof(GLVertex, position));
    // 打開頂點坐標顏色訪問權限
    glEnableVertexAttribArray(GLKVertexAttribColor);
    glVertexAttribPointer(GLKVertexAttribColor, 4, GL_FLOAT, GL_FALSE, sizeof(GLVertex), NULL + offsetof(GLVertex, color));
}

2.3 初始化固定著色器

- (void)setupEffect {
    _baseEffect = [[GLKBaseEffect alloc] init];
    _baseEffect.label = @"GLKBaseEffect";
    // 使用固定顏色,未開啟GLKVertexAttribColor時,默認使用自定顏色
    _baseEffect.useConstantColor = GL_TRUE;
    _baseEffect.constantColor = GLKVector4Make(0, 1, 0, 1);
}

繪制部分

#pragma mark - GLKViewDelegate
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
// 清除顏色緩存
    glClear(GL_COLOR_BUFFER_BIT);
// 準備繪制
    [_baseEffect prepareToDraw];
// 開始繪制，從頂點緩存中獲取數(shù)據(jù)。
//GL_TRIANGLES為基元(圖元)連接類型，第二個參數(shù)表示從第幾個頂點開始繪制，一般為0。第三個參數(shù)表示有幾個頂點。
    glDrawArrays(GL_TRIANGLES, 0, 3);
}

繪制結果

三角形.png