Opengles 绘制方式（点，线，三角形）

2017-06-01 本文已影响1531人挨踢亮

Android 三种绘制形式

前言:大家都知道，Android Opengles的基本图元有点，线，三角形，任何复杂的图形都能用这个三个图元构成，其中点的就只需要知道其坐标值就可以绘制了，而线和三角形的绘制形式是有多种的。wtf,有人会想着说的是什么意思，线不就是两个点的连线吗？这种说法没错，但这是绘制线的一种表现形式，三角形也是类似的

一.点的绘制方式

在前两篇讲解三角形绘制的时候，大家肯定注意到了这一样代码：

GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);

这是绘制三角形的一种形式，如果是绘制点改成

GLES20.glDrawArrays(GLES20.GL_POINTS, 0, vCount);

绘制点的简单，就不过多的说明了.

二.线的绘制方式

首先贴张图来展现一下opengl线的绘制是哪三种形态:

lines.png

直线的第二种绘制方式:

将

GLES20.glDrawArrays(GLES20.GL_LINE_STRIP, 0, vCount);

效果图如下:

lines_strip.png

直线的第三种绘制方式:

将

GLES20.glDrawArrays(GLES20.GL_LINE_STRIP, 0, vCount);

效果图如下:

lines_loop.png

以上效果图验证了直线的绘制方式。

三角形的绘制方式

首先贴张图来展现一下opengl三角形的绘制是哪三种形态:

TRIANGLE.png

GL_TRIANGLE_STRIP的绘制

在绘制GL_TRIANGLE_STRIP的时候，需要注意每个三角形顶点的绘制顺序是有一定规律的如下:

其规律是：
构建当前三角形的顶点的连接顺序依赖于要和前面已经出现过的2个顶点组成三角形的当前顶点的序号的奇偶性（如果从0开始）：
如果当前顶点是奇数：
组成三角形的顶点排列顺序：T = [n-1 n-2 n].
如果当前顶点是偶数：
组成三角形的顶点排列顺序：T = [n-2 n-21 n].
以上图为例，第一个三角形，顶点v2序号是2，是偶数，则顶点排列顺序是v0,v1,v2。第二个三角形，顶点v3序号是3，是奇数，则顶点排列顺序是v2,v1,v3,第三个三角形，顶点v4序号是4，是偶数，则顶点排列顺序是v2,v3,v4,以此类推。

首先因为顶点可以复用，所以将

initVertexData()

vCount=5 ,这个vCount千万不能写错，不然可能会出现一些莫名其妙的区域
是画三个三角形形成的带，所以需要5个顶点.

再将顶点数据修改为:

/*TRIANGLE_STRIP*/
float vertices[] = new float[]{
    //第一个triangle
    -4 * UNIT_SIZE, 0, 0,
    0, 4 * UNIT_SIZE, 0,
    0, 0, 0,
    4 * UNIT_SIZE, -4 * UNIT_SIZE, 0,
    //0, -4 * UNIT_SIZE, 0,
    4 * UNIT_SIZE, 4 * UNIT_SIZE, 0,
    };

每个顶点对应的颜色是:

float colors[] = new float[]
{
    1, 1, 1, 0,
    1, 0, 0, 0,
    0, 1, 0, 0,
    1, 1, 0, 0,
    0, 0, 1, 0,
};

最后修改三角形的绘制方式:

GLES20.glDrawArrays(GLES20.GL_TRIANGLE_STRIP, 0, vCount);

最后的效果图为:

TRIANGLE_SREIP.png

GL_TRIANGLE_FAN的绘制
这个没什么可将的，直接上代码:

initVertexData()//方法中
vCount = 5;

修改顶点数据:

float v2x = (float) (4 * UNIT_SIZE * (Math.cos(Math.PI/6)));
float v2y = (float) (4 * UNIT_SIZE * (Math.sin(Math.PI/6)));
float v3x = (float) (4 * UNIT_SIZE * (Math.cos(Math.PI/3)));
float v3y = (float) (4 * UNIT_SIZE * (Math.sin(Math.PI/3)));
/*TRIANGLE_FAN*/
    float vertices[] = new float[]{
    //第一个triangle
    0, 0, 0,
    4 * UNIT_SIZE, 0, 0,
    v2x, v2y, 0,
    v3x, v3y, 0,
    0, 4 * UNIT_SIZE, 0
    };

颜色数据

float colors[] = new float[]
{
    1, 1, 1, 0,
    1, 0, 0, 0,
    0, 1, 0, 0,
    1, 1, 0, 0,
    0, 0, 1, 0,
};

最后修改绘制模式为:

GLES20.glDrawArrays(GLES20.GL_TRIANGLE_FAN, 0, vCount);

最后的效果图为:

TRIANGLE_FAN.png

三角形的绘制就介绍完毕了