OpenGLES-03 使用索引绘制矩形

这篇文章我们同样借助上篇文章《OpenGLES-02 绘制基本图元(点、线、三角形)》的代码,使用另外一种画法来绘制一个矩形。

修改render方法如下:

-(void)render
{
    //设置清屏颜色,默认是黑色,如果你的运行结果是黑色,问题就可能在这儿
    glClearColor(0.3, 0.5, 0.8, 1.0);
    /*
    glClear指定清除的buffer
    共可设置三个选项GL_COLOR_BUFFER_BIT,GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT
    也可组合如:glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    这里我们只用了color buffer,所以只需清除GL_COLOR_BUFFER_BIT
     */
    glClear(GL_COLOR_BUFFER_BIT);
    
    // Setup viewport
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
    
    GLfloat vertices[] = {
        // 第一个三角形
        0.5f, 0.5f, 0.0f,   // 右上角
        0.5f, -0.5f, 0.0f,  // 右下角
        -0.5f, 0.5f, 0.0f,  // 左上角
        // 第二个三角形
        0.5f, -0.5f, 0.0f,  // 右下角
        -0.5f, -0.5f, 0.0f, // 左下角
        -0.5f, 0.5f, 0.0f   // 左上角
    };
    
    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices);
    glEnableVertexAttribArray(_positionSlot);
    
    glDrawArrays(GL_TRIANGLES, 0, 6);
    [_context presentRenderbuffer:_renderBuffer];
}

运行结果.png

如上代码所示,我们绘制的矩形是由2个三角形组成的,一个三角形3个顶点,共使用了6个顶点,其中第2个顶点与第4个顶点相同(0.5,-0.5,0.0),第3个顶点与第6个顶点相同(-0.5,0.5,0.0)。 其实对于矩形来说,它只有4个而不是6个顶点,绘制这个矩形,我们指定了右下角和左上角两次,这样就产生了50%的额外开销。还好我们这会儿只要画一个矩形,当我们要画成千上万个矩形或者别的多边形的时候,这样的绘制方法产生的额外消耗会更多从而产生一大堆浪费。 更好的解决方案是只储存不同的顶点,并设定绘制这些顶点的顺序。这样子我们只要储存4个顶点就能绘制矩形了,之后只要指定绘制的顺序就行了。还好OpenGL有这样的方式:

glDrawElements();

glDrawElements 函数的原型为:glDrawElements(GLenum mode, GLsizei count, GLenum type, const GLvoid *indices);

第一个参数 mode 为描绘图元的模式,其有效值为:GL_POINTS, GL_LINES, GL_LINE_STRIP,  GL_LINE_LOOP,  GL_TRIANGLES,  GL_TRIANGLE_STRIP, GL_TRIANGLE_FAN。这些模式具体含义下面有介绍。

第二个参数 count 为顶点索引的个数也就是,type 是指顶点索引的数据类型,因为索引始终是正值,索引这里必须是无符号型的非浮点类型,因此只能是 GL_UNSIGNED_BYTE, GL_UNSIGNED_SHORT, GL_UNSIGNED_INT 之一,为了减少内存的消耗,尽量使用最小规格的类型如 GL_UNSIGNED_BYTE。

第三个参数 indices 是存放顶点索引的数组。(indices 是 index 的复数形式,3D 里面很多单词的复数都挺特别的。)

索引缓冲对象(简称EBO)的工作方式正是这样的。和顶点缓冲对象一样,EBO也是一个缓冲,它专门储存索引,OpenGL调用这些顶点的索引来决定该绘制哪个顶点。所谓的索引绘制(Indexed Drawing)正是我们问题的解决方案。首先,我们先要定义(独一无二的)顶点,和绘制出矩形所需的索引:

GLfloat vertices[] = {
    0.5f, 0.5f, 0.0f,   // 右上角
    0.5f, -0.5f, 0.0f,  // 右下角
    -0.5f, -0.5f, 0.0f, // 左下角
    -0.5f, 0.5f, 0.0f   // 左上角
};

GLubyte indices[] = { // 注意索引从0开始! 
    0, 1, 3, // 第一个三角形
    1, 2, 3  // 第二个三角形
};

