Android OpenGL 显示基本图形及相关概念解读

Igor Android评论7,898字数 8914阅读29分42秒阅读模式

在上一篇文章中,我们知道了如何在Android开发一个OpenGL模型显示。但是并没有对具体模型数据进行显示,只是展示一个背景颜色而已,在本章中,我们学习如何将一个模型数据显示成一个具体的3D图形。在Android中开发OpenGL程序非常简单,但是却有很多OpenGL相关概念是必须要清楚的,了解这些相关概念才能写出正确的代码,否则,你写出来的程序可能会无缘无故崩溃,或者是画出来的模型显示不出来等等问题。

本文是建立在上一篇文章之上,只修改GLRender类,其他部分保持不变,如果你没有看上一篇文章,请先移步【Android OpenGL入门】

1 模型数据

前面我们说过,一个3D模型一般是由很多三角片(或四边形)组成,因此,首先我们需要有三角形的点数据。既然是3D模型,自然每个点坐标是在三维坐标系中,因此,每个点需要3个数来表示。

我们定义一个三角形,需要9个数,如果我们有float类型表示一个数,那么定义一个三角形(三个点)如下:

 private float[] mTriangleArray = {
            0f, 1f, 0f,
            -1f, -1f, 0f,
            1f, -1f, 0f
};

此时,我们就有了一个三角形的3个点数据了。但是,OpenGL并不是对堆里面的数据进行操作,而是在直接内存中(Direct Memory),即操作的数据需要保存到NIO里面的Buffer对象中。而我们上面声明的float[]对象保存在堆中,因此,需要我们将float[]对象转为java.nio.Buffer对象。

我们可以选择在构造函数里面,将float[]对象转为java.nio.Buffer,如下所示:

private FloatBuffer mTriangleBuffer;
public GLRenderer() {
    //先初始化buffer,数组的长度*4,因为一个float占4个字节
    ByteBuffer bb = ByteBuffer.allocateDirect(mTriangleArray.length * 4);
    //以本机字节顺序来修改此缓冲区的字节顺序
    bb.order(ByteOrder.nativeOrder());
    mTriangleBuffer = bb.asFloatBuffer();
    //将给定float[]数据从当前位置开始,依次写入此缓冲区
    mTriangleBuffer.put(mTriangleArray);
    //设置此缓冲区的位置。如果标记已定义并且大于新的位置,则要丢弃该标记。 
    mTriangleBuffer.position(0);

}

注意,ByteBufferFloatBuffer以及IntBuffer都是继承自抽象类java.nio.Buffer

另外,OpenGL在底层的实现是C语言,与Java默认的数据存储字节顺序可能不同,即大端小端问题。因此,为了保险起见,在将数据传递给OpenGL之前,我们需要指明使用本机的存储顺序。

此时,我们顺利地将float[]转为了FloatBuffer,后面绘制三角形的时候,直接通过成员变量mTriangleBuffer即可。

2 矩阵变换

在现实世界中,我们要观察一个物体可以通过如下几种方式:

  • 从不同位置去观察。(视图变换)
  • 移动或旋转物体,放缩物体(虽然实际生活中不能放缩,但是计算机世界是可以的)。(模型变换)
  • 给物体拍照印成照片。可以做到“近大远小”、裁剪只看部分等等透视效果。(投影变换)
  • 只拍摄物体的一部分,使得物体在照片中只显示部分。(视口变换)

上面所述效果,可以在OpenGL中全部实现。有一点需要很清楚,就是OpenGL的变换其实都是通过矩阵相乘来实现的。

2.1 模型变换和视图变换

高中我们学过相对运动,就是说,改变观测点的位置与改变物体位置都可以达到等效的运动效果。因此,在OpenGL中,这两种变换本质上用的是同一个函数。

在进行变换之前,我们需要声明当前是使用哪种变换。在本节中,声明使用模型视图变换,而模型视图变换在OpenGL中对应标识为:GL10.GL_MODELVIEW。通过glMatrixMode函数来声明:

gl.glMatrixMode(GL10.GL_MODELVIEW);

