从零开始学OpenGLES开发——第一章

从零开始学OpenGLES开发——第一章

本教程并非翻译自某文献或者教程，完全是自己学习的总结，所以并不保证百分百正确，只代表个人的理解。
所涉及知识面并不全面，这和个人能力有限有关，只是希望能够起到参考价值。
OpenGL是一个画图的API集合，而OpenGLES是它的一个子集，本教程首先从OpenGL1.0开始入手，跑完第一个例子程序。
然后在将第一个例子程序中的某些用到的接口，换成OpenGLES2.0，这样读者能够清晰的明白1.0和2.0的主要区别在哪。


第1节 关于矩阵
矩阵从实际开发角度来看， 它就是一个4x4的数组，而数据类型跟具体的3D引擎有关，比如OpenGL一般为float，而在Direct3D中，它通常用一个结构体（里面有4x4的成员）来表示。
矩阵的作用，就是作为3D世界的各种变换的承载体。我们从一维的角度来理解矩阵的作用，然后在引申到三维。
想想一维坐标轴x上，有一个线段[1, 3]。在一维坐标轴上，这个线段能有哪几种变换方式呢？两种：1放大缩小，2位置平移。那么我们可以定义一个数组，两个元素float[2]。第一个表示放大缩小，1.0的时候表示不变。第二个元素表示位置平移，负数向左，正数向右。
将这个数组，应用到线段的过程，就是将线段上的坐标的值，和这个数组的值进行加减或者乘除操作。所得到的结果就是一个转换后的线段。


3D世界里也类似，一个3D物体代表着类似一个简单线段拥有众多的数据。而矩阵就像是前面说的那个两个值的数组。这个矩阵所表示的内容是一个变换过程，只不过由于3D世界的变换复杂得多，所以需要4x4个float来承载变换的参数。将这个矩阵应用到某个3D物体，那么这个3D物体就完成了这个变换过程。而将矩阵应用到某个3D的物体，其实实际开发中，就是将这个物体的各个点，乘以这个矩阵，得到新的点就行了。
以上内容只是希望读者对矩阵有一个模糊的认识，矩阵的算法是很高深的，我们暂时不需要去透彻研究它，只要知道它的数据是什么含义，怎么用即可。

矩阵只是一组变换的参数的承载体：

比如我要让一个物体旋转——让这个物体和我的旋转矩阵运算。

比如我要让一个物体放大——让这个物体和我的拉伸矩阵运算。

比如我要让一个物体平移——让这个物体和我的平移矩阵运算。

如果一个矩阵同时承载了旋转，拉伸和平移的变换参数，那么物体和它运算之后，就会同时进行旋转，拉伸和平移。

OpenGL我的理解是它内置了一个矩阵链，属于系统级的矩阵链，或者叫矩阵栈。反正就是一串矩阵。

任何你执行的绘制操作，默认都会进行这一串矩阵进行的变换。系统矩阵里面最基本的两个矩阵就是投影矩阵和视图矩阵（或者叫模型变换矩阵）后面会讲到。

投影矩阵决定的是最后眼睛看到的屏幕的长宽比例等，因为屏幕大小是不固定的，有些人是宽屏，有些人是标屏，有些人19寸，有些人17寸。手机上只有3-5寸等等。

为了保证最后物体看上去大小比例都是合适的，需要进行一个拉伸压缩的转换，这个转换就是投影矩阵干的事。

视图矩阵起的作用是决定视角的，玩过CS或者CF就晓得了，人在场景里面往前走，实际上专业叫法就是视角和视点在移动。而OpenGL里面没有专门的视角和视点的算法，它是通过将整个世界进行移动、旋转，来模拟出人在里面行走漫游的效果。比如你向前走100米，实际上和把整个世界往后移100米，最后看到的效果是一样的。

以上说的两个矩阵在代码里都会用到，后面有详细的代码演示

OpenGL的坐标系是是这样的


默认情况下，
x轴 从屏幕左到右 变大
y轴 从屏幕下到上 变大
z轴 从屏幕里到外 变大


