了解了GLKit之后，我们使用GLKit加载一张图片，这也是之后的图片滤镜必有的内容。

image.png

一些准备工作

• 创建Xcode iOS 新项目

• 选中Main.storyboard，将ViewController的View改为继承自GLKView
  

  image.png

• 选中ViewController.h文件，导入GLKit，并使ViewController继承自GLKViewController
  

  image.png

• 选中ViewController.m文件，导入头文件
  

  image.png

• 设置EAGLContext和GLKBaseEffect属性
  

  image.png

配置基本信息

// 配置基本信息
- (void)setupConfig{
    // 使用OpenGLES3
    // EAGLContext是苹果iOS平台下实现OpenGLES渲染层
    self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    
    // 判断是否创建成功
    if (!self.context) {
        NSLog(@"Create ES context failed");
        return;
    }
    
    // 设置当前上下文
    [EAGLContext setCurrentContext:self.context];
    
    
    // 获取GLKView
    GLKView *glkView = (GLKView *)self.view; // 因为当前VC是继承自`GLKViewController`，所有可以这样直接获取
    glkView.delegate = self;
    
    // 设置`GLKView`的`context`
    glkView.context = self.context;
    
    // 配置视图渲染缓冲区
    glkView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    
    // 设置背景颜色
    glClearColor(1, 0, 0, 1);
}

配置顶点数据

- (void)setupVertexData{
    // 每一行的前面3个是顶点坐标，后面2个是纹理坐标
    // 纹理坐标系取值范围[0,1];原点是左下角(0,0);
    // 故而(0,0)是纹理图像的左下角, 点(1,1)是右上角.
    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, //左下
    };
    
    
    /*
     顶点数组: 开发者可以选择设定函数指针，在调用绘制方法的时候，直接由内存传入顶点数据，也就是说这部分数据之前是存储在内存当中的，被称为顶点数组
     顶点缓存区: 性能更高的做法是，提前分配一块显存，将顶点数据预先传入到显存当中。这部分的显存，就被称为顶点缓冲区
     */
    
    // 开辟顶点缓冲区
    // (1) 创建顶点缓冲区标识符ID
    GLuint bufferID;
    glGenBuffers(1, &bufferID); // 开辟1个顶点缓冲区，所以传入1
    NSLog(@"bufferID:%d", bufferID);
    // (2) 绑定顶点缓冲区
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
    // (3) 将顶点数组的数据copy到顶点缓冲区中(GPU显存中)
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    
    
    // 打开读取通道
    glEnableVertexAttribArray(GLKVertexAttribPosition); // 顶点坐标数据
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
    
    
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0); // 纹理坐标数据
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3); // 第一个纹理坐标前面有3个值，是顶点坐标
    
}

在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的。意味着,顶点数据在着色器端(服务端)是不可用的。即使你已经使用glBufferData方法，将顶点数据从内存拷贝到顶点缓存区中(GPU显存中)。

所以, 必须由glEnableVertexAttribArray方法打开通道，指定访问属性，才能让顶点着色器能够访问到从CPU复制到GPU的数据。

注意：数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。

配置纹理

- (void)setupTexture{
    // 获取纹理图片
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"png"];
    
    // 初始化纹理
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft: @(1)}; // 纹理坐标原点是左下角,但是图片显示原点应该是左上角
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    
    NSLog(@"textureInfo.name: %d", textureInfo.name);
    
    // 使用苹果`GLKit`提供的`GLKBaseEffect`完成着色器工作(顶点/片元)
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.enabled = GL_TRUE;
    self.baseEffect.texture2d0.name = textureInfo.name;
}

实现GLKViewDelegate代理

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    // 清除颜色缓冲区
    glClear(GL_COLOR_BUFFER_BIT);
    
    // 准备绘制
    [self.baseEffect prepareToDraw];
    
    // 开始绘制
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

在viewDidLoad中调用

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self setupConfig];
    [self setupVertexData];
    [self setupTexture];
}

Demo