Transformasi Geometri di OpenGL dengan Glut

Modul 3
Transformasi Geometri

I. Tugas Pendahuluan

1. Jelaskan dengan singkat apa yang disebut sebagai translasi, scaling, dan rotasi dalam transformasi geometri!
2. Gambarkan dengan tangan grafik transformasi titik (2, 3) yang ditranslasi sejauh (3, - 4)!
3. Gambarkan dengan tangan grafik transformasi titik (3, 3) yang dirotasi sejauh 90 derajat terhadap sumbu koordinat!
4. Gambarkan dengan tangan grafik transformasi titik (3, 2) yang di-scaling sebesar (2, 1.5) terhadap sumbu koordinat!

II. Pengantar

            Dalam matematika, transformasi adalah fungsi yang memetakan suatu set X ke set yang lain ataupun ke set X sendiri. Dalam dunia komputer grafik, set X (yang mengalami proses transformasi) biasanya berupa strukur geometri, sehingga disebut transformasi geometri. Terdapat banyak jenis operasi transformasi: translasi, refleksi, rotasi, scaling, shearing.

Berikut adalah perintah-perintah transformasi di OpenGL:

a.         glTranslated(a, b, c): melakukan operasi translasi/pergeseran sejauh a pada sumbu x, sejauh b pada sumbu y, dan sejauh c pada sumbu z. Contoh: jika ingin menggeser obyek sejauh 4 pada sumbu x dan -3 pada sumbu y, maka perintahnya adalah: glTranslated(4.0, -3.0, 0.0).

b.        glScaled(d, e, f): melakukan penskalaan sebesar d pada sumbu x, sebesar e pada sumbu y, sebesar f pada sumbu z. Contoh: jika ingin memperbesar obyek pada sumbu x sebesar 2 kali dan memperkecil obyek menjadi seperempatnya, maka perintahnya adalah: glScaled(2.0, 0.25, 0.0).

c.         glRotated(alpha, i, j, k): melakukan rotasi sebesar alpha. Alpha ada dalam satuan derajat, bukan radian. I, j, dan k mewakili sumbu rotasi x, y, dan z. Set nilainya menjadi 1.0 pada sumbu yang diingikan. Contoh: jika ingin merotasi obyek sebesar 90 derajat pada sumbu x, maka perintahnya adalah: glRotated(90.0, 1, 0, 0).

Proses transformasi di OpenGL bersifat melekat: sekali sebuah perintah transformasi dieksekusi, perintah tersebut akan selalu dilakukan untuk semua perintah yang ada dibawahnya. Contoh: jika pada program terdapat perintah glTranslated(10.0, 0.0, 0.0) pada baris ke 25, maka perintah-perintah glVertex pada baris ke 26 dan seterusnya akan selalu ditranslasi pada sumbu x sejauh 10.

Berikut contoh program translasi.

