本案例實(shí)現(xiàn)一個(gè)旋轉(zhuǎn)的正方體诊县，最終實(shí)現(xiàn)效果如下
整個(gè)流程主要分為五部分：
- setupConfig：主要進(jìn)行初始化的工作；
- setupVertexs：設(shè)置頂點(diǎn)&紋理坐標(biāo)數(shù)據(jù)&法線检号、打開通道
- setupTexture：設(shè)置紋理參數(shù)&初始化 GLKBaseEffect
- 添加定時(shí)器：計(jì)算旋轉(zhuǎn)角度并修改矩陣堆棧腌歉，重新渲染立方體，以實(shí)現(xiàn)立方體的旋轉(zhuǎn)
- glkView:drawInRect: 視圖的繪制
一. setupConfig
主要是一些初始化工作
創(chuàng)建上下文齐苛，并設(shè)置當(dāng)前上下文
//1. 創(chuàng)建上下文
EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
//2. 設(shè)置當(dāng)前上下文
[EAGLContext setCurrentContext:context];
創(chuàng)建GLKView并設(shè)置代理
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;
配置深度緩沖區(qū)
self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
//默認(rèn)是(0, 1)翘盖，這里用于翻轉(zhuǎn) z 軸，使正方形朝屏幕外
glDepthRangef(1, 0);
將 GLKView 添加 self.view 上
[self.view addSubview:self.glkView];
二. setupVertexs
設(shè)置頂點(diǎn)數(shù)據(jù)（頂點(diǎn)坐標(biāo)&紋理坐標(biāo)&法線）凹蜂，并將這些數(shù)據(jù)從CPU拷貝至GPU
設(shè)置頂點(diǎn)數(shù)據(jù)
頂點(diǎn)數(shù)據(jù)這里使用 C 語言中的結(jié)構(gòu)體賦值
結(jié)構(gòu)體定義
typedef struct {
GLKVector3 positionCoord; //頂點(diǎn)坐標(biāo)
GLKVector2 textureCoord; //紋理坐標(biāo)
GLKVector3 normal; //法線
} LVertex;
開辟頂點(diǎn)數(shù)據(jù)空間馍驯，并給頂點(diǎn)賦值
self.vertexs = malloc(sizeof(LVertex) * kCoordCount);
//這里給出一個(gè)面的頂點(diǎn)數(shù)據(jù)作為參考阁危，完整的代碼見后面給出的 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}};
開辟頂點(diǎn)緩存區(qū)
glGenBuffers(1, &_vertexBuffer);
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(LVertex) *kCoordCount, self.vertexs, GL_STATIC_DRAW);
打開通道
attribute 的開關(guān)在ios中是默認(rèn)關(guān)閉的，需要使用代碼手動(dòng)開啟汰瘫，這里需要打開 頂點(diǎn)狂打、紋理和法線三個(gè)開關(guān)
//頂點(diǎn)數(shù)據(jù)
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(LVertex), NULL + offsetof(LVertex, positionCoord));
//紋理數(shù)據(jù)
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(LVertex), NULL + offsetof(LVertex, textureCoord));
//法線數(shù)據(jù)
glEnableVertexAttribArray(GLKVertexAttribNormal);
glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(LVertex), NULL + offsetof(LVertex, normal));
三. setupTexture
主要是獲取紋理圖片、設(shè)置紋理參數(shù)以及初始化 GLKBaseEffect
獲取紋理圖片路徑
NSString *imageFilePath = [[NSBundle mainBundle] pathForResource:@"timg" ofType:@"png"];
UIImage *image = [UIImage imageWithContentsOfFile:imageFilePath];
設(shè)置紋理參數(shù)
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
初始化定時(shí)器吟吝，并將定時(shí)器加入 runloop 中菱父，用于立方體旋轉(zhuǎn)效果的實(shí)現(xiàn)
self.angle = 0;
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateTimer)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
旋轉(zhuǎn)
CADisplayLink 定時(shí)器的刷新的頻率與屏幕刷新頻率一致，每次刷新都需要計(jì)算旋轉(zhuǎn)角度
- (void)updateTimer
{
//1.計(jì)算旋轉(zhuǎn)度數(shù)
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 代理
繪制視圖的內(nèi)容剑逃，并根據(jù)定時(shí)器的旋轉(zhuǎn)變換浙宜，重新渲染視圖
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
//1. 開啟深度測試
glEnable(GL_DEPTH_TEST);
//2. 清除顏色緩存區(qū)&深度緩存區(qū)
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//3. 準(zhǔn)備繪制
[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
