OpenGL ES案例 - 立方体贴图旋转
2020-08-14 本文已影响0人
MrDemon_
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);
}
