OpenGL 学习系列---基本形状的绘制

避免图片丢失，建议阅读微信原文：

https://mp.weixin.qq.com/s/XLbFvngRHqVoKbC22BJHGQ

在之前的一篇博客中，讲述了 OpenGL 绘制一个点的流程及相关的代码，其中关于 OpenGL 程序编译部分都是可以在其他项目中接着复用的，接下来会讲到如何去绘制其他的基本图元。

绘制直线

两点确定一条直线，显然绘制一条直线是需要两个顶点数据的。

定义如下顶点数据，绘制一条屏幕对角线的直线：

    float[] lineVertex = {
            -0.5f, 0.5f,
            0.5f, -0.5f
    };

而我们的顶点着色器和片段着色器也会发生一些变化，最终还是绘制一条单一颜色的直线。

顶点着色器代码：

attribute vec4 a_Position;
void main(){
    gl_Position = a_Position;
}

由于是绘制的直线，相比于绘制点，就没有了 gl_PointSize变量来确定大小了。

片段着色器代码：

precision mediump float;
uniform vec4 u_Color;
void main()
{
    gl_FragColor = u_Color;
}

依旧是纯色，目前还没有涉及到颜色的变化。

而在我们给着色器变量绑定数据时，依旧是通过glGetUniformLocation和glGetAttribLocation方法给uniform和attribute类型的u_Color和a_Position变量赋值。

最后还是通过glDrawArrays方法执行绘制。

glDrawArrays(GL_LINES, 0, 2);

GL_LINES代表绘制的类型是直线，而0，2则是绘制的顶点范围。

绘制三角形

绘制三角形和绘制直线基本差不多，从两个点的直线变成了三个点的三角形。

顶点数据也发生了相应的改动，假设如下的数据，注意要以逆时针定义数据。

    float[] triangleVertex = {
            -0.5f, 0.5f,
            -0.5f, -0.5f,
            0.5f, -0.5f
    };

那么最后绘制时，绘制类型也会发生变化了，顶点个数范围也会变化。

 glDrawArrays(GL_TRIANGLES, 0, 3);

绘制三角形结果如图：

绘制矩形

显然，OpenGL 是没有提供矩形这一基本图元的，但是我们可以用两个三角形来拼接成一个矩形。

OpenGL 中提供了一个绘制类型叫做三角形扇，如下图所示：

在上图中，矩形的每一条边上的顶点都被两个三角形使用了，而且中心的顶点被所有四个三角形使用了。

我们不必输入四个三角形的顶点数据来绘制四个三角形从而组成矩形，可以告诉 OpenGL 重用那些顶点数据，把这些顶点作为一个三角形扇绘制。

一个三角形扇以一个中心顶点作为起始，使用相邻的两个顶点创建第一个三角形，接下来的每个顶点都会创建一个三角形，围绕起始的中心点按扇形展开，为了使扇形闭合，我们需要在最后重复第二个点。

所以，以三角形扇的形式绘制一个矩形，我们可以重新定义矩形的顶点数据：

   float[] rectangleVertex = {
		   // 第一个点就是三角形扇的中心点
            0f,    0f, 
            -0.5f, -0.8f,   
            0.5f, -0.8f,   
            0.5f,  0.8f,   
            -0.5f,  0.8f,   
            -0.5f, -0.8f
          // 重复第二个点，使三角形扇闭合
    };

而着色器代码依旧不变，绘制一个纯色的矩形，绘制代码如下：

  glDrawArrays(GL_TRIANGLE_FAN, 0, 6);

绘制类型为GL_TRIANGLE_FAN，顶点数量也变成了 6 个。

那么问题来了，OpenGL 到底为我们提供哪些绘制方式呢？如下表所示：

绘制类型	绘制方式
GL_POINTS	将传入的顶点坐标作为单独的点绘制
GL_LINES	将传入的坐标作为单独线条绘制，ABCDEFG六个顶点，绘制AB、CD、EF三条线
GL_LINE_STRIP	将传入的顶点作为折线绘制，ABCD四个顶点，绘制AB、BC、CD三条线
GL_LINE_LOOP	将传入的顶点作为闭合折线绘制，ABCD四个顶点，绘制AB、BC、CD、DA四条线。
GL_TRIANGLES	将传入的顶点作为单独的三角形绘制，ABCDEF绘制ABC,DEF两个三角形
GL_TRIANGLE_STRIP	将传入的顶点作为三角条带绘制，ABCDEF绘制ABC,BCD,CDE,DEF四个三角形
GL_TRIANGLE_FAN	将传入的顶点作为扇面绘制，ABCDEF绘制ABC、ACD、ADE、AEF四个三角形

绘制圆形

现在我们要绘制一个圆形，显然 OpenGL 是没有提供圆形的绘制类型的，这就要用到上面提供的绘制方式了。

以绘制一个实心的圆形为例子：

有了上面三角形扇绘制矩形的例子，我们按照同样的思想，把一个圆形分成多个三角形组成，如下图所示：

我们分的三角形越多，三角形个数趋向于无限大的时候，整个图案也就越趋向于圆。

