前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >OpenGL ES 使用着色器(OC)(一)

OpenGL ES 使用着色器(OC)(一)

作者头像
大壮
发布2020-06-29 10:53:19
6210
发布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初始化:
代码语言:javascript
复制
- (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初始化:

代码语言:javascript
复制
- (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初始化:
代码语言:javascript
复制
- (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初始化完成之后。还需要给颜色缓存区,帧缓存区分配存储空间

代码语言:javascript
复制
// 为 颜色缓冲区 分配存储空间
- (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)关联

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

代码语言:javascript
复制
- (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才可以正常使用。

代码语言:javascript
复制
//链接
    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.绑定顶点坐标,纹理坐标

代码语言:javascript
复制
//前三个是顶点坐标, 后面两个是纹理坐标
    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.设置顶点属性对象

代码语言:javascript
复制
  // 设置顶点属性对象
    {
        // 从着色器中取 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.加载纹理

代码语言:javascript
复制
- (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.渲染

代码语言:javascript
复制
- (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];
}

总结

讲解了着色器的创建,编译,和链接的方法。着色器对象和程序对象组成了OpenGL ES 3.0中的基本对象。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.OpenGL ES 3.0环境
    • 2.Shader和链接程序(myProgram)关联
      • 3.绑定顶点坐标,纹理坐标
        • 4.设置顶点属性对象
          • 5.加载纹理
            • 6.渲染
              • 总结
              相关产品与服务
              容器服务
              腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档