• 在Android中使用OpenGL ES进行开发第(三)节:绘制图形



    一、前期基础知识储备
    笔者计划写三篇文章来详细分析OpenGL ES基础的同时也是入门关键的三个点:

    ①OpenGL ES是什么?与OpenGL的关系是什么?——概念部分

    ②使用OpenGLES绘制2D/3D图形的第一步:定义图形;——运用部分

    ③使用OpenGLES绘制出②步骤中定义好的图形:——运用部分,难点所在

    通过这三篇文章的分析,就像给万丈高楼垫定了基石,万丈高楼平地起,后面利用OpenGLES做各种效果,各种变换都是建立在这三步的图形编程理解之上的。

    今天开始第三节——绘制图形部分的分析,重难点所在!

    在前面的两篇文章《在Android中使用OpenGL ES进行开发第(一)课:概念先行》《在Android中使用OpenGL ES进行开发第(二)课:定义图形》中,笔者详细分析了OpenGL ES2.0相关的重要概念和实现了一个三角形的顶点坐标的定义,那么接下来,本节文章就来讲第二篇文章中定义好的图形具体绘制出来,这也是笔者这三篇文章的重难点所在。

    正如第一篇文章中提及的,使用OpenGL ES2.0的时候,尽管写最简单的程式(如基本作图、三角形、矩形或动作translate、rotate、scale等),一定要写shader(着色器/渲染器)才能运作,原本这些在OpenGL ES1.x时是系统做的事,现在要人力进行实现,因而提高了开发的难度。

    二、上代码,具体实现
    第一步:渲染器类中初始化图形—简单;

    public class MyGLRenderer2 implements GLSurfaceView.Renderer {

    ...
    private Triangle mTriangle;

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
    // initialize a triangle
    mTriangle = new Triangle();
    }
    ...
    }
    第二步:为draw()方法做准备—创建着色器对象(shader),放入程式(Program)中,将程式链接至GLES;

    着色器相关概念(重点):我们在第一篇文章中花了大量笔墨来介绍着色器(shader),那么着色器到底是什么?

    ①顶点着色器(Vertex Shader):用来渲染图形顶点的 OpenGL ES 代码(glsl语言编写);生成每个顶点最终位置,针对每个顶点都会执行一次;一旦最终位置确定了,OpenGL就可以把这些可见顶点的集合组装成点、直线和三角形;

    ②片元着色器(Fragment Shader):使用颜色或纹理(texture)渲染图形表面的 OpenGL ES 代码(glsl语言编写);为组成点、直线和三角形的每个片元生成最终颜色/纹理,针对每个片元都会执行一次;一个片元是一个小的、单一颜色的长方形区域,类似于计算机屏幕上的一个像素;

    (一旦最终颜色生成,OpenGL就会把它们写到一块称为帧缓冲区的内存块中,然后Android就会把这个帧缓冲区显示在屏幕上)

    ③程式(Program):一个OpenGL ES 对象,包含了你希望用来绘制图形所要用到的着色器,最后顶点着色器和片元着色器都要放入到程式中,然后才能使用;简单来说就是将两个着色器变为一个对象。

    以上三个,你需要至少一个顶点着色器(Vertex Shader)来定义一个图形顶点,以及一个片元着色器(Fragment Shader)为该图形上色。这些着色器必须被编译然后再添加到一个OpenGLES Program当中,并利用这个 progrem 来绘制形状。

    这段代码在原本的OpenGL ES1.X中是由系统实现的,所以写起来1.x的代码比较简单,但是在2.x中我们采用人力的方式实现,虽然有些复杂,但是,通过编写顶点及片元着色器程序,来完成一些顶点变换和纹理颜色计算工作,可以实现更加灵活、精细化的计算与渲染。

    熟悉着色器概念之后,那么我们代码具体实现分三步走:

    ①图形类中,创建两个GLSL代码段——顶点着色器代码段+片元着色器代码;

    OpenGL ES实现3D绘图和普通的2D绘图即view利用canvas来绘制不一样,OpenGL需要加载GLSL程式,让GPU进行绘制。所以需要定义shader代码,并在初始化的时候加载。

    public class Triangle {

    /**
    * 顶点着色器代码
    * attribute变量(属性变量)只能用于顶点着色器中
    * uniforms变量(一致变量)用来将数据值从应用程其序传递到顶点着色器或者片元着色器。 。
    * varying变量(易变变量)是从顶点着色器传递到片元着色器的数据变量。
    * gl_Position (必须)为内建变量,表示变换后点的空间位置。
    */
    private final String vertexShaderCode =
    "attribute vec4 vPosition;" + // 应用程序传入顶点着色器的顶点位置
    "void main() {" +
    " gl_Position = vPosition;" + // 设置此次绘制此顶点位置
    "}";

    /**
    * 片元着色器代码
    */
    private final String fragmentShaderCode =
    "precision mediump float;" + // 设置工作精度
    "uniform vec4 vColor;" + // 应用程序传入着色器的颜色变量
    "void main() {" +
    " gl_FragColor = vColor;" + // 颜色值传给 gl_FragColor内建变量,完成片元的着色
    "}";
    ...
    }
    OpenGL最本质的概念之一就是着色器,它是图形硬件设备所执行的一类特殊函数。理解着色器最好的办法就是把它看做是专为图形处理单元(即GPU)编译的一种小型程序。OpenGL在其内部包含了所有的编译器工具,可以直接从着色器源码创建GPU所需要的编译代码并执行。

    注:任何一种OpenGL程序本质上都可以被分为两部分:CPU端运行的部分,采用C++、Java之类的语言编写;以及GPU端运行的部分,使用GLSL语言编写。

    更多着色器代码解析内容,感兴趣的读者可以参考1文章、2文章、3文章

    ②渲染器类中,创建辅助方法,用于编译①中创建的两个代码段。

    该辅助方法中,我们传入两个参数,第一个参数是着色器的类型,包含两个顶点着色器(GLES20.GL_VERTEX_SHADER)和片元着色器(GLES20.GL_FRAGMENT_SHADER),第二个参数就是①中定义好的两个着色器代码段。

    public class MyGLRenderer2 implements GLSurfaceView.Renderer
    ...

    /**
    * 加载并编译着色器代码
    * 渲染器类型type={GLES20.GL_VERTEX_SHADER, GLES20.GL_FRAGMENT_SHADER}
    * 渲染器代码 GLSL
    */
    public static int loadShader(int type, String shaderCode){

    int shader = GLES20.glCreateShader(type);
    //加载shader代码 glShaderSource 和 glCompileShader
    GLES20.glShaderSource(shader, shaderCode);
    GLES20.glCompileShader(shader);

    return shader;
    }
    }
    调用glCreateShader()方法-传入渲染器类型参数type,创建对应的着色器对象;

    调用glShaderSource()方法-传入着色器对象和字符串shaderCode定义的源代码,将二者关联起来;

    调用glCompileShader()方法-传入着色器对象,对其进行编译。

    ③图形类中,我们传入具体的参数到②中定义的方法里面,得到两个着色器的对象,然后将两个着色器对象放入到程式(Program)中。最后将程式与GLES链接好。

    public class Triangle() {
    ...

    private final int mProgram;

    public Triangle() {
    ...

    // 加载编译顶点渲染器
    int vertexShader = MyGLRenderer2.loadShader(GLES20.GL_VERTEX_SHADER,
    vertexShaderCode);

    // 加载编译片元渲染器
    int fragmentShader = MyGLRenderer2.loadShader(GLES20.GL_FRAGMENT_SHADER,
    fragmentShaderCode);

    // 创建空的程式 - create empty OpenGL ES Program
    mProgram = GLES20.glCreateProgram();

    // attach shader 代码 - add the vertex shader to program
    GLES20.glAttachShader(mProgram, vertexShader);

    // attach shader 代码 - add the fragment shader to program
    GLES20.glAttachShader(mProgram, fragmentShader);

    // 链接GLSL程式 - creates OpenGL ES program executables
    GLES20.glLinkProgram(mProgram);
    }
    }
    做完以上两个步骤,就为图形类中定义draw()方法做好了准备—draw()方法真是千呼万唤始出来啊!下一步中,我们将开始做最后的拼接,并把数据链接到OpenGL中。

    第三步:图形类中创建draw()方法,拿到链接至GLES的程式(Program),设置形状的顶点位置和表面的颜色值;

    下面的代码为形状的顶点着色器和形状着色器设置了位置和颜色值,然后执行绘制函数:

    public class Triangle {

    // 绘制形状的顶点数量
    private static final int COORDS_PER_VERTEX = 3;

    ...

    private int mPositionHandle; //变量 用于存取attribute修饰的变量的位置编号
    private int mColorHandle; //变量 用于存取uniform修饰的变量的位置编号

    private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
    private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex

    public void draw() {
    // 使用GLSL程式 - Add program to OpenGL ES environment
    GLES20.glUseProgram(mProgram);

    // 获取shader代码中的变量索引 get handle to vertex shader's vPosition member
    // Java代码中需要获取shader代码中定义的变量索引,用于在后面的绘制代码中进行赋值
    // 变量索引在GLSL程式生命周期内(链接之后和销毁之前)都是固定的,只需获取一次
    mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

    // 绑定vertex坐标值 调用glVertexAttribPointer()告诉OpenGL,它可以在
    // 缓冲区vertexBuffer中获取vPosition的数据
    GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
    GLES20.GL_FLOAT, false,
    vertexStride, vertexBuffer);

    // 启用vertex Enable a handle to the triangle vertices
    GLES20.glEnableVertexAttribArray(mPositionHandle);

    // get handle to fragment shader's vColor member
    mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

    // Set color for drawing the triangle
    GLES20.glUniform4fv(mColorHandle, 1, color, 0);

    // 通过 GLES20.glDrawArrays 或者 GLES20.glDrawElements 开始绘制
    GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);

    // Disable vertex array
    GLES20.glDisableVertexAttribArray(mPositionHandle);
    }
    }
    draw()方法里面的代码是不是也非常复杂,没关系,我们捋一捋就可以看清楚,整段代码实际上可以分为三部分:

    ①1行代码-在draw()方法中拿到链接至GLES中的程式(Program);

    ②3行代码-从程式中取出顶点着色器,开始对顶点的位置进行设置;

    ③3行代码-从程式中取出片元着色器,开始对图形表面颜色进行设置。

    第四步:渲染器类中调用图形类中定义好的draw()方法,进行具体绘制

    public class MyGLRenderer2 implements GLSurfaceView.Renderer {

    @Override
    public void onDrawFrame(GL10 gl) {
    ...
    mTriangle.draw();
    }
    }
    总结:到此为止,笔者的OpenGL ES2.0的入门三课就已经结束了,覆盖面是有的,但是并没有仔细深入,其实原本打算也是通过这三篇文章来普及一下基础的OpenGL ES2.0用法,后续还会继续写提高篇的文章。(写着写着,发现想写的还有很多,之后会再加上)

  • 相关阅读:
    Java中用Apache POI生成excel和word文档
    openlayers实现画圆
    openlayers实现wfs属性查询和空间查询
    jquery自定义控件拖拽框dragbox
    基于openlayers实现聚类统计展示
    openlayers实现在线编辑
    openlayers之selectfeature
    J
    HDU-1051Wooden Sticks
    HDU-1087Super Jumping! Jumping! Jumping!
  • 原文地址:https://www.cnblogs.com/laughingQing/p/11058548.html
Copyright © 2020-2023  润新知