Tugas Tutorial (Ani Siti Anisyah 23213345)

1.   Program 1: Membuat Persegi

Pada latihan pertama, untuk membuat sebuah persegi dibutuhkan glVertex2f untuk menentukan titik dari masing-masing sudut. Berikut scipt yang digunakan:

glVertex2f(-0.7, -0.5); // kiribawah

glVertex2f(-0.5, 0.5); //kiri atas

glVertex2f(0.7, 0.5); //kanan atas

glVertex2f(0.5, -0.5); //kanan bawah

Seperti yang terlihat, urutan dari vertex tersebut merupakan koordinat dari titik dari tiap-tiap sudut. Dengan mengetahui posisi dari titik ini, maka kita bias memabut objek lain dengan mengatur letak dari vertex ini. Misal jika kita akan membjuat sebuah jajar genjang, maka kita perlu mengatur ulang koordinat X dari vertex kiri bawah dan kanan atas menjadi seperti ini:

glVertex2f(-0.7, -0.5); // kiribawah

glVertex2f(-0.5, 0.5); //kiri atas

glVertex2f(0.7, 0.5); //kanan atas

glVertex2f(0.5, -0.5); //kanan bawah

Dengan script ini maka dihasilkan objek berikut saat aplikasi di running.

2.   Program 2: Membuat Segitiga

Berbeda dengan membuat persegi yang menggunakan GL_POLYGON, maka untuk membuat segitiga bias digunakan GL_TRIANGLE yang akan menghasilkan seperti ini:

Dan seperti pada persegi sebelumnya, koordinat vertex akan dimulai dari kiri bawah:

glBegin(GL_TRIANGLES);

      glVertex2f(-0.5, -0.5);//kiri bawah

      glVertex2f(-0.8, 0.5);//kiri atas

      glVertex2f(0.2, 0.5);//kanan atas

Dengan begitu, jika ingin membentuk sebuah segitiga sama sisi maka script tersebut bias dirubah untuk mengatur vertex dari koordinat titik kiri bawah menjadi seperti ini:

3.   Program 3: Membuat Segidelapan

Untuk membuat objek segi delapan, maka digunakan Primitive POLYGON karena akan digunakan delapan vertex untuk membentuk segi delapan. Pada praktikum ini ditambahkan fungsi glColor3f yang akan mengisi warna dari objek yang dibuat.

glBegin(GL_POLYGON);

glColor3f(0, 1, 0);

glVertex2f(-0.5, -0.5);

glVertex2f(-0.75, 0);

glVertex2f(-0.5, 0.5);

glVertex2f(0, 0.75);

glVertex2f(0.5, 0.5);

glVertex2f(0.75, 0);

glVertex2f(0.5, -0.5);

glVertex2f(0,-0.75);

glEnd();

Script diatas akan menghasilkan tampilan sebagai berikut:

Pada penempatan warna ini digunakan mode RGB dimana nilai tertinggi yang biasanya 255 dipresentasikan dengan angka 1. Sehingga jika kita akan merubah menjadi warna merah dimana mode RGB-nya adalah 255,0,0 maka di OpenGL bias dirubah menjadi 1,0,0 seperti dibawah ini:

glBegin(GL_POLYGON);

glColor3f(1, 0, 0);

glVertex2f(-0.5, -0.5);

glVertex2f(-0.75, 0);

glVertex2f(-0.5, 0.5);

glVertex2f(0, 0.75);

glVertex2f(0.5, 0.5);

glVertex2f(0.75, 0);

glVertex2f(0.5, -0.5);

glVertex2f(0,-0.75);

glEnd();

Script ini akan menghasilkan tampilan sebagai berikut:

4.   Program 4: Membuat Segi delapan dengan paduan warna

Berbeda dari praktikum sebelumnya yang menampilkan objek segi delapan dengan satu warna, dalam OpenGL juga dimungkinkan untuk membuat objek dengan warna yang berbeda-beda tergantung dimana posisi warna tersebut diletakkan pada sebuah vertex seperti contoh dibawah ini:

glBegin(GL_POLYGON);

glColor3f(0, 1, 0);

glVertex2f(-0.5, -0.5);

glColor3f(0, 0, 1);

glVertex2f(-0.75, 0);

glColor3f(1, 0, 0);

glVertex2f(-0.5, 0.5);

glColor3f(0, 1, 0);

glVertex2f(0, 0.75);

glColor3f(0, 0, 1);

glVertex2f(0.5, 0.5);

glColor3f(1, 0, 0);

