OpenGL ES 使用着色器（OC）（一）

大壮

发布于 2020-06-29 10:53:19

6230

发布于 2020-06-29 10:53:19

文章被收录于专栏：大壮

先看最终的效果

效果的含义：使用自定义着色器，实现纹理的一些简单效果。（旋转，移动，放缩）步骤： 1.设置OpenGL ES 3.0环境 2.Shader和链接程序（myProgram）关联 3.绑定顶点坐标，纹理坐标 4.设置顶点属性对象 5.加载纹理 6.渲染下面就拆分上面的6个步骤，详细讲解。 几乎每行代码都会增加注释

1.OpenGL ES 3.0环境

在iOS需要先引用 <OpenGLES/ES2/gl.h> <GLKit/GLKit.h>

上屏上屏部分需要使用GLKView，CAEAGLLayer 其中GLKView初始化：

- (GLKView *)glkView {
    if (_glkView == nil) {
        _glkView = [[GLKView alloc] init];
        _glkView.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.width);
        _glkView.backgroundColor = [UIColor clearColor];
    }
    return _glkView;
}

其中CAEAGLLayer初始化：

- (CAEAGLLayer *)myEagLayer {
    if (_myEagLayer == nil) {
        _myEagLayer = (CAEAGLLayer *)self.glkView.layer;
        //设置放大倍数
        [self.glkView setContentScaleFactor:[[UIScreen mainScreen] scale]];
        
        // CALayer 默认是透明的，必须将它设为不透明才能让其可见
        _myEagLayer.opaque = YES;
        
        // 设置描绘属性，在这里设置不维持渲染内容以及颜色格式为 RGBA8
        _myEagLayer.drawableProperties =
        [NSDictionary dictionaryWithObjectsAndKeys:
         [NSNumber numberWithBool:NO],
         kEAGLDrawablePropertyRetainedBacking,
         kEAGLColorFormatRGBA8,
         kEAGLDrawablePropertyColorFormat, nil];
        
        _myEagLayer.backgroundColor = [UIColor clearColor].CGColor;
    }
    return _myEagLayer;
}

Context 还需要参数传递的上下文EAGLContext 其中EAGLContext初始化：

- (EAGLContext *)myContext {
    if (_myContext == nil) {
        EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES3;
        _myContext = [[EAGLContext alloc] initWithAPI:api];
        if (!_myContext) {
            NSLog(@"Failed to initialize OpenGLES 3.0 context");
            exit(1);
        }
        
        // 设置为当前上下文
        if (![EAGLContext setCurrentContext:_myContext]) {
            NSLog(@"Failed to set current OpenGL context");
            exit(1);
        }
    }
    return _myContext;
}

在Context初始化完成之后。还需要给颜色缓存区，帧缓存区分配存储空间

// 为 颜色缓冲区 分配存储空间
- (void)setupRenderBuffer {
    //声明缓存区的句柄
    GLuint buffer;
    //返回1个渲染缓冲区对象名
    glGenRenderbuffers(1, &buffer);
    //绑定
    self.myColorRenderBuffer = buffer;
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    // 为 颜色缓冲区 分配存储空间
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}
- (void)setupFrameBuffer {
    GLuint buffer;
    glGenFramebuffers(1, &buffer);
    self.myColorFrameBuffer = buffer;
    // 设置为当前 framebuffer
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    // 将 _colorRenderBuffer 装配到 GL_COLOR_ATTACHMENT0 这个装配点上
    glFramebufferRenderbuffer(GL_FRAMEBUFFER,
                              GL_COLOR_ATTACHMENT0,
                              GL_RENDERBUFFER,
                              self.myColorRenderBuffer);
}

2.Shader和链接程序（myProgram）关联

可以理解为程序对象是一个容器对象，可以将着色器与之连接，并且链接一个最终的可执行程序。一旦创建了程序对象，下一步就是将着色器与之连接。每个程序对象必须连接一个顶点着色器和一个片段着色器。

- (GLuint)loadShaders:(NSString *)vert frag:(NSString *)frag {
    GLuint verShader, fragShader;
    GLint program = glCreateProgram();
    
    //编译
    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //链接
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //释放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    //返回链接程序
    return program;
}

一般来说，连接阶段是生成在硬件上运行的最终硬件指令的时候，在链接程序之后，你必须检查链接是否成功。可以通过glGetProgramiv获取链接状态。在成功状态之后才可以使用glUseProgram方法。只有在glUseProgram之后program才可以正常使用。

//链接
    glLinkProgram(self.myProgram);
    GLint linkSuccess;
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
    if (linkSuccess == GL_FALSE) { //连接错误
        GLchar messages[256];
        glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
        NSString *messageString = [NSString stringWithUTF8String:messages];
        NSLog(@"error%@", messageString);
        return ;
    }
    else {
        NSLog(@"link ok");
        glUseProgram(self.myProgram); //成功便使用，避免由于未使用导致的的bug
    }

3.绑定顶点坐标，纹理坐标

//前三个是顶点坐标， 后面两个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
    
    GLuint attrBuffer;
    glGenBuffers(1, &attrBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);

