上一篇文章我们实现了用GLIKit加载一张图片，本篇文章，我们稍微深入点，实现一个立方体贴图+旋转。

效果

设置立方体的顶点坐标

static GLfloat vertexData[] = {
    -0.5f, -0.5f, -0.5f,      0.0f, 0.0f,
    0.5f, -0.5f, -0.5f,      1.0f, 0.0f,
    0.5f, 0.5f, -0.5f,      1.0f, 1.0f,
    0.5f, 0.5f, -0.5f,      1.0f, 1.0f,
    -0.5f, 0.5f, -0.5f,      0.0f, 1.0f,
    -0.5f, -0.5f, -0.5f,      0.0f, 0.0f,
    
    -0.5f, -0.5f, 0.5f,      0.0f, 0.0f,
    0.5f, -0.5f, 0.5f,      1.0f, 0.0f,
    0.5f, 0.5f, 0.5f,      1.0f, 1.0f,
    0.5f, 0.5f, 0.5f,      1.0f, 1.0f,
    -0.5f, 0.5f, 0.5f,      0.0f, 1.0f,
    -0.5f, -0.5f, 0.5f,      0.0f, 0.0f,
    
    -0.5f, 0.5f, 0.5f,      1.0f, 0.0f,
    -0.5f, 0.5f, -0.5f,      1.0f, 1.0f,
    -0.5f, -0.5f, -0.5f,      0.0f, 1.0f,
    -0.5f, -0.5f, -0.5f,      0.0f, 1.0f,
    -0.5f, -0.5f, 0.5f,      0.0f, 0.0f,
    -0.5f, 0.5f, 0.5f,      1.0f, 0.0f,
    
    0.5f, 0.5f, 0.5f,      1.0f, 0.0f,
    0.5f, 0.5f, -0.5f,      1.0f, 1.0f,
    0.5f, -0.5f, -0.5f,      0.0f, 1.0f,
    0.5f, -0.5f, -0.5f,      0.0f, 1.0f,
    0.5f, -0.5f, 0.5f,      0.0f, 0.0f,
    0.5f, 0.5f, 0.5f,      1.0f, 0.0f,
    
    -0.5f, -0.5f, -0.5f,      0.0f, 1.0f,
    0.5f, -0.5f, -0.5f,      1.0f, 1.0f,
    0.5f, -0.5f, 0.5f,      1.0f, 0.0f,
    0.5f, -0.5f, 0.5f,      1.0f, 0.0f,
    -0.5f, -0.5f, 0.5f,      0.0f, 0.0f,
    -0.5f, -0.5f, -0.5f,      0.0f, 1.0f,
    
    -0.5f, 0.5f, -0.5f,      0.0f, 1.0f,
    0.5f, 0.5f, -0.5f,      1.0f, 1.0f,
    0.5f, 0.5f, 0.5f,      1.0f, 0.0f,
    0.5f, 0.5f, 0.5f,      1.0f, 0.0f,
    -0.5f, 0.5f, 0.5f,      0.0f, 0.0f,
    -0.5f, 0.5f, -0.5f,      0.0f, 1.0f
};

属性设置

image.png

配置基本信息

- (void)setupConfig{
    // 使用OpenGLES3
    // EAGLContext是苹果iOS平台下实现OpenGLES渲染层
    self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES3];
    
    // 判断是否创建成功
    if (!self.context) {
        NSLog(@"Create ES context failed");
        return;
    }
    
    // 设置当前上下文
    [EAGLContext setCurrentContext:self.context];
    
    
    // 获取GLKView
    GLKView *glkView = (GLKView *)self.view; // 因为当前VC是继承自`GLKViewController`，所有可以这样直接获取
    glkView.delegate = self;
    
    // 设置`GLKView`的`context`
    glkView.context = self.context;
    
    // 配置视图渲染缓冲区
    glkView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
    
    // 设置背景颜色
    glClearColor(0.5, 0.5, 0.5, 1);
}

配置顶点数据

- (void)setupVertexData{
    // 每一行的前面3个是顶点坐标，后面2个是纹理坐标
    // 纹理坐标系取值范围[0,1];原点是左下角(0,0);
    // 故而(0,0)是纹理图像的左下角, 点(1,1)是右上角.
    
    
    
    /*
     顶点数组: 开发者可以选择设定函数指针，在调用绘制方法的时候，直接由内存传入顶点数据，也就是说这部分数据之前是存储在内存当中的，被称为顶点数组
     顶点缓存区: 性能更高的做法是，提前分配一块显存，将顶点数据预先传入到显存当中。这部分的显存，就被称为顶点缓冲区
     */
    
    // 开辟顶点缓冲区
    // (1) 创建顶点缓冲区标识符ID
    GLuint bufferID;
    glGenBuffers(1, &bufferID); // 开辟1个顶点缓冲区，所以传入1
    NSLog(@"bufferID:%d", bufferID);
    // (2) 绑定顶点缓冲区
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
    // (3) 将顶点数组的数据copy到顶点缓冲区中(GPU显存中)
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);
    
    
    // 打开读取通道
    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); // 第一个纹理坐标前面有3个值，是顶点坐标
    
}

配置纹理

- (void)setupTexture{
    // 获取纹理图片
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"png"];
    
    // 初始化纹理
    NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft: @(1)}; // 纹理坐标原点是左下角,但是图片显示原点应该是左上角
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    
    NSLog(@"textureInfo.name: %d", textureInfo.name);
    
    // 使用苹果`GLKit`提供的`GLKBaseEffect`完成着色器工作(顶点/片元)
    self.baseEffect = [[GLKBaseEffect alloc] init];
    self.baseEffect.texture2d0.enabled = GL_TRUE;
    self.baseEffect.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);
    self.baseEffect.transform.projectionMatrix = projectionMatrix;
}

更新场景

会多次调用该方法

- (void)updateScene{
    _angle = (_angle + 2);
    GLKMatrix4 modelViewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0, 0, -4.0);
    modelViewMatrix = GLKMatrix4Rotate(modelViewMatrix, GLKMathDegreesToRadians(_angle), 0.3, 0.5, 0.7);
    self.baseEffect.transform.modelviewMatrix = modelViewMatrix;
}

实现GLKViewDelegate代理

正方体有6个面，需要12个三角形，每个三角形由三个顶点组成，所以这儿是12x3=36个点

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    // 清除颜色缓冲区、深度缓冲区
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    
    // 开启深度测试
    glEnable(GL_DEPTH_TEST);
    
    [self updateScene];
    
    // 准备绘制
    [self.baseEffect prepareToDraw];
    
    // 开始绘制
    // 从第一个开始，所以是0
    glDrawArrays(GL_TRIANGLES, 0, 48); // 正方体有6个面，需要12个三角形，每个三角形由三个顶点组成，所以这儿是12x3=36个点
}

Demo