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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 223,207评论 6 521
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 95,455评论 3 400
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 170,031评论 0 366
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 60,334评论 1 300
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 69,322评论 6 398
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,895评论 1 314
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 41,300评论 3 424
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 40,264评论 0 277
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,784评论 1 321
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,870评论 3 343
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,989评论 1 354
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,649评论 5 351
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 42,331评论 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,814评论 0 25
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,940评论 1 275
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 49,452评论 3 379
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,995评论 2 361

推荐阅读更多精彩内容