美文网首页aliang Study OpenglesAndroid知识Android技术知识
Opengles 绘制方式(点,线,三角形)

Opengles 绘制方式(点,线,三角形)

作者: 挨踢亮 | 来源:发表于2017-06-01 20:19 被阅读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
    1. 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
    1. 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

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

    相关文章

      网友评论

      本文标题:Opengles 绘制方式(点,线,三角形)

      本文链接:https://www.haomeiwen.com/subject/jqaefxtx.html