参考书籍：OPENGL ES 3.0编程指南 原书第2版

示例代码

继上一篇文章，我们绘制的三角形，采用的是下面的这句代码。

glDrawArrays(GL_TRIANGLES, 0, 3);

OpenGL ES支持绘制直线、点、三角形这三种图元的绘制。有以下几种绘图方式：

    GL_POINTS               点
    GL_LINES                直线
    GL_LINE_LOOP            直线环
    GL_LINE_STRIP           直线带
    GL_TRIANGLES            三角形
    GL_TRIANGLE_STRIP       三角带
    GL_TRIANGLE_FAN         三角扇形

接下来我们来看下这些绘图方式的差异。

一.绘制三角形的三种不同方式

参考书籍

为了区分三角形的三种方式，我们需要绘制四个顶点数据

1.以三角带形式绘制三角形
代码如下

//顶点数据，这里创建四个顶点，以及颜色数据，为了更好区分三种不同方式绘制三角形的区别
    static GLfloat vertices[] = {
        -0.5f,0.0f,0.0f,  1.0f,0.0f,0.0f, //v0, (x,y,z,r,g,b)
        0.0f,-0.5f,0.0f,  0.0f,1.0f,0.0f, //v1, (x,y,z,r,g,b)
        0.5f,0.0f,0.0f,  0.0f,0.0f,1.0f,  //v2, (x,y,z,r,g,b)
        0.0f,0.5f,0.0f,  1.0f,1.0f,0.0f,  //v3, (x,y,z,r,g,b)
        
    };

  //三角带绘制
  glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

效果如下图

三角带的形式绘制四个顶点

按照上面书中指示的，绘制了两个三角形，一个以v0,v1,v2为顶点，一个以v2,v3,v1为顶点。

2.以三角扇形绘制
代码如下

 static GLfloat vertices[] = {
        -0.5f,0.0f,0.0f,  1.0f,0.0f,0.0f, //v0, (x,y,z,r,g,b)
        0.0f,-0.5f,0.0f,  0.0f,1.0f,0.0f, //v1, (x,y,z,r,g,b)
        0.5f,0.0f,0.0f,  0.0f,0.0f,1.0f,  //v2, (x,y,z,r,g,b)
        0.0f,0.5f,0.0f,  1.0f,1.0f,0.0f,  //v3, (x,y,z,r,g,b)
        
    };

 //以三角形的形式绘制点
 glDrawArrays(GL_TRIANGLE_FAN, 0, 4);

效果如下图：

三角扇形的形式绘制四个顶点

按照书中解释，绘制了两个三角形，一个是以v0,v1,v2为顶点，一个是以v0,v2,v3为顶点。

3.以三角形绘制
代码如下

 static GLfloat vertices[] = {
        -0.5f,0.0f,0.0f,  1.0f,0.0f,0.0f, //v0, (x,y,z,r,g,b)
        0.0f,-0.5f,0.0f,  0.0f,1.0f,0.0f, //v1, (x,y,z,r,g,b)
        0.5f,0.0f,0.0f,  0.0f,0.0f,1.0f,  //v2, (x,y,z,r,g,b)
        0.0f,0.5f,0.0f,  1.0f,1.0f,0.0f,  //v3, (x,y,z,r,g,b)
        
    };

 //以三角形的形式绘制点
    glDrawArrays(GL_TRIANGLES, 0, 4);

效果如下图：

三角形的形式绘制四个顶点

按照书中解释，绘制了一个三角形，以v0,v1,v2为顶点。

二. 绘制直线的三种形式

书中解释如下：

直线的绘制方式

1.以直线带的方式
代码如下：

 static GLfloat vertices[] = {
        -0.5f,0.0f,0.0f,  1.0f,0.0f,0.0f, //v0, (x,y,z,r,g,b)
        0.0f,-0.5f,0.0f,  0.0f,1.0f,0.0f, //v1, (x,y,z,r,g,b)
        0.5f,0.0f,0.0f,  0.0f,0.0f,1.0f,  //v2, (x,y,z,r,g,b)
        0.0f,0.5f,0.0f,  1.0f,1.0f,0.0f,  //v3, (x,y,z,r,g,b)
        
    };
 glDrawArrays(GL_LINE_STRIP, 0, 4);

效果如下图

直线带方式绘制

按照书中解释：
这里绘制三条直线，组合分别是，v0,v1 ； v1,v2 ; v2,v3

2.以直线的方式绘制
代码如下：

 static GLfloat vertices[] = {
        -0.5f,0.0f,0.0f,  1.0f,0.0f,0.0f, //v0, (x,y,z,r,g,b)
        0.0f,-0.5f,0.0f,  0.0f,1.0f,0.0f, //v1, (x,y,z,r,g,b)
        0.5f,0.0f,0.0f,  0.0f,0.0f,1.0f,  //v2, (x,y,z,r,g,b)
        0.0f,0.5f,0.0f,  1.0f,1.0f,0.0f,  //v3, (x,y,z,r,g,b)
        
    };
glDrawArrays(GL_LINES, 0, 4);

效果如下图

直线形式绘制

按照书中解释：
这里绘制两条直线，组合分别是，v0,v1 ；v2,v3

3.以直线环的方式绘制
代码如下：

 static GLfloat vertices[] = {
        -0.5f,0.0f,0.0f,  1.0f,0.0f,0.0f, //v0, (x,y,z,r,g,b)
        0.0f,-0.5f,0.0f,  0.0f,1.0f,0.0f, //v1, (x,y,z,r,g,b)
        0.5f,0.0f,0.0f,  0.0f,0.0f,1.0f,  //v2, (x,y,z,r,g,b)
        0.0f,0.5f,0.0f,  1.0f,1.0f,0.0f,  //v3, (x,y,z,r,g,b)
        
    };
 glDrawArrays(GL_LINE_LOOP, 0, 4);

效果如下图

直线环形式绘制

按照书中解释：
这里绘制四条直线，组合分别是，v0,v1 ；v1,v2； v2,v3 ; v3,v4,这里比直线带多了一个闭合的直线。

三. 绘制点精灵

绘制点的代码非常简单：
1.改变点的大小需要在顶点着色器中修改，如下：

 //顶点着色器
    char vShaderStr[] =
       "#version 300 es                          \n"
       "layout(location = 0) in vec4 vPosition;  \n"
       "void main()                              \n"
       "{                                        \n"
       "   gl_Position = vPosition;              \n"
       "   gl_PointSize = 25.0;                  \n" //改变点的大小
       "}                                        \n";

绘制代码

 //绘制顶点
    glDrawArrays(GL_POINTS, 0, 3);

效果如下图:

IMG_6543.PNG

通过上面这些基本例子，可以更加深对OpenGL ES绘图过程以及各种参数的作用的理解。
最后推荐大佬写的视频编码解码库----》github地址