音视频

iOS OpenGL ES GLSL

2020-08-10  本文已影响0人  东旭39

iOS提供了固定着色器GLKBaseEffect，那么如果不适用固定着色器，使用glsl如何去渲染一张图片。
由于需要一些定制化的需求，固定着色器不能满足我们的需求。需要使用GLSL可编程着色器。

主要步骤

不使用苹果提供的GLKView，自定一个View，用于显示图片

  1. 创建一个view使其layer为CAEAGLLayer，CAEAGLLayer用于渲染OpenGL ES的layer。
  2. 设置上下文
  3. 清空缓存区
  4. 设置RenderBuffer
  5. 设置FrameBuffer
  6. 开始绘制

GLSL初体验

3种数据修饰类型

glsl提供了3种数据修饰类型，用于在OpenGL ES客户端和服务端之间传递值。

uniform

attribute

varying

GLSL本身是一段字符串，没有特定的编写文件。所以创建GLSL的编写文件后缀可以随意，后缀的作用可以区分是顶点着色器还是片元着色器。

1.编写glsl代码

  1. 顶点着色器代码shaderv.vsh
attribute vec4 position;  //顶点坐标
attribute vec2 textCoordinate; // 纹理坐标
varying lowp vec2 varyTextCoord; // 用于与片元着色器桥接的纹理坐标变量

void main()
{
    varyTextCoord = textCoordinate;
  //gl_Position：内建变量，顶点说色气计算之后的顶点接口
    gl_Position = position;
}
  1. 片元着色器代码shaderf.fsh
precision highp float;  //使用高精度，避免一些错误
varying lowp vec2 varyTextCoord; // 接收顶点着色器传递过来的纹理坐标
uniform sampler2D colorMap; //纹理数据

void main()
{
    //1.获取纹理对应坐标下纹素（像素），如果 1200 * 1200 像素，片元着色器会执行1200 *1200次
    // 内建函数 texture2D(纹理，纹理坐标），返回颜色值
    // 内建函数gl_FragColor：片元着色器处理完后的颜色值结果
    gl_FragColor = texture2D(colorMap, varyTextCoord);
}

glsl也有一个main方法，是程序的入口。GPU显存有的是顶点缓冲区、颜色缓冲区、深度缓存区等这样的内存空间，所以GPU并不能处理逻辑性比较复杂的数据，所以GLSL代码并不会很多。

2.加载并编译glsl

