圖片和圖形之繪製形狀(12)

原文

概要


在用OpenGL定義要繪製的形狀之後,您可能需要繪製它們。使用OpenGL ES 2.0繪製圖形需要的代碼比您想象的要多一點,因爲API提供了對圖形渲染管道的大量控制。

本課介紹如何使用OpenGL ES 2.0 API繪製您在前一課中定義的形狀。

初始化形狀


在進行任何繪圖之前,您必須初始化並加載您計劃繪製的形狀。除非程序中使用的形狀的結構(原始座標)在執行過程中發生更改,否則應使用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();
    }
    ...
}

畫一個形狀


使用OpenGL ES 2.0繪製一個定義的形狀需要大量的代碼,因爲您必須爲圖形渲染管道提供大量細節。具體而言,您必須定義以下內容:

  • 頂點着色器 - 用於渲染形狀頂點的OpenGL ES圖形代碼。
  • 片段着色器 - 用於渲染具有顏色或紋理的形狀的面的OpenGL ES代碼。
  • 程序 - 包含要用於繪製一個或多個形狀的着色器的OpenGL ES對象。

您至少需要一個頂點着色器來繪製形狀和一個片段着色器來爲該形狀着色。這些着色器必須被編譯,然後添加到OpenGL ES程序中,然後用它來繪製形狀。以下是如何定義可用於在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着色語言(GLSL)代碼,必須在OpenGL ES環境中使用它之前進行編譯。要編譯此代碼,請在您的渲染器類中創建實用程序方法:

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程序對象中,然後鏈接程序。在繪製的對象的構造函數中執行此操作,因此只能執行一次。

注意:編譯OpenGL ES着色器和鏈接程序在CPU週期和處理時間方面是昂貴的,所以您應該避免這樣做多次。如果您在運行時不知道着色器的內容,則應該構建代碼,使其僅被創建一次,然後進行緩存以備後用。

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

此時,您已準備好添加繪製形狀的實際呼叫。使用OpenGL ES繪製形狀要求您指定幾個參數來告訴渲染管道您要繪製什麼以及如何繪製它。由於繪圖選項可能因形狀而異,因此最好讓您的形狀類包含自己的繪圖邏輯。

創建一個draw()繪製形狀的方法。此代碼將位置和顏色值設置爲形狀的頂點着色器和片段着色器,然後執行繪圖功能。

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

一旦完成了所有這些代碼,繪製該對象只需draw()要從您的渲染器onDrawFrame()方法中調用該 方法即可:

public void onDrawFrame(GL10 unused) {
    ...

    mTriangle.draw();
}

當你運行應用程序時,它應該看起來像這樣:
圖片和圖形之繪製形狀(12)
圖1.沒有投影或攝像機視圖的三角形。
這個代碼示例有幾個問題。首先,它不會打動你的朋友。其次,當你改變設備的屏幕方向時,三角形被壓扁並改變形狀。形狀偏斜的原因是由於對象的頂點尚未根據GLSurfaceView所顯示的屏幕區域的比例進行校正 。您可以在下一課中使用投影和相機視圖解決該問題。

最後,三角形是靜止的,這有點無聊。在“ 添加動畫”課程中,您可以旋轉此形狀並更有趣地使用OpenGL ES圖形管線。

    Lastest Update:2018.04.25

聯繫我

QQ:94297366
微信打賞:https://pan.baidu.com/s/1dSBXk3eFZu3mAMkw3xu9KQ

公衆號推薦:

圖片和圖形之繪製形狀(12)

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章