OpenGL ES案例 - 立方体贴图旋转

1.创建OpenGL上下文

// 创建上下文
EAGLContext *context = [[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
// 设置为 当前上下文
[EAGLContext setCurrentContext:context];

2.初始化GLKView

CGRect frame = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width);
self.glkView = [[GLKView alloc]initWithFrame:frame context:context];
self.glkView.delegate = self;
self.glkView.backgroundColor = [UIColor clearColor];
[self.view addSubview:self.glkView];
    
// glkView 深度测试精度
self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
// 深度缓冲区的范围
glDepthRangef(1, 0);

3.获取图片纹理信息

// 图片地址
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"timg1.jpg" ofType:@""];
UIImage *image = [UIImage imageWithContentsOfFile:filePath];
    
// 图片变成纹理（位图），获取纹理信息TextureInfo
// 纹理坐标的原点是在左下角，而图片显示的原点在左上，这里需要进行调整，以免渲染出来的结果是倒的
NSDictionary *dic = @{GLKTextureLoaderOriginBottomLeft:@(YES)};
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:[image CGImage] options:dic error:nil];

4.初始化着色器

// effect 着色器
self.baseEffect = [[GLKBaseEffect alloc]init];
self.baseEffect.texture2d0.name = textureInfo.name;
self.baseEffect.texture2d0.target = textureInfo.target;
    
// 添加光照
self.baseEffect.light0.enabled = YES;
self.baseEffect.light0.diffuseColor = GLKVector4Make(1, 1, 1, 1); // 漫反射颜色
self.baseEffect.light0.position = GLKVector4Make(-0.5, -0.5, 5, 1); // 光照位置

5.顶点&纹理坐标，法线数据

// 开辟顶点数据空间(数据结构SenceVertex 大小 * 顶点个数kCoordCount)
self.vertices = malloc(sizeof(VertexData) * kCoordCount);

// 前面
self.vertices[0] = (VertexData){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};
self.vertices[1] = (VertexData){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
self.vertices[2] = (VertexData){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
self.vertices[3] = (VertexData){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
self.vertices[4] = (VertexData){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
self.vertices[5] = (VertexData){{0.5, -0.5, 0.5}, {1, 0}, {0, 0, 1}};

// 上面
self.vertices[6] = (VertexData){{0.5, 0.5, 0.5}, {1, 1}, {0, 1, 0}};
self.vertices[7] = (VertexData){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
self.vertices[8] = (VertexData){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
self.vertices[9] = (VertexData){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
self.vertices[10] = (VertexData){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
self.vertices[11] = (VertexData){{-0.5, 0.5, -0.5}, {0, 0}, {0, 1, 0}};

// 下面
self.vertices[12] = (VertexData){{0.5, -0.5, 0.5}, {1, 1}, {0, -1, 0}};
self.vertices[13] = (VertexData){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
self.vertices[14] = (VertexData){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
self.vertices[15] = (VertexData){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
self.vertices[16] = (VertexData){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
self.vertices[17] = (VertexData){{-0.5, -0.5, -0.5}, {0, 0}, {0, -1, 0}};

// 左面
self.vertices[18] = (VertexData){{-0.5, 0.5, 0.5}, {1, 1}, {-1, 0, 0}};
self.vertices[19] = (VertexData){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
self.vertices[20] = (VertexData){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
self.vertices[21] = (VertexData){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
self.vertices[22] = (VertexData){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
self.vertices[23] = (VertexData){{-0.5, -0.5, -0.5}, {0, 0}, {-1, 0, 0}};

// 右面
self.vertices[24] = (VertexData){{0.5, 0.5, 0.5}, {1, 1}, {1, 0, 0}};
self.vertices[25] = (VertexData){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
self.vertices[26] = (VertexData){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
self.vertices[27] = (VertexData){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
self.vertices[28] = (VertexData){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
self.vertices[29] = (VertexData){{0.5, -0.5, -0.5}, {0, 0}, {1, 0, 0}};

// 后面
self.vertices[30] = (VertexData){{-0.5, 0.5, -0.5}, {0, 1}, {0, 0, -1}};
self.vertices[31] = (VertexData){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
self.vertices[32] = (VertexData){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
self.vertices[33] = (VertexData){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
self.vertices[34] = (VertexData){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
self.vertices[35] = (VertexData){{0.5, -0.5, -0.5}, {1, 0}, {0, 0, -1}};

6.将顶点数据从内存Copy到帧缓冲区

// 数据copy到帧缓冲区
// 分配
glGenBuffers(1, &_vertexBuffer);
// 绑定
glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
glBufferData(GL_ARRAY_BUFFER, sizeof(VertexData) * 36, self.vertices, GL_STREAM_DRAW);

// 10.把数据从帧缓冲区 读取到GLKit中的着色器
// 顶点数据
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData), NULL+offsetof(VertexData, positionCoord));

// 纹理
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(VertexData), NULL+offsetof(VertexData, textureCoord));

// 法线
glEnableVertexAttribArray(GLKVertexAttribNormal);
glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(VertexData), NULL+offsetof(VertexData, normal));

7.添加定时器

// 添加定时器
- (void)addCADisplayLink{
    self.angle = 0;
    self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(timeUpdate)];
    [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
}

- (void)timeUpdate{
    // 1.计算旋转的角度
    self.angle = (self.angle + 1) % 360;
    //  渲染 会调用到代理中
    [self.glkView display];
}

8.代理方法进行渲染

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
    
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    // 打开深度测试
    glEnable(GL_DEPTH_TEST);
    // 准备渲染
    [self.baseEffect prepareToDraw];
    
    // 旋转
    GLKMatrix4 modelviewMatrix = GLKMatrix4Rotate(GLKMatrix4Identity, GLKMathDegreesToRadians(self.angle), 0.3, 0.4, 0.7);
    self.baseEffect.transform.modelviewMatrix = modelviewMatrix;
    
    // 正式绘制，
    //三角形绘制方式/从0顶点开始/顶点数
    glDrawArrays(GL_TRIANGLES, 0, kCoordCount);
}