本篇文章屬于 使用 OpenGL ES 進行圖形繪制 這個系列的第三篇文章，主要內容是介紹在如何在 Android 應用中利用 OpenGL 繪制圖形的形狀。文章中所有的代碼示例都已放在 Github 上，可以去項目 OpenGL-ES-Learning 中查看 。
在上篇文章：OpenGL ES 定義形狀 中我們定義了 OpenGL 繪制的形狀之后，下面就一起看看如何使用 OpenGL ES 2.0 接口繪制出在 OpenGL ES 定義形狀 文章中定義的形狀。
使用 OpenGL ES 2.0 繪制圖形可能會膩比想象當中要復雜一些，因為 Android 中保留提供了大量對于圖形渲染流程控制的 API ，就像我們在繪制自定義 View 時一樣，繪制控制的方法和參數都會很豐富。
其實在前面文章：配置 OpenGL ES 的環境 里面有提到 一個核心的類 GLSurfaceView.Renderer，它是控制 view 繪制過程的渲染器，之前文章中展示了如何使用 GLSurfaceView.Renderer 進行繪制黑色背景的簡單試驗，所以接下來的關于形狀的繪制必然少不了它的參與。
初始化形狀
在開始繪制之前，需要對繪制的圖形進行初始化并加載。如果這些形狀結構（原始坐標）在執行過程不會發生變化，那么應該在 Renderer 的 onSurfaceCreated() 方法中進行初始化和加載，這樣可以更省內存以及提升執行效率。
public class MyGLRenderer2 implements GLSurfaceView.Renderer {
...
private Triangle mTriangle;
private Square mSquare;
@Override
public void onSurfaceCreated(GL10 gl, EGLConfig config) {
// initialize a triangle
mTriangle = new Triangle();
// initialize a square
mSquare = new Square();
}
...
}
繪制形狀
使用 OpenGL ES 2.0 繪制一個定義好的形狀需要較多代碼，因為你需要提供很多圖形渲染流程的細節，比如：
- 頂點著色器（Vertex Shader）：用來渲染形狀（shape）頂點的 OpenGL ES 代碼。
OpenGL ES 2.0 渲染管線中頂點著色器（Vertex Shader）取代了 OpenGL ES 1.x 渲染管線中的“變換和光照”
- 片元著色器（Fragment Shader）：使用顏色或紋理（texture）渲染形狀表面（face）的 OpenGL ES 代碼。
片元著色器取代了 OpenGL ES 1.x 渲染管線中的“紋理環境和顏色求和”、“霧”以及“Alpha測試”
- 程式（Program）：一個 OpenGL ES 對象，包含了你希望用來繪制一個或更多圖形（shape）所要用到的著色器（shader）。
以上三個，你需要至少一個頂點著色器（Vertex Shader）來繪制一個形狀，以及一個片元著色器（Fragment Shader）為該形狀上色。這些著色器必須被編譯然后再添加到一個OpenGL ES Program當中，并利用這個 progrem 來繪制形狀。通過編寫頂點及片元著色器程序，來完成一些頂點變換和紋理顏色計算工作，實現更加靈活、精細化的計算與渲染。
下面的代碼在 Triangle 類中定義了基本的著色器，我們可以利用它們繪制出一個圖形：
public class Triangle {
/**
* 頂點著色器代碼
* attribute變量(屬性變量)只能用于頂點著色器中，不能用于片元著色器。一般用該變量來表示一些頂點數據，如：頂點坐標、紋理坐標、顏色等
* uniforms變量(一致變量)用來將數據值從應用程其序傳遞到頂點著色器或者片元著色器。 該變量有點類似C語言中的常量（const），即該變量的值不能被shader程序修改。一般用該變量表示變換矩陣、光照參數、紋理采樣器等。
* varying變量(易變變量)是從頂點著色器傳遞到片元著色器的數據變量。頂點著色器可以使用易變變量來傳遞需要插值的顏色、法向量、紋理坐標等任意值。 在頂點與片元shader程序間傳遞數據是很容易的，一般在頂點shader中修改varying變量值，然后片元shader中使用該值，當然，該變量在頂點及片元這兩段shader程序中聲明必須是一致的。
* gl_Position 為內建變量，表示變換后點的空間位置。 頂點著色器從應用程序中獲得原始的頂點位置數據，這些原始的頂點數據在頂點著色器中經過平移、旋轉、縮放等數學變換后，生成新的頂點位置。新的頂點位置通過在頂點著色器中寫入gl_Position傳遞到渲染管線的后繼階段繼續處理。
*/
private final String vertexShaderCode =
"attribute vec4 vPosition;" + // 應用程序傳入頂點著色器的頂點位置
"void main() {" +
" gl_Position = vPosition;" + // 設置此次繪制此頂點位置
"}";
/**
* 片元著色器代碼
*/
private final String fragmentShaderCode =
"precision mediump float;" + // 設置工作精度
"uniform vec4 vColor;" + // 應用程序傳入著色器的顏色變量
"void main() {" +
" gl_FragColor = vColor;" + // 顏色值傳給 gl_FragColor內建變量，完成片元的著色
"}";
...
}
關于著色器和 GLSL 語言推薦幾篇文章
OpenGL ES 入門(一)著色器簡介
OpenGL Shading language學習總結
著色器（Shader）包含了OpenGL Shading Language（GLSL）代碼，它必須先被編譯然后才能在 OpenGL 環境中使用。要編譯 GLSL 代碼需要在渲染器類中創建一個輔助方法：
public class MyGLRenderer2 implements GLSurfaceView.Renderer
...
/**
* 加載并編譯著色器代碼
* @param type 渲染器類型 {GLES20.GL_VERTEX_SHADER, GLES20.GL_FRAGMENT_SHADER}
* @param shaderCode 渲染器代碼 GLSL
* @return
*/
public static int loadShader(int type, String shaderCode){
// create a vertex shader type (GLES20.GL_VERTEX_SHADER)
// or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
int shader = GLES20.glCreateShader(type);
// add the source code to the shader and compile it
GLES20.glShaderSource(shader, shaderCode);
GLES20.glCompileShader(shader);
return shader;
}
}
要繪制圖形前，必須先編譯著色器代碼并將它們添加至一個 OpenGL ES Program 對象中，然后執行鏈接方法。
Note：編譯 OpenGL ES 著色器及鏈接操作對于 CPU 周期和處理時間而言消耗巨大，所以應該避免重復執行這些事情。這個操作建議在形狀類的構造方法中調用，這樣只會執行一次。如果在執行期間不知道著色器的內容，可以考慮使用一次后緩存以備后續使用。
public class Triangle() {
...
private final int mProgram;
public Triangle() {
...
// 加載編譯頂點渲染器
int vertexShader = MyGLRenderer2.loadShader(GLES20.GL_VERTEX_SHADER,
vertexShaderCode);
// 加載編譯片元渲染器
int fragmentShader = MyGLRenderer2.loadShader(GLES20.GL_FRAGMENT_SHADER,
fragmentShaderCode);
// create empty OpenGL ES Program
mProgram = GLES20.glCreateProgram();
// add the vertex shader to program
GLES20.glAttachShader(mProgram, vertexShader);
// add the fragment shader to program
GLES20.glAttachShader(mProgram, fragmentShader);
// creates OpenGL ES program executables
GLES20.glLinkProgram(mProgram);
}
至此，你已經完全準備好添加實際的調用語句來繪制你的圖形了。使用 OpenGL ES 需要一些參數來告訴渲染流程（redering pipeline ）你要繪制的內容以及如何繪制，由于每個 shape 的 drawing option 都不一樣，因此將每個 shape 的繪制邏輯放到自己的類里面是一個比較好的方法。
創建一個 draw() 方法來繪制圖形。下面的代碼為形狀的頂點著色器和形狀著色器設置了位置和顏色值，然后執行繪制函數：
public class Triangle {
// 繪制形狀的頂點數量
private static final int COORDS_PER_VERTEX = 3;
...
private int mPositionHandle;
private int mColorHandle;
private final int vertexCount = triangleCoords.length / COORDS_PER_VERTEX;
private final int vertexStride = COORDS_PER_VERTEX * 4; // 4 bytes per vertex
public void draw() {
// Add program to OpenGL ES environment
GLES20.glUseProgram(mProgram);
// get handle to vertex shader's vPosition member
mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");
// Enable a handle to the triangle vertices
GLES20.glEnableVertexAttribArray(mPositionHandle);
// Prepare the triangle coordinate data
GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
GLES20.GL_FLOAT, false,
vertexStride, vertexBuffer);
// get handle to fragment shader's vColor member
mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");
// Set color for drawing the triangle
GLES20.glUniform4fv(mColorHandle, 1, color, 0);
// Draw the triangle
GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);
// Disable vertex array
GLES20.glDisableVertexAttribArray(mPositionHandle);
}
}
一旦完成了上述所有代碼，僅需要在渲染器的 onDrawFrame() 方法中調用 draw() 方法就可以畫出我們想要畫的對象了：
public class MyGLRenderer2 implements GLSurfaceView.Renderer {
@Override
public void onDrawFrame(GL10 gl) {
...
mTriangle.draw();
}
}
運行這個應用時，它看上去會像是這樣：
實際操作過程中你發現，這個三角形看上去有一些扁，另外當你改變屏幕方向時，它的形狀也會隨之改變。發生形變的原因是因為對象的頂點沒有根據顯示 GLSurfaceView 的屏幕區域的長寬比進行修正。你可以使用投影（Projection）或者相機視角（Camera View）來解決這個問題。
文章中所有的代碼示例都已放在 Github 上，可以去項目 OpenGL-ES-Learning 中查看 。
最后，這個三角形是靜止的，這看上去有些無聊。在后續文章會讓這個形狀發生旋轉，并使用一些 OpenGL ES 圖形處理流程中更加新奇的用法。