接下来你就可以对模型进行:平移、放缩、旋转等操作啦。但是有一点值得注意的是,在此之前,你可能针对模型做了其他的操作,而我们知道,每次操作相当于一次矩阵相乘。OpenGL中,使用“当前矩阵”表示要执行的变化,为了防止前面执行过变换“保留”在“当前矩阵”,我们需要把“当前矩阵”复位,即变为单位矩阵(对角线上的元素全为1),通过执行如下函数:

gl.glLoadIdentity();

此时,当前变换矩阵为单位矩阵,后面才可以继续做变换,例如:


//绕(1,0,0)向量旋转30度
gl.glRotatef(30, 1, 0, 0);

//沿x轴方向移动1个单位
gl.glTranslatef(1, 0, 0);

//x,y,z方向放缩0.1倍
gl.glScalef(0.1f, 0.1f, 0.1f);

上面的效果都是矩阵相乘实现,因此我们需要注意变换次序问题,举个例子,假设“当前矩阵”为单位矩阵,然后乘以一个表示旋转的矩阵R,再乘以一个表示移动的矩阵T,最后得到的矩阵,再与每个顶点相乘。假设表示模型所以顶点的矩阵为V,则实际就是((RT)V),由矩阵乘法结合律,((RT)V)=(R(TV)),这导致的就是,先移动再旋转。即:

实际变换顺序与代码中的顺序是相反的

上面所讲的都是改变物体的位置或方向来实现“相对运动”的,如果我们不想改变物体,而是改变观察点,可以使用如下函数

/**
* gl: GL10型变量
* eyeX,eyeY,eyeZ: 观测点坐标(相机坐标)
* centerX,centerY,centerZ:观察位置的坐标
* upX,upY,upZ :相机向上方向在世界坐标系中的方向(即保证看到的物体跟期望的不会颠倒)
*/
GLU.gluLookAt(gl,eyeX,eyeY,eyeZ,centerX,centerY,centerZ,upX,upY,upZ);

2.2 投影变换

投影变换就是定义一个可视空间,可视空间之外的物体是看不到的(即不会再屏幕中)。在此之前,我们的三维坐标中的三个坐标轴取值为[-1,1],从现在开始,坐标可以不再是从-11了!

OpenGL支持主要两种投影变换:

  • 透视投影
  • 正投影

当然了,投影也是通过矩阵来实现的,如果想要设置为投影变换,跟前面类似:

gl.glMatrixMode(GL10.GL_PROJECTION);
gl.glLoadIdentity();

同样的道理,glLoadIdentity()函数也需要立即调用。

通过如下函数可将当前可视空间设置为透视投影空间:

gl.glFrustumf(left,right,bottom,top,near,far);

上面函数对应参数如下图所示(图片出自www.opengl.org):

Android OpenGL 显示基本图形及相关概念解读-图片1
透视投影变换glFrustumf

当然了,也可以通过另一个函数实现相同的效果:

 GLU.gluPerspective(gl,fovy,aspect,near,far);

上面函数对应的参数如下图所示(图片出自www.opengl.org):

Android OpenGL 显示基本图形及相关概念解读-图片2
透视投影变换gluPerspective

而对于正投影来说,相当于观察点处于无穷远,当然了,这是一种理想状态,但是有时使用正投影效率可能会更高。可以通过如下函数设置正投影:

gl.glOrthof(left,right,bottom,top,near,far);

上面函数对应的参数如下图所示(图片出自www.opengl.org):

Android OpenGL 显示基本图形及相关概念解读-图片3
正投影

2.3 视口变换

我们可以选择将图像绘制到屏幕窗口的那个区域,一般默认是在整个窗口中绘制,但是,如果你不希望在整个窗口中绘制,而是在窗口的某个小区域中绘制,你也可以自己定制:

@Override
public void onSurfaceChanged(GL10 gl, int width, int height) {
    gl.glViewport(0, 0, width, height);
}

每次窗口发生变化时,我们可以设置绘制区域,即在onSurfaceChanged函数中调用glViewport函数。

3 启用相关功能及配置

3.1 glClearColor()

设置清屏颜色,每次清屏时,使用该颜色填充整个屏幕。使用例子:

 gl.glClearColor(1.0f, 1.0f, 1.0f, 0f);

里面参数分别代表RGBA,取值范围为[0,1]而不是[0,255]

3.2 glDepthFunc()

