OpenGL ES: GLKit图片加载

前言

使用OpenGL ES GLKit 加载图片, 效果如下

图片加载分为4个步骤:

1. OpenGL 相关初始化
2. 加载顶点数据和纹理坐标
3. 加载纹理数据
4. drawInRect函数绘制

1. OpenGL 相关初始化

  //1.初始化上下文
    _context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];

    //2. 判断是否创建成功
    if (_context) {
        NSLog(@"content创建成功");
    } else {
        NSLog(@"content创建失败");
    }

    //3. 可以有多个上下文,指定当前上下文
    [EAGLContext setCurrentContext:_context];

    //4. GLKView
    GLKView *view = (GLKView *)self.view;
    view.context = _context;
    //设置颜色缓冲区
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    //深度 缓冲区
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;

    //5. 设置背景色
    glClearColor(243/255.0, 244/255.0, 250/255.0, 1);

2. 加载顶点数据和纹理坐标

   //1. 顶点数据(顶点坐标, 纹理坐标)(内存中)
    //2. 2个三角形,6个顶点
    //  前三个顶点数据(xyz), 后面两个纹理数据(st)
    GLfloat vertexData[] = {
        0.5,  -0.5,  0.0f,  1.0f, 0.0f,       //右下
        0.5,  0.5,   0.0f,  1.0f, 1.0f,       //右上
        -0.5, 0.5,   0.0f,  0.0f, 1.0f,       //左上

        0.5,  -0.5,  0.0f,  1.0f, 0.0f,       //右下
        -0.5, 0.5,   0.0f,  0.0f, 1.0f,       //左上
        -0.5, -0.5,  0.0f,  0.0f, 0.0f,       //左下
    };

    //3. 创建顶点缓冲区标识
    GLuint bufferId;
    glGenBuffers(1, &bufferId);
    //4. 绑定顶点缓冲区标识
    glBindBuffer(GL_ARRAY_BUFFER, bufferId);
    //5. 将顶点数组的数据copy到顶点缓冲区(顶点数据(CPU) --> 顶点缓存区(GPU))
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

    //6. 打开坐标读取通道
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    // 上传顶点数据到显存的方法（设置合适的方式从buffer里面读取数据）
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);

    //7. 打开纹理读取通道
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    //上传纹理数据到显存的方法（设置合适的方式从buffer里面读取数据）
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);

3. 加载纹理数据

 //1. 获取图片路径
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"tiger" ofType:@"jpg"];

    //2. 设置纹理参数
    //纹理坐标原点是左下角,但是图片显示原点应该是左上角.
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@1, GLKTextureLoaderOriginBottomLeft, nil];
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];

    //3.使用苹果GLKit 提供GLKBaseEffect 完成着色器工作(顶点/片元)
    _effect = [[GLKBaseEffect alloc] init];
    _effect.texture2d0.enabled = GL_TRUE;
    _effect.texture2d0.name = textureInfo.name;

4. GLKViewDelegate代理函数drawInRect绘制

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

    //1. 清楚颜色
    glClear(GL_COLOR_BUFFER_BIT);

    //2. 准备绘制
    [_effect prepareToDraw];

    //3. 开始绘制
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

完整的代码见github