IOS图片画对角线OpenGLES(六)

前言

上一篇学习了如何渲染图片，并最终程序到屏幕上。前面也知道同时渲染两张图片，其实是由片元着色器实现的两张图片叠加的功能，最终也只是调用了一次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;

Demo