用GLKit写出旋转的效果

作者: 黑眼豆豆_ | 来源:发表于2020-07-27 21:59 被阅读0次

GLKit

GLKit 框架的设计⽬标是为了简化基于OpenGL / OpenGL ES 的应⽤开发。它的出现加快OpenGL ES或OpenGL应⽤程序开发。使⽤数学库，背景纹理加载，预先创建的着⾊器效果，以及标准视图和视图控制器来实现渲染循环。
GLKit框架提供了功能和类，可以减少创建新的基于着⾊器的应⽤程序所需的⼯作量，或者⽀持依赖早期版本的OpenGL ES或OpenGL提供的固定函数顶点或⽚段处理的现有应⽤程序。

GLKView 提供绘制场所(View)
GLKViewController(扩展于标准的UIKit 设计模式. ⽤于绘制视图内容的管理与呈现)

接下来，我们用一个小Demo来认识一下GLKit。首先看下效果:

屏幕录制2020-07-27下午8.57.33.gif

流程

下图为绘制一个图形的流程

首先初始化上下文
设置顶点坐标，并放入顶点缓冲区
设置纹理
最后绘制

流程图.png

准备工作

导包

//GLKit 库
#import <GLKit/GLKit.h>
//OpenGL库
#import <OpenGLES/ES3/glext.h>
#import <OpenGLES/ES3/gl.h>

定义变量

    //上下文
    EAGLContext *context;    
    //⼀种简单光照/着⾊系统,⽤于基于着⾊器OpenGL 渲染
    GLKBaseEffect *cEffect;
    //旋转角度
    int angle;

设置控制器为GLKViewController

@interface ViewController : GLKViewController

viewDidLoad

viewDidLoad方法如下:

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    //1.初始化GLKView和上下文
    [self setUpConfig];
    //2.初始化顶点
    [self setUpVertexData];
    //3.渲染
    [self setUpTexture];  
}

setUpConfig

初始化EAGLContext

   context = [[EAGLContext alloc] initWithAPI:(kEAGLRenderingAPIOpenGLES3)];
   if (!context) {
       NSLog(@"创建失败!");
   }

其中kEAGLRenderingAPIOpenGLES3是一个枚举值，有

typedef NS_ENUM(NSUInteger, EAGLRenderingAPI)
{
    kEAGLRenderingAPIOpenGLES1 = 1,
    kEAGLRenderingAPIOpenGLES2 = 2,
    kEAGLRenderingAPIOpenGLES3 = 3,
};

这3种类型，大家可以任意选择。

绑定当前上下文，在一个项目中，我们可以有多个上下文，但是我们需要设置当前的上下文。

//设置当前上下文
[EAGLContext setCurrentContext:context];

设置GLKView
由于我们项目中用的StoryBoard,所以我们将view设置为GLKView,如图：

设置GLKView.png

代码如下:

    //设置GLKView,将self.view转为GLKView
    GLKView *view = (GLKView *)self.view;
    //将上下文存入view.context
    view.context = context;
    //设置颜色缓冲区
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    //设置深度缓冲区
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    glClearColor(0, 0, 0, 1);

颜色缓冲区有3个值GLKViewDrawableColorFormatRGBA8888,GLKViewDrawableColorFormatRGB565,GLKViewDrawableColorFormatSRGBA8888
深度缓冲区有3个值GLKViewDrawableDepthFormatNone,GLKViewDrawableDepthFormat16,GLKViewDrawableDepthFormat24，数字越大，表示精度越大，越精确，但是也意味着更消耗性能。

setUpConfig整体代码如下:

//1.初始化
-(void)setUpConfig{
    //初始化上下文
    context = [[EAGLContext alloc] initWithAPI:(kEAGLRenderingAPIOpenGLES3)];
    if (!context) {
        NSLog(@"创建失败!");
    }
    
    //设置当前上下文
    [EAGLContext setCurrentContext:context];
    
    //设置GLKView
    GLKView *view = (GLKView *)self.view;
    view.context = context;
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    glClearColor(0, 0, 0, 1);
}

setUpVertexData

设置顶点
我们用一个金字塔形状的顶点。