//1.加载着色器
-(GLuint) loaderShader:(NSString *)vert withFrag:(NSString *)frag{
    GLuint verShader,fragShader;//创建顶点着色器和片元着色器的句柄
    //1.创建一个空程序
    GLuint program = glCreateProgram();
    
    //2.编译着色器源码，获取verShader和fragShader
    [self compleShader:&verShader type:GL_VERTEX_SHADER file:vert];
     [self compleShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //3.创建最终的程序，将着色器附着到program
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //4. 删除着色器，代码已经附着到program中，可以删除着色器
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    //5. 返回程序的句柄，这里就是生产的glsl可执行程序
    return program;
}

//编译shader
-(void)compleShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file{
    
    //1.读取文件路径字符串，即我们写的glsl代码
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    //2.将字符串转为C
    const GLchar *source = (GLchar *) [content UTF8String];
    *shader = glCreateShader(type);
    //3.将字符串source附着到shader
    glShaderSource(*shader, 1, &source, NULL);
    //4. 编译着色器
    glCompileShader(*shader);
}

3.链接并使用生成的程序

    //1.获取顶点着色器和片元着色器的文件
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
    //2. 根据编写的文件获取生成程序的句柄
    self.myPrograme = [self loaderShader:vertFile withFrag:fragFile];
  //3.链接程序
    glLinkProgram(self.myPrograme);
    //4. 判断程序是否链接成功
    GLint linkStatus;
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
       if (linkStatus == GL_FALSE) {
           GLchar message[512];
           glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
           NSString *messageString = [NSString stringWithUTF8String:message];
           NSLog(@"Program Link Error:%@",messageString);
           return;
       }
      //5. 使用我们创建的程序
    glUseProgram(self.myPrograme);

这些操作类似于创建了一个GLKBaseEffect对象，但是如何使用这个着色器

4.使用创建的可编程着色器程序

//1.顶点数组
 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,
      };
    //2. 将顶点数组复制到顶点缓冲区
    GLuint attrbuffer;
    glGenBuffers(1, &attrbuffer);
    glBindBuffer(GL_ARRAY_BUFFER, attrbuffer);
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_STATIC_DRAW);
    
    //3.将顶点从顶点缓冲区输入到顶点着色器
    //3.1 获取顶点坐标的入口,position与 shaderv.vsh中的position统一
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
     //3.2 开启顶点属性
    glEnableVertexAttribArray(position);
    //3.3 如何去读取attrArr在顶点缓冲区中的顶点
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) *5, NULL + 0);
    //4.纹理坐标传输到着色器
    //4.1 获取纹理坐标的入口，textCoordinate与 shaderv.vsh中的textCoordinate一一对应
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    //4.2 开启纹理坐标属性
    glEnableVertexAttribArray(textCoor);
    //4.3 如何去读取attrArr在顶点缓冲区中的纹理
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (float *)NULL +3);
     //5. 加载纹理，即图片
    [self setupTexture:@"lufei.jpg"];
    
    //6.设置纹理采样器
    glUniform1f(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //7.绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //8.从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];

注意

由于坐标系的不同，iOS设备的坐标原点是在坐上角。如果不对坐标进行翻转，图片是倒置的。

    //1.将左下角作为坐标系原点
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    //2.将y轴正方向向下翻转
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    //3. 重新绘制
    CGContextDrawImage(spriteContext, rect, spriteImage);

完整代码LLView.m

//
//  LLView.m
//  OpenGLES_Custom_shader
//
//  Created by JH on 2020/7/30.
//  Copyright © 2020 JH. All rights reserved.
//

#import "LLView.h"
#import <OpenGLES/ES2/gl.h>

@interface LLView ()

@property(nonatomic,strong) CAEAGLLayer *mayEagLayer;

@property(nonatomic,strong) EAGLContext *myContext;

@property(nonatomic,assign) GLuint myColorRenderBuffer;

@property(nonatomic,assign) GLuint myCOlorFrameBuffer;

@property(nonatomic,assign) GLuint myPrograme;



@end

@implementation LLView

- (void)layoutSubviews{
    //1.设置图层
      [self setupLayer];
      
      //2.设置图形上下文
      [self setupContent];
      
      //3.清空缓存区
      [self deleteRenderAndFrameFuffer];

      //4.设置RenderBuffer
      [self setupRenderBuffer];
      
      //5.设置FrameBuffer
      [self setupFrameBuffer];
      
      //6.开始绘制
      [self renderLayer];
}

+ (Class)layerClass{
    return [CAEAGLLayer class];
}

-(void)renderLayer{
    glClearColor(0.3f, 0.45f, 0.5f, 1.0f);
    //清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    
    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);
    
    NSString *vertFile = [[NSBundle mainBundle]pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle]pathForResource:@"shaderf" ofType:@"fsh"];
    
    self.myPrograme = [self loaderShader:vertFile withFrag:fragFile];
    
    glLinkProgram(self.myPrograme);
    GLint linkStatus;
    glGetProgramiv(self.myPrograme, GL_LINK_STATUS, &linkStatus);
       if (linkStatus == GL_FALSE) {
           GLchar message[512];
           glGetProgramInfoLog(self.myPrograme, sizeof(message), 0, &message[0]);
           NSString *messageString = [NSString stringWithUTF8String:message];
           NSLog(@"Program Link Error:%@",messageString);
           return;
       }
    glUseProgram(self.myPrograme);
    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_STATIC_DRAW);
    
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    glEnableVertexAttribArray(position);
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) *5, NULL + 0);
    
    GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    glEnableVertexAttribArray(textCoor);
    glVertexAttribPointer(textCoor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (float *)NULL +3);
    
    [self setupTexture:@"lufei.jpg"];
    
    //设置纹理采样器
    glUniform1f(glGetUniformLocation(self.myPrograme, "colorMap"), 0);
    
    //12.绘图
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    //13.从渲染缓存区显示到屏幕上
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}

