上一篇文章我们实现了用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个点
}
