Android OpenGL ES 開發(四): OpenGL ES 繪制形狀


在上文中,我們使用OpenGL定義了能夠被繪制出來的形狀了,現在我們想繪制出來它們。使用OpenGLES 2.0來繪制形狀會比你想象的需要更多的代碼。因為OpenGL的API提供了大量的對渲染管線的控制能力。

本文就將講述如何使用OpenGL ES 2.0 API來繪制出來我們上節定義的形狀。

一、初始化形狀

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

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();
    }
    ...
}

二、繪制形狀

使用OpenGLES 2.0畫一個定義好的形狀需要比較多的代碼,因為你必須為圖形渲染管線提供一大堆信息。特別的,你必須定義以下幾個東西:

  • Vertex Shader - 用於渲染形狀的頂點的OpenGLES 圖形代碼。
  • Fragment Shader - 用於渲染形狀的外觀(顏色或紋理)的OpenGLES 代碼。
  • Program - 一個OpenGLES對象,包含了你想要用來繪制一個或多個形狀的shader。

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

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

    ...
}

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

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

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

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

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);
    }
}

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

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

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 void onDrawFrame(GL10 unused) {
    ...

    mTriangle.draw();
}

當你運行程序的時候,你就應該看到以下的內容:
When you run the application, it should look something like this:

此例子中的代碼還有很多問題。首先,它不會打動你和你的朋友。其次,三角形會在你從豎屏變為橫屏時被壓扁。三角形變形的原因是其頂點們沒有跟據屏幕的寬高比進行修正。而且這里展示出來的三角形是靜止的,這樣的圖形是有點無聊的,在“添加動畫”的文章中,我們會使用OpenGL ES 的視圖管線來旋轉此形狀。

在下一篇文章,我們將使用投影和攝像頭視圖來修正顯示的問題。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM