تعريف الأشكال

وتعد القدرة على تحديد الأشكال التي سيتم رسمها في سياق عرض OpenGL ES هي الخطوة الأولى في إنشاء رسومات عالية المستوى لتطبيقك. وقد يكون الرسم باستخدام OpenGL ES صعباً بعض الشيء بدون معرفة بعض الأمور الأساسية حول الطريقة التي يتوقع بها منك OpenGL ES تحديد الكائنات الرسومية.

يشرح هذا الدرس نظام الإحداثيات OpenGL ES المرتبط بشاشة جهاز Android، وأساسيات تحديد الشكل، وأوجه الشكل، بالإضافة إلى تعريف المثلث والمربع.

تحديد المثلث

يتيح لك OpenGL ES تحديد الكائنات المرسومة باستخدام الإحداثيات في مساحة ثلاثية الأبعاد. لذلك، قبل أن تتمكن من رسم مثلث، يجب عليك تحديد إحداثياته. في 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 هو استخدام مثلثين مرسومين معًا:

الشكل 1. رسم مربع باستخدام مثلثين.

مرة أخرى، يجب تحديد الرؤوس بترتيب عكس اتجاه عقارب الساعة لكلا المثلثَين الذي يمثّلان هذا الشكل، ووضع القيم في ByteBuffer. لتجنّب تحديد الإحداثيات التي يتشاركها كل مثلث مرتين، استخدِم قائمة رسومات لإعلام مسار رسومات 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. بشكل عام، يمكنك استخدام مجموعات من المثلثات لرسم كائنات. في الدرس التالي، ستتعلم كيفية رسم هذه الأشكال على الشاشة.