美文网首页
OpenGLES入门 2 -- 渲染

OpenGLES入门 2 -- 渲染

作者: Krien | 来源:发表于2017-10-24 10:42 被阅读39次

    前言

    上篇只是简单介绍了一点清屏出现的效果,今天该讲正式的渲染效果了。

    正文

    1、初始化

    _eaglContext =[[EAGLContext alloc]initWithAPI:kEAGLRenderingAPIOpenGLES2];
    [EAGLContext setCurrentContext:_eaglContext];
    
    _glLayer = (CAEAGLLayer*) self.layer;
    // CALayer 默认是透明的,必须将它设为不透明才能让其可见
    _glLayer.opaque = YES;
    // 设置描绘属性,在这里设置不维持渲染内容以及颜色格式为 RGBA8
    _glLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:
                                         [NSNumber numberWithBool:NO], kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8, kEAGLDrawablePropertyColorFormat, nil];
    

    kEAGLColorFormatRGBA8:使用8位来保存RGBA的值;
    kEAGLDrawablePropertyRetainedBacking:设置NO不保留之前绘制的图像以用来重用;

    2、绑定渲染缓冲及帧缓冲区

    glGenRenderbuffers(1, &_colorRenderBuffer);
    glBindRenderbuffer(GL_RENDERBUFFER, _colorRenderBuffer);
    [_eaglContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:_glLayer];
        
    glGenFramebuffers(1,&_frameBuffer);
    glBindFramebuffer(GL_FRAMEBUFFER,_frameBuffer);
    glFramebufferRenderbuffer(GL_FRAMEBUFFER,GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, _frameBuffer);
    

    渲染缓存:存储绘制结果的缓冲区
    帧缓存:接收渲染结果的缓冲区,为GPU指定存储渲染结果的区域。

    3、设置着色器

    //shader
    GLuint vertext  =[self compileWithShaderName:@"Vertex" shaderType:GL_VERTEX_SHADER];
    GLuint fragment =[self compileWithShaderName:@"Fragment" shaderType:GL_FRAGMENT_SHADER];
        
    _glProgram =glCreateProgram();
    glAttachShader(_glProgram, vertext);
    glAttachShader(_glProgram, fragment);
    
    //操作产生最后的可执行程序,它包含最后可以在硬件上执行的硬件指令。
    glLinkProgram(_glProgram);
        
    GLint linkSuccess = GL_TRUE;
    glGetProgramiv(_glProgram, GL_LINK_STATUS,&linkSuccess);
    if (linkSuccess ==GL_FALSE) {
         GLchar glMessage[256];
         glGetProgramInfoLog(_glProgram, sizeof(glMessage), 0, &glMessage[0]);
         NSString *messageString = [NSString stringWithUTF8String:glMessage];
         NSLog(@"program error %@", messageString);
         exit(1);
    }
        
    //绑定着色器参数
    glUseProgram(_glProgram);
    _glPosition = glGetAttribLocation(_glProgram,"Position");
    
    -(GLuint)compileWithShaderName:(NSString*)name shaderType:(GLenum)shaderType
    {
        //获取着色器文件
        NSString *shaderPath =[[NSBundle mainBundle]pathForResource:name ofType:@"glsl"];
        NSError *error;
        NSString *strShader =[NSString stringWithContentsOfFile:shaderPath encoding:NSUTF8StringEncoding error:&error];
        NSLog(@"strShader %@",strShader);
        if (!strShader) {
            NSLog(@"shader error %@",error.localizedDescription);
            exit(1);
        }
        
        // 2 创建一个代表shader的OpenGL对象, 指定vertex或fragment shader
        GLuint shaderHandler = glCreateShader(shaderType);
        
        // 3 获取shader的source
        const char* shaderString = [strShader UTF8String];
        int shaderStringLength = (int)[strShader length];
        glShaderSource(shaderHandler, 1, &shaderString, &shaderStringLength);
        
        // 4 编译shader
        glCompileShader(shaderHandler);
        
        // 5 查询shader对象的信息
        GLint compileSuccess;
        glGetShaderiv(shaderHandler, GL_COMPILE_STATUS, &compileSuccess);
        if (compileSuccess == GL_FALSE) {
            GLchar messages[256];
            glGetShaderInfoLog(shaderHandler, sizeof(messages), 0, &messages[0]);
            NSString *messageString = [NSString stringWithUTF8String:messages];
            NSLog(@"%@", messageString);
            exit(1);
        }
        return shaderHandler;
    }
    

    着色器: 分为Vertex Shader 和Fragment Shader

    • 顶点着色器(Vertex Shader):用于确定图形形状
    attribute  vec4  Position;
    void main(void){
          gl_Position = Position;
    }
    
    • 片段着色器(Fragment Shader):用于确定图像绘制渲染的颜色
    void main(void){
        gl_FragColor =vec4(0,1,1,1);
    }
    

    这里推荐一个介绍GLSL语言的博客,讲的还是比较详细的

    4、渲染绘制

    • 确定顶点(构成绘制区域的连接点)
    const GLfloat vertices[]={
        -0.5f,-0.5f, 0,        //左下
         0.5f,-0.5f, 0,        //右下
        -0.5f, 0.5f, 0,        //左上
         0.5f, 0.5f, 0         //右上
    };
    
    • 绘制
    //清屏
    glClearColor(1.0,1.0,1.0,1.0);
    glClear(GL_COLOR_BUFFER_BIT);
        
    //设置绘制区域
    glViewport(0,0,self.frame.size.width,self.frame.size.height);
        
    /**
      *void glVertexAttribPointer(GLuint index,GLint size,GLenum type,GLboolean normalized,GLsizei 
      *                            stride,const void *ptr)
      *     index: 着色器脚本对应变量ID
      *     size : 此类型数据的个数
      *     type : 此类型的sizeof值
      *     normalized : 是否对非float类型数据转化到float时候进行归一化处理
      *     stride : 此类型数据在数组中的重复间隔宽度,byte类型计数
      *     ptr    : 数据指针, 这个值受到VBO的影响 
      */
    //传入顶点参数
    glVertexAttribPointer(_glPosition, 3, GL_FLOAT, GL_FALSE, 0, vertices);
    glEnableVertexAttribArray(_glPosition);
        
    //绘制
    glDrawArrays(GL_TRIANGLE_STRIP,0, 4);
    [_eaglContext presentRenderbuffer:GL_RENDERBUFFER];
    

    效果如下:


    效果.png

    具体代码详见OpenGLES

    相关文章

      网友评论

          本文标题:OpenGLES入门 2 -- 渲染

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