GLfloat vertexData[] = {
        //金字塔前面
        0.0f, 1.0f, 0.0f,   0.5f, 1.0f, 
        -1.0f, -1.0f, 1.0f,  0.0f, 0.0f, 
         1.0f, -1.0f, 1.0f,   1.0f, 0.0f, 
          //金字塔左边
        0.0f, 1.0f, 0.0f,    0.5f, 1.0f, 
        -1.0f,  -1.0f, -1.0f,    1.0f, 0.0f, 
        -1.0f, -1.0f, 1.0f,  0.0f, 0.0f, 

        //金字塔右边
        0.0f, 1.0f, 0.0f,    0.5f, 1.0f, 
        1.0f, -1.0f, 1.0f,    1.0f, 0.0f, 
        1.0f,  -1.0f, -1.0f,  0.0f, 0.0f, 
        //金字塔后边
        0.0f, 1.0f, 0.0f,  0.5f, 1.0f,
        1.0f,  -1.0f, -1.0f , 0.0f, 0.0f,
        -1.0f,  -1.0f, -1.0f,1.0f, 0.0f
    };

可以看到，我们一行有5条数据，这是为什么呢？
因为，我们顶点数组不仅仅包括顶点数据，还包括了纹理数据，所以一般情况下，我们的顶点数据和纹理坐标都用一个数组来包括。每行前面3条数据为顶点数据，后面2条为纹理坐标。

创建顶点缓冲区

//创建顶点缓冲区
    GLuint bufferId; 
    //其中1表示纹理的个数
    glGenBuffers(1, &bufferId);

绑定顶点缓冲区

    //绑定顶点缓冲区（存数组）
    //GL_ARRAY_BUFFER表示数据以数组的形式绑定
    glBindBuffer(GL_ARRAY_BUFFER, bufferId);

将顶点数据copy到顶点缓冲区

    //将顶点数据copy到顶点缓冲区  GL_STATIC_DRAW表示用来绘制
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

开启通道

 //3.打开读取通道.
     /*
      (1)在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的.
      意味着,顶点数据在着色器端(服务端)是不可用的. 即使你已经使用glBufferData方法,将顶点数据从内存拷贝到顶点缓存区中(GPU显存中).
      所以, 必须由glEnableVertexAttribArray 方法打开通道.指定访问属性.才能让顶点着色器能够访问到从CPU复制到GPU的数据.
      注意: 数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
    
     (2)方法简介
     glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
    
     功能: 上传顶点数据到显存的方法（设置合适的方式从buffer里面读取数据）
     参数列表:
         index,指定要修改的顶点属性的索引值,例如
         size, 每次读取数量。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a）,纹理则是2个.）
         type,指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
         normalized,指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
         stride,指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
         ptr指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0
      */
    
    //vertexData  有2种数据   1个是顶点数据，2个是纹理数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);//开启通道
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
    
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);

在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的，所以我们要打开通道glEnableVertexAttribArray,GLKVertexAttribPosition表示顶点数据，GLKVertexAttribTexCoord0表示纹理数据

   //参数1表示是设置顶点数据还是纹理数据
   //参数2表示每次读取的数量，由于是顶点数据，所以用3
   //参数3表示数据的类型，我们用GL_FLOAT
   //参数4表示指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE），我们一般用GL_FALSE
  //参数5指定连续顶点属性之间的偏移量。因为，在上面的数组中，包括了顶点坐标和纹理坐标，所以第一次读完后，下一次要读新的顶点要移动5次，所以用sizeof(GLfloat) * 5
  //参数6表示读取的起始位。
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);

纹理坐标的读取方式和顶点坐标一致，看上面的代码即可。
setUpVertexData完整代码如下:

