OpenGL ES绘制图片

效果图

首先我们需要创建一个日常项目的新工程
然乎需要在ViewController文件中导入需要的头文件,并且修改继承文件



同时我们不要忘记xib也需要设置



第一步我们需要设置背景色,需要初始化EAGLContext对象,它是管理OpenGL ES渲染上下文,若想使用OpenGL ES 进行绘制工作,则必须一个上下文对象.

第一步我们需要设置背景色,需要初始化EAGLContext对象,它是管理OpenGL ES渲染上下文,若想使用OpenGL ES 进行绘制工作,则必须一个上下文对象.

- (nullable instancetype) initWithAPI:(EAGLRenderingAPI) api;- (nullable instancetype) initWithAPI:(EAGLRenderingAPI) api sharegroup:(EAGLSharegroup*) sharegroup NS_DESIGNATED_INITIALIZER; 
参数:
api 表示将要使用的OpenGL ES 版本. kEAGLRenderingAPIOpenGLES3 表示使用3.0
sharegroup 对象管理与一个或多个EAGLContext对象关联的OpenGL ES资源,若不指定或值为NULL则创建新的对象,当资源需要被共享时再使用它.

设置上下文

绑定一个全局的上下文对象. 注意: 1, 需要手动对该对象强引用,否则将会被释放. 2, 该对象线程不安全, 使用时应防止同时从多个线程访问同一个上下文对象

+ (BOOL)setCurrentContext:(nullable EAGLContext*) context;
  //2.获取GLKView & 设置context
    GLKView *view =(GLKView *) self.view;
view.context = context;
 //3.配置视图创建的渲染缓存区.
    view.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat16;
    
    //4.设置背景颜色
    glClearColor(1, 0, 0, 1.0);

这样我们就设置了背景色,图片是由两个三角形组成,那么在这个基础上我们开始绘制图片,可以分为5步
1.设置顶点数组(顶点坐标,纹理坐标)
2.开辟顶点缓存区
3.打开读取通道
4.获取纹理图片路径
5.设置纹理
6.绘制图片

纹理坐标系取值范围【0,1】;远点是左下角(0,0)。设置顶点数组之后,我们开辟顶点缓存区,,并且进行绑定,最后将数据copy GPU显存中。

  //2.开辟顶点缓存区
    //(1).创建顶点缓存区标识符ID
    GLuint bufferID;
    glGenBuffers(1, &bufferID);
    //(2).绑定顶点缓存区.(明确作用)
    glBindBuffer(GL_ARRAY_BUFFER, bufferID);
    //(3).将顶点数组的数据copy到顶点缓存区中(GPU显存中)
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertexData), vertexData, GL_STATIC_DRAW);

虽然我们将数据保存到显存中,但是在iOS中, 默认情况下,出于性能考虑,所有顶点着色器的属性(Attribute)变量都是关闭的. 意味着,顶点数据在着色器端(服务端)是不可用的. 即使你已经使用glBufferData方法,将顶点数据从内存拷贝到顶点缓存区中(GPU显存中).
所以, 必须由glEnableVertexAttribArray 方法打开通道.指定访问属性.才能让顶点着色器能够访问到从CPU复制到GPU的数据.

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
然后我们需要获取图片路径进行纹理的设置,并使用苹果GLKit 提供

GLKBaseEffect 完成着色器工作

//1.获取纹理图片路径
    NSString *filePath = [[NSBundle mainBundle]pathForResource:@"kunkun" ofType:@"jpg"];
    
    //2.设置纹理参数
    //纹理坐标原点是左下角,但是图片显示原点应该是左上角.
    NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];
    
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
    
    //3.使用苹果GLKit 提供GLKBaseEffect 完成着色器工作(顶点/片元)
    cEffect = [[GLKBaseEffect alloc]init];
    cEffect.texture2d0.enabled = GL_TRUE;
    cEffect.texture2d0.name = textureInfo.name;

最后实现GLKView委托中进行绘制

//绘制视图的内容
/*
 GLKView对象使其OpenGL ES上下文成为当前上下文,并将其framebuffer绑定为OpenGL ES呈现命令的目标。然后,委托方法应该绘制视图的内容。
*/
- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
    glClear(GL_COLOR_BUFFER_BIT);
    //2.准备绘制
    [cEffect prepareToDraw];
    //3.开始绘制
    glDrawArrays(GL_TRIANGLES, 0, 6);
}

你可能感兴趣的:(OpenGL ES绘制图片)