OpenGL ES学习之路(3.2) GLSL语法介绍修饰符与渲

GLSL 语法介绍修饰符

常用修饰符有三个：

• uniform
• attribute
• varying

uniform

• unifom 是外部Application传递给vertex/fragment shader 变量修饰
  • 通过glUniform**() 为当前程序对象指定Uniform变量的值
  • 在veterx，fragment shader 程序内部，Unifom 和contst表示它不能被shader修改。
• 注意⚠️
  • 1.被unifom 修饰的变量，只能被shader使用read，不能使用write
  • 2.如果unifom 在vertex/fragment 两者的声明方式一样，则它们可以被vertex和fragment共享。理解为：vertex与fragment的全局变量
• 使用场景
  • 1.变换矩阵
  • 2.材质
  • 3.光照和颜色等

使用:
//unifom 修饰符 mat4 类型 viewProjMatrix  变量名
uniform mat4 viewProjMatrix; 投影与模型视图矩阵
uniform mat4 viewMatrix; //模型视图矩阵
uniform mat4 lightPosition; //光源位置

attribute

• attribute变量，只能在vertex Shader中使用.(不能在fragment shader 中使用以及声明)
• 在Application中，通过glBindAttribLocation()函数 来绑定每变量的位置，然后在使用glVertextAttribPointer()为变量赋值，可以使用glGetAttribLocation()来获取变量
• 使用场景：
  • 顶点坐标、法线、纹理坐标、顶点颜色等等
• 如何使用？

    attribute vec4 a_position;
    gl_position = viewProjMatrix * a_position;

varying

• varying, 是vertex与fragment shader 之间左数据传递使用，如果需要做传递，则需要保证vertex shader 与 fragment shader 中两者的声明必须保持一致(修饰符，类型，类型，变量名)否则，不可实现数据传递。
• 使用场景：
  • 纹理坐标、顶点颜色等等

渲染图片实例

• 效果

  
  image.png

实现源码案例，总共分为七个大步骤

• 前期准备

  • 首先创建一个控制器名为GLViewController和GLView并在storyBoard当中修改配置

    
    image.png
  image.png image.png

  • 创建两个empty的文件，分别名shaderv.vsh和shaderf.fsh
    

    image.png

  • 然后在GLViewController当中设置

  
      #import "GLViewController.h"
      #import "GLView.h"
      @interface GLViewController ()
      @property (nonatomic,strong) GLView *myView;
      @end
  
      @implementation GLViewController
  
      - (void)viewDidLoad {
          [super viewDidLoad];
  
          self.myView = (GLView *)self.view;
      }
  
  

• 接下来步骤在GLView.m当中设置

#import "GLView.h"
#import <OpenGLES/ES2/gl.h>
@interface GLView ()
@property (nonatomic,strong) CAEAGLLayer *myEagLayer;
@property (nonatomic,strong) EAGLContext *myContext;

@property (nonatomic, assign) GLuint  myColorRederBuffer;
@property (nonatomic, assign) GLuint  myColorFrameBuffer;

@property (nonatomic, assign) GLuint  myPrograme;
@end

@implementation GLView


- (void)layoutSubviews {
    
    //1.创建图层
    [self createLayer];
    
    //2.设置上下文
    [self setupContext];
    
    //3.清空缓存区
    [self deleteRederAndFrameBuffer];
    
    //4.设置RederBuffer
    [self setupRederBuffer];
    
    //5.设置FrameBuffer
    [self setupFrameBuffer];
    
    //6.开始渲染
    [self rederLayer];
}

• 创建图层