4.设置顶点属性对象

  // 设置顶点属性对象
    {
        // 从着色器中取 position 的句柄
        GLuint position = glGetAttribLocation(self.myProgram, "position");
                              
        glVertexAttribPointer(
                              //参数的句柄
                              position,
                              
                              //指定顶点属性大小(矩阵的列数)
                              3,
                              
                              //指定数据类型
                              GL_FLOAT,
                              
                              //是否希望数据被标准化（归一化）
                              GL_FALSE,
                              
                              //
                              sizeof(GLfloat) * 5,
                              
                              //缓冲区起始位置的偏移量
                              NULL);
        glEnableVertexAttribArray(position);
    }
    
    
    
    GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoordinate");
    glVertexAttribPointer(textCoor,
                          2,
                          GL_FLOAT,
                          GL_FALSE,
                          sizeof(GLfloat) * 5,
                          (float *)NULL + 3);
    glEnableVertexAttribArray(textCoor);

5.加载纹理

- (GLuint)setupTexture:(NSString *)fileName {
    // 1获取图片的CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    if (!spriteImage) {
        NSLog(@"Failed to load image %@", fileName);
        exit(1);
    }
    
    // 2 读取图片的大小
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    // rgba共4个byte
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    CGContextRef spriteContext =
    CGBitmapContextCreate(spriteData,
                          width,    //单位为像素
                          height,   //单位为像素
                          8,        //内存中像素的每个组件的位数
                          width * 4,//每一行在内存所占的比特数
                          CGImageGetColorSpace(spriteImage),
                          kCGImageAlphaPremultipliedLast);
    // 3在CGContextRef上绘图
    CGContextDrawImage(spriteContext,
                       CGRectMake(0, 0, width, height),
                       spriteImage);
    CGContextRelease(spriteContext);
    
    // 4绑定纹理到默认的纹理ID
    glGenTextures(1, &_myTexture0);
    glBindTexture(GL_TEXTURE_2D, self.myTexture0);
    
    // 纹理放大时，使用线性过滤(GL_NEAREST使用邻近过滤)
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR );
    // 纹理缩小时，使用线性过滤
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR );
    // 纹理环绕方式
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
    glTexParameteri( GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    
    float fw = width, fh = height;
    glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
    free(spriteData);
    return 0;
}

6.渲染

- (void)renderDdvance {
    //获取视图放大倍数
    CGFloat scale = [[UIScreen mainScreen] scale];
    //设置视口大小
    glViewport(self.glkView.frame.origin.x * scale,
               self.glkView.frame.origin.y * scale,
               self.glkView.frame.size.width * scale,
               self.glkView.frame.size.height * scale);
    
    //读取文件路径
    NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"Shader" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"Shader" ofType:@"fsh"];
    
    //加载shader
    self.myProgram = [self loadShaders:vertFile frag:fragFile];
    
    //链接
    glLinkProgram(self.myProgram);
    GLint linkSuccess;
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &linkSuccess);
    if (linkSuccess == GL_FALSE) { //连接错误
        GLchar messages[256];
        glGetProgramInfoLog(self.myProgram, sizeof(messages), 0, &messages[0]);
        NSString *messageString = [NSString stringWithUTF8String:messages];
        NSLog(@"error%@", messageString);
        return ;
    }
    else {
        NSLog(@"link ok");
        glUseProgram(self.myProgram); //成功便使用，避免由于未使用导致的的bug
    }

    //前三个是顶点坐标， 后面两个是纹理坐标
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 0.0f,
        0.5f, 0.5f, -1.0f,      1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 1.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 0.0f,
    };
    
    GLuint attrBuffer;
    glGenBuffers(1, &attrBuffer);
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
    // 设置顶点属性对象
    {
        // 从着色器中取 position 的句柄
        GLuint position = glGetAttribLocation(self.myProgram, "position");
                              
        glVertexAttribPointer(
                              //参数的句柄
                              position,
                              
                              //指定顶点属性大小(矩阵的列数)
                              3,
                              
                              //指定数据类型
                              GL_FLOAT,
                              
                              //是否希望数据被标准化（归一化）
                              GL_FALSE,
                              
                              //
                              sizeof(GLfloat) * 5,
                              
                              //缓冲区起始位置的偏移量
                              NULL);
        glEnableVertexAttribArray(position);
    }
    
    
    
    GLuint textCoor = glGetAttribLocation(self.myProgram, "textCoordinate");
    glVertexAttribPointer(textCoor,
                          2,
                          GL_FLOAT,
                          GL_FALSE,
                          sizeof(GLfloat) * 5,
                          (float *)NULL + 3);
    glEnableVertexAttribArray(textCoor);
    
    //加载纹理
    [self setupTexture:@"abc"];
}

- (void)render {
    glClearColor(0, 0, 0, 0);
    glClear(GL_COLOR_BUFFER_BIT);
    
    //获取rotate矩阵 的句柄
    GLuint rotate = glGetUniformLocation(self.myProgram, "rotateMatrix");
    float radians = -_currentRotationAngle * 3.14159f / 180.0f;
    float s = sin(radians);
    float c = cos(radians);
    
    NSLog(@"arc:%ld",(long)_currentRotationAngle);
    //z轴旋转矩阵
    GLfloat zRotation[16] = {   //
        c,  -s, 0,   0,         //
        s,  c,  0,   0,         //
        0,  0,  1.0, 0,         //
        0,  0,  0,   1.0        //
    };
    
    //设置旋转矩阵
    glUniformMatrix4fv(rotate, 1, GL_FALSE, (GLfloat *)&zRotation[0]);
    glDrawArrays(GL_TRIANGLES, 0, 6);
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
    
    _currentRotationAngle++;
    if (_currentRotationAngle >= 360) {
        _currentRotationAngle = 0;
    }
    [self performSelector:@selector(render) withObject:nil afterDelay:1/60];
}