-
效果演示
效果演示.gif
1.創(chuàng)建項(xiàng)目次泽，進(jìn)行基本配置
- 使用xcode創(chuàng)建一個(gè)App項(xiàng)目
- 導(dǎo)入紋理圖片cTest
- 創(chuàng)建CCViewController，繼承自GLKViewController
- 修改Main.storyboard的配置障癌，將控制器class設(shè)置為CCViewController，將view設(shè)置為GLKView辩尊，并創(chuàng)建x,y,z按鈕涛浙，并設(shè)置IBAction點(diǎn)擊事件
- 導(dǎo)入#import <GLKit/GLKit.h>
2.設(shè)置需要使用到的屬性
#import "CCViewController.h"
@interface CCViewController()
// 繪圖上下文
@property(nonatomic,strong)EAGLContext *mContext;
/// 基礎(chǔ)效果類
@property(nonatomic,strong)GLKBaseEffect *mEffect;
/// 繪制的頂點(diǎn)個(gè)數(shù)
@property(nonatomic,assign)int count;
//旋轉(zhuǎn)的度數(shù)
@property(nonatomic,assign)float XDegree;
@property(nonatomic,assign)float YDegree;
@property(nonatomic,assign)float ZDegree;
//是否旋轉(zhuǎn)X,Y,Z
@property(nonatomic,assign) BOOL XB;
@property(nonatomic,assign) BOOL YB;
@property(nonatomic,assign) BOOL ZB;
@end
@implementation CCViewController {
// GCD定時(shí)器
dispatch_source_t timer;
}
3.新建上下文和設(shè)置圖層
-(void)setupContext {
//1.新建OpenGL ES上下文
self.mContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
// 獲取OpenGL ES 繪制View
GLKView *view = (GLKView *)self.view;
// 設(shè)置上下文到view
view.context = self.mContext;
// 設(shè)置顏色緩沖區(qū)格式
view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
// 設(shè)置深度緩沖區(qū)格式
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
// 設(shè)為當(dāng)前上下文
[EAGLContext setCurrentContext:self.mContext];
// 開啟深度測試
glEnable(GL_DEPTH_TEST);
}
4.渲染圖形
-(void)render {
//1.頂點(diǎn)數(shù)據(jù)
//前3個(gè)元素，是頂點(diǎn)數(shù)據(jù)摄欲；中間3個(gè)元素轿亮，是頂點(diǎn)顏色值，最后2個(gè)是紋理坐標(biāo)
GLfloat attrArr[] =
{
-0.5f, 0.5f, 0.0f, 0.0f, 0.0f, 0.5f, 0.0f, 1.0f,//左上
0.5f, 0.5f, 0.0f, 0.0f, 0.5f, 0.0f, 1.0f, 1.0f,//右上
-0.5f, -0.5f, 0.0f, 0.5f, 0.0f, 1.0f, 0.0f, 0.0f,//左下
0.5f, -0.5f, 0.0f, 0.0f, 0.0f, 0.5f, 1.0f, 0.0f,//右下
0.0f, 0.0f, 1.0f, 1.0f, 1.0f, 1.0f, 0.5f, 0.5f,//頂點(diǎn)
};
//2.繪圖索引,構(gòu)成三角形的頂點(diǎn)
GLuint indices[] =
{
0, 3, 2,
0, 1, 3,
0, 2, 4,
0, 4, 1,
2, 3, 4,
1, 4, 3,
};
//頂點(diǎn)個(gè)數(shù)
self.count = sizeof(indices) /sizeof(GLuint);
//將頂點(diǎn)數(shù)組放入數(shù)組緩沖區(qū)中 GL_ARRAY_BUFFER
GLuint buffer;
glGenBuffers(1, &buffer);
glBindBuffer(GL_ARRAY_BUFFER, buffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_STATIC_DRAW);
//將索引數(shù)組存儲(chǔ)到索引緩沖區(qū) GL_ELEMENT_ARRAY_BUFFER
GLuint index;
glGenBuffers(1, &index);
glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, index);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
//使用頂點(diǎn)數(shù)據(jù)
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, NULL);
//使用顏色數(shù)據(jù)
glEnableVertexAttribArray(GLKVertexAttribColor);
glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 3);
//使用紋理數(shù)據(jù)
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 8, (GLfloat *)NULL + 6);
//獲取紋理路徑
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"cTest" ofType:@"jpg"];
NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@"1",GLKTextureLoaderOriginBottomLeft, nil];
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
//著色器GLKBaseEffect有3個(gè)光源,2個(gè)紋理
self.mEffect = [[GLKBaseEffect alloc]init];
self.mEffect.texture2d0.enabled = GL_TRUE;
self.mEffect.texture2d0.name = textureInfo.name;
//投影視圖,設(shè)置為透視投影
CGSize size = self.view.bounds.size;
float aspect = fabs(size.width / size.height);
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90.0), aspect, 0.1f, 10.f);
// 可以對投影矩陣進(jìn)行縮放
projectionMatrix = GLKMatrix4Scale(projectionMatrix, 1.0f, 1.0f, 1.0f);
// 將投影效果設(shè)置到GLKBaseEffect
self.mEffect.transform.projectionMatrix = projectionMatrix;
//模型視圖,往-z軸平移2個(gè)單位
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
self.mEffect.transform.modelviewMatrix = modelViewMatrix;
//定時(shí)器
double seconds = 0.1;
timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
dispatch_source_set_timer(timer, DISPATCH_TIME_NOW, seconds * NSEC_PER_SEC, 0.0);
dispatch_source_set_event_handler(timer, ^{
self.XDegree += 0.1f * self.XB;
self.YDegree += 0.1f * self.YB;
self.ZDegree += 0.1f * self.ZB ;
});
dispatch_resume(timer);
}
5.實(shí)現(xiàn)GLKView的代理
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
// 清屏,設(shè)置清屏顏色
glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
// 清除顏色緩存區(qū)和深度緩存區(qū)
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
// 準(zhǔn)備畫
[self.mEffect prepareToDraw];
// 繪制索引的三角形
glDrawElements(GL_TRIANGLES, self.count, GL_UNSIGNED_INT, 0);
}
6.實(shí)現(xiàn)常見變化函數(shù)update
-(void)update {
// 模型矩陣
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
// 模型矩陣旋轉(zhuǎn)
modelViewMatrix = GLKMatrix4RotateX(modelViewMatrix, self.XDegree);
modelViewMatrix = GLKMatrix4RotateY(modelViewMatrix, self.YDegree);
modelViewMatrix = GLKMatrix4RotateZ(modelViewMatrix, self.ZDegree);
// 將旋轉(zhuǎn)效果設(shè)置到mEffect
self.mEffect.transform.modelviewMatrix = modelViewMatrix;
}
7.更換x,y,z軸旋轉(zhuǎn)
- (IBAction)XClick:(id)sender {
_XB = !_XB;
}
- (IBAction)YClick:(id)sender {
_YB = !_YB;
}
- (IBAction)ZClick:(id)sender {
_ZB = !_ZB;
}
