本案例是实现一个有纹理的立方体，并根据任意轴旋转，整体效果如下
- 未加光照
增加光照效果
增加光照的主要的思路如下
整体思路
代码的实现主要分为4部分：
- 准备工作：这部分主要的相关库的导入及属性的创建（这里不做过多阐述）
- ViewDidLoad函数：初始化OpenGL ES相关属性，加载顶点&纹理坐标数据，以及设置定时器
- GLKViewDelegate函数：视图的绘制
- update函数：定时器方法，计算旋转角度并修改矩阵堆栈，重新渲染立方体，以实现立方体的旋转
ViewDidLoad函数
这部分主要是一些初始化工作
- commonInit: OpenGL ES相关初始化
- setupVertex: 加载顶点&纹理坐标数据
- addCADisplayLink: 添加定时器
commonInit函数
OpenGL ES初始化分为五部分：
- 初始化上下文 & 设置当前上下文
- 创建GLKView对象，并设置context，加入view中
- 配置深度缓冲区
- 获取纹理图片 & 设置纹理参数
- 初始化effect，并使用effect
注：代码分为OC版本和Swift版本
- 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; }
- Swift：其中有些变量使用了懒加载具体的代码请见文末的链接
fileprivate func commonInit(){ // 1、初始化上下文 & 设置当前上下文 guard let context = EAGLContext(api: .openGLES3) else{ return } EAGLContext.setCurrent(context) glkView.context = context // 读取纹理图片 let filePath = Bundle.main.path(forResource: "mouse", ofType: "jpg") let image = UIImage(contentsOfFile: filePath!) guard let textureInfo: GLKTextureInfo = try? GLKTextureLoader.texture(with: (image?.cgImage)!, options: [GLKTextureLoaderOriginBottomLeft:NSNumber.init(integerLiteral: 1)]) else{ return } // 使用effect effect = GLKBaseEffect() effect.texture2d0.name = textureInfo.name effect.texture2d0.target = GLKTextureTarget(rawValue: textureInfo.target)! }
setupVertex函数
这部分主要是设置顶点数据（顶点坐标 & 纹理坐标 & 法线），并将这些数据从CPU拷贝至GPU
设置顶点数据
下图是立方体的顶点坐标与纹理坐标图示
其中6个面与纹理的映射关系如下
顶点数据使用结构体定义
- OC版本
typedef struct { GLKVector3 positionCoord; //顶点坐标 GLKVector2 textureCoord; //纹理坐标 GLKVector3 normal; //法线 } CCVertex; //初始化--这里数据的初始化方式是c语言中的结构体赋值 (CCVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};
- Swift版本（暂时未包括法线）
struct CCVertex { var positionCoord: GLKVector3 var textureCoord: GLKVector2 } //初始化 CCVertex(positionCoord: GLKVector3(v: (-0.5, 0.5, 0.5)), textureCoord: GLKVector2(v: (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);
- Swift版本
//2、拷贝到顶点缓冲区 glGenBuffers(1, &vertexBuffer) // 绑定顶点缓冲区 glBindBuffer(GLenum(GL_ARRAY_BUFFER), vertexBuffer) // coppy顶点数据 glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<CCVertex>.size*kVertexCount, vertices, GLenum(GL_STATIC_DRAW))
glBufferData(GLenum(GL_ARRAY_BUFFER), MemoryLayout<CCVertex>.size*kVertexCount, vertices, GLenum(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));
- Swift版本（暂未加光照）
glEnableVertexAttribArray(GLuint(GLKVertexAttrib.position.rawValue)) glVertexAttribPointer(GLuint(GLKVertexAttrib.position.rawValue), 3, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<CCVertex>.size), UnsafeMutableRawPointer(bitPattern: 0)) glEnableVertexAttribArray(GLuint(GLKVertexAttrib.texCoord0.rawValue)) //这里加4的原因是因为苹果对部分包含vector类型数据的结构体加了一个padding,此处这个padding等于4个字节。CCVertex占24个字节，而不是5个float所占的20个字节 glVertexAttribPointer(GLuint(GLKVertexAttrib.texCoord0.rawValue), 2, GLenum(GL_FLOAT), GLboolean(GL_FALSE), GLsizei(MemoryLayout<CCVertex>.size), UnsafeMutableRawPointer(bitPattern: MemoryLayout<GLKVector3>.size+4))
addCADisplayLink函数
初始化定时器，并将定时器加入runloop中，用于立方体旋转效果的实现
- OC版本
- (void)addCADisplayLink{ self.angle = 0; self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)]; [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes]; }
- Swift版本
fileprivate func addCADisplayLink(){ displayLink.add(to: RunLoop.main, forMode: .common) }
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]; }
- Swift版本
@objc fileprivate func update(){ // 计算旋转角度 angle = (angle + 5).truncatingRemainder(dividingBy: 360) // 修改矩阵堆栈 effect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(angle), 0.3, 1, -0.7) // 重新渲染，回调代理方法重新绘制 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); }
- Swift版本
extension ViewController: GLKViewDelegate{ func glkView(_ view: GLKView, drawIn rect: CGRect) { // 开启深度测试 glEnable(GLenum(GL_DEPTH_TEST)); glClear(GLbitfield(GL_COLOR_BUFFER_BIT) | UInt32(GL_DEPTH_BUFFER_BIT)) //准备绘制 effect.prepareToDraw() //开始绘制 glDrawArrays(GLenum(GL_TRIANGLES), 0, GLsizei(kVertexCount)) } }
注：swift与OC代码的难点主要还是在于对指针的操作
