Android OpenGL顶点及绘制基础知识

上一次我讲述了OpenGL的作用了,这次我使用了OpenGL来绘制一张桌子,其实我是将一个冰球桌拆分成几块来讲述,现在就来绘制冰球桌的一些基本元素。在绘制的同时我顺便来介绍下一些基础知识。

一、OpenGL中顶点的作用

顶点:代表几何对象的拐角的点,其中最主要的属性就是其位置,代表其在空间中的位置,另外,OpenGL只能够绘制点、直线、三角形。

点和直线我们可以理解,使用三角形是因为三角形由于其稳定的结构可以来绘制复杂的对象和纹理场景。

OpenGL在绘制的时候采用逆时针绘制比较好,这种顺序叫做卷曲顺序,可以优化性能。

1.使数据可以被OpenGL存取

OpenGL作为本地系统库是直接运行在硬件上的,而我们的代码是运行在Dalvik上,导致OpenGL无法去读取我们的数据,所以有两种方案解决上述问题:

  • 从Java调用本地代码
    • 通过使用JNI技术,一般我们调用GLES20包里的技术,就是在后台使用JNI
    • 把内存从Java堆复制到本地堆:意思就是改变内存分配的方式,Java有个特殊的类集合,把Java数据复制到本地内存中。
image
    private static final int BYTES_PER_FLOAT = 4;
    private final FloatBuffer vertexData;

    public AirHockeyRenderer() {
        float[] tableVerticesWithTriangles = {   
            // Order of coordinates: X, Y, R, G, B
            
            // Triangle Fan
               0f,    0f,   1f,   1f,   1f,         
            -0.5f, -0.5f, 0.7f, 0.7f, 0.7f,            
             0.5f, -0.5f, 0.7f, 0.7f, 0.7f,
             0.5f,  0.5f, 0.7f, 0.7f, 0.7f,
            -0.5f,  0.5f, 0.7f, 0.7f, 0.7f,
            -0.5f, -0.5f, 0.7f, 0.7f, 0.7f,

            // Line 1
            -0.5f, 0f, 1f, 0f, 0f,
             0.5f, 0f, 1f, 0f, 0f,

            // Mallets
            0f, -0.25f, 0f, 0f, 1f,
            0f,  0.25f, 1f, 0f, 0f
        };
        vertexData = ByteBuffer

                ByteBuffer//分配了一块本地内存,这块内存不会被垃圾回收器管理,这里需要知道具体分配多少内存块
                .allocateDirect(tableVerticesWithTriangles.length * BYTES_PER_FLOAT)

                //告诉字节缓冲区读取的的内容序列,最重要的是保持同样的顺序
                .order(ByteOrder.nativeOrder())

                //得到一个可以放映底层字节的FloatBuffer类实例,可以避免操作单独字节的麻烦
                .asFloatBuffer();
        vertexData.put(tableVerticesWithTriangles);
    }

FloatBuffer用来在本地内存中存储数据

        vertexData = ByteBuffer
            .allocateDirect(tableVerticesWithTriangles.length * BYTES_PER_FLOAT)
            .order(ByteOrder.nativeOrder())
            .asFloatBuffer();

        vertexData.put(tableVerticesWithTriangles);
  • allocateDirect:分配了一块指定大小的本地内存,并且这块本地内存不会受到gc管理,需要指定字节大小
  • order:告诉字节缓冲区按照本地字节序组织内容。
  • asFloatBuffer:表示我们不愿单独操作字节,而是一整块的操作,通过pu可以实现将数据从Dalvik的内存复制到本地内存。

二、着色器

一般我们定义好物体的顶点,被读取到本地内存中,在绘制到屏幕的时候,需要通过管道进行传输,这类管道其实也成为着色器。

着色器:会告诉GPU如何处理绘制数据

在OpenGL中,总共有两种类型的着色器:
(1)顶点着色器生成每个顶点的最终位置,一旦 最终位置确定了,OpenGL就可以把这些点集合组装成点、直线、以及三角形
(2)片段着色器为组成的点、直线、三角形的每个片段生成最终的颜色,针对每个片段,都会执行一次,类似于计算机屏幕上的一个像素,一个长方形片段。

