效果圖
- 準(zhǔn)備工作：主要是變量的定義及界面設(shè)置
- viewDidLoad函數(shù)：創(chuàng)建圖層并渲染圖形
2.1 setupContext函數(shù):新建圖層
2.2 render函數(shù):渲染圖形 - GLKViewDelegate代理方法：使用索引繪制圖形
- update函數(shù)：圖形的旋轉(zhuǎn)變換
- 按鈕點(diǎn)擊事件：判斷圖形是否圍繞該軸旋轉(zhuǎn)
1. 準(zhǔn)備工作
主要是變量的定義及界面設(shè)置
- 1.1 新建工程,設(shè)置ViewController繼承自GLKViewController,導(dǎo)入GLKit框架文件,并在storyboard中設(shè)置ViewController的class類(lèi)型為GLKViewController
#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>
@interface ViewController : GLKViewController
@end
image.png
-
1.2 設(shè)置controller.view的class類(lèi)型為GLKView
設(shè)置controller.view的class類(lèi)型為GLKView -
1.3 導(dǎo)入一張圖片資源
導(dǎo)入一張圖片資源 - 1.3 ViewController定義屬性
@interface ViewController()
//上下文
@property(nonatomic,strong)EAGLContext *mContext;
//著色器
@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 ViewController
{
//定時(shí)器
dispatch_source_t timer;
}
@end
2. viewDidLoad函數(shù)
主要?jiǎng)?chuàng)建圖層并渲染圖形
viewDidLoad函數(shù)
- 2.1 新建圖層
//1.新建圖層
-(void)setupContext
{
//1.新建OpenGL ES上下文
self.mContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
//設(shè)置GLKView對(duì)象
GLKView *view = (GLKView *)self.view;
//GLKView指定context
view.context = self.mContext;
//GLKView顏色格式
view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
//GLKView深度格式
view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
//設(shè)置上下文
[EAGLContext setCurrentContext:self.mContext];
//開(kāi)啟深度測(cè)試
glEnable(GL_DEPTH_TEST);
}
- 2.2 渲染圖形
//2.渲染圖形
-(void)render
{
//1.頂點(diǎn)數(shù)據(jù)
//前3個(gè)元素，是頂點(diǎn)數(shù)據(jù)；后面3個(gè)元素蹂喻，是頂點(diǎn)顏色值搓劫，
GLfloat attrArr[] =
{
-0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, //左上
0.5f, 0.5f, 0.0f, 1.0f, 0.0f, 1.0f, //右上
-0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 1.0f, //左下
0.5f, -0.5f, 0.0f, 1.0f, 1.0f, 1.0f, //右下
0.0f, 0.0f, 1.0f, 0.0f, 1.0f, 0.0f, //頂點(diǎn)
};
//2.繪圖索引數(shù)組
GLuint indices[] =
{
0, 3, 2,
0, 1, 3,
0, 2, 4,
0, 4, 1,
2, 3, 4,
1, 4, 3,
};
//計(jì)算頂點(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) * 6, NULL);
//使用顏色數(shù)據(jù)
glEnableVertexAttribArray(GLKVertexAttribColor);
glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, (GLfloat *)NULL + 3);
//創(chuàng)建著色器effct
self.mEffect = [[GLKBaseEffect alloc]init];
//創(chuàng)建投影矩陣,并賦值給effct中的projectionMatrix
CGSize size = self.view.bounds.size;
float aspect = fabs(size.width / size.height);
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90.0), aspect, 0.1f, 100.0);
projectionMatrix = GLKMatrix4Scale(projectionMatrix, 1.0f, 1.0f, 1.0f);
self.mEffect.transform.projectionMatrix = projectionMatrix;
//創(chuàng)建模型視圖矩陣,并且平移2.0
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
//賦值給effct中的modelviewMatrix
self.mEffect.transform.modelviewMatrix = modelViewMatrix;
//設(shè)置定時(shí)器,開(kāi)啟回調(diào)
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);
}
- 2.3 viewDidLoad調(diào)用函數(shù)
-(void)viewDidLoad
{
[super viewDidLoad];
//1.新建圖層
[self setupContext];
//2.渲染圖形
[self render];
}
3. GLKViewDelegate代理方法
主要使用索引繪制圖形
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
glClearColor(0.3f, 0.3f, 0.3f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
//準(zhǔn)備繪制
[self.mEffect prepareToDraw];
//使用索引繪制圖形
glDrawElements(GL_TRIANGLES, self.count, GL_UNSIGNED_INT, 0);
}
4. update函數(shù)
主要圖形的旋轉(zhuǎn)變換
update函數(shù)的功能就等同于GLKViewControllerDelegate中的代理方法glkViewControllerUpdate，蘋(píng)果官方文檔針對(duì)這部分有詳細(xì)說(shuō)明：當(dāng)你沒(méi)有實(shí)現(xiàn)glkViewControllerUpdate時(shí)紫岩，可以通過(guò)update來(lái)實(shí)現(xiàn)，也是一樣的道理
蘋(píng)果官方文檔介紹glkViewControllerUpdate
//圖形的旋轉(zhuǎn)變換
-(void)update
{
GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.5);
modelViewMatrix = GLKMatrix4RotateX(modelViewMatrix, self.XDegree);
modelViewMatrix = GLKMatrix4RotateY(modelViewMatrix, self.YDegree);
modelViewMatrix = GLKMatrix4RotateZ(modelViewMatrix, self.ZDegree);
self.mEffect.transform.modelviewMatrix = modelViewMatrix;
}
5. 按鈕點(diǎn)擊事件
-
5.1 在頁(yè)面上添加 x,y,z按鈕
添加x,y,z按鈕 - 5.2 設(shè)置按鈕點(diǎn)擊事件
#pragma mark -XYZClick
- (IBAction)XClick:(id)sender {
_XB = !_XB;
}
- (IBAction)YClick:(id)sender {
_YB = !_YB;
}
- (IBAction)ZClick:(id)sender {
_ZB = !_ZB;
}
