Android 3D 编程：HelloArrow
这是我的 Android 翻版“iPhone 3D Programming”系列的第一篇，相当于 OpenGL ES 1.1 的 Hello World
涉及 OpenGL 部分的代码基本上克隆原书 HellowArrow 的代码，只是由C++到C的简单移植、以及根据我的理解对个别细节的调整。UI/应用部分，则完全按照Android的方式重新实现，大体上是从我以前的一篇随笔“Android OpenGL ES 1.x 教程的Native实现”拿来。程序运行效果与原 HelloArrow 完全一样：灰色背景绘制一个黄色箭头，这个箭头始终指向上方；当屏幕旋转时，箭头会平滑地旋转90度到正确的方向。运行效果如下：（我的调试机器为Android 2.2，屏幕解析度800*480）
应用程序的层次结构
应用程序总体上分为3个层次--App层、接口层、实现层，如下图所示：
App层控制应用程序的生命周期、实现程序UI、处理UI事件、控制OpenGL的渲染线程
接口层，顾名思义定义了OpenGL绘图操作的接口，供上层调用以实现屏幕绘制（主要是被OpenGL渲染线程调用）。RenderingEngine是一个抽象类，其作用有二：（1）定义OpenGL绘图操作接口，（2）作为两个实现类（RenderingEngine1、RenderingEngine2）的工厂，创建实现类对象。OpenGL绘图操作接口有以下几个：
public abstract void initialize(int width, int height);
public abstract void render();
public abstract void updateAnimation(int period);
public abstract void onRotate(int rotation);
initialize() 方法用于当窗口初始化完成、显示到屏幕后，对OpenGL的初始化，其参数是窗口的尺寸
render() 方法是在屏幕上绘制一帧。App层的渲染线程基本上一个无限循环，不断地调用RenderingEngine.render() 方法以刷新屏幕。一般要控制刷新率（fps），就是控制渲染线程的循环的快慢
updateAnimation() 方法用于通知实现层对状态进行更新，该方法也是在渲染线程中每个循环调用一次、在render() 被调用之前。这个方法主要用来实现动画，例如，要实现一个物体在屏幕上从左到右移动，内部有一个x状态值，表示物体距屏幕左边的距离。在每一个渲染循环中，将x的值增加一点点（updateAnimation()方法）、然后绘制在屏幕上（render()方法），这样就形成了连续的动画。updateAnimation()方法带有一个参数，为此次循环距离上次循环的时间间隔，单位为毫秒（1ms=0.001s）。利用这个时间参数，就可以控制动画的速度，对于前面的物体从左到右移动的例子，物体的运动速度=x的增量/一次循环的周期
onRotate() 方法用来在屏幕旋转时将旋转角度通知到底层，底层对此事件进行相应处理，例如，本篇HelloArrow例子中，当屏幕旋转时，内部会开始旋转箭头的动画、直至旋转到正确角度才结束动画
RenderingEngine1、RenderingEngine2是RenderingEngine的具体类（或者说实现类，虽然它们的工作又进一步交给底层去完成），RenderingEngine1以OpenGL ES 1.1 实现，RenderingEngine2 以 OpenGL ES 2.0 实现（本篇暂未实现，To be continue:-）。App层要选择所要使用的OpenGL 版本，只要获取不同的类的对象就可以了，二者的接口是一样的，都实现了RenderingEngine
客户端利用RenderingEngine的工厂方法取得RenderingEngine1或者RenderingEngine2的实例，而不是直接实例化这两个类
RenderingEngine1、RenderingEngine2的方法都声明为native的，由实现层来完成最终的工作。实现层的3个组件，与接口层的3个组件一一对应。其中RenderingEngine1.c 实现了 RenderingEngine1 类、RenderingEngine2.c 实现了 RenderingEngine2 类的接口。在实现层内部，RenderingEngine1.c 和 RenderingEngine2.c 都“实现”了头文件 RenderingEngine.h，RenderingEngine.h 与 接口层的 RenderingEngine 类又是相互对应的。接口层、实现层的6个组件，都是相同的接口--RenderingEngine所定义的4个接口方法
渲染线程
前面说了，渲染线程就是一个“死”循环，在每个循环中调用 RenderingEngine.updateAnimation()、RenderingEngine.render() 方法。关于渲染线程的具体实现，请参考我以前的随笔“Android OpenGL ES 1.x 教程的Native实现”、或者本篇的源码
处理屏幕旋转
Android自动地为应用程序处理了屏幕旋转，对大多数情况，这很贴心。但是它并不提供“屏幕旋转事件”的通知（据我所知），这个就不太好了。好比在我国，大多数人从一出生就自动被“戴表”了，一般没有机会自己“戴表”自己。对于我们这个例子，要求屏幕旋转时，Activity并不会重新启动（View也不要重新Layout），因为我们要自己处理动画。怎么办呢？我以前的随笔“获取Android设备的方向”就探讨了这个问题。简单地说，是应用程序自己监听g-sensor的运动加速度，然后据此计算出设备旋转的角度，然后根据这个旋转角度来判断屏幕的4个方向（见Surface.ROTATION_XXX等4个常量）。这里不重复具体算法了，抓紧时间把OpenGL写完，我要睡觉了：）
RenderingEngine1.c 的实现
RenderingEngine1.c 是 RenderingEngine 接口的 OpenGL ES 1.1 实现，前面说过的。所有的 OpenGL ES 操作都在里面，这个正是我要学习的重点（也是我为什么打算写这一系列随笔的原因），下面说得尽量详细。复述是梳理自己对知识掌握程度和漏洞的好方法（更好的方法是交流）
RenderingEngine.h
前面说，在实现层内部，RenderingEngine1.c 实现了RenderingEngine.h ，而 RenderingEngine.h 与接口层的 RenderingEngine 是互相对应的关系。要说 RenderingEngine1.c，必须先交代一下 RenderingEngine.h，看看代码：
#ifndef _RENDERING_ENGINE_H
#define _RENDERING_ENGINE_H
#define ROTATION_0 0
#define ROTATION_90 1
#define ROTATION_180 2
#define ROTATION_270 3
void initialize(int width, int height);
void render();
void updateAnimation(int period);
void onRotate(int rotation);
#endif //_RENDERING_ENGINE_H
除了定义了4个旋转角度的常量，剩下的就是对 RenderingEngine 类的4个接口方法的照搬。为什么要这么做，来不及了、也怕讲不清楚。。。
initialize() 方法
虽然正确的说法是“函数”，但我习惯说“方法”了。后面如果我没有记起、在该说“函数”的地方错说成“方法”，敬请指出、原谅
我先贴 initialize() 函数的完整代码：
void initialize(int width, int height) {
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
// Initialize the projection matrix.
const float maxX = 2.0f;
const float maxY = 3.0f;
glOrthof(-maxX, maxX, -maxY, maxY, -1.0f, 1.0f);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
}
initialize() 方法是在程序刚刚启动、窗口刚刚ready时被调用的，带有2个参数，分别是窗口（也就是OpenGL的“画布”）的宽度和高度，单位是像素（其实无所谓）
首先，OpenGL设置它的“视口”（Viewport），就是说，最终OpenGL会把一帧图像绘制到视口内、并充满视口，这就意味着，如果图像的长/宽比与视口的长宽比不相等，图像就会在某一个方向被拉伸、变形。如果要保持图像的长宽比，就可以在设置视口时，在窗口范围内选取一个合适的视口。比如说让它居中，窗口内视口之外的部分就是空白。现在的电影不是流行宽屏（16:9）吗，如果显示器是老的4:3的你就很悲摧了，全屏播放时，上下的黑边加起来差不多比视频本身的面积还大了。长宽比就是这样一个概念，然后在OpenGL里，通过glViewport()方法来控制
glViewport() 方法带有4个参数，分别表示视口的左下角坐标、宽度和高度。上面的代码里将它设置成左下角位于原点、尺寸与窗口相同，也就是充满了窗口。这也就注定了我们这个程序的图像会产生变形
接下来，glMatrixMode()函数，将OpenGL的“当前”矩阵模式切换到“投影矩阵”。这里有几个概念。（1）OpenGL是一个状态机，在互斥的一组状态中，某一时刻只有其中一个状态是“当前的”，也就是会一直生效的，直至你把它切换到另一个状态，那时就是另一个状态变成“当前”状态了。（2）矩阵模式：显然“矩阵模式”就是OpenGL 的一种状态了，但是我不是很清楚具体还有哪几种矩阵、每种矩阵具体作什么用。我目前知道的是（不一定正确，有待学习）：在设置投影的参数之前，需要将矩阵模式切换到“投影矩阵”（GL_PROJECTION）；在绘图前，将它切换到“模型视图”矩阵（GL_MODELVIEW）。矩阵的作用，我以前学过一点点工科3D图形学，但是现在已经忘记了，大概只知道在三维空间对一个物体移动、缩放、旋转，都可以将它的当前坐标乘以一个矩阵就可以了，具体的我忘记了。iPhone 3D Programming 在第2章会讲，到时候我再仔细研究吧。基本的意思大概是：先切换到一种矩阵模式，然后修改当前矩阵的值，到时候OpenGL会用这个矩阵进行有关的运算。先这样吧，存疑。（3）投影矩阵：就是设置OpenGL怎么将3D空间内的物体，投影到一个2D平面上（最终绘制到我们的屏幕上），它有正交和透视两种投影的方式
正交投影（Orthographic Projection），就是物体的顶点和边，以平行的方式投射到投影平面上，物体本身有多大，投影过来还是多大；透视投影（Perspective Projection），是类似人的眼睛或者照相机的工作原理，投射线（我暂且这么说吧）会从物体汇聚到人眼或相机。想象要是用正交投影，我们要长多大的眼睛才够用啊？看下面的对比图示就清楚了：（左边是正交，右边透视）
上面的代码，调用glOrthof() 函数，设置了正交投影的一个立方体的范围，这个范围内的物体会投影到平面，这个范围之外的就裁减掉了。函数的6个参数分别代表立方体的6个面：左面的x、右面的x、底面的y、顶面的y、前面（靠近观察者）的z、后面（远离观察者）的z，如下图：（图中z的方向标反了？TBD）
然后，再次调用glMatrixMode()函数切换到GL_MODELVIEW矩阵。我目前的理解是：在要做绘图操作之前，切换到MODELVIEW矩阵。具体的后面再学
最后一个语句 glLoadIdentity()，这是将当前矩阵初始化为单位矩阵，线性数学里面学过，单位矩阵就是对角线为1的矩阵。目前我的理解是：这是矩阵的一个最初使的状态，后面绘制图形时，再往这个矩阵里面修改它的值
render() 方法
render() 方法的工作是绘制出一帧，也就是一个连续的动画的所有画面中的一幅。render() 方法被渲染线程循环调用，就形成了动画。如果每一帧图像都是一样的，则看起来是静止的画面，其实内部还是在不停地重绘
代码：
struct Vertex {
float position[2];
float color[4];
};
// Define the positions and colors of two triangles.
static const struct Vertex vertices[] = { //
{ { -0.5f, -0.866f }, { 1.0f, 1.0f, 0.5f, 1.0f } },//
{ { 0.5f, -0.866f }, { 1.0f, 1.0f, 0.5f, 1.0f } },//
{ { 0, 1.0f }, { 1.0f, 1.0f, 0.5f, 1.0f } }, //
{ { -0.5f, -0.866f }, { 0.5f, 0.5f, 0.5f } }, //
{ { 0.5f, -0.866f }, { 0.5f, 0.5f, 0.5f } },//
{ { 0, -0.4f }, { 0.5f, 0.5f, 0.5f } }, //
};
static int currentDegree = 0;
void render() {
glClearColor(0.5f, 0.5f, 0.5f, 1);
glClear(GL_COLOR_BUFFER_BIT);
glPushMatrix();
glRotatef(-currentDegree, 0, 0, 1);
glEnableClientState(GL_VERTEX_ARRAY);
glEnableClientState(GL_COLOR_ARRAY);
glVertexPointer(2, GL_FLOAT, sizeof(struct Vertex), vertices[0].position);
glColorPointer(4, GL_FLOAT, sizeof(struct Vertex), vertices[0].color);
GLsizei vertexCount = sizeof(vertices) / sizeof(struct Vertex);
glDrawArrays(GL_TRIANGLES, 0, vertexCount);
glDisableClientState(GL_VERTEX_ARRAY);
glDisableClientState(GL_COLOR_ARRAY);
glPopMatrix();
}
首先定义了一个Vertex结构体，表示一个顶点。顶点由它的坐标和颜色构成，这里使用了2D坐标(x, y)，其z坐标缺省为0，即：(x, y, 0)。颜色由RGBA 4个分量构成（A可省略，默认为1.0），这与Android 2D图形API（android.graphics）中的一样。每个颜色分量的范围为0~1.0
之后是一个Vertext顶点数组。我们这个程序是要绘制一个箭头，这个箭头是由两个三角形叠加形成的，其中一个三角形的颜色与画面的背景色一样，因此，看起来就相当于从第一个三角形中减去了第二个三角形，这样形成了我们看到的箭头形状：
可以在纸上画出这6个顶点，前3个连起来形成大的三角形，后3个是小三角形
有一个全局变量currentDegree，这是用来记录当前帧箭头的旋转角度的状态变量。当屏幕旋转时，箭头会平滑地旋转到正确向上的方向。在这个旋转的过程中，每一帧的currentDegree都会增加/减小一点，直至旋转到目标角度、动画停止
render() 方法头2个语句，将画面清成指定的颜色。这里又出现了一个新的概念：“清除颜色”缓存（GL_COLOR_BUFFER_BIT）。我的理解：OpenGL有n种缓存，其中一个是“清除颜色”缓存，用来存放清屏的颜色。glClear() 的就是用前面所指定的颜色进行清屏
glPushMatrix()、以及末尾的glPopMatrix()组成一对。每一种OpenGL 矩阵都包含多个矩阵，构成一个栈，栈顶的矩阵为当前矩阵。根据OpenGL ES的规范，MODELVIEW矩阵的栈深至少为16。glPushMatrix() 将当前矩阵（即：位于栈顶的）复制、并压入栈。glPopMatrix() 则弹出并丢弃栈顶矩阵，此时，原来的第二个矩阵--也就是glPushMatrix()之前的栈顶矩阵--成为新的栈顶矩阵，这样就实现了对当前矩阵的备份、恢复
在initialize()函数中，当前矩阵模式已经切换为MODELVIEW，并且将当前矩阵设为单位矩阵。当进入render() 函数后，由于glPushMatrix()-glPopMatrix()函数对的作用，无论render()被调用多少次，在进入函数的前、后时刻，当前矩阵始终为单位矩阵。而在glPushMatrix()-glPopMatrix()函数对之间对当前矩阵的任何更改都将被丢弃
glRotatef() 函数会用一个“旋转矩阵”与当前矩阵相乘并取代当前矩阵，由于当前矩阵为单位矩阵，因此，glRotate() 的结果是旋转矩阵成为当前矩阵。在这之后绘制的物体，都会被按参数指定的方式旋转指定的角度。该函数接收4个参数，第1个表示旋转的角度的度数，后3个参数构成的矢量（x, y, z）表示旋转轴。在我们的代码里面该矢量为(0, 0, 1)，即z轴。z轴是垂直于屏幕向里的，因此，这里的结果是，屏幕（x-y平面）上的图形绕原点旋转了-currentDegree度。关于currentDegress的值以及正负号，后面再说明
接下来先看glEnableClientState()-glDisableClientState()之间的代码。OpenGL 绘图的方式是：在绘图之前，将要绘制的图形的顶点坐标以及颜色以数组形式提交给OpenGL，其中，glVertexPointer() 函数提交顶点坐标数组，glColorPointer()函数提交顶点的颜色数组。这两个函数的参数一样，第1个参数表示每个顶点包含几个分量，例如，我们代码中指定坐标由2个分量（x、y，z缺省为0）、颜色由4个分量（RGBA）组成；第2个参数表示所提交的数组元素的类型，OpenGL根据此类型确定每个数组元素的长度（字节数）；第3个参数表示数组中相邻顶点之间的偏移量，例如，我们的vertices数组中是[2个坐标值、4个颜色值、2个坐标值、4个颜色值。。。]的形式存放数据，因此，一个顶点的坐标与上一个顶点的坐标值之间相隔了4个颜色值，而一个顶点的颜色值与上一个顶点的颜色值之间相隔了2个坐标值。偏移量为0则表示相邻顶点紧凑排列，中间没有任何间隔。最后一个参数表示所提交数组的地址
数据提交给OpenGL之后，通过glDrawArrays() 函数，指示OpenGL利用之前所提交的数组进行图形绘制。3个参数分别表示绘制图形的类别、数组中第1个顶点的索引、数组中顶点个数。我们这里绘制的图形是三角形（TRIANGLE），由于之前glVertext/ColorPointer()函数中提供的数组地址已经取到了第1个顶点，因此，这里第2个参数的值为0；顶点个数由sizeof操作符求得，也可以直接改为6
现在再说glEnable/DisableClientState() 函数。上面所说的glXxxPointer()->glDrawArrays()的绘图方式，提交给OpenGL的数据存放在OpenGL的客户端，但是必须通过glEnableClientState()函数显式地开启这个功能。这是规定，遵照就行了
关于客户端、服务器端，我在之前学习 EGL 规范时了解到：OpenGL 以C-S模式运行（与X Window一样），应用程序是客户端，OpenGL为服务器端，客户端通过OpenGL命令（函数）与服务器通讯；OpenGL的状态数据，既可以放在客户端（glEnableClientState()），也可以放在服务器端、但是要创建服务器端的buffer（好像如此，存疑）
小结一下：render()函数在屏幕上以一定旋转角度绘制出箭头的图形，这个旋转角度是-currentDegree，它的值可以在render() 函数之外控制/修改
计算旋转角度
箭头的旋转角度currentDegree 是在 onRotate()、updateAnimation()两个函数中更新（以实现动画）的
onRotate() 在屏幕发生旋转时被调用，同时接收到一个参数，表示屏幕旋转的角度，并把这个角度（desiredDegree）记录下来：
static int desiredDegree = 0;
static int currentDegree = 0;
void onRotate(int rotation) {
desiredDegree = 90 * rotation;
}
初始状态时，currentDegree与desiredDegree相等（都为0）；当屏幕旋转一定角度后，“理想的”结果是箭头也旋转相同的角度、currentDegree再次变得与desiredDegree相等。因此，可以把这两个变量都理解成绝对值，但实际上它们的方向应该相反
在渲染线程的每次循环中，updateAnimation() 都被调用。在这个函数中，就对比currentDegree与desiredDegree之间还相差多少，如果已经相等（达到理想状态）了，就不再更新currentDegree的值了。否则，根据循环的周期、我们期望的动画速度，计算出在这一帧应该旋转多少角度。思路就是这样的，具体的计算如下：
static const int DEGREES_PER_SEC = 360;
static int desiredDegree = 0;
static int currentDegree = 0;
static int getRotateDir() {
int delta = desiredDegree - currentDegree;
if (0 == delta) {
return 0;
}
return ((delta > 0 && delta <= 180) || (delta < -180)) ? 1 : -1;
}
void updateAnimation(int period) {
int dir = getRotateDir();
if (0 == dir) {
return;
}
int degrees = (int) (period / 1000.0f * DEGREES_PER_SEC);
currentDegree += degrees * dir;
// Ensure that the angle stays within [0, 360).
if (currentDegree >= 360) {
currentDegree -= 360;
} else if (currentDegree < 0) {
currentDegree += 360;
}
// If the rotation direction changed, then we overshot the desired angle.
if (getRotateDir() != dir) {
currentDegree = desiredDegree;
}
}
这里简单地解释一下：DEGREES_PER_SEC是希望动画的速度为360度/s；getRotateDir() 是根据desiredDegree与currentDegree之间的大小关系，计算出旋转的方向（逆时针/顺时针），例如说，二者相差90度，就不要让它绕一个大圈旋转270，虽然最终也到达了我们期望的位置，但是这个旋转的过程与人的主观预期相悖；updateAnimation() 函数计算出此次应该旋转“到”的角度，并且确保在有效范围内
最后回到前面留下的一个问题：在render()函数中调用glRotatef()时，指定旋转角度为-currentDegree，这是因为，箭头的旋转方向应该与屏幕旋转方向的相反
其他说明
实现层的文件组织结构
我对实现层的文件结构组织如下。RenderingEngine1.c 放在单独的子文件夹中，虽然目前只有它一个源文件；后面实现了RenderingEngine2.c 后，也会同理放在另一个单独的子文件夹 RenderingEngine2_impl 中；JNI“胶合”代码以及 RenderingEngine.h 都放在 jni/ 根目录
RenderingEngine1.c 单独编译成一个共享库 RenderingEngine1_impl；同理，后面实现了RenderingEngine2_impl 也会编译成独立的共享库
JNI胶合代码主要是简单地调用RenderingEngine1_impl、RenderingEngine2_impl 这两个库。我们通过在 jni/Android.mk 中指定这种依赖关系：
LOCAL_PATH := $(call my-dir)
# Include make files in sub dirs
# Note that LOCAL_PATH variable will get cleared
# therefor we have to restore it later
LOCAL_PATH_restore := $(LOCAL_PATH)
include $(call all-subdir-makefiles)
LOCAL_PATH := $(LOCAL_PATH_restore)
# Build libRenderingEngine1.so, which links against libRenderingEngine1_impl.so
include $(CLEAR_VARS)
LOCAL_MODULE := RenderingEngine1
LOCAL_SRC_FILES := unidroid_android3d_helloarrow_RenderingEngine1.c
LOCAL_SHARED_LIBRARIES := RenderingEngine1_impl
include $(BUILD_SHARED_LIBRARY)
首先注意 include $(call all-subdir-makefiles) 一行，它的作用是将所有存在Android.mk文件的子目录都进行编译。但是，实践证明，它会导致在脚本开头所赋值的LOCAL_PATH变量的值变为NDK的根目录，最终导致接下来的 RenderingEngine1 模块的编译失败。因此我在它的前后分别对LOCAL_PATH变量进行了保存、恢复
在编译 RenderingEngine1 库时，通过 LOCAL_SHARED_LIBRARIES 指定了它需要动态链接到 RenderingEngine1_impl 库
本篇完！
通过对HelloArrow例子的学习和分析、以及前些天所作的准备工作，初尝 OpenGL ES 编程的滋味（还不错），不过还有不少关键概念需要进一步学习和澄清。但我很有信心的是，等写完计划中的一整个系列后，一定会对OpenGL ES有更加全面和深刻的理解
posted on 2011-10-18 10:16 bye_passer 阅读(3331) 评论(0) 编辑 收藏 举报
