OpenGL ES 案例 - 正方体的渲染+旋转

效果如下图

旋转效果.gif

使用GLKit实现正方体的渲染+旋转

• 主要分3个部分：
  1. OpenGL ES 的相关初始化
  2. 设置顶点/纹理坐标数据
  3. 添加CADisplayLink使正方体动起来

示例代码

1.viewDidLoad方法

- (void)viewDidLoad {
    [super viewDidLoad];

    // 初始化
    [self setUpConfig];
    
    // 加载顶点数据/纹理坐标数据
    [self setUpVertexData];
    
    // 加载纹理
    [self setUpTexture];
    
    [self addCADisplayLink];
}

2.OpenGL ES相关初始化

- (void)setUpConfig{
    
    context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    if (!context) {
        NSLog(@"Create ES context Failed");
    }
    
    [EAGLContext setCurrentContext:context];
    
    GLKView *view = (GLKView *)self.view;
    view.context = context;
    
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat16;
    
    glClearColor(1, 0, 0, 1);
    
    
}

3.加载顶点/纹理坐标数据

- (void)setUpVertexData{
    //1.设置顶点数组(顶点坐标,纹理坐标)
    /*
     纹理坐标系取值范围[0,1];原点是左下角(0,0);
     故而(0,0)是纹理图像的左下角, 点(1,1)是右上角.
     */
    GLfloat vertexData[] = {

        // 前
        -0.5,0.5,0.5,        0,1,
        -0.5,-0.5,0.5,       0,0,
        0.5,0.5,0.5,         1,1,
        -0.5,-0.5,0.5,       0,0,
        0.5,0.5,0.5,         1,1,
        0.5,-0.5,0.5,        1,0,

        // 上
        0.5,0.5,0.5,         1,1,
        -0.5,0.5,0.5,        0,1,
        0.5,0.5,-0.5,        1,0,
        -0.5,0.5,0.5,        0,1,
        0.5,0.5,-0.5,        1,0,
        -0.5,0.5,-0.5,       0,0,

        // 下
        0.5,-0.5,0.5,         1,1,
        -0.5,-0.5,0.5,        0,1,
        0.5,-0.5,-0.5,        1,0,
        -0.5,-0.5,0.5,        0,1,
        0.5,-0.5,-0.5,        1,0,
        -0.5,-0.5,-0.5,       0,0,

        // 左
        -0.5,0.5,0.5,         1,1,
        -0.5,-0.5,0.5,        0,1,
        -0.5,0.5,-0.5,        1,0,
        -0.5,-0.5,0.5,        0,1,
        -0.5,0.5,-0.5,        1,0,
        -0.5,-0.5,-0.5,       0,0,

        // 右
        0.5,0.5,0.5,         1,1,
        0.5,-0.5,0.5,        0,1,
        0.5,0.5,-0.5,        1,0,
        0.5,-0.5,0.5,        0,1,
        0.5,0.5,-0.5,        1,0,
        0.5,-0.5,-0.5,       0,0,

        // 后
        -0.5,0.5,-0.5,       0,1,
        -0.5,-0.5,-0.5,      0,0,
        0.5,0.5,-0.5,        1,1,
        -0.5,-0.5,-0.5,      0,0,
        0.5,0.5,-0.5,        1,1,
        0.5,-0.5,-0.5,       1,0,

    };

    
    //2.开辟顶点缓存区
    //(1).创建顶点缓存区标识符ID
    GLuint bufferID;
    glGenBuffers(1, &bufferID);
    // (2).绑定顶点缓存区.(明确作用)
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
    // (3).将顶点数组的数据copy到顶点缓存区中(GPU显存中)
    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
      */
    
    //顶点坐标数据
    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);
    
}

4.加载纹理数据

- (void)setUpTexture {
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"timg" ofType:@"jpeg"];
    
    // 设置纹理参数
    // 纹理坐标原点是左下角,但是图片显示原点应该是左上角.
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];
    
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    
    // 使用苹果GLKit 提供GLKBaseEffect 完成着色器工作(顶点/片元)
    cEffect = [[GLKBaseEffect alloc] init];
    cEffect.texture2d0.enabled = GL_TRUE;
    cEffect.texture2d0.name = textureInfo.name;
    
}

5. GLKViewDelegate 的 drawInRect 方法

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
    glEnable(GL_DEPTH_TEST);
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    [cEffect prepareToDraw];
    
    glDrawArrays(GL_TRIANGLES, 0, 36);
    
}

6. 使立方体动起来

-(void) addCADisplayLink{
   
    self.angle = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)update {
   
    //1.计算旋转度数
    self.angle = (self.angle + 5) % 360;
    //2.修改baseEffect.transform.modelviewMatrix
    cEffect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(self.angle), 0.3, 1, -0.5);
    //3.重新渲染
    GLKView *view = (GLKView *)self.view;

    [view display];
}

使用CoreAnimation实现正方体的渲染+旋转

示例代码

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];

    [self setUpConfig];

    [self addCADisplayLink];
}

- (void)setUpConfig{

    layerView = [[UIView alloc] initWithFrame: self.view.bounds];
    layerView.backgroundColor = [UIColor redColor];
    layerView.center = self.view.center;
    [self.view addSubview:layerView];
    
    for (NSInteger i = 0; i < 6; i++) {
        UIImageView * imgV = [[UIImageView alloc] init];
        imgV.image = [UIImage imageNamed:@"timg.jpeg"];
        imgV.frame = CGRectMake(0, 0, 200, 200);
        [self.views addObject:imgV];
    }

    
    CATransform3D perspective = CATransform3DIdentity;
    perspective.m34 = -1.0 / 500.0;
    layerView.layer.sublayerTransform = perspective;
    // 1
    CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);
    [self addFace:0 withTransform:transform];
    // 2
    transform = CATransform3DMakeTranslation(100, 0, 0);
    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
    [self addFace:1 withTransform:transform];
    // 3
    transform = CATransform3DMakeTranslation(0, -100, 0);
    transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
    [self addFace:2 withTransform:transform];
    // 4
    transform = CATransform3DMakeTranslation(0, 0, -100);
    transform = CATransform3DRotate(transform, M_PI_2, 0, 0, 1);
    [self addFace:3 withTransform:transform];
    // 5
    transform = CATransform3DMakeTranslation(-100, 0, 0);
    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
    [self addFace:4 withTransform:transform];
    // 6
    transform = CATransform3DMakeTranslation(0, 100, 0);
    transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
    [self addFace:5 withTransform:transform];
    
}

- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform{

    UIImageView *face = self.views[index];
    [layerView addSubview:face];

    CGSize containerSize = layerView.bounds.size;
    face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);
    face.layer.transform = transform;
}

-(void) addCADisplayLink{
   
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)update {
   
    //1.计算旋转度数
    static CGFloat angle = 1.0f;

    CATransform3D transform3d = layerView.layer.sublayerTransform;
    transform3d = CATransform3DRotate(transform3d, angle/180.0f*M_PI, 0.0f, 1.0f, 0.0f);
        layerView.layer.sublayerTransform = transform3d;
}

- (NSMutableArray *)views {
    if (!_views) {
        _views = [NSMutableArray array];
    }
    return _views;
}