本案例实现一个旋转的正方体，最终实现效果如下

整个流程主要分为五部分：

1. setupConfig：主要进行初始化的工作；
2. setupVertexs：设置顶点&纹理坐标数据&法线、打开通道
3. setupTexture：设置纹理参数&初始化 GLKBaseEffect
4. 添加定时器：计算旋转角度并修改矩阵堆栈，重新渲染立方体，以实现立方体的旋转
5. glkView:drawInRect: 视图的绘制

一. setupConfig

主要是一些初始化工作

创建上下文，并设置当前上下文

//1. 创建上下文
EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
//2. 设置当前上下文
[EAGLContext setCurrentContext:context];

创建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;

配置深度缓冲区

self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
//默认是(0, 1)，这里用于翻转 z 轴，使正方形朝屏幕外
glDepthRangef(1, 0);

将 GLKView 添加 self.view 上

[self.view addSubview:self.glkView];

二. setupVertexs

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

设置顶点数据

顶点数据这里使用 C 语言中的结构体赋值

结构体定义

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

开辟顶点数据空间，并给顶点赋值

self.vertexs = malloc(sizeof(LVertex) * kCoordCount);

//这里给出一个面的顶点数据作为参考，完整的代码见后面给出的 demo 链接
self.vertexs[0] = (LVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};
self.vertexs[1] = (LVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
self.vertexs[2] = (LVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
self.vertexs[3] = (LVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
self.vertexs[4] = (LVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
self.vertexs[5] = (LVertex){{0.5, -0.5, 0.5}, {1, 0}, {0, 0, 1}};

开辟顶点缓存区

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

打开通道

attribute 的开关在ios中是默认关闭的，需要使用代码手动开启，这里需要打开 顶点、纹理和法线三个开关

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

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

//法线数据
glEnableVertexAttribArray(GLKVertexAttribNormal);
glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(LVertex), NULL + offsetof(LVertex, normal));

三. setupTexture

主要是获取纹理图片、设置纹理参数以及初始化 GLKBaseEffect

获取纹理图片路径

NSString *imageFilePath = [[NSBundle mainBundle] pathForResource:@"timg" ofType:@"png"];
UIImage *image = [UIImage imageWithContentsOfFile:imageFilePath];

设置纹理参数

NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft:@(1)};
GLKTextureInfo *textInfo = [GLKTextureLoader textureWithCGImage:[image CGImage] options:options error:nil];

使用 GLKBaseEffect

self.baseEffect = [[GLKBaseEffect alloc] init];
self.baseEffect.texture2d0.name = textInfo.name;
self.baseEffect.texture2d0.target = textInfo.target;

addDisplayLinkTimer

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

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

旋转

CADisplayLink 定时器的刷新的频率与屏幕刷新频率一致，每次刷新都需要计算旋转角度

- (void)updateTimer
{
    //1.计算旋转度数
    self.angle = (self.angle + 5) % 360;
    
    //2.修改baseEffect.transform.modelviewMatrix
    self.baseEffect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(self.angle), 0.3, 1.0, 0.7);
    
    //重新渲染
    [self.glkView display];
}

四. GLKView 代理

绘制视图的内容，并根据定时器的旋转变换，重新渲染视图

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
    //1. 开启深度测试
    glEnable(GL_DEPTH_TEST);
    //2. 清除颜色缓存区&深度缓存区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    //3. 准备绘制
    [self.baseEffect prepareToDraw];
    
    //4. 绘图
    glDrawArrays(GL_TRIANGLES, 0, kCoordCount);
}

五. 开启光照效果

    //开启光照效果
    self.baseEffect.light0.enabled = YES;
    //漫反射颜色
    self.baseEffect.light0.diffuseColor = GLKVector4Make(1, 1, 1, 1);
    //光源位置
    self.baseEffect.light0.position = GLKVector4Make(-0.5, -0.5, 5, 1);

完整代码见 GitHub OpenGL_ES_CubeImage