//2.
-(void)setUpVertexData{
    //1.设置顶点数组(顶点坐标,纹理坐标)
    /*
     纹理坐标系取值范围[0,1];原点是左下角(0,0);
     故而(0,0)是纹理图像的左下角, 点(1,1)是右上角.
     */
    //前面3个是顶点坐标，后面2个是纹理坐标
    GLfloat vertexData[] = {
        //金字塔前面
        0.0f, 1.0f, 0.0f,   0.5f, 1.0f, //右下
        -1.0f, -1.0f, 1.0f,  0.0f, 0.0f, //右上
         1.0f, -1.0f, 1.0f,   1.0f, 0.0f, //左上
          //金字塔左边
        0.0f, 1.0f, 0.0f,    0.5f, 1.0f, //右下
        -1.0f,  -1.0f, -1.0f,    1.0f, 0.0f, //左上
        -1.0f, -1.0f, 1.0f,  0.0f, 0.0f, //左下

        //金字塔右边
        0.0f, 1.0f, 0.0f,    0.5f, 1.0f, //右下
        1.0f, -1.0f, 1.0f,    1.0f, 0.0f, //左上
        1.0f,  -1.0f, -1.0f,  0.0f, 0.0f, //左下

        //金字塔后边
        0.0f, 1.0f, 0.0f,  0.5f, 1.0f,
        1.0f,  -1.0f, -1.0f , 0.0f, 0.0f,
        -1.0f,  -1.0f, -1.0f,1.0f, 0.0f


    };
    
//    GLfloat vertexData[] = {
//
//
//        //面向我们第一面:
//        -0.5, -0.5, 0.5,     0.0,0.0,
//        0.5, -0.5, 0.5,      1.0,0.0,
//        0.5, 0.5, 0.5,       1.0,1.0,
//        0.5, 0.5, 0.5,       1.0,1.0,
//        -0.5, 0.5, 0.5,      0.0,1.0,
//        -0.5, -0.5, 0.5,     0.0,0.0,
//
//        //背后的那面
//        0.5, -0.5, -0.5,     0.0,0.0,
//        -0.5, -0.5, -0.5,    1.0,0.0,
//        -0.5, 0.5, -0.5,     1.0,1.0,
//        -0.5, 0.5, -0.5,     1.0,1.0,
//        0.5, 0.5, -0.5,      0.0,1.0,
//        0.5, -0.5, -0.5,     0.0,0.0,
//
//        //左边的那面
//        -0.5, -0.5, -0.5,    0.0,0.0,
//        -0.5, -0.5, 0.5,     1.0,0.0,
//        -0.5, 0.5, 0.5,      1.0,1.0,
//        -0.5, 0.5, 0.5,      1.0,1.0,
//        -0.5, 0.5, -0.5,     0.0,1.0,
//        -0.5, -0.5,-0.5,     0.0,0.0,
//
//        //右边那面
//        0.5, -0.5, 0.5,      0.0,0.0,
//        0.5, -0.5, -0.5,     1.0,0.0,
//        0.5,  0.5, -0.5,     1.0,1.0,
//        0.5,  0.5, -0.5,     1.0,1.0,
//        0.5, 0.5, 0.5,       0.0,1.0,
//        0.5, -0.5,0.5,       0.0,0.0,
//
//        //顶上那面
//        -0.5, 0.5, 0.5,      0.0,0.0,
//        0.5, 0.5, 0.5,       1.0,0.0,
//        0.5, 0.5, -0.5,      1.0,1.0,
//        0.5, 0.5, -0.5,      1.0,1.0,
//        -0.5, 0.5, -0.5,     0.0,1.0,
//        -0.5, 0.5, 0.5,      0.0,0.0,
//
//        //底下那面
//        -0.5, -0.5, -0.5,    0.0,0.0,
//        0.5, -0.5, -0.5,     1.0,0.0,
//        0.5, -0.5, 0.5,      1.0,1.0,
//        0.5, -0.5, 0.5,      1.0,1.0,
//        -0.5, -0.5, 0.5,     0.0,1.0,
//        -0.5, -0.5, -0.5,    0.0,0.0,
//
//
//    };
    
    //创建顶点缓冲区
    GLuint bufferId;
    glGenBuffers(1, &bufferId);
    
    //绑定顶点缓冲区（存数组）
    glBindBuffer(GL_ARRAY_BUFFER, bufferId);
    
    //将顶点数据copy到顶点缓冲区  GL_STATIC_DRAW绘制
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    
    //3.打开读取通道.
     /*
      (1)在iOS中, 默认情况下，出于性能考虑，所有顶点着色器的属性（Attribute）变量都是关闭的.
      意味着,顶点数据在着色器端(服务端)是不可用的. 即使你已经使用glBufferData方法,将顶点数据从内存拷贝到顶点缓存区中(GPU显存中).
      所以, 必须由glEnableVertexAttribArray 方法打开通道.指定访问属性.才能让顶点着色器能够访问到从CPU复制到GPU的数据.
      注意: 数据在GPU端是否可见，即，着色器能否读取到数据，由是否启用了对应的属性决定，这就是glEnableVertexAttribArray的功能，允许顶点着色器读取GPU（服务器端）数据。
    
     (2)方法简介
     glVertexAttribPointer (GLuint indx, GLint size, GLenum type, GLboolean normalized, GLsizei stride, const GLvoid* ptr)
    
     功能: 上传顶点数据到显存的方法（设置合适的方式从buffer里面读取数据）
     参数列表:
         index,指定要修改的顶点属性的索引值,例如
         size, 每次读取数量。（如position是由3个（x,y,z）组成，而颜色是4个（r,g,b,a）,纹理则是2个.）
         type,指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT, GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。
         normalized,指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE）或者直接转换为固定点值（GL_FALSE）
         stride,指定连续顶点属性之间的偏移量。如果为0，那么顶点属性会被理解为：它们是紧密排列在一起的。初始值为0
         ptr指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0
      */
    
    //vertexData  有2种数据   1个是顶点数据，2个是纹理数据
    glEnableVertexAttribArray(GLKVertexAttribPosition);//开启通道
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
    
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);
}

