一步一步學android OpenGL ES2.0編程（3）

繪制形狀

你定義了要繪制的形狀后，你就要畫它們了。使用OpenGLES 2.0會形狀會有一點點復雜，因為API提供了大量的對渲染管線的控制能力。

本文講解如何繪制你在前文中定義的那些形狀們。

初始化形狀

---

在你做任何繪制之前，你必須初始化形狀然后加載它。除非形狀的結構(指原始的坐標們)在執行過程中發生改變，你都應該在你的Renderer的方法onSurfaceCreated()中進行內存和效率方面的初始化工作。

public void onSurfaceCreated(GL10 unused, EGLConfig config) {
    ...

    // 初始化一個三角形
    mTriangle = new Triangle();
    // 初始化一個正方形
    mSquare = new Square();
}

繪制一個形狀

---

使用OpenGLES 2.0畫一個定義好的形狀需要一大坨代碼，因為你必須為圖形渲染管線提供一大堆信息。典型的，你必須定義以下幾個東西：

• VertexShader-用於渲染形狀的頂點的OpenGLES 圖形代碼。

• FragmentShader-用於渲染形狀的外觀（顏色或紋理）的OpenGLES 代碼。

• Program-一個OpenGLES對象，包含了你想要用來繪制一個或多個形狀的shader。

你至少需要一個vertexshader來繪制一個形狀和一個fragmentshader來為形狀上色。這些形狀必須被編譯然后被添加到一個OpenGLES program中，program之后被用來繪制形狀。下面是一個展示如何定義一個可以用來繪制形狀的基本shader的例子：

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;" +
    "}";

Shader們包含了OpenGLShading Language (GLSL)代碼，必須在使用前編譯。要編譯這些代碼，在你的Renderer類中創建一個工具類方法：

public static int loadShader(int type, String shaderCode){

    // 創建一個vertex shader類型(GLES20.GL_VERTEX_SHADER)
    // 或fragment shader類型(GLES20.GL_FRAGMENT_SHADER)
    int shader = GLES20.glCreateShader(type);

    // 將源碼添加到shader並編譯之
    GLES20.glShaderSource(shader, shaderCode);
    GLES20.glCompileShader(shader);

    return shader;
}

為了繪制你的形狀，你必須編譯shader代碼，添加它們到一個OpenGLES program 對象然后鏈接這個program。在renderer對象的構造器中做這些事情，從而只需做一次即可。

注:編譯OpenGLES shader們和鏈接linkingprogram們是很耗CPU的，所以你應該避免多次做這些事。如果在運行時你不知道shader的內容，你應該只創建一次code然后緩存它們以避免多次創建。

public Triangle() {
    ...

    int vertexShader = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode);
    int fragmentShader = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode);

    mProgram = GLES20.glCreateProgram(); // 創建一個空的OpenGL ES Program
    GLES20.glAttachShader(mProgram, vertexShader); // 將vertex shader添加到program
    GLES20.glAttachShader(mProgram, fragmentShader); // 將fragment shader添加到program
    GLES20.glLinkProgram(mProgram); // 創建可執行的 OpenGL ES program
}

此時，你已經准備好增加真正的繪制調用了。需要為渲染管線指定很多參數來告訴它你想畫什么以及如何畫。因為繪制操作因形狀而異，讓你的形狀類包含自己的繪制邏輯是個很好主意。

創建一個draw()方法負責繪制形狀。下面的代碼設置位置和顏色值到形狀的vertexshader和fragmentshader，然后執行繪制功能。

public void draw() {
    // 將program加入OpenGL ES環境中
    GLES20.glUseProgram(mProgram);

    // 獲取指向vertex shader的成員vPosition的 handle
    mPositionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

    // 啟用一個指向三角形的頂點數組的handle
    GLES20.glEnableVertexAttribArray(mPositionHandle);

    // 准備三角形的坐標數據
    GLES20.glVertexAttribPointer(mPositionHandle, COORDS_PER_VERTEX,
                                 GLES20.GL_FLOAT, false,
                                 vertexStride, vertexBuffer);

    // 獲取指向fragment shader的成員vColor的handle 
    mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

    // 設置三角形的顏色
    GLES20.glUniform4fv(mColorHandle, 1, color, 0);

    // 畫三角形
    GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);

    // 禁用指向三角形的頂點數組
    GLES20.glDisableVertexAttribArray(mPositionHandle);
}

一旦你完成這些代碼，畫這個對象只需要在Renderer的onDrawFrame()調用draw()方法。當你運行應用時，它應該看起來這樣：

圖1.沒有投射和視口時畫三角形

此例子中的代碼還有很多問題。首先，它不會給人留下印像。其次，三角形會在你從豎屏變為橫屏時被壓扁。三角形變形的原因是其頂點們沒有跟據屏幕的寬高比進行修正。你可以使用投射和視口更正這個問題。那在下一講了。