OpenGL ES GLSL相关语法

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

GLSL语言

• xcode中不支持GLSL语言对顶点/片元着色器的编译和连接，因此需要在项目中创建两个空文件，分别命名为shader.vsh和shaderv.fsh.
• 使用vsh、fsh后缀的原因是方便区分着色器，其本质就是一个字符串。是否可以直接使用NSString？并不建议这样做，因为代码结构不清晰，不易读
• 这两个文件中是否可以加中文注释？不建议加中文注释，会报奇怪的错误，由于在xcode中书写GLSL，完全是纯手写，没有任何提示，排查问题不好排查

主要步骤

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

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

GLSL初体验

3种数据修饰类型

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

uniform

uniform可以从客户端传递到顶点种色器、也可以传递到片元着色器，对应的客户端代码glGetUniformLocation用于获取glsl中的变量、glUniform...用于给变量设置值。
uniform可以传递：视图矩阵、投影矩阵、投影视图矩阵，还有纹理数据

attribute

attribute从客户端传递到顶点着色器。
attribute可以传递：顶点、纹理坐标、颜色、法线

varying

在顶点着色器和片元着色器之间传递数据
因为纹理坐标无法使用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;
}

2.片元着色器代码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);