第2节 OpenGLES1.0 环境以及初始化




首先需要用到的是OpenGLES需要绘制的控件GLSurfaceView。在OpenGL中有则复杂的初始化过程，需要将OpenGL引擎连接到当前操作系统的某个控件上是一个复杂的操作，而在android上，这个过程都由GLSurfaceView完成了。我们创建一个类，继承自GLSurfaceView，代码如下：

public class MyGLSurfaceView extends GLSurfaceView implements Renderer {

	public MyGLSurfaceView(Context context, AttributeSet attrs) {
		super(context, attrs);
		init();
	}
	public MyGLSurfaceView(Context context) {
		super(context);
		init();
	}
	
	private void init(){
	}
	public void onSurfaceCreated(GL10 gl, EGLConfig config) {
	}
	public void onSurfaceChanged(GL10 gl, int width, int height) {
	}
	public void onDrawFrame(GL10 gl) {
	}
}

可以看到，这个类函数都是空的。里面只有那个init是笔者加的，其他的都是接口以及父类里需要实现的函数。
创建主类Activity，使用这个MyGLSurfaceView，代码很简单。

public class MainActivity extends Activity {
	protected void onCreate(Bundle bundle) {
		super.onCreate(bundle);
		MyGLSurfaceView glsurface = new MyGLSurfaceView(this);
		this.setContentView(glsurface);
	}
}

后面不需要改动MainActivity，它只是负责显示GLSurfaceView而已。
接下来教大家怎么开始往MyGLSurfaceView里填入东西。
首先是init里面，需要做什么呢

	private void init(){
		this.setEGLContextClientVersion(1);
		this.setRenderer(this);
	}

第一句是可选的，因为当前使用的是OpenGLES1.0，而默认就是1。如果后面使用OpenGLES2.0了，那么第一个函数的参数就应该改为2。
第二句是必须的，第二句设置当前这个GLSurfaceView的render对象是自己（当前GLSurfaceView实现了Renderer接口，需要实现onDrawFrame函数），这个函数就是每一帧调用一次，具体复杂每一张图的绘制。类似MFC中的OnPaint，或者android中的onDraw。
两个函数顺序有讲究，设置version必须在绑定到render之前。

这时候其实已经可以启动程序了，你会看到屏幕上什么都没有，但是onDrawFrame已经会不停的执行了，执行频率又叫帧率fps（frame per sesond）。

第三节 添加模型。

public void onSurfaceCreated(GL10 gl, EGLConfig config) {
}
public void onSurfaceChanged(GL10 gl, int width, int height) {
}
这两个函数是初始化函数，系统自动调用。第一个只调用一次，第二个可能会调用多次，比如你的控件（GLSurfaceView）的大小改变了，就会触发onSurfaceChanged再调用一次。通常在第一个函数里初始化OpenGLES无关的数据，第二个函数里设置OpenGLES里当前窗口大小相关的参数。
onSurfaceChanged的函数填写内容之后，如下：

public void onSurfaceChanged(GL10 gl, int width, int height) {
	GLES10.glViewport(0, 0, width, height); // 设置视口宽度高度。
	// {修改投影矩阵
	GLES10.glMatrixMode(GLES10.GL_PROJECTION); // 修改投影矩阵
	GLES10.glLoadIdentity(); // 复位，将投影矩阵归零
	GLU.gluPerspective(gl, 60.0f, ((float) width) / height, 1.0f, 300.0f); // 最近和最远可以看到的距离，超过最远将不显示。
	// }
}

第一句GLES10.glViewport是设置当前视图窗口的宽和高，基本上这个函数调用的方式就是这样写死的，没有什么可讨论的。
后面三句代码含义比较复杂，我一一讲解
前面已经提过了矩阵的意思了，OpenGLES1.0里面内置了几个特殊的矩阵（注意OpenGLES2.0里面就没有这些了）:
第一个，GLES10.GL_PROJECTION 投影矩阵  
第二个，GLES10.GL_MODELVIEW  模型转换矩阵