//1.创建图层
- (void)createLayer {
    
    //绘图层开辟空间
    /**
     重写layerClass，将GLView返回的图层从CALayer替换成CAEAGLLayer
     */
    self.myEagLayer = (CAEAGLLayer *)self.layer;
    
    //设置放大倍数
    [self setContentScaleFactor:[[UIScreen mainScreen]scale]];
    
    //设置描述属性，这里设置不维持渲染内容以及颜色格式为RGBA8
    /*
     kEAGLDrawablePropertyRetainedBacking 表示绘图表面显示后，是否保留其内容。这个key的值，是一个通过NSNumber包装的bool值。如果是false，则显示内容后不能依赖于相同的内容，ture表示显示后内容不变。一般只有在需要内容保存不变的情况下，才建议设置使用,因为会导致性能降低、内存使用量增减。一般设置为flase.
     
     kEAGLDrawablePropertyColorFormat
     可绘制表面的内部颜色缓存区格式，这个key对应的值是一个NSString指定特定颜色缓存区对象。默认是kEAGLColorFormatRGBA8；
     kEAGLColorFormatRGBA8：32位RGBA的颜色，4*8=32位
     kEAGLColorFormatRGB565：16位RGB的颜色，
     kEAGLColorFormatSRGBA8：sRGB代表了标准的红、绿、蓝，即CRT显示器、LCD显示器、投影机、打印机以及其他设备中色彩再现所使用的三个基本色素。sRGB的色彩空间基于独立的色彩坐标，可以使色彩在不同的设备使用传输中对应于同一个色彩坐标体系，而不受这些设备各自具有的不同色彩坐标的影响。
     */
    
    self.myEagLayer.drawableProperties = [NSDictionary dictionaryWithObjectsAndKeys:[NSNumber numberWithBool:NO],kEAGLDrawablePropertyRetainedBacking, kEAGLColorFormatRGBA8,kEAGLDrawablePropertyColorFormat, nil];
}
//1.1
+ (Class)layerClass {
    //需要修改父类
    return [CAEAGLLayer class];
}

• 2.设置上下文

//2.设置上下文
- (void)setupContext {
    
    //1.指定OpenGL ES 渲染API版本，我们使用2.0
    EAGLRenderingAPI api = kEAGLRenderingAPIOpenGLES2;
    //2.创建图形上下文
    EAGLContext *context = [[EAGLContext alloc] initWithAPI:api];
    //3.判断是否创建成功
    if (!context) {
        NSLog(@"Create context failed!");
        return;
    }
    
    //4.设置图形上下文
    if (![EAGLContext setCurrentContext:context]) {
        NSLog(@"setCurrentContext failed!");
        return;
    }
    
    //5.将局部context 变成全局的
    self.myContext = context;
}

• 3.请空缓存区

//3.请空缓存区
- (void)deleteRederAndFrameBuffer {
    
    
    //1.导入框架#import <OpenGLES/ES2/gl.h>
    /*
     2.创建2个帧缓存区，渲染缓存区，帧缓存区
     @property (nonatomic , assign) GLuint myColorRenderBuffer;
     @property (nonatomic , assign) GLuint myColorFrameBuffer;
     
     buffer分为frame buffer 和 render buffer2个大类。其中frame buffer 相当于render buffer的管理者。frame buffer object即称FBO，常用于离屏渲染缓存等。render buffer则又可分为3类。colorBuffer、depthBuffer、stencilBuffer。
     //绑定buffer标识符
     glGenRenderbuffers(GLsizei n, GLuint *renderbuffers)
     glGenFramebuffers(GLsizei n, GLuint *framebuffers)
     //绑定空间
     glBindRenderbuffer(GLenum target, GLuint renderbuffer)
     glBindFramebuffer(GLenum target, GLuint framebuffer)

     */
    
    glDeleteBuffers(1, &_myColorRederBuffer);
    self.myColorRederBuffer = 0;
    
    glDeleteBuffers(1, &_myColorFrameBuffer);
    self.myColorFrameBuffer = 0;
}

• 4.设置RederBuffer

//4.设置RederBuffer
- (void)setupRederBuffer {
    
    //1.定义一个缓存区
    GLuint buffer;
    
    //2.申请一个缓存区标志
    glGenBuffers(1, &buffer);
    
    //3.强引用
    self.myColorRederBuffer = buffer;
    
    //4.将表示绑定到GL_RENDERBUFFER
    glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRederBuffer);
    
    //frame buffer仅仅是管理者，不需要分配空间；render buffer的存储空间的分配，对于不同的render buffer，使用不同的API进行分配，而只有分配空间的时候，render buffer句柄才确定其类型
    [self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
}

