iOS视频渲染gles_02

glsl 渲染

参考：

https://www.cnblogs.com/zhoug2020/p/7842808.html

https://www.jianshu.com/p/ee597b2bd399

https://www.jianshu.com/p/02ebf6084ec7

渲染流程如图：

 

 

代码如下：

#import <UIKit/UIKit.h>

@interface showView : UIView

 @end

//
//  showView.m
//  gltest2
//
2020/5/19.
//

#import <Foundation/Foundation.h>
#import "showView.h"
#import <OpenGLES/ES2/gl.h>
@interface showView()

@property(nonatomic ,strong)CAEAGLLayer *myEglayer;
@property(nonatomic ,strong)EAGLContext *myContext;
@property(nonatomic ,assign)GLuint  myColorRenderBuff;
@property(nonatomic ,assign)GLuint  myColorFrameBuff;
@property(nonatomic,assign)GLuint myProgram;

- (void)setupLayer;
@end

//集成UIview，作为函数入口
@implementation showView

//重写layerClass，将View返回的图层从CALayer替换成CAEAGLLayer
//如果我们继承了UIView,那我们就可以重写+layerClass方法使得在创建的时候能返回一个不同的图层子类
+ (Class)layerClass {
return [CAEAGLLayer class];
}
 
- (void)layoutSubviews {
    
    [self setupLayer];
    [self setupContext];
    [self SETRenderAndFrameBuffer];
    [self Render];
}


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

-(void)setupContext{
    
    EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    if(![EAGLContext setCurrentContext:context])
    {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    self.myContext = context;
}

-(void)SETRenderAndFrameBuffer
{
    /*
        buffer分为frame buffer 和 render buffer2个大类。
        其中frame buffer 相当于render buffer的管理者。
        frame buffer object即称FBO。
        render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
        */
    //先清空后设置
    glDeleteBuffers(1, &_myColorRenderBuff);
    self.myColorRenderBuff = 0;
    glDeleteBuffers(1, &_myColorFrameBuff);
    self.myColorFrameBuff =0;
    
    //再设置---先设置渲染缓冲，在设置帧缓冲
    GLuint buffer1;
    glGenRenderbuffers(1, &buffer1);//申请一个缓冲区标识符 **render
    self.myColorRenderBuff =buffer1;
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuff);//将标识符绑定到GL_RENDERBUFFER
    //将可绘制对象drawable object的  CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEglayer];
    
    //设置帧缓冲
  
    glGenFramebuffers(1, &buffer1);//申请一个缓冲区标识符 ** frame 这里申请标志注意是frame 而不是glgenbuffer
    self.myColorFrameBuff =buffer1;
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuff);
    /*生成帧缓存区之后，则需要将renderbuffer跟framebuffer进行绑定，
        调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起作用
        将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。*/
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self .myColorRenderBuff);
    
    
}

-(void)Render{
    
    glClearColor(0, 1.0, 0, 1.0);
    glClear(GL_COLOR_BUFFER_BIT);
    
    //1设置视图窗口大小
    CGFloat scale =[[UIScreen mainScreen] scale];
    glViewport(self.frame.origin.x * scale, self.frame.origin.y * scale, self.frame.size.width * scale, 
self.frame.size.height * scale);
    
    //着色器 program的设置
    NSString* vFIle= [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString* fFIle= [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
//顶点，片元的编译流程：读取文件路径，创建着色器shader对象，将着色器源码附着到s对象上，把着色器源代码编译成目标代码
//programe:创建程序，附着着色器，链接程序，使用程序
    self.myProgram = [self loadShader:vFIle frag:fFIle];
    glLinkProgram(self.myProgram);
    //判断是否连上
    GLint statusLink;
    glGetProgramiv(self.myProgram, GL_LINK_STATUS, &statusLink);
    if(statusLink == GL_FALSE)
    {
        GLchar message[512];
        glGetProgramInfoLog(self.myProgram, sizeof(message), 0, &message[0]);
        NSString *messageString = [NSString stringWithUTF8String:message];
        NSLog(@"Program Link Error:%@",messageString);
        return;
    }
     NSLog(@"Program Link Success!");
    glUseProgram(self.myProgram);
    
    //加载纹理和VERTEX，进行绘制
    //设置顶点矩阵
    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 vrtID;
    glGenBuffers(1, &vrtID);
    glBindBuffer(GL_ARRAY_BUFFER, vrtID);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
    //0.将顶点数据通过myProgram传递到顶点着色程序的position
    //1.glGetAttribLocation,用来获取vertex attribute的入口的.
    //2.告诉OpenGL ES,通过glEnableVertexAttribArray，
    //3.最后数据是通过glVertexAttribPointer传递过去的。
    
    //：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
    GLuint Position = glGetAttribLocation(self.myProgram, "position");
    //设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(Position);
    glVertexAttribPointer(Position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, NULL);
    
    
    //处理纹理数据
    //glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意：第二参数字符串必须和"shaderv.vsh"中的输入变量：textCoordinate保持一致
    
    GLuint textcoor = glGetAttribLocation(self.myProgram, "textCoordinate");
    glEnableVertexAttribArray(textcoor);
    glVertexAttribPointer(textcoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5,(float *)NULL + 3);
    //加载纹理
   
    [self setupTexture];
//-----------------------------------------------------------------------不旋转这块可以不调用,对应的着色器中的
//vPos = vPos * rotateMatrix;这句话就可以不调用了，否则，着色器自动✖️一个未知旋转矩阵，课程会导致纹理超出屏幕范围而无法渲染
    //获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
       GLuint rotate = glGetUniformLocation(self.myProgram, "rotateMatrix");

       float radians = 180 * 3.14159f / 180.0f;
       float s = sin(radians);
       float c = cos(radians);

       //z轴旋转矩阵
       GLfloat zRotation[16] = { //
           1, 0, 0, 0, //
           0, c, -s , 0,//
           0, s , c, 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];

    

}

 

-(GLuint)loadShader:(NSString*)vert frag:(NSString*)fert{

    //临时着色对象

    GLuint verShader,fragShader;

    [self compileShader:&verShader type:GL_VERTEX_SHADER file:vert];

     [self compileShader:&fragShader type:GL_FRAGMENT_SHADER file:fert];

    

    GLuint programs = glCreateProgram();

    

    glAttachShader(programs, verShader);

    glAttachShader(programs, fragShader);

    

    //附着上之后可以删掉了

    glDeleteShader(verShader);

    glDeleteShader(fragShader);

    

    return programs;

}

//编译着色器

-(void)compileShader:(GLuint*)shader type:(GLenum)type file:(NSString*)file{

  

    NSString* Content= [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];

    const GLchar* source = (GLchar*)[Content UTF8String];

    //创建着色器对象，加载源码，编译着色器对象

    *shader  =glCreateShader(type);

    glShaderSource(*shader, 1, &source, NULL);

    glCompileShader(*shader);

 

    

}

 

- (GLuint)setupTexture{

    // 1获取图片的CGImageRef

    CGImageRef spriteImage = [UIImage imageNamed:@"for_test"].CGImage;

    if (!spriteImage) {

        NSLog(@"Failed to load image");

        exit(1);

    }

    

    // 2 读取图片的大小

    size_t width = CGImageGetWidth(spriteImage);

    size_t height = CGImageGetHeight(spriteImage);

    

    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte)); //rgba共4个byte

    

    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（这里只有一张图片，故而相当于默认于片元着色器里面的colorMap，如果有多张图不可以这么做）

    glBindTexture(GL_TEXTURE_2D, 0);

    
  //纹理维度，线性过滤，环绕模式
    

    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);

    

    glBindTexture(GL_TEXTURE_2D, 0);

    

    free(spriteData);

    return 0;

}

 

