1德频、概述
在上一篇文章OpenGL ES 顯示圖形（上）中已經(jīng)實(shí)現(xiàn)了顯示三角形，但是遇到了一些問題窿凤，也就是說這個(gè)三角形和實(shí)際需求的不一樣睬捶，存在變形拉伸黔宛。關(guān)于這個(gè)問題出現(xiàn)的原因是因?yàn)樵贏ndroid設(shè)備上顯示圖形它們的屏幕尺寸和形狀可能不同。OpenGL采用方形擒贸，均勻的坐標(biāo)系統(tǒng)臀晃，默認(rèn)情況下觉渴，可以將這些坐標(biāo)快速繪制到典型的非方形屏幕上，就好像它是完全正方形一樣徽惋。
上圖左側(cè)顯示了OpenGL框架的統(tǒng)一坐標(biāo)系統(tǒng)案淋，以及這些坐標(biāo)如何實(shí)際映射到右側(cè)橫向的典型設(shè)備屏幕。要解決此問題险绘，可以應(yīng)用OpenGL投影模式和攝像機(jī)視圖來轉(zhuǎn)換坐標(biāo)踢京，以便圖形對(duì)象在任何顯示上都具有正確的比例。為了應(yīng)用投影和攝像機(jī)視圖宦棺，需要?jiǎng)?chuàng)建投影矩陣和攝像機(jī)視圖矩陣瓣距，并將它們應(yīng)用于OpenGL渲染管道。投影矩陣重新計(jì)算圖形的坐標(biāo)代咸，以便它們正確映射到Android設(shè)備屏幕蹈丸。攝像機(jī)視圖矩陣創(chuàng)建一個(gè)變換，從特定的眼睛位置渲染對(duì)象呐芥。這邊就涉及到一個(gè)視見體的概念逻杖，其實(shí)OpenGL圖形所處與于一個(gè)三維的世界，可以想象一下在屏幕上顯示的其實(shí)是一個(gè)圖像的投影贩耐，而屏幕可以理解為一塊投影幕布弧腥，這樣就可以通過改變相機(jī)的坐標(biāo)和旋轉(zhuǎn)移動(dòng)投影來達(dá)到顯示在投影上的物體的形狀的拉伸與縮放厦取。
如上圖所示前面的那個(gè)點(diǎn)就代表一個(gè)假想的攝像機(jī)點(diǎn)潮太，或者可以理解為假想人眼所處位置，中間的那個(gè)屏幕是要展示的渲染的對(duì)象虾攻。最后一塊屏幕是手機(jī)屏幕铡买。就可以通過移動(dòng)假象攝像機(jī)點(diǎn)和手機(jī)屏幕來得到不同縮放和拉伸程度的圖像。當(dāng)然霎箍，這些都是假象的奇钞，這邊的攝像機(jī)點(diǎn)不是指真的手機(jī)攝像頭，也不會(huì)真的需要通過移動(dòng)手機(jī)屏幕來實(shí)現(xiàn)效果漂坏。這邊都是通過對(duì)圖像進(jìn)行相關(guān)的矩陣變換來實(shí)現(xiàn)實(shí)際的想要的效果景埃。移動(dòng)假想的攝像機(jī)就相當(dāng)于對(duì)原圖像其做一個(gè)攝像機(jī)矩陣變換，旋轉(zhuǎn)移動(dòng)手機(jī)屏幕相當(dāng)于對(duì)原圖做一個(gè)投影矩陣變換顶别。下面還是繼續(xù)以之前一篇文章的Demo為例子谷徙，討論下用OpenGL ES 對(duì)這個(gè)問題的解決方法，以及圖像的動(dòng)畫和交互驯绎。
2完慧、投影和相機(jī)矩陣變換
如前面所說在OpenGL ES環(huán)境中，投影和攝像機(jī)矩陣允許假想以更接近用眼睛看物理對(duì)象的方式顯示繪制對(duì)象剩失。這種物理觀察模擬是通過繪制對(duì)象坐標(biāo)的數(shù)學(xué)變換完成的：
① 投影變換：此變換根據(jù)繪制對(duì)象的顯示位置的寬度和高度調(diào)整繪制對(duì)象的坐標(biāo)GLSurfaceView屈尼。如果沒有這個(gè)變換册着，OpenGL ES繪制的對(duì)象會(huì)因視圖窗口的不等比例而拉伸。通常只需要在onSurfaceChanged()渲染器的方法中建立或更改OpenGL視圖的比例計(jì)算投影變換脾歧。
② 攝像機(jī)變換：此變換根據(jù)假想攝像機(jī)位置調(diào)整繪制對(duì)象的坐標(biāo)甲捏。注意OpenGL ES不定義實(shí)際的相機(jī)對(duì)象，而是提供通過轉(zhuǎn)換繪制對(duì)象的顯示來模擬相機(jī)的效果鞭执。建立攝像機(jī)轉(zhuǎn)換時(shí)摊鸡，可能只計(jì)算一次 GLSurfaceView，或者也可能會(huì)根據(jù)用戶操作或應(yīng)用程序的功能動(dòng)態(tài)更改蚕冬。
2.1 定義投影變換
投影變換的數(shù)據(jù)在GLSurfaceView.Renderer類中onSurfaceChanged() 進(jìn)行計(jì)算免猾。以下示例代碼通過獲取GLSurfaceView的高度和寬度，通過使用其寬高來計(jì)算填充投影變換矩陣Matrix囤热。
// mMVPMatrix是“模型視圖投影矩陣”(Model View Projection Matrix)的縮寫
private final float[] mMVPMatrix = new float[16];
private final float[] mProjectionMatrix = new float[16];
private final float[] mViewMatrix = new float[16];
@Override
public void onSurfaceChanged(GL10 unused, int width, int height) {
Log.d(TAG,"onSurfaceChanged:width = "+width+",height = "+height);
GLES20.glViewport(0, 0, width, height);
float ratio = (float) width / height;
// 此投影矩陣應(yīng)用于onDrawFrame（）方法中的對(duì)象坐標(biāo)
Matrix.frustumM(mProjectionMatrix, 0, -ratio, ratio, -1, 1, 3, 7);
}
投影矩陣的核心方法是frustumM(float[] m, int offset, float left, float right, float bottom, float top, float near, float far)
第一個(gè)參數(shù)是輸出的投影矩陣猎提，第二個(gè)參數(shù)是從輸出的數(shù)組的什么位置開始寫入，第三到第六之后分別是投影對(duì)應(yīng)于OpenGL ES默認(rèn)坐標(biāo)的對(duì)應(yīng)上限的映射關(guān)系順序分別為左右下上旁蔼。最后兩個(gè)參數(shù)有點(diǎn)抽象锨苏，用于顯示圖像的前面和背面，near和far需要結(jié)合假想攝相機(jī)即觀察者眼睛的位置來設(shè)置棺聊，例如setLookAtM()（下面會(huì)討論這個(gè)函數(shù)）中設(shè)置cx = 0, cy = 0, cz = 10伞租，near設(shè)置的范圍需要是小于10才可以看得到繪制的圖像，如果大于10限佩，圖像就會(huì)處于了觀察這眼睛的后面葵诈，這樣繪制的圖像就會(huì)消失在鏡頭前，far參數(shù)影響的是立體圖形的背面祟同，far一定比near大作喘，一般會(huì)設(shè)置得比較大，如果設(shè)置的比較小晕城，一旦3D圖形尺寸很大泞坦，這時(shí)候由于far太小，這個(gè)投影矩陣就沒法容納圖形全部的背面砖顷，這樣3D圖形的背面會(huì)有部分無法顯示贰锁。
2.2 定義攝像機(jī)變換
通過在渲染器中添加攝像機(jī)視圖變換作為繪圖過程的一部分，完成變換繪制對(duì)象的過程滤蝠。在以下示例代碼中豌熄，使用Matrix.setLookAtM() 方法計(jì)算攝像機(jī)視圖變換，然后將其與先前計(jì)算的投影矩陣組合几睛。然后將組合的變換矩陣傳遞到繪制的形狀房轿。
// MyGLRenderer.class
@Override
public void onDrawFrame(GL10 unused) {
...
// 設(shè)置相機(jī)的位置 (View matrix)
Matrix.setLookAtM(mViewMatrix, 0, 0, 0, -3, 0f, 0f, 0f, 0f, 1.0f, 0.0f);
// 計(jì)算投影和視圖轉(zhuǎn)換
Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);
// 繪制三角形
mTriangle.draw(mMVPMatrix);
}
相機(jī)位置設(shè)置核心函數(shù)是setLookAtM(float[] rm, int rmOffset, float eyeX, float eyeY, float eyeZ, float centerX, float centerY, float centerZ, float upX, float upY, float upZ) 這個(gè)函數(shù)的參數(shù)非常多，這也側(cè)面印證了OpenGL ES 相當(dāng)靈活而復(fù)雜。
第一個(gè)參數(shù)還是輸出的矩陣囱持，第二個(gè)還是輸出的矩陣從那個(gè)下標(biāo)開始寫入夯接。之后幾個(gè)參數(shù)如下：eyeX、eyeY纷妆、eyeZ 假想相機(jī)或者說觀察者眼睛位置盔几，centerX、centerY掩幢、centerZ 目標(biāo)視圖中心位置逊拍，upX、upY际邻、upZ相機(jī)角度芯丧。也就是說隨著upX、upY世曾、upZ的變化可以理解為相機(jī)在全方位的旋轉(zhuǎn)缨恒。
結(jié)下來的multiplyMM(float[] result, int resultOffset, float[] lhs, int lhsOffset, float[] rhs, int rhsOffset); 這個(gè)方法是兩個(gè)矩陣相乘，如果學(xué)過線性代數(shù)肯定知道矩陣相乘的話AB 和 BA 得到的是不同的矩陣轮听，所以這里面的順序不能對(duì)換骗露。
2.3 應(yīng)用投影和相機(jī)變換
為了使用上面的投影和攝像機(jī)視圖變換矩陣，首先將矩陣變量添加到先前在Triangle類中定義的頂點(diǎn)著色器中：
public class Triangle {
private final StringvertexShaderCode =
//此矩陣成員變量提供了一個(gè)鉤子來操縱使用此頂點(diǎn)著色器的對(duì)象的坐標(biāo)
"uniform mat4 uMVPMatrix;" +
"attribute vec4 vPosition;" +
"void main() {" +
// uMVPMatrix因子必須在*前面才能使矩陣乘法乘積正確血巍。
" gl_Position = uMVPMatrix * vPosition;" +
"}";
// 用于訪問和設(shè)置模型視圖投影矩陣（mMVPMatrix）
private int mMVPMatrixHandle;
...
}
接下來萧锉，修改圖形對(duì)象的draw()方法以接受組合變換矩陣并將其應(yīng)用于形狀：
public void draw(float[] mvpMatrix) { // 將投影矩陣傳入
...
// 獲取形狀變換矩陣的具柄
mMVPMatrixHandle = GLES20.glGetUniformLocation(mProgram, "uMVPMatrix");
// 將模型視圖投影矩陣傳遞給著色器
GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, mvpMatrix, 0);
// 繪制三角形
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
// 禁用頂點(diǎn)數(shù)組
GLES20.glDisableVertexAttribArray(mPositionHandle);
}
一旦正確計(jì)算并應(yīng)用了投影和攝像機(jī)視圖轉(zhuǎn)換，圖形對(duì)象將以正確的比例繪制述寡，并且應(yīng)如下所示：
3柿隙、添加動(dòng)畫
在屏幕上繪制的對(duì)象是OpenGL的一個(gè)非常基本的功能辨赐。OpenGL ES還提供了三維或以其他獨(dú)特方式移動(dòng)和轉(zhuǎn)換繪制對(duì)象的附加功能优俘，以創(chuàng)建非常酷炫的用戶體驗(yàn)掀序。其實(shí)所有這些動(dòng)畫都和上面所述的圖像修正的核心原理是一樣的，都是通過對(duì)圖像進(jìn)行各種矩陣變換來實(shí)現(xiàn)惭婿。
使用OpenGL ES 2.0旋轉(zhuǎn)繪圖對(duì)象,需要在渲染器中不恭，創(chuàng)建另一個(gè)變換矩陣（旋轉(zhuǎn)矩陣），然后將其與投影和攝像機(jī)視圖變換矩陣組合：
// MyGLRenderer.class
private float[] mRotationMatrix = new float[16];
Override
public void onDrawFrame(GL10 gl) {
float[] scratch = new float[16];
...
// 創(chuàng)建旋轉(zhuǎn)矩陣
long time = SystemClock.uptimeMillis() % 4000L;
float angle = 0.090f * ((int) time);
Matrix.setRotateM(mRotationMatrix, 0, angle, 0, 0, -1.0f);
//將旋轉(zhuǎn)矩陣與投影和攝像機(jī)視圖結(jié)合時(shí)财饥，mMVPMatrix因子必須在*前面才能使矩陣乘法乘積正確换吧。
Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);
// 繪制三角形
mTriangle.draw(scratch);
}
如果在進(jìn)行這些更改后三角形不旋轉(zhuǎn)，請(qǐng)確保已注釋掉 GLSurfaceView.RENDERMODE_WHEN_DIRTY 設(shè)置钥星。否則OpenGL只旋轉(zhuǎn)一個(gè)增量的形狀然后等待調(diào)用requestRender()來進(jìn)行圖像重繪沾瓦。
public MyGLSurfaceView(Context context) extends GLSurfaceView {
...
//setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);
}
這邊要說明下，除非在確定沒有任何用戶交互的情況對(duì)圖像進(jìn)行動(dòng)畫，否則平時(shí)建議打開這個(gè)標(biāo)志贯莺。下個(gè)小節(jié)會(huì)取消注釋此代碼风喇。
4、觸摸事件交互
對(duì)象能運(yùn)動(dòng)之后缕探，肯定會(huì)進(jìn)一步思考如何使其實(shí)現(xiàn)和用戶的交互魂莫。 OpenGL ES圖形交互和普通的視圖于用戶比較類似。這里舉一個(gè)通過擴(kuò)展GLSurfaceView以覆蓋 onTouchEvent()偵聽觸摸事件來進(jìn)行交互的例子爹耗。
4.1 設(shè)置觸摸監(jiān)聽器
為了使的OpenGL ES應(yīng)用程序響應(yīng)觸摸事件耙考，必須在GLSurfaceView類中實(shí)onTouchEvent()方法 。下面的示例實(shí)現(xiàn)通過監(jiān)聽 MotionEvent.ACTION_MOVE事件并將其轉(zhuǎn)換為形狀的旋轉(zhuǎn)角度的方法來實(shí)現(xiàn)觸摸交互潭兽。
// MyGLSurfaceView.class
private final float TOUCH_SCALE_FACTOR = 180.0f / 320;
private float mPreviousX;
private float mPreviousY;
@Override
public boolean onTouchEvent(MotionEvent e) {
// MotionEvent報(bào)告觸摸屏和其他輸入控件的輸入詳細(xì)信息倦始。
// 在這種情況下，這里只對(duì)觸摸位置發(fā)生變化的事件感興趣山卦。
float x = e.getX();
float y = e.getY();
switch (e.getAction()) {
case MotionEvent.ACTION_MOVE:
float dx = x - mPreviousX;
float dy = y - mPreviousY;
// reverse direction of rotation above the mid-line
if (y > getHeight() / 2) {
dx = dx * -1 ;
}
// reverse direction of rotation to left of the mid-line
if (x < getWidth() / 2) {
dy = dy * -1 ;
}
mRenderer.setAngle(
mRenderer.getAngle() +
((dx + dy) * TOUCH_SCALE_FACTOR));
requestRender();
}
mPreviousX = x;
mPreviousY = y;
return true;
}
這邊要注意楣号，在計(jì)算旋轉(zhuǎn)角度后，需要調(diào)用 requestRender()告訴渲染器是時(shí)候進(jìn)行重新渲染幀怒坯。在這個(gè)例子中炫狱，這樣做是最有效的，因?yàn)槌切D(zhuǎn)發(fā)生變化剔猿，否則不需要重繪幀视译。要實(shí)現(xiàn)這樣的效率，需要把上一節(jié)的setRenderMode(GLSurfaceView.RENDERMODE_WHEN_DIRTY);注釋取消掉归敬。
4.2 暴露旋轉(zhuǎn)角度屬性
上面的示例代碼已經(jīng)通過觸摸事件獲取到來要旋轉(zhuǎn)的角度酷含，現(xiàn)在要將這個(gè)旋轉(zhuǎn)角度傳給渲染器進(jìn)行渲染，所以要求通過添加公共成員來公開渲染器旋轉(zhuǎn)角度汪茧。由于渲染器代碼在與應(yīng)用程序的主用戶界面線程在不同的線程上運(yùn)行椅亚，因此必須將此公共變量聲明為volatile。以下是聲明變量并公開getter和setter對(duì)的代碼：
public class MyGLRenderer implements GLSurfaceView.Renderer {
...
public volatile float mAngle;
public float getAngle() {
return mAngle;
}
public void setAngle(float angle) {
mAngle = angle;
}
}
4.3舱污、應(yīng)用旋轉(zhuǎn)交互
要應(yīng)用觸摸輸入生成的旋轉(zhuǎn)呀舔，請(qǐng)注釋掉前面的角度和添加的代碼mAngle，其中包含觸摸輸入生成的角度扩灯。
public void onDrawFrame(GL10 gl) {
...
float[] scratch = new float[16];
// 給三角形創(chuàng)建一個(gè)旋轉(zhuǎn)變換
// long time = SystemClock.uptimeMillis() % 4000L;
// float angle = 0.090f * ((int) time);
// Matrix.setRotateM(mRotationMatrix, 0, angle, 0, 0, -1.0f);
Matrix.setRotateM(mRotationMatrix, 0, mAngle, 0, 0, -1.0f);
//將旋轉(zhuǎn)矩陣與投影和攝像機(jī)視圖結(jié)合時(shí)媚赖，mMVPMatrix因子必須在*前面才能使矩陣乘法乘積正確。
Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);
// 繪制三角形
mTriangle.draw(scratch);
}
這樣就可以通過拖動(dòng)屏幕實(shí)現(xiàn)三角形的動(dòng)畫珠插。
