11-3.GLKit-索引绘图案例

效果图

准备工作：主要是变量的定义及界面设置
viewDidLoad函数：创建图层并渲染图形
2.1 setupContext函数:新建图层
2.2 render函数:渲染图形
GLKViewDelegate代理方法：使用索引绘制图形
update函数：图形的旋转变换
按钮点击事件：判断图形是否围绕该轴旋转

1. 准备工作

主要是变量的定义及界面设置

1.1 新建工程,设置ViewController继承自GLKViewController,导入GLKit框架文件,并在storyboard中设置ViewController的class类型为GLKViewController

#import <UIKit/UIKit.h>
#import <GLKit/GLKit.h>
@interface ViewController : GLKViewController

@end

image.png

1.2 设置controller.view的class类型为GLKView

设置controller.view的class类型为GLKView
1.3 导入一张图片资源

导入一张图片资源
1.3 ViewController定义属性

@interface ViewController()
//上下文
@property(nonatomic,strong)EAGLContext *mContext;
//着色器
@property(nonatomic,strong)GLKBaseEffect *mEffect;
//顶点个数
@property(nonatomic,assign)int count;
//旋转的度数
@property(nonatomic,assign)float XDegree;
@property(nonatomic,assign)float YDegree;
@property(nonatomic,assign)float ZDegree;
//是否旋转X,Y,Z
@property(nonatomic,assign) BOOL XB;
@property(nonatomic,assign) BOOL YB;
@property(nonatomic,assign) BOOL ZB;
@end

@implementation ViewController
{
    //定时器
    dispatch_source_t timer;
}
@end

2. viewDidLoad函数

主要创建图层并渲染图形

viewDidLoad函数

2.1 新建图层

//1.新建图层
-(void)setupContext
{
    //1.新建OpenGL ES上下文
    self.mContext = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
    //设置GLKView对象
    GLKView *view = (GLKView *)self.view;
    //GLKView指定context
    view.context = self.mContext;
    //GLKView颜色格式
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    //GLKView深度格式
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    //设置上下文
    [EAGLContext setCurrentContext:self.mContext];
    //开启深度测试
    glEnable(GL_DEPTH_TEST);
}

2.2 渲染图形

//2.渲染图形
-(void)render
{
    //1.顶点数据
    //前3个元素，是顶点数据；后面3个元素，是顶点颜色值，
    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, //顶点
    };
    
    //2.绘图索引数组
    GLuint indices[] =
    {
        0, 3, 2,
        0, 1, 3,
        0, 2, 4,
        0, 4, 1,
        2, 3, 4,
        1, 4, 3,
    };
    
    //计算顶点个数
    self.count = sizeof(indices) /sizeof(GLuint);

    //将顶点数组放入数组缓冲区中 GL_ARRAY_BUFFER
    GLuint buffer;
    glGenBuffers(1, &buffer);
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_STATIC_DRAW);
    
    //将索引数组存储到索引缓冲区 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);
    
    //使用顶点数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, NULL);
    
    //使用颜色数据
    glEnableVertexAttribArray(GLKVertexAttribColor);
    glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, (GLfloat *)NULL + 3);

    //创建着色器effct
    self.mEffect = [[GLKBaseEffect alloc]init];

    //创建投影矩阵,并赋值给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;
    
    //创建模型视图矩阵,并且平移2.0
    GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
    //赋值给effct中的modelviewMatrix
    self.mEffect.transform.modelviewMatrix = modelViewMatrix;
    
    //设置定时器,开启回调
    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调用函数

-(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);
    
    //准备绘制
    [self.mEffect prepareToDraw];
    //使用索引绘制图形
    glDrawElements(GL_TRIANGLES, self.count, GL_UNSIGNED_INT, 0);
}

4. update函数

主要图形的旋转变换

update函数的功能就等同于GLKViewControllerDelegate中的代理方法glkViewControllerUpdate，苹果官方文档针对这部分有详细说明：当你没有实现glkViewControllerUpdate时，可以通过update来实现，也是一样的道理

苹果官方文档介绍glkViewControllerUpdate

//图形的旋转变换
-(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. 按钮点击事件

5.1 在页面上添加 x,y,z按钮

添加x,y,z按钮
5.2 设置按钮点击事件

#pragma mark -XYZClick
- (IBAction)XClick:(id)sender {
    _XB = !_XB;
}
- (IBAction)YClick:(id)sender {
    _YB = !_YB;
}
- (IBAction)ZClick:(id)sender {
    _ZB = !_ZB;
}