固定着色器渲染三角形(OpenGL ES)

与前面OpenGL中讲到的三角形渲染类似，接下来我们将在iOS系统下探索如何渲染一个三角形。

1.了解GLKit

在学习如何渲染图形之前，我们需要了解一个官方提供的framework,它就是GLKit.那么它是什么呢？简单地解释下，就是苹果为了方便开发者使用OpenGL ES的api，在其基础之上包装了一层面向对象的开发模式(OpenGL面向过程开发)。使大家更加方便高效的接触OpenGL ES的图形绘制。GLKit提供了很多载体，这里我们介绍下，经常使用对象。

1.1 GLKView

GLKView是苹果基于OpenGL ES之上封装得一个渲染视图（当然其它平台也会有对应的视图或者window），它能够提供我们绘图的能力，也是苹果早期底层图形渲染的基础框架。

1.2 EAGLContext

和CGContext类似，EAGLContext是我们渲染图形的上下文。

1.3 GLKBaseEffect

GLKBaseEffect是一个面向对象的着色器，它里面包含了顶点着色器和片段着色器。

2.开始渲染

首先，我们需要创建一个渲染视图GLKView.

2.1 GLKView创建

- (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 顶点数据创建

- (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} },
    };

    // 创建并绑定顶点缓存
    GLuint vertextBufferID;
    glGenBuffers(1, &vertextBufferID);
    glBindBuffer(GL_ARRAY_BUFFER, vertextBufferID);
    // 拷贝数据到顶点缓存上 cpu -> gpu
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertex), vertex, GL_STATIC_DRAW);


    //打开顶点坐标访问权限，iOS系统中默认关闭了Attribute通道。导致顶点着色器无法访问顶点数据
    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];
// 开始绘制，从顶点缓存中获取数据。
//GL_TRIANGLES为基元(图元)连接类型，第二个参数表示从第几个顶点开始绘制，一般为0。第三个参数表示有几个顶点。
    glDrawArrays(GL_TRIANGLES, 0, 3);
}

绘制结果

三角形.png