Facebook Twitter LinkedIn E-mail
magnify
Home 2011 六月

Android OpenGL ES 开发教程(14):三维坐标系及坐标变换初步

OpenGL ES图形库最终的结果是在二维平面上显示3D物体(常称作模型Model)这是因为目前的打部分显示器还只能显示二维图形。但我们在构造3D模型时必须要有空间现象能力,所有对模型的描述还是使用三维坐标。也就是使用3D建模,而有OpenGL ES库来完成从3D模型到二维屏幕上的显示。

这个过程可以分成三个部分:

  • 坐标变换,坐标变换通过使用变换矩阵来描述,因此学习3D绘图需要了解一些空间几何,矩阵运算的知识。三维坐标通常使用齐次坐标来定义。变换矩阵操作可以分为视角(Viewing),模型(Modeling)和投影(Projection)操作,这些操作可以有选择,平移,缩放,正侧投影,透视投影等。
  • 由于最终的3D模型需要在一个矩形窗口中显示,因此在这个窗口之外的部分需要裁剪掉以提高绘图效率,对应3D图形,裁剪是将处在剪切面之外的部分扔掉。
  • 在最终绘制到显示器(2D屏幕),需要建立起变换后的坐标和屏幕像素之间的对应关系,这通常称为“视窗”坐标变换(Viewport) transformation.

如果我们使用照相机拍照的过程做类比,可以更好的理解3D 坐标变换的过程。

  1. 拍照时第一步是架起三角架并把相机的镜头指向需要拍摄的场景,对应到3D 变换为viewing transformation (平移或是选择Camera )
  2. 然后摄影师可能需要调整被拍场景中某个物体的角度,位置,比如摄影师给架好三角架后给你拍照时,可以要让你调整站立姿势或是位置。对应到3D绘制就是Modeling transformation (调整所绘模型的位置,角度或是缩放比例)。
  3. 之后摄影师可以需要调整镜头取景(拉近或是拍摄远景),相机取景框所能拍摄的场景会随镜头的伸缩而变换,对应到3D绘图则为Projection transformation(裁剪投影场景)。
  4. 按下快门后,对于数码相机可以直接在屏幕上显示当前拍摄的照片,一般可以充满整个屏幕(相当于将坐标做规范化处理NDC),此时你可以使用缩放放大功能显示照片的部分。对应到3D绘图相当于viewport transformation (可以对最终的图像缩放显示等)

下图为Android OpenGL ES坐标变换的过程:

  • Object Coordinate System: 也称作Local coordinate System,用来定义一个模型本身的坐标系。
  • World Coordinate System: 3d 虚拟世界中的绝对坐标系,定义好这个坐标系的原点就可以用来描述模型的实现的位置,Camera 的位置,光源的位置。
  • View Coordinate System: 一般使用用来计算光照效果。
  • Clip Coordinate System:  对3D场景使用投影变换裁剪视锥。
  • Normalized device coordinate System (NDC): 规范后坐标系。
  • Windows Coordinate System: 最后屏幕显示的2D坐标系统,一般原点定义在屏幕左上角。

对于Viewing transformation (平移,选择相机)和Modeling transformation(平移,选择模型)可以合并起来看,只是应为向左移动相机,和相机不同将模型右移的效果是等效的。

所以在OpenGL ES 中,

  • 使用GL10.GL_MODELVIEW 来同时指定viewing matrix 和modeling matrix.
  • 使用GL10.GL_PROJECTION 指定投影变换,OpenGL 支持透视投影和正侧投影(一般用于工程制图)。
  • 使用glViewport 指定 Viewport 变换。

此时再看看下面的代码,就不是很难理解了,后面就逐步介绍各种坐标变换。

public void onSurfaceChanged(GL10 gl, int width, int height) {
// Sets the current view port to the new size.
gl.glViewport(0, 0, width, height);
// Select the projection matrix
gl.glMatrixMode(GL10.GL_PROJECTION);
// Reset the projection matrix
gl.glLoadIdentity();
// Calculate the aspect ratio of the window
GLU.gluPerspective(gl, 45.0f, (float) width / (float) height, 0.1f, 100.0f);
// Select the modelview matrix
 gl.glMatrixMode(GL10.GL_MODELVIEW);
// Reset the modelview matrix
 gl.glLoadIdentity();
}
 

