تعریف شکل‌ها

توانایی تعریف شکل‌ها برای ترسیم در زمینه نمای OpenGL ES اولین گام در ایجاد گرافیک‌های پیشرفته برای برنامه شما است. ترسیم با OpenGL ES می‌تواند کمی دشوار باشد اگر چند نکته اساسی درباره نحوه انتظار OpenGL ES برای تعریف اشیاء گرافیکی ندانید.

این درس سیستم مختصات OpenGL ES را نسبت به صفحه دستگاه Android، مبانی تعریف شکل، سطوح شکل، و همچنین تعریف مثلث و مربع توضیح می‌دهد.

تعریف مثلث

OpenGL ES به شما امکان می‌دهد اشیاء ترسیم‌شده را بااستفاده از مختصات در فضای سه‌بعدی تعریف کنید. بنابراین، قبل‌از اینکه بتوانید مثلثی رسم کنید، باید مختصات آن را تعریف کنید. در OpenGL، روش معمول برای انجام این کار، تعریف آرایه رأس از اعداد ممیز شناور برای مختصات است. برای حداکثر کارایی، این مختصات را در ByteBuffer می‌نویسید که برای پردازش به خط لوله گرافیکی OpenGL ES منتقل می‌شود.

کاتلین

// 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)
                }
            }
}

جاوا

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 مراجعه کنید.

توجه داشته باشید که مختصات این شکل به‌ترتیب پادساعت‌گرد تعریف شده است. ترتیب ترسیم مهم است زیرا مشخص می‌کند کدام طرف، وجه جلویی شکل است که معمولاً می‌خواهید ترسیم شود، و کدام طرف، وجه پشتی است که می‌توانید بااستفاده از ویژگی cull face در OpenGL ES انتخاب کنید ترسیم نشود. برای اطلاعات بیشتر درباره وجه‌ها و حذفیات، به راهنمای توسعه‌دهنده OpenGL ES مراجعه کنید.

تعریف مربع

تعریف مثلث در OpenGL بسیار آسان است، اما اگر بخواهید کمی پیچیده‌تر شوید چه؟ مثلاً، مربع؟ روش‌های مختلفی برای انجام این کار وجود دارد، اما مسیر معمول برای ترسیم چنین شکلی در OpenGL ES استفاده از دو مثلث است که باهم ترسیم شده‌اند:

شکل ۱. رسم مربع بااستفاده از دو مثلث.

دوباره باید رأس‌ها را در جهت پادساعت‌گرد برای هر دو مثلثی که این شکل را نشان می‌دهند تعریف کنید و مقادیر را در ByteBuffer قرار دهید. برای جلوگیری از تعریف دو مختصات مشترک برای هر مثلث، از فهرست طراحی استفاده کنید تا به خط لوله گرافیک OpenGL ES بگویید چگونه این رأس‌ها را طراحی کند. کد این شکل در اینجا آمده است:

کاتلین

// 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)
                }
            }
}

جاوا

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 چه چیزی لازم است. به‌طور کلی، برای رسم اشیاء از مجموعه‌ای از مثلث‌ها استفاده می‌کنید. در درس بعدی، با نحوه رسم این شکل‌ها روی صفحه‌نمایش آشنا می‌شوید.