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

OpenGL 学习系列文章

在之前的一篇博客中,讲述了 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;
}

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

而在我们给着色器变量绑定数据时,依旧是通过glGetUniformLocationglGetAttribLocation方法给uniformattribute类型的u_Colora_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 中提供了一个绘制类型叫做三角形扇,如下图所示:

http://7xqe3m.com1.z0.glb.clouddn.com/blog_opengl_triangle_fan.png

http://7xqe3m.com1.z0.glb.clouddn.com/blog_opengl_triangle_fan.png

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

我们不必输入四个三角形的顶点数据来绘制四个三角形从而组成矩形,可以告诉 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三条线
top Created with Sketch.