• 5.设置FrameBuffer

//5.设置FrameBuffer
- (void)setupFrameBuffer {
    
    //1.定义一个缓存区
    GLuint buffer;
    
    //2.申请一个缓存区标志
    glGenBuffers(1, &buffer);
    
    //3.强引用
    self.myColorFrameBuffer = buffer;
    
    //4.将表示绑定到GL_FRAMEBUFFER
    glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
    
    //生成空间之后，则需要将renderbuffer跟framebuffer进行绑定，调用glFramebufferRenderbuffer函数进行绑定，后面的绘制才能起作用
    //5.将_myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到GL_COLOR_ATTACHMENT0上。
    glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRederBuffer);
    
        //接下来，可以调用OpenGL ES进行绘制处理，最后则需要在EGALContext的OC方法进行最终的渲染绘制。这里渲染的color buffer,这个方法会将buffer渲染到CALayer上。- (BOOL)presentRenderbuffer:(NSUInteger)target;
}

• 6.开始渲染

//6.开始渲染
- (void)rederLayer {
    
    //设置清屏颜色
    glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
    //清除屏幕
    glClear(GL_COLOR_BUFFER_BIT);
    
    //1.设置屏幕大小
    GLfloat 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);
    
    //2.读取顶点、片元着色器程序
    NSString *vertFile = [[NSBundle mainBundle] pathForResource:@"shaderv" ofType:@"vsh"];
    NSString *fragFile = [[NSBundle mainBundle] pathForResource:@"shaderf" ofType:@"fsh"];
    
    //3.加载shader
    self.myPrograme = [self loadShaders:vertFile withFrag:fragFile];
    
    //4.连接
    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;
    }
    
    NSLog(@"Program Link Success!");
    
    //5.使用program
    glUseProgram(self.myPrograme);
    
    //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.5, -1.0f,      1.0f, 0.0f, //右下
    };
    
    
    /*
    // 解决渲染图片倒置解决方案一、
     //修改为以下坐标，并且在获取渲染弧度radians 将10改为0 即可
     //1.解决渲染图片倒置问题：
     GLfloat attrArr[] =
     {
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, //右下
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     -0.5f, -0.5f, 0.0f,       0.0f, 1.0f, // 左下
     0.5f, 0.5f, 0.0f,         1.0f, 0.0f, // 右上
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, // 右下
     };
    */
    //顶点缓存区
    GLuint attrBuffer;
    //申请一个缓存区标识符
    glGenBuffers(1, &attrBuffer);
    //将atrrBuffer绑定到GL_ARRAY_BUFFER 标识符上
    glBindBuffer(GL_ARRAY_BUFFER, attrBuffer);
    //把顶点数据从GPU内存复制到GPU上
    glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
    
    //将顶点数据通过myPrograme中的传递到顶点着色程序的position
    //1.glGetAttribLocation,用来获取vertex attribute的入口的.2.告诉OpenGL ES,通过glEnableVertexAttribArray，3.最后数据是通过glVertexAttribPointer传递过去的。
    //注意：第二参数字符串必须和shaderv.vsh中的输入变量：position保持一致
    GLuint position = glGetAttribLocation(self.myPrograme, "position");
    
    //2.设置合适的格式从buffer里面读取
    glEnableVertexAttribArray(position);
    
    //3.设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(position, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
    
    //------处理纹理数据
    //1.glGetAttribLocation,用来获取vertex attribute的入口的.
    //注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
    GLuint textColor = glGetAttribLocation(self.myPrograme, "textCoordinate");
    
    //2.设置合适的格式从buffer里面读取数据
    glEnableVertexAttribArray(textColor);
    
    //3.设置读取方式
    //参数1：index,顶点数据的索引
    //参数2：size,每个顶点属性的组件数量，1，2，3，或者4.默认初始值是4.
    //参数3：type,数据中的每个组件的类型，常用的有GL_FLOAT,GL_BYTE,GL_SHORT。默认初始值为GL_FLOAT
    //参数4：normalized,固定点数据值是否应该归一化，或者直接转换为固定值。（GL_FALSE）
    //参数5：stride,连续顶点属性之间的偏移量，默认为0；
    //参数6：指定一个指针，指向数组中的第一个顶点属性的第一个组件。默认为0
    glVertexAttribPointer(textColor, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat)*5, (float *)NULL + 3);
    
    //加载纹理
    GLuint t = [self setupTexture:@"timg"];
    
    if (t == 0) {
        NSLog(@"loaded Texture Failer");
        return;
    }
    
    //注意，想要获取shader里面的变量，这里记得要在glLinkProgram后面，后面，后面！
    /*
     一个一致变量在一个图元的绘制过程中是不会改变的，所以其值不能在glBegin/glEnd中设置。一致变量适合描述在一个图元中、一帧中甚至一个场景中都不变的值。一致变量在顶点shader和片断shader中都是只读的。首先你需要获得变量在内存中的位置，这个信息只有在连接程序之后才可获得
     */
    //rotate等于shaderv.vsh中的uniform属性，rotateMatrix
    GLuint rotate = glGetUniformLocation(self.myPrograme, "rotateMatrix");
    
    // 解决渲染图片倒置解决方案二
    // 直接将10 改为180
    //获取渲染得弧度
    float radians = 10 * 3.14159f / 180.0f;
    //求得弧度对于的sin/cos值
    float s = sinf(radians);
    float c = cosf(radians);
    
    //z轴旋转矩阵 参考3D数学第二节课的围绕z轴渲染矩阵公式
    //为什么和公式不一样？因为在3D课程中用的是横向量，在OpenGL ES用的是列向量
    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, &zRotation[0]);
    
    glDrawArrays(GL_TRIANGLES, 0, 6);
    
    [self.myContext presentRenderbuffer:GL_RENDERBUFFER];
}