一旦最后颜色生成后,OpenGl会把他们写到帧缓冲区的内存块中,然后Android会把这块帧缓冲区显示到屏幕上。

image
1.创建一个顶点的着色器
attribute vec4 a_Position;

void main(){
    gl_Position = a_Position;
}

着色器采用了GLSL定义,这种语法同C语言类似,当我们定义每一个单一的顶点,顶点着色器都会被调用一次,它被调用的时候,他会在a_Position属性里接受当前顶点的位置,这个属性被定义为vec4属性。

vec4是包含4个分量的向量,可以认为有x,y,z,w,其中x、y、z表示三维位置,w比较特殊,目前默认为1。

attribute表示顶点的所有属性集合

main方法主要是着色器的入口,他所做的就是把前面定义过的位置复制到制定的输出变量gl_Position,OpenGL会把gl_Position中存储的值作为当前顶点的最终位置,并组装成点。线和三角形。

2.创建第一个片段着色器

(1)光栅化技术

显示屏成千上万色彩原理:主要是每个像素由3个子元件构成,分别发出红、蓝、绿三种光,利用人眼把光混在一起,从而创造出成千上万的色彩。

光栅化:把每个点、直线和三角形分解为大量的小片段,然后映射到屏幕上,通常上一个片段对应一个像素点,但是在高分辨率下存在使用较大片段。

(2)编写代码

片段着色器的目的:告诉GPU每个片段最终的颜色是什么,对于每个片段的着色器都会被调用一次。

precision mediump float;

uniform vec4 u_Color;

void main(){
    gl_FragColor = u_Color;
}

(3)精度定位符

precision mediump float;

uniform vec4 u_Color;

void main(){
    gl_FragColor = u_Color;
}

在这个片段渲染器中,precision mediump float这句代码定义了所有的浮点类型数据的默认精度。

另外可以选择lowp、mediump和highp,他们分别对应低精度、中精度和高精度,一般只有某些硬件支持高精度。

这点和顶点着色器不一样,顶点着色器由于位置的精确度,一般默认为高精度,所以不需要再去怎么修改,而片段着色器则采用中等精度,主要是考虑到性能和兼容性。

(4)生成片段的颜色

颜色的传递使用一个叫uniform,每个顶点都需要设置一个,uniform也是一个四分量向量,主要面对红、绿、蓝、alpha。

main方法是片段中着色器的入口,着色器的颜色一定要给gl_GragColor赋值,OpenGL会使用这个颜色作为当前片段的最终颜色。


前面我们讲述完原理,接着我们要开始编写着色器程序,通过其来驱动OpenGL进行绘制

四、加载着色器

我们需要写一个可以从资源文件中读取那些代码的方法

1.从资源中加载文本

    /**
     * 读取着色器代码
     * @param context 上下文
     * @param resourceId 资源ID
     * @return 代码字符串
     */
    public static String readTextFileFromResource(Context context,int resourceId){
        StringBuilder sb = new StringBuilder();
        
        try {
            InputStream is = context.getResources().openRawResource(resourceId);
            InputStreamReader inputStreamReader = new InputStreamReader(is);
            BufferedReader br = new BufferedReader(inputStreamReader);
            String nextLine;
            while((nextLine = br.readLine())!=null){
                sb.append(nextLine);
                sb.append('\n');
            }
        } catch (IOException e) {
            e.printStackTrace();
        }
        
        return sb.toString();
    }

2.读入着色器代码

 String vertexShaderSource = TextResourceReader
                .readTextFileFromResource(mContext, R.raw.simple_vertex_shader);
 String fragmentShaderSource = TextResourceReader
                .readTextFileFromResource(mContext,R.raw.simple_fragment_shader);


二、编译着色器

通过一个辅助类来返回着色其对象

/**
 * author: machenshuang
 * <p>
 * Date: 2017-11-15 15:07
 * <p>
 * 描述:着色器对象生成辅助类
 */

public class ShaderHelper {
    private static final String TAG = "ShaderHelper";

    public static int compileVertexShader(String shaderCode) {
        return compileShader(GL_VERTEX_SHADER, shaderCode);
    }