投影矩阵和视图窗口大小有关系，因为3D世界里面的物体，要显示到2D的平面上，需要有一个投影的过程，就像照相机照相。而照相机需要知道你的窗口有多大，也就是说你最后显示的照片的长宽比是多少。这样我可以在照相的时候适当的对画面进行拉伸，以达到你看到的是希望的效果。（反而言之就是如果不设置投影矩阵，最后看到的画面就是拉伸的变形了的，就像硬把400x300的电影全屏铺满到600x300的屏幕上看一样）。


模型转换矩阵后面会讲到，先继续讲解这三句函数调用的含义
第一个函数glMatrixMode，意思是指定我后面调用的修改矩阵的函数，都是针对的投影矩阵，而非别的内置矩阵。
第二个函数glLoadIdentity，意思是我将投影矩阵复位，复位的意思就是这个矩阵的转换结果就是“没有任何变化”，矩阵处于原始状态。

第三个函数gluPerspective，注意它前缀是glu，它不属于标准OpenGLES的函数，属于辅助函数。它用于用人们很容易理解的方式来构建参数，而得到一个投影矩阵。

因为投影矩阵依然是一个float[16]的数组，我知道它是干什么的，却不知道该怎么填他们的值来达到我期望的效果，这个函数就是干这个的，你告诉它你要的效果，它帮你生成矩阵。

这个函数的原型如下：

void gluPerspective(GL10 gl, float fovy, float aspect, float zNear, float zFar);

它参数的含义如下：

从图上可以看出来，near 的值，视角度数的值，一起决定了最后物体在屏幕显示多大，也决定了单位的长度。

public void glmPerspective(float[] mResult, float fovy, float aspect, float zNear, float zFar) {
        float top = zNear * (float) Math.tan(fovy * (Math.PI / 360.0));
        float bottom = -top;
        float left = bottom * aspect;
        float right = top * aspect;
        Matrix.frustumM(mResult, 0, left, right, bottom, top, zNear, zFar);
    }

以上为glmPerspective的实现。
标准OpenGL里面有glBegin + glEnd的输入方式，但是OpenGLES里面没有，OpenGLES只支持客户端缓存输入的方式，
我粗略的讲一下，OpenGL的工作原理是服务器+ 客户端的模式。你的程序就是客户端 OpenGL引擎就是服务器（可以理解为显卡）。而服务器是个状态机，状态机就是你服务器上的任何状态你这一次修改了，除非你再次修改，不然它会始终保持不变。举个例子GLES10.glMatrixMode(GLES10.GL_PROJECTION); 设置当前要修改的矩阵是投影矩阵，如果你后面不调用这个函数或者隐含调用这个函数的其他函数，那它始终保持为当前修改的矩阵为投影矩阵。
客户端传递指令和数据到服务器，服务器执行指令。
glBegin 意思是告诉服务器，接下来在glEnd之前，将要发送一串绘制的命令。比如glVertex3f传输一个定点坐标给服务器 glNormal3f 传递一个法线向量给服务器，这些函数都必须在glBegin 和 glEnd之间调用。glBegin + glEnd的代码样子大概是这样的：(C++)版本的

glBegin(GL_LINE_STRIP); //begin和end之间的顶点是画线
	glVertex3f(width,0,-world_depth/2);
	glVertex3f(width,0,world_depth/2);
glEnd();

可以看到，我画一条线，就需要调用4次函数。每一个点的和线的描述信息都要重复一次次的传递过去。实在是很复杂。
OpenGLES并不支持这种方式，只支持缓存一次批量输入的方式，但是缓存是放在客户端本地的，并没有传递到服务器。步骤是，1，构建一个数组放在客户端，2，调用一个函数制定传递缓存中多少数据到服务器，而具体底层传递的过程还是调用的 begin + end。目前我的理解，完全是为了我们少调用几个函数，好像没看到有效率什么的优化的文章（个人理解）


