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