    public static int compileFragmentShader(String shaderCode) {
        return compileShader(GL_FRAGMENT_SHADER, shaderCode);
    }

    public static int compileShader(int type, String shaderCode) {
        return 0;
    }
}
1.创建一个新的着色器对象

创建一个新的着色器对象,并且检查是否成功。

    public static int compileShader(int type, String shaderCode) {
        final int shaderObjectId = glCreateShader(type);
        
        if (shaderObjectId == 0){
            if (LoggerConfig.ON){
                Log.d(TAG,"Could not create new shader.");
            }
            return 0;
        }
        return shaderObjectId;
    }

这里的glCreateShader调用创建一个新的着色器对象,并把id存入到shaderObjectId中。

OpenGL创建shader对象并且进行检查有效性的总结:

  • 首先使用一个glCreateShader()一样来创建一个对象,会返回一个int型值
  • 这个整形值就是OpenGL对象的引用,想要使用就必须把整型值传回给OpenGL
  • 返回值返回0,则表示创建失败。
2.上传和编译着色器代码
 glShaderSource(shaderObjectId,shaderCode);

3.取出编译状态

final int[] compileStatus = new int[1];
glGetShaderiv(shaderObjectId,GL_COMPILE_STATUS,compileStatus,0);

为了检查编译是否成功还是失败,首先创建一个大小为1的数组,接着调用glGetShaderiv,告诉OpenGL读取与shaderObjectId关联的编译状态,并写入到数组中去。

4.取出着色器信息日志
            if (LoggerConfig.ON){
                //Log.d(TAG,"Could not create new shader.");
                Log.d(TAG,"Results of compiling source:"+"\n"+shaderCode+"\n:"
                + glGetShaderInfoLog(shaderObjectId));
            }
            return 0;

通过glGetShaderInfoLog可以获取到一个关于着色器的有用内容

5.验证编译状态并返回着色器对象ID
        if (compileStatus[0]==0){
            glDeleteShader(shaderObjectId);

            if (LoggerConfig.ON){
                Log.d(TAG,"Compilation of shader failed.");
            }
            return 0;
        }
6.在Renderer类中编译着色器
        int vertexShader = ShaderHelper.compileVertexShader(vertexShaderSource);
        int fragmentShader = ShaderHelper.compileFragmentShader(fragmentShaderSource);

回顾下流程,我们创建了ShaderHelper,并加入一个用来创建、编译新着色器对象的方法,同时创建LoggerConfig,一个用来在单一代码行打开或者关闭日志的类,对于ShaderHelper:

  • compileShader:这个compileShader(int type, String shaderCode)方法使用了着色器源代码和类型,typ可以代表顶点着色器或者片段着色器。如果OpenGL编译成功,就会返回着色器对象的Id,否则就会返回0。
  • compileVertexShader():这个方法调用compileShader(int type, String shaderCode),使用GL_VERTEX_SHADER作为着色器类型
  • compileFragmentShader:这个方法也调用了compileShader(int type, String shaderCode),使用了GL_FRAGMENT_SHADER作为着色器类型

三、将着色器链接进入OpenGL的程序

1.理解OpenGL的程序

OpenGL程序就是把一个顶点着色器和片段着色器放在一起组成单个对象,但是顶点着色器和片段着色器不一定是一对一的。

2.新建程序对象并附上着色器
        final int programObjectId = glCreateProgram();
        
        if (programObjectId == 0){
            if (LoggerConfig.ON == true){
                Log.d(TAG,"Could not crate new program");
            }
            return 0;
        }

上述代码创建程序对象,接着附上着色器

        //把顶点着色器和片段着色器都附加到程序对象上
        glAttachShader(programObjectId,vertexShaderId);
        glAttachShader(programObjectId,fragmentShaderId);
3.链接程序
        glLinkProgram(programObjectId);

        final int[] linkStatus = new int[1];
        glGetProgramiv(programObjectId,GL_LINK_STATUS,linkStatus,0);

        if (LoggerConfig.ON){
            Log.d(TAG,"Results of linking program:\n"
            + glGetProgramInfoLog(programObjectId));
        }

