美文网首页
OpenGL ES绘制图片

OpenGL ES绘制图片

作者: lkm_0bdc | 来源:发表于2020-07-27 19:09 被阅读0次
    效果图

    首先我们需要创建一个日常项目的新工程
    然乎需要在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绘制图片

          本文链接:https://www.haomeiwen.com/subject/xvkllktx.html