OpenGL中物体模型的每个像素都有一个深度缓存的值(在01之间,可以看成是距离),可以通过glClearDepthf函数设置默认的“当前像素”z值。在绘制时,通过将待绘制的模型像素点的深度值与“当前像素”z值进行比较,将符合条件的像素绘制出来,不符合条件的不绘制。具体的“指定条件”可取以下值:

  • GL10.GL_NEVER:永不绘制
  • GL10.GL_LESS:只绘制模型中像素点的z<当前像素z值的部分
  • GL10.GL_EQUAL:只绘制模型中像素点的z=当前像素z值的部分
  • GL10.GL_LEQUAL:只绘制模型中像素点的z<=当前像素z值的部分
  • GL10.GL_GREATER :只绘制模型中像素点的z>当前像素z值的部分
  • GL10.GL_NOTEQUAL:只绘制模型中像素点的z!=当前像素z值的部分
  • GL10.GL_GEQUAL:只绘制模型中像素点的z>=当前像素z值的部分
  • GL10.GL_ALWAYS:总是绘制

通过目标像素与当前像素在z方向上值大小的比较是否满足参数指定的条件,来决定在深度(z方向)上是否绘制该目标像素。

注意, 该函数只有启用“深度测试”时才有效,通过glEnable(GL_DEPTH_TEST)开启深度测试以及glDisable(GL_DEPTH_TEST)关闭深度测试。

例子:

 gl.glDepthFunc(GL10.GL_LEQUAL);

3.3 glClearDepthf()

给深度缓存设定默认值。

缓存中的每个像素的深度值默认都是这个, 假设在 gl.glDepthFunc(GL10.GL_LEQUAL);前提下:

  • 如果指定“当前像素值”为1时,我们知道,一个模型深度值取值和范围为[0,1]。这个时候你往里面画一个物体, 由于物体的每个像素的深度值都小于等于1, 所以整个物体都被显示了出来。
  • 如果指定“当前像素值”为0, 物体的每个像素的深度值都大于等于0, 所以整个物体都不可见。
    如果指定“当前像素值”为0.5, 那么物体就只有深度小于等于0.5的那部分才是可见的

使用例子:

gl.glClearDepthf(1.0f);

3.3 glEnable(),glDisable()

glEnable()启用相关功能,glDisable()关闭相关功能。

比如:

//启用深度测试
gl.glEnable(GL10.GL_DEPTH_TEST);
//关闭深度测试
gl.glDisable(GL10.GL_DEPTH_TEST)
//开启灯照效果
gl.glEnable(GL10.GL_LIGHTING);
// 启用光源0
gl.glEnable(GL10.GL_LIGHT0);
// 启用颜色追踪
gl.glEnable(GL10.GL_COLOR_MATERIAL);

3.5 glHint()

如果OpenGL在某些地方不能有效执行是,给他指定其他操作。

函数原型为:

void glHint(GLenum target,GLenum mod)

其中,target:指定所控制行为的符号常量,可以是以下值(引自【OpenGL函数思考-glHint 】):

  • GL_FOG_HINT:指定雾化计算的精度。如果OpenGL实现不能有效的支持每个像素的雾化计算,则GL_DONT_CAREGL_FASTEST雾化效果中每个定点的计算。
  • GL_LINE_SMOOTH_HINT:指定反走样线段的采样质量。如果应用较大的滤波函数,GL_NICEST在光栅化期间可以生成更多的像素段。
  • GL_PERSPECTIVE_CORRECTION_HINT:指定颜色和纹理坐标的差值质量。如果OpenGL不能有效的支持透视修正参数差值,那么GL_DONT_CAREGL_FASTEST可以执行颜色、纹理坐标的简单线性差值计算。
  • GL_POINT_SMOOTH_HINT:指定反走样点的采样质量,如果应用较大的滤波函数,GL_NICEST在光栅化期间可以生成更多的像素段。
  • GL_POLYGON_SMOOTH_HINT:指定反走样多边形的采样质量,如果应用较大的滤波函数,GL_NICEST在光栅化期间可以生成更多的像素段。

mod:指定所采取行为的符号常量,可以是以下值:

  • GL_FASTEST:选择速度最快选项。
  • GL_NICEST:选择最高质量选项。
  • GL_DONT_CARE:对选项不做考虑。

例子:

gl.glHint(GL10.GL_PERSPECTIVE_CORRECTION_HINT, GL10.GL_NICEST);

3.6 glEnableClientState()

当我们需要启用顶点数组(保存每个顶点的坐标数据)、顶点颜色数组(保存每个顶点的颜色)等等,就要通过glEnableClientState()函数来开启:

//以下两步为绘制颜色与顶点前必做操作
// 允许设置顶点
//GL10.GL_VERTEX_ARRAY顶点数组
gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
// 允许设置颜色
//GL10.GL_COLOR_ARRAY颜色数组
gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

3.7 glShadeModel()

设置着色器模式,有如下两个选择:

  • GL10.GL_FLAT
  • GL10.GL_SMOOTH(默认)

如果为每个顶点指定了顶点的颜色,此时:

  • GL_SMOOTH:根据顶点的不同颜色,最终以渐变的形式填充图形。
  • GL_FLAT:假设有n个三角片,则取最后n个顶点的颜色填充着n个三角片。

使用例子:

gl.glShadeModel(GL10.GL_SMOOTH);

4 开始绘制

前面讲了很多概念,但是其实都是非常值得学习的。有了这些基础,我们才能理解如何写OpenGL,从上一篇文章中我们知道,开发OpenGL大部分工作都是在Renderer类上面,我直接粘Renderder代码:

/**
 * Package com.hc.opengl
 * Created by HuaChao on 2016/7/28.
 */
public class GLRenderer implements GLSurfaceView.Renderer {
    private float[] mTriangleArray = {
            0f, 1f, 0f,
            -1f, -1f, 0f,
            1f, -1f, 0f
    };
    //三角形各顶点颜色(三个顶点)
    private float[] mColor = new float[]{
            1, 1, 0, 1,
            0, 1, 1, 1,
            1, 0, 1, 1
    };
    private FloatBuffer mTriangleBuffer;
    private FloatBuffer mColorBuffer;


    public GLRenderer() {
        //点相关
        //先初始化buffer,数组的长度*4,因为一个float占4个字节
        ByteBuffer bb = ByteBuffer.allocateDirect(mTriangleArray.length * 4);
        //以本机字节顺序来修改此缓冲区的字节顺序
        bb.order(ByteOrder.nativeOrder());
        mTriangleBuffer = bb.asFloatBuffer();
        //将给定float[]数据从当前位置开始,依次写入此缓冲区
        mTriangleBuffer.put(mTriangleArray);
        //设置此缓冲区的位置。如果标记已定义并且大于新的位置,则要丢弃该标记。
        mTriangleBuffer.position(0);


        //颜色相关
        ByteBuffer bb2 = ByteBuffer.allocateDirect(mColor.length * 4);
        bb2.order(ByteOrder.nativeOrder());
        mColorBuffer = bb2.asFloatBuffer();
        mColorBuffer.put(mColor);
        mColorBuffer.position(0);
    }

    @Override
    public void onDrawFrame(GL10 gl) {


        // 清除屏幕和深度缓存
        gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
        // 重置当前的模型观察矩阵
        gl.glLoadIdentity();

        // 允许设置顶点
        //GL10.GL_VERTEX_ARRAY顶点数组
        gl.glEnableClientState(GL10.GL_VERTEX_ARRAY);
        // 允许设置颜色
        //GL10.GL_COLOR_ARRAY颜色数组
        gl.glEnableClientState(GL10.GL_COLOR_ARRAY);

        //将三角形在z轴上移动
        gl.glTranslatef(0f, 0.0f, -2.0f);

        // 设置三角形
        gl.glVertexPointer(3, GL10.GL_FLOAT, 0, mTriangleBuffer);
        // 设置三角形颜色
        gl.glColorPointer(4, GL10.GL_FLOAT, 0, mColorBuffer);
        // 绘制三角形
        gl.glDrawArrays(GL10.GL_TRIANGLES, 0, 3);


        // 取消颜色设置
        gl.glDisableClientState(GL10.GL_COLOR_ARRAY);
        // 取消顶点设置
        gl.glDisableClientState(GL10.GL_VERTEX_ARRAY);

        //绘制结束
        gl.glFinish();

    }

    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {
        float ratio = (float) width / height;
        // 设置OpenGL场景的大小,(0,0)表示窗口内部视口的左下角,(w,h)指定了视口的大小
        gl.glViewport(0, 0, width, height);
        // 设置投影矩阵
        gl.glMatrixMode(GL10.GL_PROJECTION);
        // 重置投影矩阵
        gl.glLoadIdentity();
        // 设置视口的大小
        gl.glFrustumf(-ratio, ratio, -1, 1, 1, 10);
        //以下两句声明,以后所有的变换都是针对模型(即我们绘制的图形)
        gl.glMatrixMode(GL10.GL_MODELVIEW);
        gl.glLoadIdentity();

    }

    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        // 设置白色为清屏
        gl.glClearColor(1, 1, 1, 1);

    }
}

