OpenGL ES 入门: GLKit应用加载图片

控制器使用GLKViewController

//.h文件
#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>

@interface ViewController : GLKViewController

@end

//.m文件
#import <OpenGLES/ES3/gl.h>
#import <OpenGLES/ES3/glext.h>

@interface ViewController ()

@end

@implementation ViewController
{
    EAGLContext *_content;//上下文
    GLKBaseEffect *effect;//绘制工具类
}
复制代码

1.初始化上下文&设置当前上下文

- (void)setBaseContent{
    //creat context
    _content = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    if (!_content){
        NSLog(@"content failed");
    }
    //set context
    [EAGLContext setCurrentContext: _content];
    //view 关联context
    //注意:ViewController在storyBoard内,其view类型修已经改成了GLKView
    GLKView *glkView = (GLKView *)self.view;
    glkView.context = _content;
    //清屏颜色
    glClearColor(0.5, 0.5, 0.5, 1.0);
}
复制代码

在初始化context时，咱们须要选择咱们使用的OpenGL ES的版本，分别有以下几种：

kEAGLRenderingAPIOpenGLES1 = 1, 固定管线
     kEAGLRenderingAPIOpenGLES2 = 2,
     kEAGLRenderingAPIOpenGLES3 = 3,
复制代码

EAGLContext是苹果iOS平台下实现OpenGL ES渲染层。其中kEAGLRenderingAPIOpenGLES1相似前几篇文章说的固定管线。而kEAGLRenderingAPIOpenGLES2和kEAGLRenderingAPIOpenGLES3，在这里使用哪一个，区别不大，只是版本不一样而已。

下面须要配置视图建立的渲染缓冲区，以及设置背景颜色

glkView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
复制代码

drawableColorFormat: 颜色缓冲区格式 在OpenGL ES中有一个缓存区，它用以存储在屏幕中显示的颜色。你可使用其属性设置缓冲区中的每一个像素的颜色格式。 GLKViewDrawableColorFormatRGBA8888 = 0 默认值，缓冲区的每一个像素的最小组成部分(RGBA)使用8个bit，(因此每一个像素4个字节， 4*8个bit) GLKViewDrawableColorFormatRGB565 若是你的APP容许更小范围的颜色，便可设置这个。会让你的APP消耗更小的资源(内存和处理时间)

drawableDepthFormat: 深度缓存区格式 GLKViewDrawableDepthFormatNone = 0, 意味着彻底没有深度缓冲区 GLKViewDrawableDepthFormat16, GLKViewDrawableDepthFormat24, 若是你要使用这个属性（通常用于3D游戏），你应该选择GLKViewDrawableDepthFormat16或GLKViewDrawableDepthFormat24。这里的差异是使用GLKViewDrawableDepthFormat16将消耗更少的资源

加载纹理数据(使用GLBaseEffect)

使用本地图片做为纹理

- (void)loadTexture{
    //读取图片纹理
    NSString *filePath = [[NSBundle mainBundle] pathForResource: @"summerDay" ofType: @"png"];
    //设置纹理参数
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys: @(1), GLKTextureLoaderOriginBottomLeft, nil];
    //纹理信息类
    GLKTextureInfo *texInfo = [GLKTextureLoader textureWithContentsOfFile: filePath options:options error:nil];
    //GLKit 提供GLKBaseEffect 完成着色器工做(顶点/片元)
    effect = [[GLKBaseEffect alloc] init];
    effect.texture2d0.enabled = GL_TRUE;
    effect.texture2d0.name = texInfo.name;
}
复制代码

注意: 在设置纹理参数的时，须要注意一点，纹理坐标默认左下角为原点(0,0)，而iOS坐标系中，默认手机屏幕的左上角为原点(0,0)，因此须要特别注意这一点，须要设置GLKTextureLoaderOriginBottomLeft，否则图片显示的时候，会发生翻转。

加载顶点&纹理数据

设置绘制的顶点/纹理数据

- (void)setDrawContent{
    //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, //左下
    };
    //2.开辟顶点缓冲区
    //建立顶点缓存区标识符ID
    GLuint bufferId;
    glGenBuffers(1, &bufferId);
    //绑定顶点缓存区
    glBindBuffer(GL_ARRAY_BUFFER, bufferId);
    //将顶点数组的数据copy到顶点缓存区中(GPU显存中)
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    
    //3.打开属性通道读取对应数据.
    //顶点数据
    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);
}
复制代码

• 这个案例中，咱们把顶点坐标、纹理坐标放在同一数组中，也能够分开,可是为了简化代码量，因此选择放在一块儿写。
• 开辟顶点缓冲区，主要目的是为了追求性能更高，提早分配一块显存，将顶点数据预先传入到显存中，而关于顶点相关的计算都是在GPU中进行的，因此这样性能有了很大的提升。
• 方法glVertexAttribPointer表示上传顶点数据到显存的方法，即设置合适的方式从buffer里读取数据。

参数1: 指定要修改的属性的索引值
参数2: 每次读取数量(如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a）,纹理则是2个.)
参数3: 指定数组中每一个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT, GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
参数4: 指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
参数5: 指定连续顶点属性之间的偏移量。若是为0，那么顶点属性会被理解为：它们是紧密排列在一块儿的。初始值为0 参数6: 指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0

上述代码中，对于顶点来讲，每次读取3个，数据类型为浮点型，偏移量即读取下一组顶点数据，须要移动5个位置，顶点读取位置对应从数组的一开始读取，因此最后一个参数写成(GLfloat *)NULL + 0，这里这样的写法是为了方便读者理解，也能够直接写成NULL。因此对于纹理的最后一个参数写成(GLfloat *)NULL + 3也不难理解。

注意点：

在iOS中，默认状况下，出于性能考虑，全部顶点着色器的属性(Attribute)变量都是关闭的，意味着，顶点数据在着色器（服务端）是不可用的。即便你已经使用glBufferData方法，将顶点数据从内存拷贝到顶点缓冲区中(GPU显存中); 因此，必须由glEnableVertexAttribArray方法打开通道，指定访问属性，才能让顶点着色器可以访问到从CPU复制到GPU的数据。 注意： 数据在GPU端是否可见，即着色器可否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，容许顶点着色器读取GPU（服务端）数据。 GLKVertexAttribPosition, // 顶点 GLKVertexAttribNormal, // 法线 GLKVertexAttribColor, // 颜色 GLKVertexAttribTexCoord0, // 纹理 GLKVertexAttribTexCoord1

绘制视图的内容

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    //1.清除颜色缓存区
    glClear(GL_COLOR_BUFFER_BIT);
    //2.准备绘制
    [cEffect prepareToDraw];
    //3.开始绘制
    glDrawArrays(GL_TRIANGLES, 0, 6);
}
复制代码

OK，案例内容结束，下面看实现效果（其实就是咱们平时用UIImageView加载一张图片而已）