通过glLinkProgram将这些着色器联合起来,同时通过glGetProgramiv检查这个链接是成功还是错误。同时借助glGetProgramInfoLog来查看错误日志

4.检测链接状态并返回程序对象ID
        if (linkStatus[0] == 0){
            glDeleteProgram(programObjectId);
            if (LoggerConfig.ON){
                Log.d(TAG,"Linking of program failed");
            }
            return 0;
        }

四、最后拼接

1.验证OpenGL程序的对象
    /**
     * 验证programObjectId是否有效
     * @param programObjectId OpenGL对象的id
     * @return boolean
     */
    public static boolean validateProgram(int programObjectId) {
        glValidateProgram(programObjectId);

        final int[] validateStatus = new int[1];
        glGetProgramiv(programObjectId, GL_VALIDATE_STATUS, validateStatus, 0);
        Log.d(TAG, "Results of validating program:" + validateStatus[0]
                + "\nLog:" + glGetProgramInfoLog(programObjectId));

        return validateStatus[0] != 0;
    }
2.获得一个uniform的位置

当OpenGL程序把着色器都链接成一个程序的时候,它实际上用一个位置编号把片段着色器中定义的每一个uniform都关联起来,利用位置编号来给着色器发送数据。

    private static final String U_COLOR = "u_Color";
    private int uColorLocation;
    
    //获取uniform的位置
    uColorLocation = glGetUniformLocation(program,U_COLOR);

通过为我们为定义的uniform的名字创建一个常量和一个用来容纳它在OpenGL程序对象中的位置变量,uniform的位置变量只有当程序链接成功后才能捕获到,并且位置是固定的,及时有同名的uniform,也不意味着他们有相同的位置。

我们通过glGetUniformLocation来获取它的位置。

3.获取属性的位置
    //获取attr需要的名字和变量
    private static final String A_POSITION = "a_Position";
    private int aPostionLocation;
    
    
    
    //获取attr的位置
    aPostionLocation = glGetAttribLocation(program, A_POSITION);
4.关联属性与顶点数据的数组
        //4.关联属性与顶点数据的数组
        vertexData.position(0);
        glVertexAttribPointer(aPostionLocation,POSITION_COPOMENT_COUNT,GL_FLOAT,
                false,0,vertexData);

我们在前面创建了一个本地缓冲区,称为vertexData,并且已经对这个缓冲区赋予一些数据了,在我们告诉OpenGL ES从这个缓冲区读取数据前,要确保它从开头处读取数据,我们通过调用position(0)来保证,然后调用glVertexAttribPointer告诉OpenGL,它可以在缓冲区vertexData中找到a_Position的对应的数据,详见如下:

image

假如使用错误的参数,会导致严重的后果,所以需要传递一些正确的参数。

5.使能顶点数组
        //5.使能顶点数组
        glEnableVertexAttribArray(aPostionLocation);

五、在屏幕上绘制

        glUniform4f(uColorLocation,1.0f,1.0f,1.0f,1.0f);
        glDrawArrays(GL_TRIANGLES,0,6);

首先通过glUniform4f更新u_Color的值,并且为它4个分量设置好值,设置完了之后调用glDrawArrays进行绘制,第一个参数告诉OpenGL要绘制三角形,第二个参数告诉绘制的数组起点,第三个告诉OpenGL一共读取六个顶点。

效果图

六、总结:

这篇文章主要是展示怎样去定义顶点坐标,并将其复制到本地内存中,让OpenGL去读取它,同时了解了着色器的作用,如何用代码去实现着色器,包括着色器的创建、编译以及同OpenGL程序对象链接起来,顶点着色器内部的属性变量同顶点属性数组关联起来,从而在屏幕上显示出东西,基本上完成OpenGL的绘制过程,当然还有其他复杂的东西,下期再讲。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,835评论 4 364
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,598评论 1 295
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,569评论 0 244
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,159评论 0 213
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,533评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,710评论 1 222
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,923评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,674评论 0 203
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,421评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,622评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,115评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,428评论 2 254
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,114评论 3 238
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,097评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,875评论 0 197
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,753评论 2 276
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,649评论 2 271