glVertex2f(0.75, 0);

glColor3f(0, 1, 0);

glVertex2f(0.5, -0.5);

glColor3f(0, 0, 1);

glVertex2f(0,-0.75);

glEnd();

Hasil script diatas akan menampilkan tampilan seperti ini:

Dengan mengatur perubahan warna, dapat kita ketahui pola pengaturan warna dari segi delapan tersebut seperti ini:

5.   Program 5: Membuat Objek 3D Segidelapan

Pada pembuatan objek 3D, tetap digunakan vertex sebagai pembentuknya. Bedanya kini koordinat vertex tidak lagi x,y melainkan x,y,z seperti script berikut:

glBegin(GL_POLYGON);

glColor3f(0, 1, 0);

glVertex3f(-0.5, -0.5, -1);

glColor3f(0, 0, 1);

glVertex3f(-0.75, 0, 1);

glColor3f(1, 0, 0);

glVertex3f(-0.5, 0.5, 1);

glColor3f(0, 1, 0);

glVertex3f(0, 0.75, 1);

glColor3f(0, 0, 1);

glVertex3f(0.5, 0.5, -1);

glColor3f(1, 0, 0);

glVertex3f(0.75, 0, -1);

glColor3f(0, 1, 0);

glVertex3f(0.5, -0.5, -1);

glColor3f(0, 0, 1);

glVertex3f(0,-0.75, -1);

glEnd();

Script diatas akan menampilkan hasil seperti di bawah ini:

Sepintas tidak terlihat perubahan dari project sebelumnya. Namun ketika posisi koordinat dari y dirubah, maka posisi pandang dari objek tersebut juga akan berubah. Berikut tampilan ketika koordinat:

6.   Program 6: Implementasi Callback Function

 

Pada contoh praktikum sebelumnya, ketika layar dirubah ukurannya, proporsi objek juga akan menyesuaikan dengan layar tersebut. Ini ditunjukkan dengan dengan tampilan berikut dengan mengambil script dari project program 1.

Untuk membuat proporsi dari objek tetap meskipun resolusi layar berubah inilah digunakan konsep Callback function tadi. Dimana dalam script ini dituliskan dalam prosedur resize() dan kemudian dipanggil oleh fungsi glutReshapeFunc(). Sehingga Hasil akan menjadi seperti ini:

7.   Program 7: Transformasi Objek

Pada praktikum ini dipelajari penerapan transformasi objek yang bersumbu pada sumbu z. Dimana nilai awal sumbu z adalah -1.

 

Dan dalam aplikasi ini digunakan callback keyboard yang berfungsi untuk menangani inputan dari user. Ini terlihat pada fungsi “myKeayBoard” dimana masukan diterima adalah “<”, ”>”, “,”, “.”. Dengan fungsi ini aan merubah sumbu z sehingga objek akan terlihat lebih dekat atau lebih jauh.

 

Fungsi callback keyboard itu sendiri dipanggil oleh glutKeyboardFunc(). Sedangkan pengaturan kecepatan rotasi ditentukan oleh callback Timer dengan variable rot yang bernilai float.

rot+=10;

glutPostRedisplay(); // request redisplay

glutTimerFunc(100, myTimeOut, 0); // request next timer event

8.   Program 8: Transformasi Objek (Translate dan Rotasi)

Pada program ini ditunjukkan transformasi objek dengan translate dan rotasi dengan menggunakan perintah berikut:

glTranslatef(0.0,0.0f,z_pos);

glRotatef(rot, 0, 1, 0);

Pada tampilan awal ini proyeksi kubus terlihat bagus karena menggunakan glEnable(GL_DEPTH_TEST); Pada contoh berikut ditunjukkan hasil ketika penggunaan GL_DEPTH_TEST tidak digunakan.

Terlihat dari gambar diatas bahwa sisi yang berwarna merah atau yang berhadapan dengan sisi warna hijau tidak terlihat. Selain itu perlu diperhatikan urutan transformasi. Seperti inilah tampilah ketika urutan yang digunakan adalah glRotatef baru kemudian glTranslatef.

9.   Program 9: Membuat Teksture pada Kubus

Pada program ini, dipelajari bagaimana menempatkan gambar sebagai teksture dari objek yang digunakan, pada contoh ini digunakan file test.bmp karena format ini yang didukung. Telah dicoba gambar lain dengan format jpg, gif dan png namun tidak sesuai dengan DIB file format.

Sedangkan untuk ukuran dari gambar bebas karena pada script ini gambar akan di resize untuk mengisi seluruh sisi kubus.