//加载纹理
-(GLuint)setupTexture:(NSString *)fileName{
    
       //1、将 UIImage 转换为 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);
    
    
    GLubyte *spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width*4,CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    
     CGRect rect = CGRectMake(0, 0, width, height);
    
     //6.使用默认方式绘制
     CGContextDrawImage(spriteContext, rect, spriteImage);
    
    //翻转坐标系
    CGContextTranslateCTM(spriteContext, 0, rect.size.height);
    CGContextScaleCTM(spriteContext, 1.0, -1.0);
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
     //7、画图完毕就释放上下文
     CGContextRelease(spriteContext);
     
     //8、绑定纹理到默认的纹理ID（
     glBindTexture(GL_TEXTURE_2D, 0);
     
     //9.设置纹理属性
     /*
      参数1：纹理维度
      参数2：线性过滤、为s,t坐标设置模式
      参数3：wrapMode,环绕模式
      */
     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;
     
     //10.载入纹理2D数据
     /*
      参数1：纹理模式，GL_TEXTURE_1D、GL_TEXTURE_2D、GL_TEXTURE_3D
      参数2：加载的层次，一般设置为0
      参数3：纹理的颜色值GL_RGBA
      参数4：宽
      参数5：高
      参数6：border，边界宽度
      参数7：format
      参数8：type
      参数9：纹理数据
      */
     glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, fw, fh, 0, GL_RGBA, GL_UNSIGNED_BYTE, spriteData);
     
     //11.释放spriteData
     free(spriteData);
     return 0;
}

-(void)setupFrameBuffer{
    GLuint buffer;
    glGenFramebuffers(1, &buffer);
    self.myCOlorFrameBuffer = buffer;
    
    glBindFramebuffer(GL_FRAMEBUFFER, self.myCOlorFrameBuffer);
    
    //将renderbuffer和framebuffer绑定
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
}


-(void)setupRenderBuffer{
    GLuint buffer;
    
    glGenRenderbuffers(1, &buffer);
    self.myColorRenderBuffer = buffer;
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
    
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.mayEagLayer];
}

//4.情况缓冲区，避免残留数据
-(void)deleteRenderAndFrameFuffer{
    
    glDeleteBuffers(1, &_myColorRenderBuffer);
    self.myColorRenderBuffer = 0;
    glDeleteBuffers(1, &_myCOlorFrameBuffer);
    self.myCOlorFrameBuffer = 0;
}

//3
-(void)setupContent{
    EAGLContext *context = [[EAGLContext alloc ] initWithAPI:kEAGLRenderingAPIOpenGLES2];
    [EAGLContext setCurrentContext:context];
    self.myContext = context;
}

//2.设置图层
-(void)setupLayer{
    self.mayEagLayer = (CAEAGLLayer *)self.layer;
    
    [self setContentScaleFactor:[[UIScreen mainScreen] scale]];
    
    //设置描述属性
    self.mayEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:@false,kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat,nil];
}


//1.加载着色器
-(GLuint) loaderShader:(NSString *)vert withFrag:(NSString *)frag{
    GLuint verShader,fragShader;
    
    GLuint program = glCreateProgram();
    
    //编译着色器源码
    [self compleShader:&verShader type:GL_VERTEX_SHADER file:vert];
     [self compleShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //创建最终的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}

//编译shader
-(void)compleShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file{
    
    //1.读取文件路径字符串
    NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    
    const GLchar *source = (GLchar *) [content UTF8String];
    *shader = glCreateShader(type);
    //将source附着到shader
    glShaderSource(*shader, 1, &source, NULL);
    
    glCompileShader(*shader);
    
}

@end
上一篇 下一篇

猜你喜欢

热点阅读