前言
上一篇学习了如何渲染图片，并最终程序到屏幕上。前面也知道同时渲染两张图片，其实是由片元着色器实现的两张图片叠加的功能，最终也只是调用了一次glDrawArrays()函数。因为不管多少张图片，图片的图元类型都是矩形。如果想在图片上画几条直线，那该如何做呢？当然也有人说，可以弄一个这样直线的图片去和另外一张图片叠加(_ 也是一个思路，那还有其它方法吗？这是本文的学习目标)
opengl es系列文章
opengl es之-基础概念(一)
opengl es之-GLSL语言(二)
opengl es之-GLSL语言(三)
opengl es之-常用函数介绍(四)
opengl es之-渲染两张图片(五)
opengl es之-在图片上添加对角线(六)
opengl es之-离屏渲染简介(七)
opengl es之-CVOpenGLESTextureCache介绍(八)
opengl es之-播放YUV文件(九)
需求
在一张图片上画两条对角线，这种需求也经常存在，比如相机的实时画面上的九宫格等等。
思路
前面知道，调用一次glDrawArrays()就是一种类型几何图元的渲染，如果单独实现渲染一张图片和渲染一个对角线然后呈现到屏幕上，我相信都会了，那一起呢？其实可以在渲染结果呈现到屏幕之前两次调用glDrawArrays()函数，即执行两次次渲染管线流程，最后再调用presentRenderbuffer将结果呈现到屏幕上，那这个问题就解决了
准备
依然分为准备上下文环境，开辟帧缓冲区和渲染缓冲区，传递顶点坐标和纹理图片这几个过程。具体代码可以参考上一篇文章，或者Demo这里不再重复。有区别的地方这里做下说明
1、缓冲区
虽然在调用presentRenderbuffer前执行了两次glDrawArrays()，但是帧缓冲区只需要一个即可
2、着色器代码
渲染图片和渲染直线分别使用各自独立的着色器代码，如下：
顶点着色器
attribute vec4 position;
attribute vec2 texcoord;
varying highp vec2 v_texcoord;
void main()
{
gl_Position = position;
v_texcoord = texcoord.xy;
}
因为渲染到一个区域，所以直线和图片的顶点着色器是一样的，对于直线来说，里面有多余的变量，可以不用
图片片元着色器
uniform sampler2D inputImageTexture1;
varying highp vec2 v_texcoord;
void main() {
gl_FragColor = texture2D(inputImageTexture1, v_texcoord);
}
直线片元着色器
void main(){
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
开始渲染的代码
glClearColor(0, 1, 0, 1);
glClear(GL_COLOR_BUFFER_BIT);
glViewport(0, 0, _renderWidth, _renderHeight);
int w1,h1;
void *image1 = [CGImageUtils rgbaImageDataForPath:path width:&w1 height:&h1];
NSLog(@"图片的宽和高 w1 %d h1 %d",w1,h1);
[self.rgbTextureProgram use];
GLuint position = [self.rgbTextureProgram attribLocationForName:@"position"];
GLuint texcoord = [self.rgbTextureProgram attribLocationForName:@"texcoord"];
GLuint s_texture1 = [self.rgbTextureProgram uniformLocationForName:@"inputImageTexture1"];
glVertexAttribPointer(position, 2, GL_FLOAT, GL_FALSE, 0, verData1);
glEnableVertexAttribArray(position);
glVertexAttribPointer(texcoord, 2, GL_FLOAT, GL_FALSE, 0, uvData);
glEnableVertexAttribArray(texcoord);
GLint active,textureSize;
glGetIntegerv(GL_ACTIVE_TEXTURE, &active);
NSLog(@"该设备支持的最大纹理单元数目 %d",active);
// 超过此大小则必须先压缩再传给opengl es，否则opengl es无法渲染
glGetIntegerv(GL_MAX_TEXTURE_SIZE, &textureSize);
NSLog(@"该设备支持的纹理最大的长或宽 %d",textureSize);
glActiveTexture(GL_TEXTURE1);
glGenTextures(1,&texturexId2);
glBindTexture(GL_TEXTURE_2D, texturexId2);
// 此方法必须有，第二个参数要与前面激活的纹理单元数对应，前面是GL_TEXTURE1，这里就是1
glUniform1i(s_texture1, 1);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE); // S方向上的贴图模式
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE); // T方向上的贴图模式
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, (int)w1, (int)h1, 0, GL_RGBA, GL_UNSIGNED_BYTE, image1);
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
// 释放图片像素数据
if (image1) {
free(image1);
}
// 确定要绘制的几何图形，该指令执行后才opengl es指令才开始真正的执行；处于渲染管线的第一阶段，每次glDrawArrays()的调用
// 代表前面所有的指令是一次完整的渲染
glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);
[self.lineprogram use];
GLuint linePosition = [self.lineprogram attribLocationForName:@"position"];
glVertexAttribPointer(linePosition, 2, GL_FLOAT, GL_FALSE, 0, verData2);
glEnableVertexAttribArray(linePosition);
glLineWidth(5.0);
glDrawArrays(GL_LINES, 0, 4);
// 即光栅化阶段，它与opengl es的渲染是独立的，不相干的。当它会将前面所有的渲染结果呈现到屏幕上;
// 前面调用了两次glDrawArrays();所以它会将前面两次渲染的结果呈现到屏幕上
[_context.context presentRenderbuffer:GL_RENDERBUFFER];
rgbTextureProgram代表处理图片的着色器；lineprogram代表处理直线的着色器
每次渲染开始前都要调用一次glUseProgram(handle)函数以激活当前渲染所使用的着色器程序，否则将使用上一次调用glUseProgram()的着色器程序
其它就和单独渲染图片没什么区别了。
项目地址：
具体参考GLView.h下的如下函数：
// 多次渲染，即多次调用glDrawArrays();第一次渲染一张图片，同时再渲染两条直线
- (void)renderTextureAndlinesWithPath:(NSString*)path;
网友评论