#pragma mark - loadShader
//加载shader
- (GLuint)loadShaders:(NSString *)vert withFrag:(NSString *)frag {
    
    //定义2个临时着色器对象
    GLuint verShader, fragShader;
    //创建program
    GLint program = glCreateProgram();
    
    //编译顶点着色程序、片元着色程序
    //参数1: 编译完存储的底层地址
    //参数2: 编译的类型，GL_VERTEX_SHADER(顶点)、
    //参数3: 文件路径
    [self complieShader:&verShader type:GL_VERTEX_SHADER file:vert];
    [self complieShader:&fragShader type:GL_FRAGMENT_SHADER file:frag];
    
    //创建最终的程序
    glAttachShader(program, verShader);
    glAttachShader(program, fragShader);
    
    //释放不需要的shader
    glDeleteShader(verShader);
    glDeleteShader(fragShader);
    
    return program;
}

//连接shader
- (void)complieShader:(GLuint *)shader type:(GLenum)type file:(NSString *)file {
    
    //读取文件路径字符串
    NSString *content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
    const GLchar *source = (GLchar *)[content UTF8String];
    
    //创建一个shader（根据type类型)
    *shader = glCreateShader(type);
    
    //将顶点着色器源码附加到着色器对象上。
    //参数1：shader,要编译的着色器对象 *shader
    //参数2：numOfStrings,传递的源码字符串数量 1个
    //参数3：strings,着色器程序的源码（真正的着色器程序源码）
    //参数4：lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
    glShaderSource(*shader, 1, &source, NULL);
    
    //把着色器源码编译成目标代码
    glCompileShader(*shader);
}

