1.新建工程
Single-View-App
2.将Main.storyboard中的view改为GLKView
GLKView
3.导入GLKit框架并使ViewController集成于GLKViewController
导入GLKit框架
4.开始进行GLKit具体配置
1.导入OpenGLES模块
@import OpenGLES.ES3;
2.声明上下文以及渲染器(EAGL提供的批次类)
@property(nonatomic, strong) EAGLContext *context;
@property(nonatomic, strong) GLKBaseEffect *baseEffect;
3.设置顶点信息
// 每一行的前面3个是顶点坐标，后面2个是纹理坐标
// 纹理坐标系取值范围[0,1];原点是左下角(0,0);
// 故而(0,0)是纹理图像的左下角, 点(1,1)是右上角.
GLfloat vertexData[] = {
0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
0.5, 0.5, 0.0f, 1.0f, 1.0f, //右上
-0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
0.5, -0.5, 0.0f, 1.0f, 0.0f, //右下
-0.5, 0.5, 0.0f, 0.0f, 1.0f, //左上
-0.5, -0.5, 0.0f, 0.0f, 0.0f, //左下
};
前三个顶点表示(x,y,z), 后两个点表示纹理坐标
4.基本信息的配置
/// 配置基本信息
/// 包括需要 基本容器、基本的上下文、配置基本颜色格式、深度缓冲区精度
- (void)baseConfig {
self.context = [[EAGLContext alloc] initWithAPI:(kEAGLRenderingAPIOpenGLES3)];
[EAGLContext setCurrentContext:self.context];
GLKView *glkView = (GLKView *)self.view;
glkView.delegate = self;
glkView.context = self.context;
glkView.drawableColorFormat = GLKViewDrawableColorFormatSRGBA8888;
glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
glClearColor(0.64, 0.53, 0.73, 1);
}
5.顶点信息相关配置
/// 配置顶点信息
///
- (void)vertexCofnig {
// 1.生成一个缓冲区
GLuint bufferId;
glGenBuffers(1, &bufferId);
// 2.绑定缓冲区
glBindBuffer(GL_ARRAY_BUFFER, bufferId);
// 3.将顶点信息传递到缓冲区中
glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_READ);
// 4.开启顶点通道attribute
glEnableVertexAttribArray(GLKVertexAttribPosition);
// 5.标记顶点的位置
/*
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
*/
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
}
6.纹理信息配置
/// 配置纹理信息
///
- (void)textureConfig {
// 1.标记纹理地址
NSString *filePath = [NSBundle.mainBundle pathForResource:@"xuexiaoban" ofType:@"jpg"];
// 2.设置纹理配置
//
NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft:@(1)};
// 3.加载纹理信息
NSError *error;
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:&error];
self.baseEffect = [[GLKBaseEffect alloc] init];
self.baseEffect.texture2d0.enabled = GL_TRUE;
self.baseEffect.texture2d0.name = textureInfo.name;
// 开启纹理attribute通道
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
// 标记纹理位置
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);
}
7.配置投影矩阵和模型矩阵
/// 配置 投影矩阵 和 模型矩阵
- (void)matrixConfig {
GLfloat aspect = fabs(self.view.bounds.size.width / self.view.bounds.size.height);
/*
GLKit提供了GLKMatrix4MakePerspective方法便捷的生成透视投影矩阵。
方法有4个参数float fovyRadians, float aspect, float nearZ, float farZ。
@param fovyRadians 视角
@param aspect 宽高比
@param nearZ 可视范围在Z轴的起点到原点(0,0,0)的距离
@param farZ 可视范围在Z轴的终点到原点(0,0,0)的距离
*/
GLKMatrix4 projectionMatrix = GLKMatrix4MakePerspective(GLKMathDegreesToRadians(65.0), aspect, 0.1, 100.0);
self.baseEffect.transform.projectionMatrix = projectionMatrix;
GLKMatrix4 modelviewMatrix = GLKMatrix4Translate(GLKMatrix4Identity, 0, 0, -4.0);
self.baseEffect.transform.modelviewMatrix = modelviewMatrix;
}
8.设置代理
@interface ViewController () <GLKViewDelegate>
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect {
// 清空颜色缓冲区
glClear(GL_COLOR_BUFFER_BIT);
// 准备纹理绘制
[self.baseEffect prepareToDraw];
// 设置绘制方式
glDrawArrays(GL_TRIANGLES, 0, 6);
}
9.运行起来吧
图片加载结果