Android OpenGL ES 开发教程(13):阶段小结

之前介绍了什么是 OpenGL ES ,OpenGL ES 管道的概念,什么是EGL,Android中OpenGL ES的开发包以及GLSurfaceView,OpenGL ES所支持的基本几何图形:点,线,面,已及如何使用这些基本几何通过构成较复杂的图像(20面体)。

但到目前为止还只是绘制2D图形,而忽略了一些重要的概念,3D坐标系,和3D坐标变换,在介绍OpenGL ES Demo程序框架时,创建一个OpenGLRenderer 实现 GLSurfaceView.Renderer接口

public void onSurfaceChanged(GL10 gl, int width, int height) {
 // Sets the current view port to the new size.
 gl.glViewport(0, 0, width, height);
 // Select the projection matrix
 gl.glMatrixMode(GL10.GL_PROJECTION);
 // Reset the projection matrix
 gl.glLoadIdentity();
 // Calculate the aspect ratio of the window
 GLU.gluPerspective(gl, 45.0f,
 (float) width / (float) height,
 0.1f, 100.0f);
 // Select the modelview matrix
 gl.glMatrixMode(GL10.GL_MODELVIEW);
 // Reset the modelview matrix
 gl.glLoadIdentity();
 }
}

我们忽略了对glViewport,glMatrixMode,gluPerspective以及20面体时glLoadIdentity,glTranslatef,glRotatef等方法的介绍,这些都涉及到如何来为3D图形构建模型,在下面的几篇将详细介绍OpenGL ES的坐标系和坐标变换已经如何进行3D建模。

 

Android ApiDemos示例解析(124):Views->ImageSwitcher

前面介绍Android ApiDemos示例解析(97):Views->Animation->Push 时用到了ViewFlipper ,ViewFlipper 和ViewSwitcher 都是ViewAnimator 的子类,ViewAnimator (FrameLayout的子类)提供了不同View之间切换时的动画效果支持,应为ViewAnimator 为FrameLayout的子类,因此ViewAnimator中包含的子View都是叠放在一起,一般情况下支持看到最上面的一个View。

ViewFlipper 可以包括2个以上的子View,自动定时切换显示每个子View。而ViewSwitcher只能最多包括两个子View。每次只显示其中一个View,它有两个子类TextSwitcher 和ImageSwitcher 。本例使用ImageSwitcher 用于在包含在其中的两个图像之间切换.

ImageSwitcher 定义了setImageDrawable, setImageResource,setImageURI 可以通过不同的方式为ImageSwitcher指定图像,每次调用这些方法,新添加的图像和原来显示的图像之间切换时将采用由setInAnimation和setOutAnimation指定的动画效果:

mSwitcher = (ImageSwitcher) findViewById(R.id.switcher);
mSwitcher.setFactory(this);
mSwitcher.setInAnimation(AnimationUtils.loadAnimation(this,
 android.R.anim.fade_in));
mSwitcher.setOutAnimation(AnimationUtils.loadAnimation(this,
 android.R.anim.fade_out));

本例的Layout ,上方显示ImageSwitcher,下面是用Gallery显示图像的缩略图。Gallery用法参见Android ApiDemos示例解析(119):Views->Gallery->1. Photos

用户选择Gallery中某个缩略图时,将使用ImageSwitcher显示其对应大图:

public void onItemSelected(AdapterView parent,
 View v, int position, long id) {
 mSwitcher.setImageResource(mImageIds[position]);
}

 

Android ApiDemos示例解析(123):Views->ImageButton

ImageButton 为ImageView的子类,因此可以显示一个图形,同时它具有Button的功能,能够被按下并响应用户点击事件。ImageButton缺省显示和Button同样风格。可以在Layout文件中通过android:src 或是在代码中使用setImageResource(int)  为Button指定图像。

