การสามารถกำหนดรูปร่างที่จะวาดในบริบทของมุมมอง OpenGL ES เป็นขั้นตอนแรก การสร้างกราฟิกระดับไฮเอนด์สำหรับแอปของคุณ การวาดด้วย OpenGL ES อาจยุ่งยากเล็กน้อยโดยไม่มี การที่คุณรู้ข้อมูลเบื้องต้นเกี่ยวกับวิธีที่ OpenGL ES คาดหวังว่าคุณจะกำหนดวัตถุกราฟิก
บทเรียนนี้อธิบายถึงระบบพิกัด OpenGL ES ที่เกี่ยวข้องกับหน้าจออุปกรณ์ Android พื้นฐานในการกำหนดรูปร่าง กำหนดรูปร่างหน้าตา รวมถึงการกำหนดรูปสามเหลี่ยมและสี่เหลี่ยมจัตุรัส
หาความหมายสามเหลี่ยม
OpenGL ES ให้คุณกำหนดวัตถุที่วาดโดยใช้พิกัดในพื้นที่ทรง 3 มิติ ดังนั้น
ก่อนที่จะวาดรูปสามเหลี่ยมได้ คุณต้องกำหนดพิกัดของรูปสามเหลี่ยมดังกล่าวด้วย ใน OpenGL วิธีทดสอบโดยทั่วไป
สิ่งนี้ใช้กำหนดอาร์เรย์เวอร์เท็กซ์ของจำนวนจุดลอยตัวสำหรับพิกัด สำหรับค่าสูงสุด
ให้เขียนพิกัดเหล่านี้ลงใน ByteBuffer
ซึ่งส่งผ่านค่า
ไปป์ไลน์กราฟิก OpenGL ES สำหรับการประมวลผล
Kotlin
// number of coordinates per vertex in this array const val COORDS_PER_VERTEX = 3 var triangleCoords = floatArrayOf( // in counterclockwise order: 0.0f, 0.622008459f, 0.0f, // top -0.5f, -0.311004243f, 0.0f, // bottom left 0.5f, -0.311004243f, 0.0f // bottom right ) class Triangle { // Set color with red, green, blue and alpha (opacity) values val color = floatArrayOf(0.63671875f, 0.76953125f, 0.22265625f, 1.0f) private var vertexBuffer: FloatBuffer = // (number of coordinate values * 4 bytes per float) ByteBuffer.allocateDirect(triangleCoords.size * 4).run { // use the device hardware's native byte order order(ByteOrder.nativeOrder()) // create a floating point buffer from the ByteBuffer asFloatBuffer().apply { // add the coordinates to the FloatBuffer put(triangleCoords) // set the buffer to read the first coordinate position(0) } } }
Java
public class Triangle { private FloatBuffer vertexBuffer; // number of coordinates per vertex in this array static final int COORDS_PER_VERTEX = 3; static float triangleCoords[] = { // in counterclockwise order: 0.0f, 0.622008459f, 0.0f, // top -0.5f, -0.311004243f, 0.0f, // bottom left 0.5f, -0.311004243f, 0.0f // bottom right }; // Set color with red, green, blue and alpha (opacity) values float color[] = { 0.63671875f, 0.76953125f, 0.22265625f, 1.0f }; public Triangle() { // initialize vertex byte buffer for shape coordinates ByteBuffer bb = ByteBuffer.allocateDirect( // (number of coordinate values * 4 bytes per float) triangleCoords.length * 4); // use the device hardware's native byte order bb.order(ByteOrder.nativeOrder()); // create a floating point buffer from the ByteBuffer vertexBuffer = bb.asFloatBuffer(); // add the coordinates to the FloatBuffer vertexBuffer.put(triangleCoords); // set the buffer to read the first coordinate vertexBuffer.position(0); } }
โดยค่าเริ่มต้น OpenGL ES จะถือว่าระบบพิกัดที่ [0,0,0] (X,Y,Z) ระบุจุดศูนย์กลางของ
เฟรม GLSurfaceView
[1,1,0] คือมุมขวาบนของเฟรม และ
[-1,-1,0] คือมุมซ้ายล่างของเฟรม สำหรับภาพประกอบของระบบพิกัดนี้ โปรดดู
นักพัฒนาแอป OpenGL ES
โปรดทราบว่าพิกัดของรูปร่างนี้จะกำหนดตามลำดับทวนเข็มนาฬิกา ภาพวาด ลำดับนั้นสำคัญ เนื่องจากจะกำหนดว่าด้านใดเป็นด้านหน้าของรูปร่าง ซึ่งคุณมัก ต้องการให้วาดและหน้าด้านหลัง ซึ่งคุณสามารถเลือกที่จะไม่วาดโดยใช้คำสั่ง OpenGL ES ของใบหน้า ดูข้อมูลเพิ่มเติมเกี่ยวกับใบหน้าและการเลือกได้ที่ คู่มือนักพัฒนาซอฟต์แวร์ OpenGL ES
นิยามกำลังสอง
ใน OpenGL การกำหนดรูปสามเหลี่ยมนั้นค่อนข้างง่ายมาก แต่ถ้าอยากได้เพิ่มอีกเล็กน้อย ที่ซับซ้อนหรือไม่ สมมติว่าเป็นรูปสี่เหลี่ยม คุณสามารถทำได้หลายวิธี แต่เส้นทางโดยทั่วไปในการวาดภาพ รูปร่างใน OpenGL ES คือใช้สามเหลี่ยม 2 รูปวาดด้วยกัน ดังนี้
![](https://developer.android.google.cn/static/images/opengl/ccw-square.png?authuser=8&hl=th)
รูปที่ 1 วาดสี่เหลี่ยมจัตุรัสโดยใช้สามเหลี่ยม 2 รูป
คุณควรกำหนดจุดยอดมุมในลำดับทวนเข็มนาฬิกาสำหรับสามเหลี่ยมทั้งสองที่
แทนรูปร่างนี้ และใส่ค่าในรูปแบบ ByteBuffer
เพื่อหลีกเลี่ยง
กำหนดพิกัด 2 พิกัดที่แต่ละสามเหลี่ยมใช้ร่วมกัน 2 ครั้ง ให้ใช้รายการวาดเพื่อบอก
วิธีวาดจุดยอดเหล่านี้ของกราฟิกไปป์ไลน์ของ OpenGL ES นี่คือโค้ดสำหรับรูปร่างนี้
Kotlin
// number of coordinates per vertex in this array const val COORDS_PER_VERTEX = 3 var squareCoords = floatArrayOf( -0.5f, 0.5f, 0.0f, // top left -0.5f, -0.5f, 0.0f, // bottom left 0.5f, -0.5f, 0.0f, // bottom right 0.5f, 0.5f, 0.0f // top right ) class Square2 { private val drawOrder = shortArrayOf(0, 1, 2, 0, 2, 3) // order to draw vertices // initialize vertex byte buffer for shape coordinates private val vertexBuffer: FloatBuffer = // (# of coordinate values * 4 bytes per float) ByteBuffer.allocateDirect(squareCoords.size * 4).run { order(ByteOrder.nativeOrder()) asFloatBuffer().apply { put(squareCoords) position(0) } } // initialize byte buffer for the draw list private val drawListBuffer: ShortBuffer = // (# of coordinate values * 2 bytes per short) ByteBuffer.allocateDirect(drawOrder.size * 2).run { order(ByteOrder.nativeOrder()) asShortBuffer().apply { put(drawOrder) position(0) } } }
Java
public class Square { private FloatBuffer vertexBuffer; private ShortBuffer drawListBuffer; // number of coordinates per vertex in this array static final int COORDS_PER_VERTEX = 3; static float squareCoords[] = { -0.5f, 0.5f, 0.0f, // top left -0.5f, -0.5f, 0.0f, // bottom left 0.5f, -0.5f, 0.0f, // bottom right 0.5f, 0.5f, 0.0f }; // top right private short drawOrder[] = { 0, 1, 2, 0, 2, 3 }; // order to draw vertices public Square() { // initialize vertex byte buffer for shape coordinates ByteBuffer bb = ByteBuffer.allocateDirect( // (# of coordinate values * 4 bytes per float) squareCoords.length * 4); bb.order(ByteOrder.nativeOrder()); vertexBuffer = bb.asFloatBuffer(); vertexBuffer.put(squareCoords); vertexBuffer.position(0); // initialize byte buffer for the draw list ByteBuffer dlb = ByteBuffer.allocateDirect( // (# of coordinate values * 2 bytes per short) drawOrder.length * 2); dlb.order(ByteOrder.nativeOrder()); drawListBuffer = dlb.asShortBuffer(); drawListBuffer.put(drawOrder); drawListBuffer.position(0); } }
ตัวอย่างนี้ช่วยให้คุณเห็นถึงสิ่งที่ต้องใช้ในการสร้างรูปร่างที่ซับซ้อนมากขึ้นด้วย OpenGL ใน โดยใช้คอลเล็กชันสามเหลี่ยมเพื่อวาดวัตถุ ในบทเรียนถัดไป คุณจะได้เรียนรู้วิธีวาด รูปทรงเหล่านี้บนหน้าจอ