OpenGL ES 案例02：GLKit绘制立方体+旋转

本案例是实现一个有纹理的立方体，并根据任意轴旋转，整体效果如下

• 未加光照

  image

• 增加光照效果

  image

增加光照的主要的思路如下

image

代码的实现主要分为4部分：

• 准备工作：这部分主要的相关库的导入及属性的创建（这里不做过多阐述）
• ViewDidLoad函数：初始化OpenGL ES相关属性，加载顶点&纹理坐标数据，以及设置定时器
• GLKViewDelegate函数：视图的绘制
• update函数：定时器方法，计算旋转角度并修改矩阵堆栈，重新渲染立方体，以实现立方体的旋转

ViewDidLoad函数

这部分主要是一些初始化工作

• commonInit: OpenGL ES相关初始化
• setupVertex: 加载顶点&纹理坐标数据
• addCADisplayLink: 添加定时器

commonInit函数

OpenGL ES初始化分为五部分：

• 初始化上下文 & 设置当前上下文
• 创建GLKView对象，并设置context，加入view中
• 配置深度缓冲区
• 获取纹理图片 & 设置纹理参数
• 初始化effect，并使用effect

• OC

- (void) commonInit{
//    1、创建context
    EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    [EAGLContext setCurrentContext:context];

//    2、创建GLKView并设置代理
    CGRect frame = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width );
    self.glkView = [[GLKView alloc] initWithFrame:frame context:context];
    self.glkView.backgroundColor = [UIColor clearColor];
    self.glkView.delegate = self;

//    3、使用深度测试
    self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;

//    4、将glkView加入到view上
    [self.view addSubview:self.glkView];

//    5、获取纹理图片
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"mouse" ofType:@"jpg"];
    UIImage *image = [UIImage imageWithContentsOfFile:filePath];

//    6、设置纹理参数（纹理倒置翻转的策略）
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft: @(YES)};
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:[image CGImage] options:options error:NULL];

//    7、使用effect
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.name = textureInfo.name;
    self.baseEffect.texture2d0.target = textureInfo.target;

}

setupVertex函数

这部分主要是设置顶点数据（顶点坐标 & 纹理坐标 & 法线），并将这些数据从CPU拷贝至GPU

设置顶点数据
下图是立方体的顶点坐标与纹理坐标图示

image

其中6个面与纹理的映射关系如下

image

顶点数据使用结构体定义

• OC版本

typedef struct {
    GLKVector3 positionCoord;   //顶点坐标
    GLKVector2 textureCoord;    //纹理坐标
    GLKVector3 normal;          //法线
} CCVertex;

//初始化--这里数据的初始化方式是c语言中的结构体赋值
(CCVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};

顶点数据的具体代码见完整demo代码，这里不做过多说明

开辟缓存区，copy顶点数据到GPU
将顶点数据从内存（CPU）拷贝至显存（GPU）中
顶点缓冲区：简称VBO
顶点数组：简称VAO
在glBufferData中确认了缓存区的大小

• OC版本

    glGenBuffers(1, &_vertexBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(CCVertex)*kCoordCount, self.vertices, GL_STATIC_DRAW);

打开通道
attribute的开关在ios中是默认关闭的，需要使用代码手动开启，同时通道需要打开三次（顶点，纹理，法线各需要打开一次），将顶点数据从显存中读取到GLKit的着色器中

• OC版本
  其中的NULL是可以省略的，但是加上代码可读性强

//    顶点数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL+offsetof(CCVertex, positionCoord));

//    纹理数据
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL+offsetof(CCVertex, textureCoord));

//    光照
    glEnableVertexAttribArray(GLKVertexAttribNormal);
    glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL+offsetof(CCVertex, normal));

addCADisplayLink函数

初始化定时器，并将定时器加入runloop中，用于立方体旋转效果的实现

• OC版本

- (void)addCADisplayLink{

    self.angle = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

}

update更新

CADisplayLink定时器的刷新的频率与屏幕刷新频率一致，每次刷新都需要计算旋转角度，并应用于立方体

• OC版本

- (void) update{
    //计算旋转度数
    self.angle = (self.angle +5) % 360;
//    修改baseEffect.transform.modelviewMatrix
    self.baseEffect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(self.angle), 0.3, 1, 0.7);

//    重新渲染
    [self.glkView display];
}

GLKViewDelegate代理

由于GLKView是自定义的，所以需要在前面设置delegate，当然也可以将控制器默认的view的父类改为GLKView，不需要设置delegate

代理方法的主要目的是绘制视图的内容，并根据定时器的旋转变换，重新渲染视图

• OC版本

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

//    开启深度测试
    glEnable(GL_DEPTH_TEST);

//    清除缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

//    准备绘制
    [self.baseEffect prepareToDraw];

//    绘图（数组绘制）
    glDrawArrays(GL_TRIANGLES, 0, kCoordCount);

}