ImageButton可以为ImageButton重新设置背景图像。并可以为Button的不同状态(获取焦点,失去焦点,按下)指定不同的图像,比如,绿色的图像作为缺省显示,按下时显示黄色图像,获取焦点时显示橙色。一个简单的方法是使用”selector” drawable 资源,比如:

<?xml version=”1.0″ encoding=”utf-8″?>
<selector xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:state_pressed=”true”
android:drawable=”@drawable/button_pressed” /> <!– pressed –>
<item android:state_focused=”true”
android:drawable=”@drawable/button_focused” /> <!– focused –>
<item android:drawable=”@drawable/button_normal” /> <!– default –>
</selector>

将中个资源文件存放在/res/drawable 目录下,然后通过android:src 为ImageButton 指定资源。 资源定义的顺序非常重要。

本例使用Android系统自带的图像资源为三个按钮指定图像:

<ImageButton
android:layout_width=”100dip”
android:layout_height=”50dip”
android:src=”@android:drawable/sym_action_call” />

<ImageButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@android:drawable/sym_action_chat” />

<ImageButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:src=”@android:drawable/sym_action_email” />

 

Android ApiDemos示例解析(122):Views->Grid->2. Photo Grid

本例和上例非常类似,ImageAdapter 的getView 也是使用的ImageView ,只是数据源为资源文件中的一组照片。

public View getView(int position, View convertView,
 ViewGroup parent) {
 ImageView imageView;
 if (convertView == null) {
 imageView = new ImageView(mContext);
 imageView.setLayoutParams(new GridView.LayoutParams(45, 45));
 imageView.setAdjustViewBounds(false);
 imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
 imageView.setPadding(8, 8, 8, 8);
 } else {
 imageView = (ImageView) convertView;
 }

 imageView.setImageResource(mThumbIds[position]);

 return imageView;
}

如果有需要的话,可以自定义一个View的Layout ,比如含有一个ImageView,下面再来一个TextView,然后在ImageAdapter 的getView 展开这个layout ,将ImageView 设成照片,TextView设成照片名称。此时GridView还是以网格显示,但此时每个网格或即显示照片,而在照片下方显示照片名称,类似App Launcher.

 

Android ApiDemos示例解析(121):Views->Grid->1. Icon Grid

前面介绍过的ListView, Gallery ,Spinner 等都是AdapterView 的子类,本例GridView 也是AdapterView的子类。AdapterView的显示可以通过数据绑定来实现,数据源可以是数组或是数据库记录,数据源和AdapterView是通过Adapter作为桥梁。通过Adapter,AdatperView可以显示数据源或处理用户选取事件,如:选择列表中某项。

所有AdapterView的数据源都是使用Adapter 作为桥梁, 不同的AdapterView,只是显示数据源的方式不同,ListView 以列表显示显示,Gallery以横向画廊方式,GridView则以二维网格的方式显示,缺省GridView根据所显示的View大小自动计算出每列的个数,也可以通过GridView的setNumColumns(int numColumns)指定列数,或是setColumnWidth(int columnWidth)指定列宽。

本例使用AppsAdapter 读取App Launcher 中所有应用的图标。Adapter的getView 返回一ImageView:

public View getView(int position, View convertView,
 ViewGroup parent) {
 ImageView i;

 if (convertView == null) {
 i = new ImageView(Grid1.this);
 i.setScaleType(ImageView.ScaleType.FIT_CENTER);
 i.setLayoutParams(new GridView.LayoutParams(50, 50));
 } else {
 i = (ImageView) convertView;
 }

 ResolveInfo info = mApps.get(position);
 i.setImageDrawable(info.activityInfo.loadIcon(getPackageManager()));

 return i;
}

Adapter可以返回任意类型的View,比如Button,TextView等,GridView或根据Adapter的getView返回的view 来显示每一项。

同样使用setAdapter 为GridView设置数据源。

setContentView(R.layout.grid_1);
mGrid = (GridView) findViewById(R.id.myGrid);
mGrid.setAdapter(new AppsAdapter());

本例如果将GridView 改成ListView ,应用图标将以列表显示。ListView 和GridView使用同一数据源,不同的只是表现形式(列表或是网格)。这样可以看到对应同一数据源,Android可以支持的表现形式非常多样化。