一.不采用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（渲染缓冲区）说明以及他两的关系
????????首先我们先来看一张图：
????????来自苹果爸爸的官网解释：
? ? ? ? ? ? ?个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
? ??????????
? ??????