setUpTexture

    //读取文件路径
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"jay" ofType:@"jpg"];
    //设置纹理的参数(由于纹理坐标原点是左下角，而图片显示原点是左上角，需要需要进行转换)
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];
    //初始化textureInfo
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];  
    //初始化GLKBaseEffect
    cEffect = [[GLKBaseEffect alloc] init];
    cEffect.texture2d0.enabled = GL_TRUE;
    //将textureInfo存入到cEffect
    cEffect.texture2d0.name = textureInfo.name;

由于是一个立体图形，所以我们要使用透视投影

    //设置透视投影矩阵
    CGFloat aspect = fabs(self.view.bounds.size.width / self.view.bounds.size.height);
    GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0), aspect, 0.1, 100.0);
    cEffect.transform.projectionMatrix = projectionMatrix;

setUpTexture完整代码如下:

-(void)setUpTexture{
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"jay" ofType:@"jpg"];
    
    //设置纹理的参数
    //纹理坐标原点：左下角   图片显示原点：左上角
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    cEffect = [[GLKBaseEffect alloc] init];
    cEffect.texture2d0.enabled = GL_TRUE;
    cEffect.texture2d0.name = textureInfo.name;
    
    //设置透视投影矩阵
    CGFloat aspect = fabs(self.view.bounds.size.width / self.view.bounds.size.height);
    GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0), aspect, 0.1, 100.0);
    cEffect.transform.projectionMatrix = projectionMatrix;   
}

GLKViewDelegate

最后使用代理进行绘制，GLKView必须要实现drawInRect这个代理方法。

#pragma -mark GLKViewDelegate
-(void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    //开启深度测试
    glEnable(GL_DEPTH_TEST);
    //清除颜色和深度缓冲区的缓存
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // 更新旋转
    [self updateAngle];
     //准备绘制
    [cEffect prepareToDraw];
    //开始绘制，所有顶点以GL_TRIANGLES的方式连接
    glDrawArrays(GL_TRIANGLES, 0, 12);
    
}

- (void)updateAngle {
    angle = (angle + 2) % 360;
    GLKMatrix4 modelviewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0, 0, -4.0);
    modelviewMatrix = GLKMatrix4Rotate(modelviewMatrix, GLKMathDegreesToRadians(angle), 0.3, 0.5, 0.7);
    c

用GLKit写出旋转的效果

GLKit

流程

准备工作

viewDidLoad

setUpConfig

setUpVertexData

setUpTexture

GLKViewDelegate

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

OpenGL & Metal