然后整个render函数的代码该是这样的:

-(void)render
{
    //设置清屏颜色,默认是黑色,如果你的运行结果是黑色,问题就可能在这儿
    glClearColor(0.3, 0.5, 0.8, 1.0);
    /*
    glClear指定清除的buffer
    共可设置三个选项GL_COLOR_BUFFER_BIT,GL_DEPTH_BUFFER_BIT和GL_STENCIL_BUFFER_BIT
    也可组合如:glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    这里我们只用了color buffer,所以只需清除GL_COLOR_BUFFER_BIT
     */
    glClear(GL_COLOR_BUFFER_BIT);
    
    // Setup viewport
    glViewport(0, 0, self.frame.size.width, self.frame.size.height);
 
    GLfloat vertices[] = {
        0.5f, 0.5f, 0.0f,   // 右上角
        0.5f, -0.5f, 0.0f,  // 右下角
        -0.5f, -0.5f, 0.0f, // 左下角
        -0.5f, 0.5f, 0.0f   // 左上角
    };
    
    GLubyte indices[] = { // 注意索引从0开始!
        0, 1, 3, // 第一个三角形
        1, 2, 3  // 第二个三角形
    };
    
    glVertexAttribPointer(_positionSlot, 3, GL_FLOAT, GL_FALSE, 0, vertices);
    glEnableVertexAttribArray(_positionSlot);
    glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_BYTE, indices);  //6表示有6个索引数据,可以使用sizeof(indices)/sizeof(GLubyte)来确定
    
    [_context presentRenderbuffer:_renderBuffer];
}

两种方式的运行结果是一样的,我们可以发现,运行图中的矩形是个长方形,而我们给的坐标,照理来讲应该是正方形的,这是因为屏幕的宽高比不同,对应的openGL坐标x、y坐标也不一样,后面我们会讲到投影矩阵,投影矩阵能修复这个问题。

所有教程代码在此 : https://github.com/qingmomo/iOS-OpenGLES-

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

2016.07 第一周 群问题分享

HTML+CSS 如何用CSS实现一个元素footer一直贴在浏览器底部 2016.06.27~2016.07.01 核心概念 margin-bottom负值、...

295100
来自专栏Linux驱动

动态规划-数正方形(详解)

描述: 晓萌有一个N×N的的棋盘,中间有N*N个正方形的1×1的格子,他随机在棋盘上撒上一些棋子(假设全部正好落在各个格子里)。他希望知道,当前的棋盘上有多少个...

22880
来自专栏程序员的知识天地

JavaScript学习笔记

【如果大家对程序员,web前端感兴趣,想要学习的,关注一下小编吧。加群:731771211。免费赠送web前端系统的学习资料!!前端学习必备公众号ID:mtbc...

24320
来自专栏码洞

Go 语言切片的三种特殊状态 —— 90% 的开发者都忽视了

我们今天要来讲一个非常细节的小知识,这个知识被大多数 Go 语言的开发者无视了,它就是切片的三种特殊状态 —— 「零切片」、「空切片」和「nil 切片」。

9320
来自专栏前端小叙

jquery方法.serializeArray()获取name和value并转为json数组

15130
来自专栏郭霖

Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法

大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了。但是,正如上篇文...

22290
来自专栏PHP在线

jquery事件

parent > child在给定的父元素下匹配所有的子元素 参数 parentSelectorV1.0 任何有效选择器 childSelectorV1.0 用...

33770
来自专栏Golang语言社区

golang讲解(go语言)标准库分析之strings结束篇

今天我们完结了这个strings的包,其实我们就剩下了type Reader和type Replacer这个我们之间讲过io的包,这样大家理解起来就比较省劲了!...

44880
来自专栏阿炬.NET

asp.net mvc 验证码

35470
来自专栏Golang语言社区

Golang语言社区-【基础知识】切片

Go编程切片是一种抽象了Go编程数组。由于Go编程数组允许您定义的变量,可容纳同类的几个数据项类型,但它不提供任何内置的方法来动态地增加它的大小或得到一个子数组...

36980

扫码关注云+社区

领取腾讯云代金券