iOS OpenGL ES入门案例

OpenGL ES 是OpenGL针对嵌入式系统设置的标准图形库。它是OpenGL的简化版。但是基本的渲染管线没有大的变化。

虽然iOS13开始不再支持OpenGL ES，已转向metal，但是OpenGL ES 仍然可以在iOS中使用，且其它嵌入式设备仍支持OpenGL ES。同时学习Open GL ES能更好的学习metal。

渲染管线

顶点缓存区 —>顶点着色器 —> 细分控制器 —> 细分中着色器 —> 图元转配 —>光栅化 —> 片元着色器

其中顶点着色器、片元着色器是可以供开发者使用的，而iOS也提供了默认实现好的着色器。
由于OpenGL ES只是一个渲染库，所以还需要其他功能库配合使用。

• GLKView 提供绘制场所(View)
• GLKViewController(扩展于标准的UIKit 设计模式. ⽤于绘制视图内容的管理与呈现.)

本节主要已加载图片案例为主。

准备工作

1. xcode创建一个iOS 项目
2. 在main.storyboard 中将viewcontroller 中的view变为GLKView
3. 使viewcontroller继承GLKViewController

#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>
@interface ViewController : GLKViewController
{
    EAGLContext *context;
    // 简单的光源和着色系统（固定着色器）
    GLKBaseEffect *effect; //
}

@end

初始化设置

//1.初始化设置
-(void)setupConfig{
    //1.初始化openGLEs上下文
    context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];

    //2.
    if (!context) {
        NSLog(@"失败");
        return;
    }
    
    //3.设置当前上下文，可以有多个上下文，但是只能有一个当前上下文
    [EAGLContext setCurrentContext:context];
    
    //4. 接管view
    GLKView *view = (GLKView *)self.view;
    view.context = context;
    
    //4.1颜色缓冲区格式
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    //4.2 深度缓冲区渲染格式， GLKViewDrawableDepthFormat16 和 GLKViewDrawableDepthFormat24两中，值越大z-fighting的概率就越小，但现代设备很少出现z-fighting
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    
    //5. 背景色
    glClearColor(0, 0, 1, 1);
}

EAGLContext：管理OpenGL ES渲染上下文—状态信息，命令和资源。

设置顶点数据

顶点是空间坐标系中的一个点(x,y,z)。空间中每个点之间的连接方式，可以称为图元装配。而OpenGL ES 支持三种图元，即点、线、三角形。一条线需要两个顶点，三角形需要3个顶点，长方形则需要2两个三角形即6个顶点。

//2.设置顶点数据
-(void) setupVertexData {
    
    //1.顶点数组，在内存中
    GLfloat vertexData[] = {
      
        // 顶点坐标              纹理坐标
        0.5f,  -0.5f, 0.0f,   1.0f, 0.0f, // 右下
        0.5f,  0.5f, 0.0f,    1.0f, 1.0f, // 右上
        -0.5f, 0.5f, 0.0f,    0.0f, 1.0f, // 左上
        
        0.5f,  -0.5f, 0.0f,   1.0f, 0.0f, // 右下
        -0.5f,  0.5f, 0.0f,   0.0f, 1.0f, // 左上
        -0.5f, -0.5f, 0.0f,   0.0f, 0.0f, // 左上
    };
    
    //2.顶点缓冲区 -> GPU显存
    GLuint bufferID;
    glGenBuffers(1, &bufferID);
    
    //3.绑定顶点缓冲区
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
    
    //4.顶点从内存中复制到顶点缓冲区
    
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    
    //顶点着色器在服务端的属性是关闭的，所以需要手动开启
    
    //4. 打开顶点数据的通道
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    //5. 读取顶点数据  顶点缓冲区 -> 顶点着色器
    // size
    glVertexAttribPointer(GLKVertexAttribPosition,//打开的是哪个属性，现在是顶点
                          3, // 每次读取vertexData 3个数据
                          GL_FLOAT,
                          false,
                          sizeof(GL_FLOAT) * 5 //步长，间隔多少去从一位数组中取顶点数据
                        , (GLfloat *)NULL + 0);// 从哪个位置取
    
    //6.打开纹理数据通道
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, //打开纹理属性
                          2,        //每次从vertexData 2个数据
                          GL_FLOAT,
                          false, sizeof(GL_FLOAT) * 5 , //步长
                          (GLfloat *)NULL + 3);
}

1. vertexData 顶点数组，左侧为顶点坐标，右侧为纹理坐标。加载纹理（图片）需要纹理坐标与openGLES中的坐标进行一一映射。就如同手机贴膜一样，手机是在OpenGLES坐标系中，手机膜在纹理坐标系中，需要做好映射关系。（OpenGL ES 屏幕中间是原点，纹理坐标左下交是原点）
2. 顶点初始化后是在内存中，根据渲染管线，顶点会从顶点缓冲区复制顶点到顶点着色器。
3. 绑定顶点缓冲区
4. glBufferData 将顶点会从顶点缓冲区复制顶点到顶点着色器。

参数
target：指定目标缓冲区对象。GL_ARRAY_BUFFER、GL_ELEMENT_ARRAY_BUFFER。
size：指定缓冲区对象的新数据存储的大小（以字节为单位）。
data：指定将复制到数据存储区以进行初始化的数据的指针，如果不复制数据，则指定NULL。
usage指定数据存储的预期使用模式。 GL_STREAM_DRAW，GL_STATIC_DRAW或GL_DYNAMIC_DRAW。

5. 在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的.意味着,顶点数据在着色器端(服务端)是不可用的。必须由glEnableVertexAttribArray 方法打开通道.指定访问属性.才能让顶点着色器能够访问到从CPU复制到GPU的数据。
6. 由于我们加载图片需要用到顶点坐标GLKVertexAttribPosition和纹理坐标GLKVertexAttribTexCoord0，所以需要打开这个两个属性。

加载纹理

纹理可以理解为图片，OpenGL读取图片会对图片进行解压获取图片中的RGBA数据存储到帧缓存冲去中

-(void)setUpTexture{
    
    //1.获取图片路径
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"for_test" ofType:@"jpg"];
    //2.设置纹理的参数
    //翻转坐标系，  纹理坐标原点：左下角，图片的原点：坐上
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft:@(1)};
    
    //3.加载图片
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    
    //4.  baseEffect 固定着色器，（顶点和片元着色器）
    effect = [[GLKBaseEffect alloc] init];
    effect.texture2d0.enabled = GL_TRUE;
    //把纹理交给固定着色器，
    effect.texture2d0.name = textureInfo.name;
}

1. 获取图片路径
2. 设置参数，在ios中我们都知道坐标原点在左上角，而纹理坐标是在坐下角，需要反转下
3. 加载纹理，获取纹理信息
4. GLKBaseEffect 是iOS提供的固定着色器，只需要将加载的纹理数据交给固定着色器。

渲染

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

    glClear(GL_COLOR_BUFFER_BIT );
    
    //准备绘制
    [effect prepareToDraw];
    //开始绘制
   glDrawArrays(GL_TRIANGLES, //图元类型
                 0, //从第几个顶点开始
                 6); //顶点数量
}

glkView:drawInRect是GLKViewController的代理方法，必须要实现的。该代理方法会不断地循环调用。