OpenGLES自定义顶点/片元着色器&编译连接(二)
一.不采用GLKBaseEffect，使用编译连接自定义顶点/片元着色器(shader)，用简单的glsl语言来实现顶点/片元，并进行简单的变换。
具体思路如图：
具体思路
二.编译链接前，我们先来了解一些基本的OpenGLES的函数参数的说明
2.1编译/链接流程说明
1）着⾊器与程序对象
2）创建和编译着⾊器
3）创建并链接程序
4）获取和设置统⼀变量
5）获取和设置属性
6）着⾊器编译器与程序⼆进制代码
需要创建2个基本对象才能⽤着⾊器进⾏渲染: 着⾊器对象和程序对象，获取链接后着⾊器对象的⼀般过程包括6个步骤:
1. 创建⼀个顶点着⾊器对象和⼀个⽚段着⾊器对象
2. 将源代码链接到每个着⾊器对象
3. 编译着⾊器对象
4. 创建⼀个程序对象
5. 将编译后的着⾊器对象连接到程序对象
6. 链接程序对象
2.2函数及参数说明
创建着色器:GLuint glCreateShader(GLenum type)参数tyle一般使用GL_VERTEX_SHADER（顶点着色器） 或者GL_FRAGMENT_SHADER（片元着色器）返回着色器句柄
删除着色器:glDeleteShader(GLuint shader)参数:设置刚才创建好的顶点/片元句柄
void glShaderSource(GLuint shader , GLSizei count ,const GLChar * const *string, const GLint
*length)将着色器源码附加到着色器对象上（在上一篇文章我写好了两个顶点/片元着色器.vsh和.fsh文件里面，这里需要将写好的源代码附着到着色器上）参数说明：
1）参数1：shader,要编译的着色器对象 *shader
2）参数2：numOfStrings,传递的源码字符串数量 1个 特别说明：此参数在大多情况下为1
3）参数3：strings,着色器程序的源码（真正的着色器程序源码）
4）lenOfStrings,长度，具有每个字符串长度的数组，或NULL，这意味着字符串是NULL终止的
对应程序代码：
-(void)compileShader:(GLuint*)shadertype:(GLenum)typefile:(NSString*)file{
//1.读取文件路径字符串,根据传入的顶点/片元着色器源代码地址转换为C语言字符串
NSString* content = [NSString stringWithContentsOfFile:file encoding:NSUTF8StringEncoding error:nil];
const GLchar* source = (GLchar*)[content UTF8String];
//2.创建一个shader（根据type类型）
*shader =glCreateShader(type);
glShaderSource(*shader,1, &source,NULL);
//4.把着色器源代码编译成目标代码
glCompileShader(*shader);
}
OpenGLES不能像iOS那样设置断电，输出信息，想要看刚才创建并编译好的着色器可以通过:void glGetShaderiv(GLuint shader , GLenum pname , GLint *params )检查链接状态，在下面我会具体讲这个怎么使用和void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog)获取输出日志，具体参数如下:
（1） void glGetShaderiv(GLuint shader , GLenum pname , GLint *params );
shader— 需要编译的着⾊器对象句柄
pname— 获取的信息参数,可以为GL_COMPILE_STATUS/GL_DELETE_STATUS/GL_INFO_LOG_LENGTH/GL_SHADER_SOURCE_LENGTH/ GL_SHADER_TYPE
params— 指向查询结果的整数存储位置的指针
（2）void glGetShaderInfolog(GLuint shader , GLSizei maxLength, GLSizei *length , GLChar *infoLog);
shader— 需要获取信息⽇志的着⾊器对象句柄
maxLength— 保存信息⽇志的缓存区⼤⼩
length— 写⼊的信息⽇志的⻓度(减去null 终⽌符); 如果不需要知道⻓度. 这个参数可以为Null
infoLog— 指向保存信息⽇志的字符缓存区的指针
2.3创建与链接程序
（1）创建程序
GLUint glCreateProgram( ) 说明:创建⼀个程序对象返回值: 返回⼀个执⾏新程序对象的句柄。 同样，只要有创建就有删除void glDeleteProgram( GLuint program )参数为创建好的程序
void glAttachShader( GLuint program , GLuint shader )说明：将刚才创建好的顶点/片元着色器附着到创建的程序当中，当然有附着就有断开，void glDetachShader(GLuint program); 向创建的程序发送指令，断开附着
（2）链接程序
glLinkProgram(GLuint program) 参数为刚才创建好的程序
检查链接状态：void glGetProgramiv (GLuint program,GLenum pname, GLint *params)
参数说明：program: 需要获取信息的程序对象句柄
pname: 获取信息的参数,可以是:
GL_ACTIVE_ATTRIBUTES
GL_ACTIVE_ATTRIBUTES_MAX_LENGTH
GL_ACTIVE_UNIFORM_BLOCK
GL_ACTIVE_UNIFORM_BLOCK_MAX_LENGTH
GL_ACTIVE_UNIFROMS
GL_ACTIVE_UNIFORM_MAX_LENGTH
GL_ATTACHED_SHADERS
GL_DELETE_STATUS
GL_INFO_LOG_LENGTH
GL_LINK_STATUS
GL_PROGRAM_BINARY_RETRIEVABLE_HINT
GL_TRANSFORM_FEEDBACK_BUFFER_MODE
GL_TRANSFORM_FEEDBACK_VARYINGS
GL_TRANSFORM_FEEDBACK_VARYING_MAX_LENGTH
GL_VALIDATE_STATUS
params: 指向查询结果整数存储位置的指针
对应的程序里面的代码为：
glLinkProgram(self.myPrograme);
GLintlink Status;
//获取链接状态
glGetProgramiv(self.myPrograme,GL_LINK_STATUS, &linkStatus);
if(linkStatus ==GL_FALSE) {
GLchar message[512];说明：因为不知道错误信息的长度，设置数组的时候可以尽量大一点，512可以修改
glGetProgramInfoLog(self.myPrograme,sizeof(message),0, &message[0]);
NSString*messageString = [NSStringstringWithUTF8String:message];
NSLog(@"Program Link Error:%@",messageString);
return;
}
（3）使用程序
void glUseProgram(GLuint program)说明：在创建和链接好之后，使用程序
三.FrameBuffffer (帧缓冲区)和RenderBuffffer（渲染缓冲区）说明以及他两的关系
首先我们先来看一张图：
FrameBuffffer Objects,RenderBuffffer Objects and Textures
来自苹果爸爸的官网解释：
⼀个renderbuffffer 对象是通过应⽤分配的⼀个2D图像缓存区。renderbuffffer 能够被⽤来分配和存储颜⾊、深度或者模板值。也能够在⼀个framebuffffer被⽤作颜⾊、深度、模板的附件。⼀个renderbuffffer是⼀个类似于屏幕窗⼝系统提供可绘制的表⾯。⽐如pBuffffer。⼀个renderbuffffer,然后它并不能直接的使⽤像⼀个GL 纹理。
⼀个 frameBuffffer 对象(通常被称为⼀个FBO)。是⼀个收集颜⾊、深度和模板缓存区的附着点。描述属性的状态，例如颜⾊、深度和模板缓存区的⼤⼩和格式，都关联到FBO(Frame Buffffer Object)。并且纹理的名字和renderBuffffer 对象也都是关联于FBO。各种各样的2D图形能够被附着framebuffffer对象的颜⾊附着点。它们包含了renderbuffffer对象存储的颜⾊值、⼀个2D纹理或⽴⽅体贴图。或者⼀个mip-level的⼆维切⾯在3D纹理。同样，各种各样的2D图形包含了当时的深度值可以附加到⼀个FBO的深度附着点钟去。唯⼀的⼆维图像，能够附着在FBO的模板附着点，是⼀个renderbuffffer对象存储模板值。
四.设置RenderBuffer&FrameBuffer
(一)设置RenderBuffer
1.定义一个缓存区ID
GLuintbuffer;
2.申请一个缓存区标志
glGenRenderbuffers(1, &buffer);
3.用属性保存
self.myColorRenderBuffer = buffer;
4.将标识符绑定到GL_RENDERBUFFER
glBindRenderbuffer(GL_RENDERBUFFER, self.myColorRenderBuffer);
5.Context将可绘制对象drawable object's CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
[self.myContext renderbufferStorage:GL_RENDERBUFFER fromDrawable:self.myEagLayer];
（二）设置FrameBuffer
1.定义一个缓存区ID
GLuint buffer;
2.申请一个缓存区标志
//glGenRenderbuffers(1, &buffer);
//glGenFramebuffers(1, &buffer);
glGenBuffers(1, &buffer);//你也可以指定对应的缓冲区标志，如上面两行
3.
self.myColorFrameBuffer = buffer;
4.
glBindFramebuffer(GL_FRAMEBUFFER, self.myColorFrameBuffer);
/*生成帧缓存区之后，则需要将renderbuffer跟framebuffer进行绑定，
调用glFramebufferRenderbuffer函数进行绑定到对应的附着点上，后面的绘制才能起作用
*/
5.将渲染缓存区myColorRenderBuffer 通过glFramebufferRenderbuffer函数绑定到 GL_COLOR_ATTACHMENT0上。
glFramebufferRenderbuffer(GL_FRAMEBUFFER, GL_COLOR_ATTACHMENT0, GL_RENDERBUFFER, self.myColorRenderBuffer);
注意：这里不会将Context与帧缓冲区联系起来，因为帧缓冲区的控制是由GPU控制，当我们用于图像图形显示的时候，是从渲染缓冲区拿的，我们只需要开辟帧缓冲区，把它和渲染缓冲区一起绑定到 GL_COLOR_ATTACHMENT0就行了，表示帧缓冲区和渲染缓冲区对应的关系，可以看上面苹果爸爸的解释，你会看到最后一行代码和设置渲染缓冲区的是不一样的，渲染缓冲区是把Context将可绘制对象drawable object's CAEAGLLayer的存储绑定到OpenGL ES renderBuffer对象
五.使用固GLKView定着色器和自定义着色器的函数使用不同点（开辟和绑定我们就不说了，代码一样，直接讲不通的地方）&加载纹理的不同点
1.设置顶点坐标的不同点
在GLKView固定着色器里面，我们设置顶点坐标数据：
glEnableVertexAttribArray(GLKVertexAttribPosition);
glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 0);
在自定义顶点着色器，我们设置顶点坐标数据:
把顶点数据从CPU内存复制到GPU上
glBufferData(GL_ARRAY_BUFFER, sizeof(attrArr), attrArr, GL_DYNAMIC_DRAW);
将顶点数据通过myPrograme中的传递到顶点着色程序的position
1.glGetAttribLocation,用来获取vertex attribute的入口的.
2.告诉OpenGL ES,通过glEnableVertexAttribArray，
3.最后数据是通过glVertexAttribPointer传递过去的。
(1)注意：第二参数字符串必须和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,NULL);
2.设置纹理坐标的不同点
在GLKView固定着色器里面，我们设置纹理坐标数据：
纹理坐标数据
glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(GLfloat) * 5, (GLfloat *)NULL + 3);
在自定义顶点着色器，我们设置纹理坐标数据:
(1).glGetAttribLocation,用来获取vertex attribute的入口的.
//注意：第二参数字符串必须和shaderv.vsh中的输入变量：textCoordinate保持一致
GLuint textCoor = glGetAttribLocation(self.myPrograme, "textCoordinate");
(2).设置合适的格式从buffer里面读取数据
glEnableVertexAttribArray(textCoor);
(3).设置读取方式（参数解释看上）
glVertexAttribPointer(textCoor,2,GL_FLOAT,GL_FALSE,sizeof(GLfloat)*5, (float*)NULL+3);
3.加载纹理的不同点
在GLKView固定着色器里面，我们设置加载纹理：
1.获取纹理图片路径
NSString *filePath = [[NSBundle mainBundle]pathForResource:@"timg" ofType:@"jpg"];
2.设置纹理参数
纹理坐标原点是左下角,但是图片显示原点应该是左上角.
NSDictionary *options = [NSDictionary dictionaryWithObjectsAndKeys:@(1),GLKTextureLoaderOriginBottomLeft, nil];
GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithContentsOfFile:filePath options:options error:nil];
3.使用苹果GLKit 提供GLKBaseEffect 完成着色器工作(顶点/片元)
cEffect = [[GLKBaseEffect alloc]init];
cEffect.texture2d0.enabled = GL_TRUE;
cEffect.texture2d0.name= textureInfo.name;
在自定义着色器里面，我们设置加载纹理：
//从图片中加载纹理
- (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_twidth =CGImageGetWidth(spriteImage);
size_theight =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上使用的颜色空间 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：绘制的图片
*/
CGRectrect =CGRectMake(0,0, width, height);
//6.使用默认方式绘制
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);
floatfw = 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);
return0;
}
效果
下一篇，我们讲纹理的翻转
最后附上demo:链接: https://pan.baidu.com/s/1-6RJ0toD6WUkoozX0Fu1Cw 提取码: fweb