void display() {                 glClear(GL_COLOR_BUFFER_BIT);               glColor3f(0.0,0.0,0.5);               // Gambar kotak pertama di sudut kiri bawah                 glRecti(0,0, 10, 10);                 //translasi ke 20, 20                 glTranslated(20.0, 20.0, 0);                 glRecti(0,0, 10, 10);                 glFlush(); } void myinit() {                 glMatrixMode(GL_PROJECTION);                 glLoadIdentity();                 gluOrtho2D(0.0,50.0,0.0,50.0);                 glMatrixMode(GL_MODELVIEW);                 glClearColor(1.0,1.0,1.0,1.0);                 glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) {                 glutInit(&argc,argv);                 glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);                 glutInitWindowSize(400,400);                 glutInitWindowPosition(100,100);                 glutCreateWindow("Transform");                 glutDisplayFunc(display);                 myinit();                 glutMainLoop();                 return 0; }

Program 3.1 Translasi

glRecti adalah fungsi OpenGL untuk menggambar kotak 2 dimensi dengan memberi nilai pada parameter titik kiri bawah dan kanan atas.

Berikut contoh program Scaling.

void display() {                 glClear(GL_COLOR_BUFFER_BIT);               glColor3f(0.0,0.0,0.5);               // Gambar kotak pertama di sudut kiri bawah                 glRecti(0,0, 10, 10);                 //Scaling kotak yang digambar di ke 20, 20 sebesar 1.5 kali                 glScaled(1.5, 1.5, 0.0);                 glRecti(20,20, 30, 30);                 glFlush(); } void myinit() {                 glMatrixMode(GL_PROJECTION);                 glLoadIdentity();                 gluOrtho2D(0.0,50.0,0.0,50.0);                 glMatrixMode(GL_MODELVIEW);                 glClearColor(1.0,1.0,1.0,1.0);                 glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) {                 glutInit(&argc,argv);                 glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);                 glutInitWindowSize(400,400);                 glutInitWindowPosition(100,100);                 glutCreateWindow("Transform");                 glutDisplayFunc(display);                 myinit();                 glutMainLoop();                 return 0; }

Program 3.2 Scaling

Yang perlu diperhatikan disini adalah proses scaling dilakukan dari sumbu koordinat yang terletak di sudut kiri bawah jendela. Hal inilah yang menyebabkan tampilan pada program 3.2 diatas terlihat cenderung lebih ke kanan atas jendela.

Berikut adalah contoh program rotasi.

void display() {                 glClear(GL_COLOR_BUFFER_BIT);     glColor3f(0.0,0.0,0.5);     // Gambar kotak pertama di sudut kiri bawah                 glRecti(0,0, 10, 10);                 //rotasi kotak kedua sebesar 15 derajat terhadap sumbu koordinat(titik kiri bawah)                 glRotated(15, 0, 0, 1.0);                 glRecti(20,20, 30, 30);                 glFlush(); } void myinit() {                 glMatrixMode(GL_PROJECTION);                 glLoadIdentity();                 gluOrtho2D(0.0,50.0,0.0,50.0);                 glMatrixMode(GL_MODELVIEW);                 glClearColor(1.0,1.0,1.0,1.0);                 glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) {                 glutInit(&argc,argv);                 glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);                 glutInitWindowSize(400,400);                 glutInitWindowPosition(100,100);                 glutCreateWindow("Transform");                 glutDisplayFunc(display);                 myinit();                 glutMainLoop();                 return 0; }

Program 3.3 Rotasi

Yang perlu diperhatikan dari program diatas adalah bahwa rotasi dilakukan terhadap titik koordinat yang terletak pada ujung kiri bawah jendela. Supaya rotasi terjadi pada titik tengah obyek, perlu dilakukan kombinasi perintah transformasi.

Kombinasi Transformasi

Operasi-operasi transformasi yang berbeda dapat dikombinasikan. Contoh: jika ingin melakukan operasi-operasi berikut pada sebuah obyek:

• translasi sebesar (3, -4)
• lalu rotasi sebesar 30° pada sumbu z
• lalu skala sebesar (2, -1)
• lalu translasi lagi sebesar (0, 1.5)
• dan terakhir rotasi sebesar -30°

maka perintah-perintahnya adalah:

glRotated(-30, 0, 0, 1);

glTranslated(0.0, 1.5, 0.0);

glScaled(2.0, -1.0, 0.0);

glRotated(30.0, 0, 0, 1);

glTranslated(3.0, 4.0, 0.0);

Yang perlu diperhatikan disini adalah urutan perintah. OpenGL melakukan perintah transformasi mulai dari yang paling bawah.

Perlu diingat pula bahwa karena pada dasarnya operasi transformasi dilakukan dengan menggunakan operasi perkalian matrix yang tidak bersifat komutatif (AB ≠ BA), maka urutan operasi transformasi sangat berpengaruh.

Salah satu kegunaan kombinasi Transformasi adalah untuk melakukan rotasi pada obyek terhadap arbitrary point/titik apapun (bukan terhadap sumbu koordinat). Metode rotasi terhadap arbitrary point adalah pertama-tama mentranslasikan obyek untuk berhimpit dengan sumbu koordinat, diikuti dengan rotasi, dan terakhir men-translasikan kembali obyek pada posisinya semula.

Berikut adalah contoh program kombinasi transformasi.

void display() {                 glClear(GL_COLOR_BUFFER_BIT);     glColor3f(0.0,0.0,0.5);     // Gambar kotak pertama di sudut kiri bawah                 glRecti(0,0, 10, 10);                 //rotasi kotak kedua terhadap titik tengah kotak                 glTranslated(25.0, 25.0, 0);                 glRotated(45, 0, 0, 1.0);                 glTranslated(-25.0, -25.0, 0);                 glRecti(20, 20, 30, 30);                 glFlush(); } void myinit() {                 glMatrixMode(GL_PROJECTION);                 glLoadIdentity();                 gluOrtho2D(0.0,50.0,0.0,50.0);                 glMatrixMode(GL_MODELVIEW);                 glClearColor(1.0,1.0,1.0,1.0);                 glColor3f(0.0,0.0,0.0); } int main(int argc, char* argv[]) {                 glutInit(&argc,argv);                 glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);                 glutInitWindowSize(400,400);                 glutInitWindowPosition(100,100);                 glutCreateWindow("Transform");                 glutDisplayFunc(display);                 myinit();                 glutMainLoop();                 return 0; }

Program 3.4 Rotasi terhadap arbitrary point

Yang perlu pula diperhatikan di topik transformasi adalah Current Transformation Matrix (CTM). Perintah OpenGL yang berkatan dengan CTM ini adalah: glPushMatrix(), glPopMatrix(), dan glLoadIdentity().

• glPushMatrix() menduplikasi CTM dan meletakkannya di bagian teratas stack
• glPopMatrix() pop matrix teratas dari stack
• glLoadIdentity() mengubah matrix teratas stack menjadi matrix identitas

Contoh:

• Inisialisasi stack

I

glMatrixMode(GL_MODEL_VIEW);

glLoadIdentity();

• S(2)

  Scale by 2

glScaled(1.0, 2.0, 1.0);

• S(2).R(90)

  Rotate terhadap x by 90 derajat

glRotated(90, 1, 0, 0);

S(2).R(90)

Push stack

• S(2).R(90)

  copy

  glPushMatrix();

 

• S(2).R(90)Tr(a)

  S(2).R(90)

  Translate by a

glTranslatef(a.x, a.y, a.z);

• Menggambar point pada layar

glBegin(GL_POINTS);

S(2).R(90)Tr(a)

S(2).R(90)

glVertex3f(1,1,1);

glEnd();

- proses perkalian matriksnya: S(2) * R(90) * Tr(a) * (1,1,1)

• S(2).R(90)

  Pop off stack

glPopMatrix();

Stack transformasi ini berguna kalau kita ingin membuat hirarki transformasi. Contoh: kita hendak memodelkan tangan yang terdiri dari lengan atas, lengan bawah, telapak tangan, jari-jari. Untuk keseluruhan tangan, transformasinya kita simpan di stack terbawah. Untuk lengan bawah, telapak tangan, dan jari-jari, transformasinya kita simpan di stack nomor 2 dari bawah. Untuk telapak tangan dan jari-jari, transformasinya kita simpan di stack nomor 3 dari bawah. Sedangkan untuk jari-jari, transformasinya kita simpan di stack teratas. Dengan demikian kita jadi lebih fleksibel untuk mentransformasi tiap bagian obyek.

Berikut adalah contoh program yang menggunakan glPushMatrix() dan glPopMatrix().

void display()

{

    glClear(GL_COLOR_BUFFER_BIT);

    glColor3f(0.0,0.0,1.0);

    glLoadIdentity();

    glPointSize(6);

    //Point pertama

    glBegin(GL_POINTS);

    glVertex2f(15,15);

    glEnd();

    glPushMatrix();

    glScalef(2,1,1);

    //Point pertama yang di Scale

    glBegin(GL_POINTS);

    glVertex2f(15,15);

    glEnd();

    //Point kedua yang sudah di Scale

    glColor3f(0.0,1.0,0.0);

    glBegin(GL_POINTS);

    glVertex2f(10,25);

    glEnd();

    glPopMatrix();

    //Point kedua tanpa Scale

    glBegin(GL_POINTS);

    glVertex2f(10,25);

    glEnd();

    glRotatef(10, 0, 0, 1);

    //Point pertama dengan rotate

    glColor3f(1.0,0.0,0.0);

    glBegin(GL_POINTS);

    glVertex2f(15,15);

    glEnd();

    glPushMatrix();

    glTranslatef(5,0,0);

    //Point pertama dengan rotate dulu dan setelah itu di translate

    glBegin(GL_POINTS);

    glVertex2f(15,15);

    glEnd();

    glFlush();

}

void myinit()

{

                glMatrixMode(GL_PROJECTION);

                glLoadIdentity();

                gluOrtho2D(0.0,50.0,0.0,50.0);

                glMatrixMode(GL_MODELVIEW);

                glClearColor(1.0,1.0,1.0,1.0);

                glColor3f(0.0,0.0,0.0);

}

int main(int argc, char* argv[])

{

                glutInit(&argc,argv);

                glutInitDisplayMode(GLUT_SINGLE | GLUT_RGB);

                glutInitWindowSize(400,400);

                glutInitWindowPosition(100,100);

                glutCreateWindow("Transform");

                glutDisplayFunc(display);

                myinit();

                glutMainLoop();

                return 0;

}

Program 3.5 Contoh penggunaan glPushMatrix() dan glPopMatrix().

III. Percobaan

1. Untuk program 3.1, modifikasi parameter glTranslated, lalu amati perubahan tampilannya. Kombinasikan dengan memodifikasi parameter pada glRecti; amati perubahannya juga.
2. Untuk program 3.2, modifikasi parameter glScaled, lalu amati perubahan tampilannya. Kombinasikan dengan memodifikasi parameter pada glRecti; amati perubahannya juga.
3. Untuk program 3.3, modifikasi parameter glRotated, lalu amati perubahan tampilannya. Kombinasikan dengan memodifikasi parameter pada glRecti; amati perubahannya juga.
4. Untuk program 3.4, modifikasi parameter fungsi transformasi, lalu amati perubahan tampilannya. Amati juga efek urutan pemanggilan fungsi transformasi.
5. Berdasarkan program 3.4, buat sebuah program yang melakukan Scaling kotak kedua terhadap titik tengah kotak kedua, bukan terhadap titik pusat koordinat.
6. Untuk program 3.5, modifikasi transformasi dan push/pop matrix, lalu amati perubahan tampilannya.
7. Untuk program 3.5, hapus semua glPushMatrix() dan glPopMatrix, ganti dengan glLoadIdentity() sedemikian rupa sehingga tampilan program tetap sama. Posisi vertex-vertexnya harus tetap, sedangkan nilai transformasi boleh diubah.

IV. Tugas

1. Buat checker board (papan catur) miring sebagai berikut dengan menggunakan Transformasi.

2. Buat kotak berputar berikut menggunakan transformasi.

Gambar tidak perlu persis, asal cukup mirip.

3. Buat kotak berputar berikut menggunakan transformasi.

Gambar tidak harus persis, asal cukup mirip.

4. Buat variasi kotak berputar berikut menggunakan transformasi.

Gambar tidak harus persis, asal cukup mirip.

5. Buat variasi kotak berputar berikut menggunakan transformasi.

Gambar tidak harus persis, asal cukup mirip.