- (GLuint)setupTexture:(NSString *)fileName {
    
    //1.获取图片的CGImageRef
    CGImageRef spriteImage = [UIImage imageNamed:fileName].CGImage;
    
    //判断图片是否获取成功
    if (!spriteImage) {
        NSLog(@"Fail to Load image %@", fileName);
        return 0;
    }
    
    //2.读取图片的大小，宽和高
    size_t width = CGImageGetWidth(spriteImage);
    size_t height = CGImageGetHeight(spriteImage);
    
    //3.获取图片字节数 宽*高*4 (RGBA)
    GLubyte * spriteData = (GLubyte *) calloc(width * height * 4, sizeof(GLubyte));
    
    //4.创建上下文
    /*
     参数1：data,指向要渲染的绘制图像的内存地址
     参数2：width,bitmap的宽度，单位为像素
     参数3：height,bitmap的高度，单位为像素
     参数4：bitPerComponent,内存中像素的每个组件的位数，比如32位RGBA，就设置为8
     参数5：bytesPerRow,bitmap的没一行的内存所占的比特数
     参数6：colorSpace,bitmap上使用的颜色空间
     参数7: kCGImageAlphaPremultipliedLast：RGBA
     */
    CGContextRef spriteContext = CGBitmapContextCreate(spriteData, width, height, 8, width * 4, CGImageGetColorSpace(spriteImage), kCGImageAlphaPremultipliedLast);
    
    //5、在CGContextRef上绘图
    /*
     CGContextDrawImage 使用的是Core Graphics框架，坐标系与UIKit 不一样。UIKit框架的原点在屏幕的左上角，Core Graphics框架的原点在屏幕的左下角。
     CGContextDrawImage
     参数1：绘图上下文
     参数2：rect坐标
     参数3：绘制的图片
     */
    CGRect rect = CGRectMake(0, 0, width, height);
    //使用默认方式绘制，发现图片是到的
    CGContextDrawImage(spriteContext, rect, spriteImage);
    
    /*
     解决图片倒置的方法三:
     CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
     CGContextTranslateCTM(spriteContext, 0, rect.size.height);
     CGContextScaleCTM(spriteContext, 1.0, -1.0);
     CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
     CGContextDrawImage(spriteContext, rect, spriteImage);
     */
    
    //6.画图完毕就释放上下文
    CGContextRelease(spriteContext);
    
    //5.绑定纹理到默认的纹理ID（这里只有一张图片，故而相当于默认于片元着色器里面的colorMap，如果有多张图不可以这么做）
    glBindTexture(GL_TEXTURE_2D, 0);
    
    // 设置纹理属性
    /**
     参数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_NEAREST);
    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;
    
    //载入纹理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);
    
    //绑定纹理
    /**
     参数1: 纹理维度
     参数2: 纹理ID，因为只有一个纹理，给0就可以了。
     */
    glBindTexture(GL_TEXTURE_2D, 0);
    
    //释放spriteData
    free(spriteData);
    
    return 1;
}

案例中遇到的问题与解决方案

• 在案例当中会遇到图片倒置的问题，那么如何解决呢？
• 解决方法一：调整坐标并且在获取渲染弧度radians 将10改为0 即可

 /*
    
     //修改为以下坐标，并且在获取渲染弧度radians 将10改为0 即可
     //1.解决渲染图片倒置问题：
     GLfloat attrArr[] =
     {
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, //右下
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     -0.5f, -0.5f, 0.0f,       0.0f, 1.0f, // 左下
     0.5f, 0.5f, 0.0f,         1.0f, 0.0f, // 右上
     -0.5f, 0.5f, 0.0f,        0.0f, 0.0f, // 左上
     0.5f, -0.5f, 0.0f,        1.0f, 1.0f, // 右下
     };

• 解决方法二： 直接将10度 改为180度

    
    // 解决渲染图片倒置解决方案二
    // 直接将10 改为180
    //获取渲染得弧度
    float radians = 10 * 3.14159f / 180.0f;

• 解决方法三：通过对图形的旋转调整，不过不建议这种使用方法，太麻烦

    /*
     解决图片倒置的方法三:
     CGContextTranslateCTM(spriteContext, rect.origin.x, rect.origin.y);
     CGContextTranslateCTM(spriteContext, 0, rect.size.height);
     CGContextScaleCTM(spriteContext, 1.0, -1.0);
     CGContextTranslateCTM(spriteContext, -rect.origin.x, -rect.origin.y);
     CGContextDrawImage(spriteContext, rect, spriteImage);
     */

image.png image.png image.png image.png image.png image.png image.png