效果如下:

Android OpenGL 显示基本图形及相关概念解读-图片4
显示效果

5 几个重要的函数

5.1 glVertexPointer()

其实就是设置一个指针,这个指针指向顶点数组,后面绘制三角形(或矩形)根据这里指定的顶点数组来读取数据。
函数原型如下:

void glVertexPointer(int size,int type,int stride,Buffer pointer)

其中:

  • size: 每个顶点有几个数值描述。必须是2,3 ,4 之一。
  • type: 数组中每个顶点的坐标类型。取值:GL_BYTE,GL_SHORT, GL_FIXED, GL_FLOAT
  • stride:数组中每个顶点间的间隔,步长(字节位移)。取值若为0,表示数组是连续的
  • pointer:即存储顶点的Buffer

5.2 glColorPointer()

跟上面类似,只是设定指向颜色数组的指针。
函数原型:

void glColorPointer(
        int size,
        int type,
        int stride,
        java.nio.Buffer pointer
    );
  • size: 每种颜色组件的数量。 值必须为 3 或 4。
  • type: 颜色数组中的每个颜色分量的数据类型。 使用下列常量指定可接受的数据类型:GL_BYTE GL_UNSIGNED_BYTEGL_SHORT GL_UNSIGNED_SHORTGL_INT GL_UNSIGNED_INTGL_FLOAT,或 GL_DOUBLE
  • stride:连续颜色之间的字节偏移量。 当偏移量为0时,表示数据是连续的。
  • pointer:即颜色的Buffer

5.3 glDrawArrays()

绘制数组里面所有点构成的各个三角片。

函数原型:

void glDrawArrays(
    int mode,
    int first,
    int count
);

其中:

  • mode:有三种取值
    • GL_TRIANGLES:每三个顶之间绘制三角形,之间不连接
    • GL_TRIANGLE_FAN:以V0 V1 V2,V0 V2 V3,V0 V3 V4,……的形式绘制三角形
    • GL_TRIANGLE_STRIP:顺序在每三个顶点之间均绘制三角形。这个方法可以保证从相同的方向上所有三角形均被绘制。以V0 V1 V2 ,V1 V2 V3,V2 V3 V4,……的形式绘制三角形
  • first:从数组缓存中的哪一位开始绘制,一般都定义为0
  • count:顶点的数量

相关资料:

【三维变换glMatrixMode】

作者:huachao1001
链接:https://www.jianshu.com/p/bb064551d46b
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

来源: Android OpenGL 显示基本图形及相关概念解读 - 简书

文章末尾固定信息

weinxin
我的微信
我的微信
一个码农、工程狮、集能量和智慧于一身的、DIY高手、小伙伴er很多的、80后奶爸。
 
Igor
  • 本文由 Igor 发表于 2018-11-0721:56:02
Vue使用JsBridge与APP交互 Web服务器

Vue使用JsBridge与APP交互

现在在做的项目是 hybrid 开发,H5 页面会嵌入到 IOS 客户端 app 中,于是就涉及到了 H5 与 IOS 交互的问题。在这里记录一下项目中用到的交互方式,重点介绍 WebViewJava...
OpenGL

如何选择 HTML5 游戏引擎

原生手游市场已是红海,腾讯、网易等寡头独霸天下,H5游戏市场或将成为下一个风口。据笔者所知,很多H5游戏开发团队由于选择引擎不慎导致项目甚至团队夭折。如何选择适合团队和项目的引擎,笔者通过学习和项目实...
匿名

发表评论

匿名网友
:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:
确定

拖动滑块以完成验证