那我们看看OpenGLES里面是怎么做的，画三角形为例
因为是一次就构建好数据放在缓存里，所以就需要在onSurfaceCreated里构建数据，而不用去onDrawFrame里一次次的重复创建。begin + end的函数是在onDrawFrame里调用的，因为客户端（begin+end）向服务器传递的数据，只在当前这一帧画面有效，所以需要在onDrawFrame里调用。

	private FloatBuffer vertexBuffer = null ;
	
	public void onSurfaceCreated(GL10 gl, EGLConfig config) {
		
		float[] vertexs = new float[]{
				-5.0f,  5.0f, -20.0f, 
				 5.0f, -5.0f, -20.0f, 
				 5.0f,  5.0f, -20.0f, 
		};
		vertexBuffer = ByteBuffer.allocateDirect(vertexs.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
		vertexBuffer.put(vertexs);
		vertexBuffer.position(0);
	}

在onSurfaceCreated里构建了一个三角形（三个顶点，一个定点3个坐标，一共9个float数据，最后整理这9个float放入一个FloatBuffer里，OpenGLES支持FloatBuffer输入）。
里面顶点数字的大小，取决于自己定义的单位长度，如果前面的最远和最近距离设置成 0.1 - 30.0。那么这里这些坐标就全部除以10，最后看到的图是一样的效果。

在OpenGL中，三角形的绘制逆时针的面为正面。里面三个定点的位置和顺序是  左上->右下->右上。

vertexBuffer 作为成员变量，然后就可以在onDrawFrame里使用了，onDrawFrame代码如下

	public void onDrawFrame(GL10 gl) {
		GLES10.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // 清空场景为黑色。
		GLES10.glClear(GLES10.GL_COLOR_BUFFER_BIT | GLES10.GL_DEPTH_BUFFER_BIT);// 清空相关缓存。
		
		GLES10.glEnableClientState(GLES10.GL_VERTEX_ARRAY);
		GLES10.glVertexPointer(3, GLES10.GL_FLOAT, 0, vertexBuffer);
		
		GLES10.glDrawArrays(GLES10.GL_TRIANGLES, 0, 3);
		
		GLES10.glFlush();
	}

GLES10.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // 清空场景为黑色。
GLES10.glClear(GLES10.GL_COLOR_BUFFER_BIT | GLES10.GL_DEPTH_BUFFER_BIT);// 清空相关缓存。
这两句代码算是清空上一次绘制的遗留画面和数据。
第一句是清空背景的颜色，4个参数是 r，g，b，a四个颜色分量。
第二句是清空某一些绘制用过的缓存。
第三句glEnableClientState代码是开启客户端的顶点输入功能，就是客户端支持一缓存的方式批量输入顶点信息。
第四句glVertexPointer代码是设置当前定点输入功能，使用的缓存是vertexBuffer。第一个参数表示一个顶点有三个坐标，xyz。
第五句glDrawArrays代码调用的时候，客户端才开始将客户端缓存的那些数据发送到服务器，这些顶点的使用方式是画三角形。并且只发送3个顶点到服务器（缓存里面其实只有3个顶点的数据，多了也没有啊！）
第六句glFlush，就和写文件的操作的flush差不多。因为onDrawFrame最后完了系统会调用glFlush或者glFinish，所以对于简单的绘制，glFlush 这里其实用不用都没区别，但是写上帮助理解嘛。


可以试试启动程序，可以看到画面了噢。亲！
可以试试启动程序，可以看到画面了噢。亲！
可以试试启动程序，可以看到画面了噢。亲！


下面讲什么是视点，视线。对应到OpenGLES的具体技术点就是模型变换矩阵GLES10.GL_MODELVIEW 。


什么是视点？ 就是3D世界中，眼睛所在的位置的坐标
什么是视线？ 就是3D世界种，眼睛看出去的向量，就是屏幕正中间看出去的向量。
视线出了有看出去的向量，还有一个头顶方向向量，因为你只看一个方向不变，眼睛可以旋转啊，倒过来也可以朝同一个方向看去，所以还要确定一个头顶方向。


默认OpenGL的视点和视线是眼睛位于 (0,0,0)位置，头顶是(0,1,0)，视线是(0,0,-1)，还记得我说的OpenGL的坐标轴的定义不？
（这也就是为什么我前面定义的三个定点的z坐标都要是负数了，因为默认眼睛只能看到z的负半轴）


也就是说如果你在 glDrawArrays 前面调用一句代码
GLU.gluLookAt(gl, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, -1.0f, 0.0f, 1.0f, 0.0f); 
因为参数和系统默认的视线参数是一样的，所以画面没有任何变化。


gluLookAt 这个函数实际上参数就是我前面说的，眼睛位置，视线向量，头顶向量。 自动产生一个矩阵并设置到系统的模型变换矩阵。
如果我把倒数第二个参数的1.0f改成 -1.0f，那意味着我们把头倒过来，朝下，应该看到一个倒过来的三角形噻，试试看！！

GLES10.glMatrixMode(GLES10.GL_MODELVIEW); // 修改模型变换矩阵
GLES10.glLoadIdentity(); // 复位，将投影矩阵归零
GLU.gluLookAt(gl, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, -1.0f, 0.0f, -1.0f, 0.0f); 

注意gluLookAt修改的是模型变换矩阵，在修改之前，需要将模型变换矩阵归位。（OpenGL的修改方式不是替换，而是将原来的矩阵乘以新的矩阵得到的结果替换原来的矩阵）
onDrawFrame的代码变为如下：

	public void onDrawFrame(GL10 gl) {
		GLES10.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // 清空场景为黑色。
		GLES10.glClear(GLES10.GL_COLOR_BUFFER_BIT | GLES10.GL_DEPTH_BUFFER_BIT);// 清空相关缓存。


		GLES10.glEnableClientState(GLES10.GL_VERTEX_ARRAY);
		GLES10.glVertexPointer(3, GLES10.GL_FLOAT, 0, vertexBuffer);
		
		GLES10.glMatrixMode(GLES10.GL_MODELVIEW); // 修改模型变换矩阵
		GLES10.glLoadIdentity(); // 复位，将投影矩阵归零
		GLU.gluLookAt(gl, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, -1.0f, 0.0f, -1.0f, 0.0f); 
		
		GLES10.glDrawArrays(GLES10.GL_TRIANGLES, 0, 3);
		
		GLES10.glFlush();
	}

下面说说前面的投影矩阵和模型变换矩阵的工作原理。
模型矩阵和投影矩阵都是针对整个世界来说的，就是3D场景中的所有物体都会经过那两个矩阵的变换。
也就是前面的那个三角形倒过来，并不是三角形颠倒了，而是整个世界颠倒了。颠倒之后实际上系统的y轴正方向已经是朝下了（初始状态是朝上的）


GLES10.glDrawArrays函数调用的时候，实际上是告诉系统我要画个三角形。而系统在画的过程中，会自动将这个三角形的所有坐标值，和模型变换矩阵和投影矩阵进行运算，把得到的结果才进行真正的绘制。也就是说，如果gluLookAt放在glDrawArrays的后面。那前面的glDrawArrays画的三角形将不会颠倒，因为它没有经过颠倒的这个变换。


我们来做个实验，来演示如何进行世界整体变换和某物体单独变换。为了实现参考，我们必须先定义个和世界保持一致的物体，它随世界变换而变换。


向下面这样，初始化两个三角形的数据

	private FloatBuffer vertexBuffer = null ;
	private FloatBuffer vertexBuffer2 = null ;
	
	public void onSurfaceCreated(GL10 gl, EGLConfig config) {
		
		float[] vertexs = new float[]{
				-5.0f,   0.0f, -30.0f, 
				 5.0f, -10.0f, -30.0f, 
				 5.0f,   0.0f, -30.0f, 
		};
		vertexBuffer = ByteBuffer.allocateDirect(vertexs.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
		vertexBuffer.put(vertexs);
		vertexBuffer.position(0);
		
		float[] vertexs2 = new float[]{
				-4.0f,  12.0f, -30.0f, 
				 4.0f,  4.0f,  -30.0f, 
				 4.0f,  12.0f, -30.0f, 
		};
		vertexBuffer2 = ByteBuffer.allocateDirect(vertexs2.length * 4).order(ByteOrder.nativeOrder()).asFloatBuffer();
		vertexBuffer2.put(vertexs2);
		vertexBuffer2.position(0);
	}

保证两个三角形的位置不会交叠，视线不会被挡住。


默认绘制的函数如下：

	public void onDrawFrame(GL10 gl) {
		GLES10.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // 清空场景为黑色。
		GLES10.glClear(GLES10.GL_COLOR_BUFFER_BIT | GLES10.GL_DEPTH_BUFFER_BIT);// 清空相关缓存。


		GLES10.glEnableClientState(GLES10.GL_VERTEX_ARRAY);
		
		GLES10.glVertexPointer(3, GLES10.GL_FLOAT, 0, vertexBuffer);
		GLES10.glDrawArrays(GLES10.GL_TRIANGLES, 0, 3);
		
		GLES10.glVertexPointer(3, GLES10.GL_FLOAT, 0, vertexBuffer2);
		GLES10.glDrawArrays(GLES10.GL_TRIANGLES, 0, 3);
		
		GLES10.glFlush();
	}

你可以看到两个三角形。默认的情况。


进行世界变换，在第一个glDrawArrays之前，加上代码


GLES10.glMatrixMode(GLES10.GL_MODELVIEW); // 修改模型变换矩阵
GLES10.glLoadIdentity(); // 复位，将投影矩阵归零
GLU.gluLookAt(gl, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, -1.0f, 0.0f, -1.0f, 0.0f); 

两个三角形都颠倒了吧。


现在我只让其中一个颠倒。修改上面三句代码的位置。像这样

	public void onDrawFrame(GL10 gl) {
		GLES10.glClearColor(0.0f, 0.0f, 0.0f, 0.0f); // 清空场景为黑色。
		GLES10.glClear(GLES10.GL_COLOR_BUFFER_BIT | GLES10.GL_DEPTH_BUFFER_BIT);// 清空相关缓存。


		GLES10.glMatrixMode(GLES10.GL_MODELVIEW); // 修改模型变换矩阵
		GLES10.glLoadIdentity(); // 复位，将投影矩阵归零
		
		GLES10.glEnableClientState(GLES10.GL_VERTEX_ARRAY);
		
		GLES10.glVertexPointer(3, GLES10.GL_FLOAT, 0, vertexBuffer);
		GLES10.glDrawArrays(GLES10.GL_TRIANGLES, 0, 3);
		
		GLU.gluLookAt(gl, 0.0f, 0.0f, 0.0f, 0.0f, 0.0f, -1.0f, 0.0f, -1.0f, 0.0f); 
		
		GLES10.glVertexPointer(3, GLES10.GL_FLOAT, 0, vertexBuffer2);
		GLES10.glDrawArrays(GLES10.GL_TRIANGLES, 0, 3);
		
		GLES10.glFlush();
	}

因为模型变换矩阵，也是状态的。上一次的修改，下一次也要生效。所以像上面这个代码
第一个三角形绘制的时候，因为刚执行了glLoadIdentity。它会按照默认的情况绘制。
而第二个三角形。绘制的时候 gluLookAt调用了，视角进行了变换（其实本质是修改了模型变换矩阵而已），所以后面这个物体的绘制的时候，进行了模型矩阵所表示的变换过程。
gluLookAt 这个函数的名字看上去是修改视角，不要被欺骗了，看清它的本质（当前我目前用gluLookAt的方式是不合理的，一般不会这么用，这不是为了让您理解透彻嘛）


还有一种更高级的方式控制某些物体的移动，另一些不变换，是用 glPopMatrix glPushMatrix，具体的就去问度娘吧，我相信理解了矩阵运作的本质，其他的就容易多了。


第二章待续中，后面将更新基于OpenGLES1.0的纹理贴图。