前沿

通过学习GLKit库，自己动手实现一个小功能，供自己复习

res.gif

前期准备导入头文件和修改类继承

#import <GLKit/GLKit.h>
#import <OpenGLES/ES3/glext.h>
#import <OpenGLES/ES3/gl.h>

ViewController集成UIViewController ,现在继承GLKit的类GLKViewController，在Main.storyboard文件中修改view的父类为GLKView;

image.png

代码实现

主要分为5大步骤，
1.设置基本配置（setUpConfig）
2.设置顶点数据（setUpVertexData）
3.设置纹理信息(setUpVertexData)
4.绘制图形(GLKView 代理）

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

5.实现动态旋转(GLKViewController代理方法)

- (void)glkViewControllerUpdate:(GLKViewController *)controller 

设置基本配置

//初始化上下文
    EAGLContext *context = [[EAGLContext alloc]initWithAPI: kEAGLRenderingAPIOpenGLES3];
//设置当前上下文
    [EAGLContext setCurrentContext:context];
//类型转化
    GLKView *view = (GLKView *)self.view;
    view.context = context;
//设置颜色存储格式，RGBA各8位
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
//设置颜色深度缓存区存储格式，每个像素16位
     view.drawableDepthFormat = GLKViewDrawableDepthFormat16;
//设置背景颜色
    glClearColor(0.5, 0.3, 0.3, 1);

/*
EAGLContext 是苹果iOS平台下实现OpenGLES 渲染层.
kEAGLRenderingAPIOpenGLES1 = 1, 固定管线
kEAGLRenderingAPIOpenGLES2 = 2,
kEAGLRenderingAPIOpenGLES3 = 3,
*/

设置顶点坐标

//vertextData只拿去一个面，前三个坐标是物体坐标(x,y,z)，后面坐标是纹理坐标（s,t）
 GLfloat vertextData[] = {
        //正前方
        -0.5,  -0.5,  0.5,    0,     0.0,
        0.5,   -0.5,  0.5,   1.0,    0.0,
        0.5,    0.5,  0.5,   1.0,   1.,
        
        0.5,     0.5, 0.5,   1.0,    1.,
        -0.5,    0.5, 0.5,   0.0,     1.0,
        -0.5,-0.5,0.5,  0.0,  0.0,
}
//开启深度测试 因为图形有相互折叠的情况
   glEnable(GL_DEPTH_TEST);
//创建顶点缓存区标识符ID
    glGenBuffers(1, &bufferID);
//绑定顶点缓存区
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
//将顶点数组的数据copy到顶点缓存区中(cpu copy到GPU显存中)
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertextData), vertextData, GL_STATIC_DRAW);
    //3.打开读取通道.
    /*
     (1)在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的.
     意味着,顶点数据在着色器端(服务端)是不可用的. 即使你已经使用glBufferData方法,将顶点数据从内存拷贝到顶点缓存区中(GPU显存中).
     所以, 必须由glEnableVertexAttribArray 方法打开通道.指定访问属性.才能让顶点着色器能够访问到从CPU复制到GPU的数据.
     注意: 数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
   
    (2)方法简介
    glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
   
    功能: 上传顶点数据到显存的方法（设置合适的方式从buffer里面读取数据）
    参数列表:
        index,指定要修改的顶点属性的索引值,例如
        size, 每次读取数量。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a）,纹理则是2个.）
        type,指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
        normalized,指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
        stride,指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
        ptr指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0
     */
//顶点坐标数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(float)*5, (GLfloat*)NULL+0);
//纹理坐标数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(float)*5, (GLfloat*)NULL+3);

//设置纹理信息

 NSString *filePath = [[NSBundle mainBundle] pathForResource:@"huhu" ofType:@"jpg"];
////2.设置纹理参数
//GLKTextureLoaderOriginBottomLeft
    //纹理坐标原点是左下角,但是图片显示原点应该是左上角. 
    GLKTextureInfo *textInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:@{GLKTextureLoaderOriginBottomLeft:@(1)} error:nil];
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.enabled = YES;
    self.baseEffect.texture2d0.name = textInfo.name;
    self.baseEffect.texture2d0.target = textInfo.target;

绘制图形

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
//清理颜色缓冲区和深度缓存区因为我们要做深度测试
    glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
    
    [self.baseEffect prepareToDraw];
//36是顶点个数
    glDrawArrays(GL_TRIANGLES, 0, 36);
}

实现动态旋转

- (void)glkViewControllerUpdate:(GLKViewController *)controller {
    static float angle = 0;
    angle +=0.1;
    GLKMatrix4 modelViewMatrix = GLKMatrix4Rotate(GLKMatrix4Identity, angle, 1, 1,0 );
    self.baseEffect.transform.modelviewMatrix = modelViewMatrix;
}

我们应该设置代理，并遵守代理

@property (nullable, nonatomic, assign) IBOutlet id <GLKViewControllerDelegate> delegate;

在GLKView中我们并没有设置GLKViewDelegate，为什么他会调用呢，这里GLKViewController已经帮我们设置过了

image.png

demo

补充，

GLKViewController实现原理大致是，内部管理一个CADisplayLink对象，CADisplayLink去掉用下面两个方法

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

当实现GLKViewControllerDelegate代理是会调用

- (void)glkViewControllerUpdate:(GLKViewController *)controller;