本案例实现一个旋转的正方体，最终实现效果如下
整个流程主要分为五部分：
- setupConfig：主要进行初始化的工作；
- setupVertexs：设置顶点&纹理坐标数据&法线、打开通道
- setupTexture：设置纹理参数&初始化 GLKBaseEffect
- 添加定时器：计算旋转角度并修改矩阵堆栈，重新渲染立方体，以实现立方体的旋转
- 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