10.   Program 10: Melakukan Blending  Teksture dengan Warna pada Kubus

Perubahan yang dilakukan dari project sebelumnya terdapat pada prosisi glEnable(). DImana pada program 9 glEnable berisi “TEXTURE_2D” sedangkan untuk melakukan blending digunakan glEnable(GL_BLEND).

Pada bagian ini juga, kita dapat mengatur perubahan warna pada masing-masing sisi kubus dengan merubah penempatan script glColor3f() diatas masing-masing penempatan koordinat vertex seperti ini:

// Bottom Face

glColor3f(0.5,0.5,0.5); // Blending Color

glNormal3f( 0.0f,-1.0f, 0.0f);

glTexCoord2f(1.0f, 1.0f); glVertex3f(-1.0f, -1.0f, -1.0f);

glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, -1.0f, -1.0f);

glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f);

glTexCoord2f(1.0f, 0.0f); glVertex3f(-1.0f, -1.0f, 1.0f);

// Right face

glColor3f(0.5,0.3,1.0); // Blending Color

glNormal3f( 1.0f, 0.0f, 0.0f);

glTexCoord2f(1.0f, 0.0f); glVertex3f( 1.0f, -1.0f, -1.0f);

glTexCoord2f(1.0f, 1.0f); glVertex3f( 1.0f, 1.0f, -1.0f);

glTexCoord2f(0.0f, 1.0f); glVertex3f( 1.0f, 1.0f, 1.0f);

glTexCoord2f(0.0f, 0.0f); glVertex3f( 1.0f, -1.0f, 1.0f);

Dengan perubahan script tersebut maka bisa dilihat hasilnya sebagai berikut:

          Gambar tampak dalam                                                   Gambar tampak luar

Dari hasil diatas dapat dilihat bahwa warna pada masing-masing sisi dari kubus sudah memiliki gambar Texture yang telah diblending dengan berbagai macam warna. Gambar tampak dalam ditunjukkan agar terlihat bahwa sisi atas dan bawah dari kubus tersebut juga memiliki warnanya sendiri.

11.   Program 11: Mengatur Kadar Blending

Pada program ini bisa diatur untuk menentukan kadar transparansi dengan menambahkan script:

glColor4f(1.0f, 1.0f, 1.0f, 0.7);

Nilai “0.7” adalah intensitas dari transparansi yang diberikan. Semakin besar maka semakin kecil transparansi yang didapatkan. Selain itu, jika ingin merubah masing-masing warna dan transparansi dari masing-masing sisi, cukup rubah posisi dari glColor4f() pada masing-masing vertex sehingga hasil bias menjadi seperti ini:

12.   Program 12: Membuat Efek Kabut (FOG)

Pada program ini akan dijelaskan cara untuk membuat kabut. Untuk menggunakannya akan ditambahkan file gambar dalam format .bmp sebagai gambar kabut. Dalam hal contoh ini digunakan gambar berikut:

Gambar ini sendiri akan dilekatkan pada kubus yang telah diimplementasikan objek FOG dengan script berikut:

glEnable(GL_FOG);

Berikut ini adalah tampilan dari hasil compile script FOG:

Secara sekilas, implementasi FOG ini tidak terlalu terlihat. Namun apabila posisi koordinat z dirubah, dalam artian posisi objek dengan jarak pandang berubah maka akan semakin terlihat implementasi dari FOG ini sendiri.

FOG ini sendiri memiliki beberapa mode dalam menampilkannya. Nilai ini diisi di dalam variable fogMode[]. Untuk mengecek mode yang sedang digunakan apakah itu GL_EXP, GL_EXP2, GL_LINEAR maka pada tampilan ditekan huruf “f” atau “F”. Berikut adalam tampilan dari ketiga mode tersebut:

GL_EXP

GL_EXP2

GL_LINEAR

Secara keseluruhan, perbedaan untuk GL_EXP dengan GL_EXP2 tidak begitu signifikan. Berbeda dengan GL_LINEAR yang terlihat lebih redup/samar.

13.   Program 13: Membuat bentuk 3D dengan file txt

Pada program ini akan dibuat sebuah bangun 3D dengan bantuan gambar dan sebuah file .txt. Dengan menggunakan gambar berikut:

Untuk membuat ruang baru atau merubah bentuk dari ruang yang telah ada, maka cukup rubah file txt yang dimiliki. Berikut perubahan setelah dibuat dua buah ruang pada tampilan dengan dengan merubah script txt pada bagian “Right Hallway”.