@end

 

 

 

#import "ViewController.h"
#import"showView.h"

@interface ViewController ()

@property(nonatomic ,strong)showView* showV;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.showV = (showView *)self.view;
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

 注意修改view的class，否则黑屏崩溃

 

glsl着色器：

片元着色：fsh


varying lowp vec2 varyTextCoord;

uniform sampler2D colorMap;


void main()
{
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

-------------------------------------------------------------------
顶点着色：vsh


attribute vec4 position;
attribute vec2 textCoordinate;
uniform mat4 rotateMatrix;

varying lowp vec2 varyTextCoord;

void main()
{
    varyTextCoord = textCoordinate;
    
    vec4 vPos = position;

    vPos = vPos * rotateMatrix;

    gl_Position = vPos;
}

 

 这里图片旋转的时候的旋转矩阵计算方式如下：

 

 

 

 

上边代码显示的图片是倒着的，愿意是gl中的坐标和iOS坐标是相反的。解决方式：

1修改纹理坐标和顶点坐标的对应关系：

    //6.设置顶点、纹理坐标
    //前3个是顶点坐标，后2个是纹理坐标
//    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,
//    };
    
    GLfloat attrArr[] =
    {
        0.5f, -0.5f, -1.0f,     1.0f, 1.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 0.0f,
        -0.5f, -0.5f, -1.0f,    0.0f, 1.0f,
        
        0.5f, 0.5f, -1.0f,      1.0f, 0.0f,
        -0.5f, 0.5f, -1.0f,     0.0f, 0.0f,
        0.5f, -0.5f, -1.0f,     1.0f, 1.0f,
    };

2旋转矩阵翻转图形，不翻转纹理

• 在顶点着色器 shaderv.vsh 中，我们传进一个旋转矩阵 rotateMatrix，因为矩阵传进来就不会再修改了，所以我们用 uniform 来修饰，4行4列的矩阵 mat4。然后用顶点坐标 vPos 乘以这个 rotateMatrix 旋转矩阵，让每一个顶点都应用旋转变化。

链接：参考https://www.jianshu.com/p/038a160f6cdc 可以绕X轴翻转镜像；绕z轴是旋转，180度

 

3 在解压图片时，将图片源文件翻转

使用下面三行代码，对图片进行了平移缩放操作以后，再重新绘制。

CGContextTranslateCTM(spriteContext, 0, rect.size.height);

 CGContextScaleCTM(spriteContext, 1.0, -1.0);

CGContextDrawImage(spriteContext, rect, spriteImage);

 

4、修改片元着色器中的纹理坐标

这里是修改了片元着色器的代码，x 坐标不动，将 y 坐标改为 1-y，这样就达到了翻转的效果。其他地方代码不用动

varying lowp vec2 varyTextCoord;
uniform sampler2D colorMap;

void main() {
    //gl_FragColor = texture2D(colorMap, varyTextCoord);
    gl_FragColor = texture2D(colorMap, vec2(varyTextCoord.x,1.0-varyTextCoord.y));
}

5、修改顶点着色器中的纹理坐标

在顶点着色器传入的时候，就翻转。相比上面的片元着色器，执行次数要少很多，有几个顶点执行几次。

attribute vec4 position;
attribute vec2 textCoordinate;
varying lowp vec2 varyTextCoord;

void main() {
    varyTextCoord = vec2(textCoordinate.x,1.0-textCoordinate.y);
    gl_Position = position;
}