OpenGL ES案例04_2-GLKit使用索引绘图

本案例的主要目的是理解GLKit中的索引绘图。案例的执行效果如下:


GLKit使用索引绘图效果图

整个案例的流程如下:


image.png

准备工作

  1. 新建一个iOS工程。
  2. 修改ViewController的继承关系,使其继承于GLKViewController。
  3. 修改self.view的继承关系,使其继承于GLKView。
  4. 定义全局变量。

绘制图形

绘制图形主要通过两个函数来实现

  1. viewDidLoad在该函数里面进行初始化,数据传递等操作;
  2. GLKViewDelegate代理方法,在该函数中完成使用索引绘制;

viewDidLoad函数

  1. 设置图层
    新建一个图层,用于承载将要绘制的图形。创建一个上下文,用于保存当前绘制环境的状态。
-(void)setupContext{
    self.mContext = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    GLKView *view = (GLKView *)self.view;
    view.context = self.mContext;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    
    [EAGLContext setCurrentContext:self.mContext];
    glEnable(GL_DEPTH_TEST);
}
  1. 设置顶点数据
    根据图形最终成像得到顶点坐标。
    将顶点数据从CPU拷贝至GPU。
-(void)setupVertexData{
    //1.顶点数据
    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, //顶点
    };
    //将顶点数组放入数组缓冲区中 GL_ARRAY_BUFFER
    GLuint buffer;
    glGenBuffers(1, &buffer);
    glBindBuffer(GL_ARRAY_BUFFER, buffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_STATIC_DRAW);
    
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, 6*sizeof(GLfloat), NULL);
    
    glEnableVertexAttribArray(GLKVertexAttribColor);
    glVertexAttribPointer(GLKVertexAttribColor, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 6, (GLfloat *)NULL + 3);
}
  1. 设置顶点索引
    定义顶点索引数组,并将顶点索引数组从CPU传递给GPU
-(void)setupIndicesData{
    //1.绘图索引
    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_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);
}
  1. 渲染图形
    4.1 初始化effect着色器。GLKit中的effect就类似于OpenGL中的固定着色器,简单的绘制可以通过其实现,如果过于复杂,就需要GLSL自定义着色器了。
    4.2 设置一个投影矩阵,并将该矩阵赋值给effect中transform对应的projectionMatrix参数。
    4.3 设置一个模型视图矩阵,并将该矩阵赋值给effect中transform对应的modelviewMatrix参数。
    当图形发生变换如旋转、平移、缩放时,GLKit会帮我们完成相应的运算,开发者只需要往对应的变量赋值即可。
-(void)render{
    self.mEffect = [[GLKBaseEffect alloc] init];
    //投影视图
    CGSize size = self.view.bounds.size;
    float aspect = fabs(size.width / size.height);
    GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(90.0), aspect, 0.1f, 100.0f);
    projectionMatrix = GLKMatrix4Scale(projectionMatrix, 1.0f, 1.0f, 1.0f);
    self.mEffect.transform.projectionMatrix = projectionMatrix;
    
    GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0.0f, 0.0f, -2.0f);
    self.mEffect.transform.modelviewMatrix = modelViewMatrix;
}
  1. 启动定时器
    使用GCD创建一个定时器,在定时器的回调中设置x、y、z旋转的度数,系统自动调用GlKViewDelegate和GLKViewControllerDelegate的代码方法实现绘制和旋转操作。
-(void)startTimer{
    double second = 0.1;
    self.timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, dispatch_get_main_queue());
    dispatch_source_set_timer(self.timer, DISPATCH_TIME_NOW, second * NSEC_PER_SEC, 0.0);
    dispatch_source_set_event_handler(self.timer, ^{
        self.XDegree += 0.1f * self.XB;
        self.YDegree += 0.1f * self.YB;
        self.ZDegree += 0.1f * self.ZB ;
        
    });
    dispatch_resume(self.timer);
}

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);
}

实现定时旋转

定时旋转通过update函数实现,update函数的功能就等同于GLKViewControllerDelegate中的代理方法glkViewControllerUpdate(_:),苹果官方文档针对这部分有详细说明:当你没有实现glkViewControllerUpdate(_:)时,可以通过update来实现,也是一样的道理,附上GLKitViewController官方说明。
在update函数中主要是根据按钮的点击事件,判断是否围绕某个轴旋转,且在定时器方法中根据bool值设置旋转度数,最后在update函数中更改模型视图矩阵,系统调用代理方法重新绘制,表现为效果图中图形的旋转。

-(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;
}

通过按钮指定旋转方向

主要功能就是图形是否围绕x、y、z轴旋转,对常见的bool变量进行取反。

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

完整代码见Demo地址

你可能感兴趣的:(OpenGL ES案例04_2-GLKit使用索引绘图)