定義要使用 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(); }
執行應用程式時,應如下所示:
![](https://developer.android.com/static/images/opengl/ogl-triangle.png?hl=zh-tw)
圖 1. 在沒有投影或相機檢視畫面的情況下繪製的三角形。
這個程式碼範例有幾個問題。首先,這不會影響
其次,三角形稍微縮小,會在您變更畫面時改變形狀
以及裝置方向形狀出現偏移的原因在於
沒有根據螢幕區域比例修正頂點
目前顯示 GLSurfaceView
。您可以使用投影和相機修正這個問題
請參閱下一堂課
最後,三角形是靜止的,有點無聊。在 新增動態效果課程,即可建立這個形狀 並且讓 OpenGL ES 圖形管線發揮更大用處。