Android使用OpenGL ES 2.0繪制形狀

編寫:jdneo - 原文:http://developer.android.com/training/graphics/opengl/draw.html

在定義了使用OpenGL繪制的形狀之后，你可能希望繪制出它們。使用OpenGL ES 2.0繪制圖形可能會比你想象當(dāng)中更復(fù)雜一些，因為API中提供了大量對于圖形渲染流程的控制。

這節(jié)課將解釋如何使用OpenGL ES 2.0接口畫出在上一節(jié)課中定義的形狀。

初始化形狀

在你開始繪畫之前，你需要初始化并加載你期望繪制的圖形。除非你所使用的形狀結(jié)構(gòu)（原始坐標(biāo)）在執(zhí)行過程中發(fā)生了變化，不然的話你應(yīng)該在渲染器的onSurfaceCreated()方法中初始化它們，這樣做是出于內(nèi)存和執(zhí)行效率的考量。

public class MyGLRenderer implements GLSurfaceView.Renderer {

    ...
    private Triangle mTriangle;
    private Square   mSquare;

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

        // initialize a triangle
        mTriangle = new Triangle();
        // initialize a square
        mSquare = new Square();
    }
    ...
}

畫一個形狀

使用OpenGL ES 2.0畫一個定義好的形狀需要較多代碼，因為你需要提供很多圖形渲染流程的細(xì)節(jié)。具體而言，你必須定義如下幾項：

• 頂點著色器（Vertex Shader）：用來渲染形狀頂點的OpenGL ES代碼。
• 片段著色器（Fragment Shader）：使用顏色或紋理渲染形狀表面的OpenGL ES代碼。
• 程式（Program）：一個OpenGL ES對象，包含了你希望用來繪制一個或更多圖形所要用到的著色器。

你需要至少一個頂點著色器來繪制一個形狀，以及一個片段著色器為該形狀上色。這些著色器必須被編譯然后添加到一個OpenGL ES Program當(dāng)中，并利用它來繪制形狀。下面的代碼在Triangle類中定義了基本的著色器，我們可以利用它們繪制出一個圖形：

public class Triangle {

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

    ...
}

著色器包含了OpenGL Shading Language（GLSL）代碼，它必須先被編譯然后才能在OpenGL環(huán)境中使用。要編譯這些代碼，需要在你的渲染器類中創(chuàng)建一個輔助方法：

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對象中，然后執(zhí)行鏈接。在你的繪制對象的構(gòu)造函數(shù)里做這些事情，這樣上述步驟就只用執(zhí)行一次。

Note：編譯OpenGL ES著色器及鏈接操作對于CPU周期和處理時間而言，消耗是巨大的，所以你應(yīng)該避免重復(fù)執(zhí)行這些事情。如果在執(zhí)行期間不知道著色器的內(nèi)容，那么你應(yīng)該在構(gòu)建你的應(yīng)用時，確保它們只被創(chuàng)建了一次，并且緩存以備后續(xù)使用。

public class Triangle() {
    ...

    private final int mProgram;

    public Triangle() {
        ...

        int vertexShader = MyGLRenderer.loadShader(GLES20.GL_VERTEX_SHADER,
                                        vertexShaderCode);
        int fragmentShader = MyGLRenderer.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);
    }
}

至此，你已經(jīng)完全準(zhǔn)備好添加實際的調(diào)用語句來繪制你的圖形了。使用OpenGL ES繪制圖形需要你定義一些變量來告訴渲染流程你需要繪制的內(nèi)容以及如何繪制。既然繪制屬性會根據(jù)形狀的不同而發(fā)生變化，把繪制邏輯包含在形狀類里面將是一個不錯的主意。

創(chuàng)建一個draw()方法來繪制圖形。下面的代碼為形狀的頂點著色器和形狀著色器設(shè)置了位置和顏色值，然后執(zhí)行繪制函數(shù)：

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()方法中調(diào)用draw()方法就可以畫出我們想要畫的對象了：

public void onDrawFrame(GL10 unused) {
    ...

    mTriangle.draw();
}

當(dāng)你運行這個應(yīng)用時，它看上去會像是這樣：

在這個代碼樣例中，還存在一些問題。首先，它無法給用戶帶來什么深刻的印象。其次，這個三角形看上去有一些扁，另外當(dāng)你改變屏幕方向時，它的形狀也會隨之改變。發(fā)生形變的原因是因為對象的頂點沒有根據(jù)顯示GLSurfaceView的屏幕區(qū)域的長寬比進(jìn)行修正。你可以在下一節(jié)課中使用投影（Projection）或者相機視角（Camera View）來解決這個問題。

最后，這個三角形是靜止的，這看上去有些無聊。在添加移動課程當(dāng)中（后續(xù)課程），你會讓這個形狀發(fā)生旋轉(zhuǎn)，并使用一些OpenGL ES圖形處理流程中更加新奇的用法。