หลังจากที่คุณกำหนดรูปร่างที่จะวาดด้วย OpenGL คุณอาจต้องการวาดรูปเหล่านั้น การวาดรูปทรง กับ OpenGL ES 2.0 ใช้โค้ดมากกว่าที่คิดไว้เล็กน้อย เนื่องจาก API ให้ การควบคุมไปป์ไลน์การแสดงผลกราฟิกได้อย่างมาก
บทเรียนนี้อธิบายวิธีวาดรูปร่างที่กำหนดไว้ในบทเรียนก่อนหน้านี้โดยใช้ OpenGL API ES 2.0
เริ่มต้นรูปร่าง
ก่อนที่คุณจะวาดรูปร่างใดๆ คุณต้องเริ่มต้นและโหลดรูปร่างที่วางแผนจะวาด เว้นแต่
โครงสร้าง (พิกัดเดิม) ของรูปร่างที่คุณใช้ในโปรแกรมเปลี่ยนไปในระหว่างหลักสูตร
คุณควรกำหนดค่าเริ่มต้นใน
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 สำหรับแสดงผลจุดยอดของรูปร่าง
- Fragment Shader - โค้ด OpenGL ES สำหรับแสดงใบหน้าของรูปร่างที่มีสี หรือ พื้นผิว
- โปรแกรม - ออบเจ็กต์ OpenGL ES ที่มีตัวปรับแสงเงาที่คุณต้องการใช้สำหรับการวาด รูปร่างอย่างน้อย 1 รูป
คุณต้องมีตัวปรับแสงเงา Vertex อย่างน้อย 1 ตัวเพื่อวาดรูปร่าง และ Fragment Shield 1 รายการเพื่อใส่สีรูปร่างนั้น
ตัวปรับแสงเงาเหล่านี้จะต้องถูกคอมไพล์แล้วเพิ่มไปยังโปรแกรม 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 Shading Language (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 และโปรแกรมลิงก์มีค่าใช้จ่าย ในแง่ของรอบ CPU และเวลาในการประมวลผล จึงควรหลีกเลี่ยงการทำแบบนี้มากกว่า 1 ครั้ง หากอยากรู้ ไม่ทราบเนื้อหาของเครื่องมือให้เฉดสีขณะรันไทม์ คุณควรสร้างโค้ดเพื่อให้โค้ดดังกล่าว สร้าง 1 ครั้งแล้วแคชไว้ใช้ภายหลัง
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()
สำหรับการวาดรูปร่าง โค้ดนี้จะกำหนดตำแหน่งและ
ค่าสีไปยังตัวปรับแสงเงา Vertex และตัวปรับแสงเงา Fragment แล้วเริ่มดำเนินการวาดภาพ
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); }
เมื่อคุณมีโค้ดทั้งหมดพร้อมแล้ว การวาดออบเจ็กต์นี้จะต้องมีการเรียกไปยัง
draw()
จากภายในเมธอด onDrawFrame()
ของตัวแสดงผล:
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=th)
รูปที่ 1 สามเหลี่ยมที่วาดโดยไม่มีมุมมองการฉายภาพหรือกล้อง
มีปัญหาบางประการกับตัวอย่างโค้ดนี้ ประการแรกคือ ไม่ได้ทำให้คุณประทับใจ
เพื่อน ประการที่สอง สามเหลี่ยมจะย่องลงเล็กน้อยและเปลี่ยนรูปร่างเมื่อคุณเปลี่ยนหน้าจอ
การวางแนวของอุปกรณ์ เหตุผลที่รูปร่างบิดเบี้ยวเนื่องมาจากการที่วัตถุ
ยังไม่มีการแก้ไขจุดยอด สําหรับสัดส่วนของพื้นที่หน้าจอ
GLSurfaceView
จะปรากฏขึ้น คุณสามารถแก้ไขปัญหานั้นโดยใช้การฉายภาพและกล้อง
ในบทเรียนถัดไป
สุดท้ายคือรูปสามเหลี่ยมที่อยู่กับที่ซึ่งน่าเบื่อ ใน บทเรียนการเพิ่มการเคลื่อนไหว คุณวาดรูปร่างนี้ หมุนเวียนและใช้ประโยชน์จากไปป์ไลน์กราฟิก OpenGL ES ให้น่าสนใจยิ่งขึ้น