Android 三种绘制形式
前言:大家都知道，Android Opengles的基本图元有点，线，三角形，任何复杂的图形都能用这个三个图元构成，其中点的就只需要知道其坐标值就可以绘制了，而线和三角形的绘制形式是有多种的。wtf,有人会想着说的是什么意思，线不就是两个点的连线吗？这种说法没错，但这是绘制线的一种表现形式，三角形也是类似的
一.点的绘制方式
在前两篇讲解三角形绘制的时候，大家肯定注意到了这一样代码：
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);
这是绘制三角形的一种形式，如果是绘制点改成
GLES20.glDrawArrays(GLES20.GL_POINTS, 0, vCount);
绘制点的简单，就不过多的说明了.
二.线的绘制方式
首先贴张图来展现一下opengl线的绘制是哪三种形态:
从图上可以直观的展现出来：
- GL_LINES：是将传入的顶点，依次两两配对组成线段进行绘制，若顶点数为奇数，则将最后一个给忽略掉。
- GL_LINE_STRIP：是将传入的顶点，进行依次的连接绘制
- GL_LINE_LOOP：是将传入的顶点，进行依次的连接绘制，最后将头尾顶点进行连接，形成一个闭环。
NO Code No BB 下面从代码层面上进行着三种形式的展示：
在前两章讲解画三角形的上面做一些修改就可以画直线了.
在方法 :
initVertexData()
中，先对顶点顶点坐标进行一个修改，因为要画两条直线，所以需要4个顶点即12个值.
vCount = 4; //因为是4个顶点
float vertices[] = new float[]
{
-4 * UNIT_SIZE, 0,
0, 0, -4 * UNIT_SIZE, 0,
4 * UNIT_SIZE, 0, 0,
0, 4 * UNIT_SIZE, 0
};
在修改顶点颜色的值(这步可以不做，因为背景是黑色的，换成白色的清楚一点)：
float colors[] = new float[]
{
1, 1, 1, 0,
1, 1, 1, 0,
1, 1, 1, 0,
1, 1, 1, 0
};
最后一步将
drawSelf()
中的绘制图元替换掉就可以了,改成
GLES20.glDrawArrays(GLES20.GL_LINES, 0, vCount);
效果图如下:
直线的第二种绘制方式:
将
GLES20.glDrawArrays(GLES20.GL_LINE_STRIP, 0, vCount);
效果图如下:
直线的第三种绘制方式:
将
GLES20.glDrawArrays(GLES20.GL_LINE_STRIP, 0, vCount);
效果图如下:
以上效果图验证了直线的绘制方式。
三角形的绘制方式
首先贴张图来展现一下opengl三角形的绘制是哪三种形态:
截图来至于:《android游戏开发宝典》
- GL_TRIANGLE：其实绘制三角形类型之一。它是直接用三个顶点来表示一个三角形，这句话的意思就是假设你绘制3个三角形，有两个三角形的顶点是重合的，还是分别要对重合顶点声明，在顶点数组中会有12个顶点，其中有两三个顶点的数据是重复的，但这是必须的，因为每个三角形的顶点都必须单独的声明。
- GL_TRIANGLE_STRIP:绘制三角形带，在绘制过程中前一个三角形的后两个顶点，会被后一个三角形引用，然后串联起来形成三角形带。若有N个顶点，则绘制出的三角形有N-2个
- GL_TRIANGLE_FAN:以第一个点为中心点，其它顶点作为边缘点绘制出组成扇型的相邻三角形
NO Code No BB 下面从代码层面上进行着三种形式的展示：
在前两章讲解画三角形的上面做一些修改就可以画三角形了.
-
GL_TRIANGLE的绘制
首先是修改顶点数据将
initVertexData()
中的顶点数据修改为:
float vertices[] = new float[]{
//第一个triangle
-4*UNIT_SIZE,0,0,
0,-4*UNIT_SIZE,0,
0,0,0,
//第二个triangle
0,-4*UNIT_SIZE,0,
0,0,0,
4*UNIT_SIZE,-4*UNIT_SIZE,0,
//第三个triangle
0,0,0,
4*UNIT_SIZE,-4*UNIT_SIZE,0,
4*UNIT_SIZE,4*UNIT_SIZE,0
};
从上面可以看出，虽然有些顶点是重复的，但GL_TRIANGLE画三角形是各画各的，顶点数据之间不会复用的。
再将各个顶点的颜色给修改了
float colors[] = new float[]
{
1, 1, 1, 0,
1, 1, 1, 0,
1, 1, 1, 0,
1, 0, 0, 0,
1, 0, 0, 0,
1, 0, 0, 0,
0, 1, 0, 0,
0, 1, 0, 0,
0, 1, 0, 0,
};
因为有9个顶点，从颜色可以看出只有三种颜色即白，红，绿。
最后将绘制模式给更改为:
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vCount);
最后的效果图为:
- 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);
最后的效果图为:
-
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);
最后的效果图为:
三角形的绘制就介绍完毕了