14.   Program 14: Melakukan compile file .3ds

Dalam program ini akan dijalankan program yang bisa melakukan compile pada file berkekstensi 3ds. Disini objek dalam file 3ds akan mengikuti proses yang dijalankan pada file. Terlihat dalam console pemrograman C seperti ini:

Selanjutnya akan ditampilkan objek 3D yang telah decompile tadi ke dalam windows yang disediakan seperti ini:

15.   Program 15: Tidak ada dalam suplemen

16.   Program 16: Membuat Particle

Pada program ini, dipelajari cara membuat kumpulan partikel dengan bantuan image sehingga dengan satu image tapi bias ditampilkan dalam banyak jumlah.

17.   Program 17: Controlling objek

Pada program ini, pengguna bisa memasukkan nilai tersendiri. Pada dasarnya pada aplikasi ini memuat bantuan bagi pengguna untuk mengatur pencahayaan dan tata letak dari objek itu sendiri dengan tampilan yang sudah visual meskipun cara penambahan inputnya itu sendiri masih menggunakan mouse. Berikut adalah tampilan menu awal dari aplikasi ini:

Pada gambar diatas terdapat nilai-nilai dari material atau pencahayaan yang bias di gerakkan. Caranya dengan menlakukan klik pada nilai yang berwarna hijau kemudian gerakkan keatas untuk menambah nilai dan kebawah untuk menguranginya. Sedangkan untuk merubah menu, pengguna dengan OS Windows bias meng-klik kanan pada layar atau pengguna dapat memilih “s” sehingga tampilan akan seperti ini:

Sedangkan untuk merubah arah pandang dari objek tersebut dapat di klik baik pada “Screen View” atau pada “World View” hingga posisi objek berubah seperti ini:

Berikut ini adalah hasil perubahan kadar pencahayaan pada objek dengan pengaturan nilai GLFloat pada Kc dan Kl.

Namun untuk membuat project ini berhasil, dibutuhkan tambahan header dan juga file C++ yang akan membantu meng-compile script dari suplemen yang diberikan yaitu gml.h dan gml.cpp

Pada program ini dan program 18 tidak banyak dilakukan eksplorasi dikarenakan keterbatasan hardware yang dimiliki. Beberapa kali perubahan nilai pada spot_eksponen menyebabkan crash dan system me-restart.

18.   Program 18: Pengaturan posisi cahaya

Tidak berbeda jauh pada program nomor 17, pada program ini akan ditentukan darimana letak cahaya dating. Untuk menentukan letaknya bias menggunakan “Screen View” untuk merubah letak posisi dari pencahayaan terhadap objek seperti ini:

 

 

19.   Program 19: Animasi bendera

Pada program ini, sebuah teksture gambar akan dianimasikan bergerak. Dalam hal ini, seluruh sumbu baik x,y,z akan dianimasikan secara rotasi dengan nilai dari xrot,yrot dan zrot. Untuk sisi dari gambar tersebut, dibuat perbedaan pada bagian depan dan bagian belakang. Dengan script berikut, dapat diatur agar bagian belakang gambar akan terbuat dari garis-garis dengan teksture gambar tersebut.

glPolygonMode( GL_BACK, GL_FILL ); //Menentukan bagian belakang objek

glPolygonMode( GL_FRONT, GL_LINE ); // Menentukan bagian depan objek

 

 

 

 

Sedangkan script yang mengatur rotasi dari objek tersebut terdapat pada fungsi myDisplay() dibawah ini:

glTranslatef(0.0f,0.0f,-12.0f);

glRotatef(xrot,0.0f,1.0f,0.0f);

glRotatef(yrot,0.0f,0.0f,1.0f);

glRotatef(zrot,0.0f,0.0f,1.0f);

 

 

Posisi perubahan xrot,yrot ataupun zrot akan menyebabkan perubahan arah pergerakan dari animasi tersebut. Berikut adalah hasil implementasi animasi tersebut tanpa memutar sumbu X / xrot:

Sedangkan pengaturan animasinya sendiri diatur pada method init() dan kemudian diatur pada kondisi lainnya dengan menggunakan variable points[][][].

points[x][y][0]=float((x/5.0f)-4.5f);

points[x][y][1]=float((y/5.0f)-4.5f);

points[x][y][2]=float(sin((((x/5.0f)*40.0f)/360.0f)*3.141592654*2.0f));

Berikut ini adalah hasil ketika pada baris ketiga dari script diatas tidak digunakan:

Terima Kasih :)