Şekilleri tanımlama

Bir OpenGL ES görünümü bağlamında çizilecek şekilleri tanımlayabilmek, uygulamanız için yüksek kaliteli grafikler oluşturmanın ilk adımıdır. OpenGL ES'nin grafik nesneleri tanımlamanızı nasıl beklediğiyle ilgili birkaç temel şey bilmeden OpenGL ES ile çizim yapmak biraz zor olabilir.

Bu derste, bir Android cihaz ekranına göre OpenGL ES koordinat sistemi, şekiller ve yüzler tanımlamanın yanı sıra bir üçgen ve kare tanımlamanın temelleri açıklanmaktadır.

Üçgen tanımlama

OpenGL ES, üç boyutlu uzayda koordinatları kullanarak çizilmiş nesneleri tanımlamanızı sağlar. Yani, bir üçgen çizmeden önce koordinatlarını tanımlamalısınız. OpenGL’de bunu yapmanın tipik yolu, koordinatlar için kayan nokta sayılarının tepe noktası dizisini tanımlamaktır. Maksimum verimlilik için bu koordinatları, işlenmek üzere OpenGL ES grafik ardışık düzenine aktarılan bir ByteBuffer içine yazarsınız.

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

Varsayılan olarak OpenGL ES, [0,0,0] (X,Y,Z) değerinin GLSurfaceView çerçevesinin merkezini, [1,1,0] çerçevenin sağ üst köşesinin, [-1,-1,0] değerinin de çerçevenin sol alt köşesini gösterdiği bir koordinat sistemini varsayar. Bu koordinat sistemini göstermek için OpenGL ES geliştirici kılavuzuna bakın.

Bu şeklin koordinatlarının saat yönünün tersine göre tanımlandığını unutmayın. Çizim sırası, şeklin genellikle çizilmesini istediğiniz ön yüzü ile OpenGL ES cull yüzeyi özelliğini kullanarak çizmemeyi seçebileceğiniz arka yüzü tanımlaması nedeniyle önemlidir. Yüzler ve culling hakkında daha fazla bilgi için OpenGL ES geliştirici kılavuzuna bakın.

Kare tanımlama

OpenGL'de üçgenleri tanımlamak çok kolaydır, ama biraz daha karmaşık hale getirmek isterseniz ne olur? Mesela kare mi? Bunu yapmanın çeşitli yolları vardır, ancak OpenGL ES'de böyle bir şekil çizmenin tipik bir yolu, birlikte çizilmiş iki üçgen kullanmaktır:

Şekil 1. İki üçgen kullanarak kare çizme.

Yine, bu şekli temsil eden her iki üçgenin köşelerini saat yönünün tersine göre tanımlamanız ve değerleri ByteBuffer içine koymanız gerekir. Her bir üçgenin paylaştığı iki koordinatların iki kez tanımlanmasını önlemek için, OpenGL ES grafik hattına bu köşelerin nasıl çizileceğini bir çizim listesi ile açıklayabilirsiniz. Aşağıda, bu şeklin kodu yer almaktadır:

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

Bu örnekte, OpenGL ile daha karmaşık şekiller oluşturmak için neler gerektiği konusunda fikir edinebilirsiniz. Genellikle nesne çizmek için üçgen koleksiyonları kullanırsınız. Bir sonraki derste bu şekilleri ekranda nasıl çizeceğinizi öğreneceksiniz.