这样一来，顶点数据就不能再靠手写了。

    // 圆形分割的数量，分成 360 份，可由 360 个线段组成空心圆，也可以由 360 个三角形组成实心圆
    public static final int VERTEX_DATA_NUM = 360;
    // 360 个顶点的位置，因为有 x 和 y 坐标，所以 double 一下，再加上中心点 和 闭合的点
    float[] circleVertex = new float[VERTEX_DATA_NUM * 2 + 4];
    // 分成 360 份，每一份的弧度
    float radian = (float) (2 * Math.PI / VERTEX_DATA_NUM);
    // 绘制的半径
    float radius = 0.8f;
    
    // 初始化圆形的顶点数据
    private void initVertexData() {
        // 中心点
        circleVertex[0] = 0f;
        circleVertex[1] = 0f;
        // 圆的 360 份的顶点数据
        for (int i = 0; i < VERTEX_DATA_NUM; i++) {
            circleVertex[2 * i + 2] = (float) (radius * Math.cos(radian * i));
            circleVertex[2 * i + 1 + 2] = (float) (radius * Math.sin(radian * i));
        }
        // 闭合点
        circleVertex[VERTEX_DATA_NUM * 2 + 2] = (float) (radius * Math.cos(radian));
        circleVertex[VERTEX_DATA_NUM * 2 + 3] = (float) (radius * Math.sin(radian));
    }

把圆分成了 360 份。圆形的顶点数据也分为了三部分了，以原心作为我们的中心点，中间的 360 个点用来绘制三角形，最后一个点使得我们的图形闭合。

在绘制时依旧使用三角形扇的形式来绘制。

	// 要把顶点数据个数对应上
    glDrawArrays(GL_TRIANGLE_FAN, 0, VERTEX_DATA_NUM + 2);

当然，在绘制圆形时，我们也可以不单独定义原点和闭合点，直接使用圆形的 360 个顶点来绘制，最终的结果依旧会是一个圆形。

当然，我们也可以使用其他的绘制类型，比如直线，来绘制一个空心的圆形。

还是上面定义的顶点数据，但是我们只用其中分割成 360 份的那部分顶点数据就好了，也就是去掉首位两个点，然后把这个 360 个点依次连接绘制成圆形。

        glDrawArrays(GL_LINE_LOOP, 1, VERTEX_DATA_NUM );

hhttp://7xqe3m.com1.z0.glb.clouddn.com/blog_opengl_circle_empty_yellow.png

这样就完成一个圆形的绘制。

正多边形的绘制

在绘制圆形的基础上，我们还可以进行拓展一下。

要知道，最后我们的圆形实际上是一个正多边形来趋近于圆形的，只是肉眼难以观察到了，毕竟它是一个正三百六十边形…

那么假设我们要绘制正五边形、正六边形、正七边形呢？

实际上也很简单，只要把圆分成五份、六份、七份就好了。

展示一些绘制图如下：

正五边形：

正六边形：

正七边形：

小结

到此，基本讲述了 OpenGL 的绘制流程以及基本图形的绘制。

根据图形和绘制类型来采用以何种方式进行绘制，以及定义顶点数据，最后直接绘制对应图形即可。

但显然，这还是不够的，还是有很多问题的。

想要绘制一个圆形，结果却成了椭圆；想要绘制一个正五边形，却成了歪的；这到底是道德的沦丧还是人性的泯灭，一切的揭晓就在下一篇博客中了。

具体代码详情，可以参考我的 Github 项目： https://github.com/glumes/AndroidOpenGLTutorial

参考

1、http://blog.csdn.net/junzia/article/details/52818488

知识星球

一个专注音视频领域问答的小圈子

公众号音视频开发进阶对应的知识星球，一个编程开发领域的专业圈子，贩卖知识和技巧！

※ 入群须知：了解该星球能提供的价值和帮助，在提问时务必阐述好背景，附带相关的信息。

iOS 用户可以加我微信 ezglumes 邀请你进星球，有疑问也可以加我微信咨询。

※ 星球内容：

基础教程：

在知识星球连载的干货教程，可以在专栏中找到，随着时间的推移，教程也会越来越多：

- 音视频基础概念
- WebRTC 入门教程及源码实践
- 播放器教程及源码实践
- OpenGL 和特效开发教程
- Vulkan 入门教程

部分内容可以在博客 https://glumes.com 中检索到，后面会在星球里持续更新.

干货分享：

涵盖了移动开发和音视频工程领域的绝大部分，从项目实战角度出发，提升能力，包括但不限于以下领域：

- Android/iOS 移动开发
- Camera 开发
- 短视频编辑 SDK 项目实践
- 在线直播和推流
- WebRTC 开发
- 播放器基础和提高
- OpenGL 图像渲染及特效开发
- C++ 基础和提高
- FFmpeg 使用和分析
- 干货资源和书籍分享

不止于技术方面的，各种 IT 新闻、茶余饭后、生活趣事也欢迎大家分享！！！

技术答疑解惑：

针对上述基础教程和干货分享的答疑，另外还有音视频和 IT 开发中的各种交流讨论。

- 基础知识点答疑
- 工业项目实践答疑
- 问题排查思路分析

一个 BUG 排查很久，不如来星球里提个问题，效率提升百倍。

求职和面试辅导：

一站式职场服务，每份工作都值得用心对待！！！

- 面试题和面试经验分享
- 简历修改和模拟面试
- 大厂内推和信息同步
- 职场经验分享
- 职业规划和发展分析

※ 星主和合伙人介绍

星主是公众号音视频开发进阶的作者，也是网站 https://glumes.com 的作者，曾参与过抖音、剪映等头部音视频 APP 底层 SDK 的开发。

合伙人也是在头条、快手从事音视频架构师的职位，具有多年的音视频开发经验，能力圈覆盖了音视频的绝大多数领域，资深音视频从业人员为你保驾护航。