繪製形狀

定義要使用 OpenGL 繪製的形狀後，您可能想要繪製形狀。繪製形狀 OpenGL ES 2.0 需要比您想像中更多的程式碼，因為 API 提供了 大量控制圖形轉譯管道

本課程將說明如何使用 OpenGL 繪製您在上一堂課中定義的形狀 ES 2.0 API。

初始化形狀

繪製任何繪圖前，您必須先初始化並載入您打算繪製的形狀。除非 課程期間所用形狀的結構 (原始座標) 會改變 應在 您的 onSurfaceCreated() 以便提高記憶體和處理效率

Kotlin

class MyGLRenderer : GLSurfaceView.Renderer {
    ...
    private lateinit var mTriangle: Triangle
    private lateinit var mSquare: Square

    override fun onSurfaceCreated(unused: GL10, config: EGLConfig) {
        ...
        // initialize a triangle
        mTriangle = Triangle()
        // initialize a square
        mSquare = Square()
    }
    ...
}

Java

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 繪製已定義的形狀需要大量程式碼，因為您必須 必須提供大量詳細資料給圖形轉譯管道具體來說，您必須定義 包括：

• Vertex Shader - 用於轉譯形狀頂點的 OpenGL ES 圖形程式碼。
• 片段著色器 - 用於呈現具有色彩或色彩圖案形狀的 OpenGL ES 程式碼 包括紋理。
• 程式 - 包含用於繪圖的著色器的 OpenGL ES 物件 一或多個形狀

您需要至少一個頂點著色器才能繪製形狀，並使用一個片段著色器為形狀著色。 您必須編譯這些著色器，然後新增至 OpenGL ES 程式，在程式中繪製 以下範例說明如何定義基本著色器，並運用於 Triangle 類別：

Kotlin

class Triangle {

    private val vertexShaderCode =
            "attribute vec4 vPosition;" +
            "void main() {" +
            "  gl_Position = vPosition;" +
            "}"

    private val fragmentShaderCode =
            "precision mediump float;" +
            "uniform vec4 vColor;" +
            "void main() {" +
            "  gl_FragColor = vColor;" +
            "}"

    ...
}

Java

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 環境。如要編譯這段程式碼，請在轉譯器類別中建立公用程式方法：

Kotlin

fun loadShader(type: Int, shaderCode: String): Int {

    // create a vertex shader type (GLES20.GL_VERTEX_SHADER)
    // or a fragment shader type (GLES20.GL_FRAGMENT_SHADER)
    return GLES20.glCreateShader(type).also { shader ->

        // add the source code to the shader and compile it
        GLES20.glShaderSource(shader, shaderCode)
        GLES20.glCompileShader(shader)
    }
}

Java

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 著色器和連結程式的費用高昂 因此，請避免重複執行這項作業。如果使用 您無須瞭解執行階段的著色器內容，那麼您應該建構程式碼，讓其僅 建立一次，然後快取以供日後使用

Kotlin

class Triangle {
    ...

    private var mProgram: Int

    init {
        ...

        val vertexShader: Int = loadShader(GLES20.GL_VERTEX_SHADER, vertexShaderCode)
        val fragmentShader: Int = loadShader(GLES20.GL_FRAGMENT_SHADER, fragmentShaderCode)

        // create empty OpenGL ES Program
        mProgram = GLES20.glCreateProgram().also {

            // add the vertex shader to program
            GLES20.glAttachShader(it, vertexShader)

            // add the fragment shader to program
            GLES20.glAttachShader(it, fragmentShader)

            // creates OpenGL ES program executables
            GLES20.glLinkProgram(it)
        }
    }
}

Java

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() 方法以繪製形狀。這段程式碼設定位置 色彩值轉換為形狀的頂點著色器和片段著色器，然後執行繪圖 函式。

Kotlin

private var positionHandle: Int = 0
private var mColorHandle: Int = 0

private val vertexCount: Int = triangleCoords.size / COORDS_PER_VERTEX
private val vertexStride: Int = COORDS_PER_VERTEX * 4 // 4 bytes per vertex

fun draw() {
    // Add program to OpenGL ES environment
    GLES20.glUseProgram(mProgram)

    // get handle to vertex shader's vPosition member
    positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition").also {

        // Enable a handle to the triangle vertices
        GLES20.glEnableVertexAttribArray(it)

        // Prepare the triangle coordinate data
        GLES20.glVertexAttribPointer(
                it,
                COORDS_PER_VERTEX,
                GLES20.GL_FLOAT,
                false,
                vertexStride,
                vertexBuffer
        )

        // get handle to fragment shader's vColor member
        mColorHandle = GLES20.glGetUniformLocation(mProgram, "vColor").also { colorHandle ->

            // Set color for drawing the triangle
            GLES20.glUniform4fv(colorHandle, 1, color, 0)
        }

        // Draw the triangle
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount)

        // Disable vertex array
        GLES20.glDisableVertexAttribArray(it)
    }
}

Java

private int positionHandle;
private int colorHandle;

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
    positionHandle = GLES20.glGetAttribLocation(mProgram, "vPosition");

    // Enable a handle to the triangle vertices
    GLES20.glEnableVertexAttribArray(positionHandle);

    // Prepare the triangle coordinate data
    GLES20.glVertexAttribPointer(positionHandle, COORDS_PER_VERTEX,
                                 GLES20.GL_FLOAT, false,
                                 vertexStride, vertexBuffer);

    // get handle to fragment shader's vColor member
    colorHandle = GLES20.glGetUniformLocation(mProgram, "vColor");

    // Set color for drawing the triangle
    GLES20.glUniform4fv(colorHandle, 1, color, 0);

    // Draw the triangle
    GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);

    // Disable vertex array
    GLES20.glDisableVertexAttribArray(positionHandle);
}

備妥上述所有程式碼後，繪製這個物件時只需要呼叫 從轉譯器的 onDrawFrame() 方法中的 draw() 方法：

Kotlin

override fun onDrawFrame(unused: GL10) {
    ...

    mTriangle.draw()
}

Java

public void onDrawFrame(GL10 unused) {
    ...

    mTriangle.draw();
}

執行應用程式時，應如下所示：

圖 1. 在沒有投影或相機檢視畫面的情況下繪製的三角形。

這個程式碼範例有幾個問題。首先，這不會影響 其次，三角形稍微縮小，會在您變更畫面時改變形狀 以及裝置方向形狀出現偏移的原因在於 沒有根據螢幕區域比例修正頂點 目前顯示 GLSurfaceView。您可以使用投影和相機修正這個問題 請參閱下一堂課

最後，三角形是靜止的，有點無聊。在 新增動態效果課程，即可建立這個形狀 並且讓 OpenGL ES 圖形管線發揮更大用處。