Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

TUTORIAL OPEN GL

TUGAS KOMPUTER GRAFIS DAN PEMROGRAMAN (GPU)

Aila Gema Safitri (23213314)

Setting openGL dengan GLUT pada Visual Studio 2012 Ultimate

1. Download library GLUT pada www.opengl.org

2. Ekstrak file GLUT, maka akan terdapat beberapa folder yaitu include, lib, dan dll.

3. Copy file GLAUX.H dan glut.h yang ada didalam folder include pada GLUT ke folder

include pada Visual Studio 2012 . Jika kita install di drive C maka program Visual Studio

terdapat pada C:\Program Files\ Visual Studio 2012 Ultimate \VC\include.

4. Copy file .lib yaitu GLAUX.LIB, GLU32.LIB, glut32.lib, OPENGL32.LIB yang

terdapat di folder library GLUT ke folder lib pada Visual Studio 2012. Jika kita install di

drive C maka program Visual Studio terdapat pada C:\Program Files\ Visual Studio 2012

Ultimate \VC\lib.

5. Copy file .dll yaitu glu32.dll, glut32.dll, glut.dll, opengl32.dll yang ada di folder dll

pada GLUT ke dalam C:\Windows\System32 .

6. Buat project pada Visual Studio 2012 . File – new – project. Maka akan muncul wizard

seperti pada gambar 1. Beri nama project dan simpan di lokasi yang di inginkan. Lalu

klik OK.

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Gambar 1.

Pilih Application Settings - dengan Application type Console application - Empty project –

Finish.

Gambar 2

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

7. Pada Solution Explorer akan terlihat project yang baru kita buat. Klik kanan project –

properties , maka akan muncul wizard seperti pada gambar 3.

Gambar 3

Pilih Configuration properties C/C++ - General – Additional Include Directories.

Tambahkan directory menuju folder include dari Visual Studio 2012. Folder include

tersebut terdapat file-file .h yang telah kita copy dari GLUT (lihat langkah 3).

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Gambar 4

8. Kemudian pada Linker – General – Additional Library Directories , tambahkan directory

menuju folder lib dari Visual Studio 2012. Pada folder lib tersebut terdapat file-file .lib

yang telah kita copy dari GLUT (lihat langkah 4).

Gambar 5

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

9. Pada sub-menu Linker, pilih Input – Additional Dependencies . Tambahkan (ketik)

nama-nama file .lib sesuai dengan nama-nama file .lib yang berada di folder lib pada

GLUT seperti pada gambar 6. Klik Ok.

Gambar 6

Dengan demikian, project yang kita buat, sudah terhubung dengan file-file header dan

library GLUT.

10. Kembali ke project, buat sebuah file di folder Source File (klik kanan) – add – new item.

Maka akan muncul wizard seperti pada gambar 7. Pastikan memilih file dengan extension

.cpp.

Gambar 7

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

11. Pada halaman file Source.cpp ketik kode program yang akan di jalankan. Jika ingin

memastikan apakah library GLUT sudah dapat digunakan, maka kita dapat mengambil

salah satu contoh program pemakaian fungsi yang ada pada library GLUT. Misal adalah

membuat polygon segi delapan dengan warna. Contoh list kode programnya sebagai

berikut :

Gambar 8

Setelah itu coba jalankan program dengan melakukan Start Debugging (F5). Maka

hasilnya adalah seperti pada gambar 9.

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Gambar 9

Tutorial OpenGL

Program 1. Hello World dan Tampilan Persegi

Untuk menggambar segiempat, digunakan fungsi glBegin(GL_POLYGON). Dengan koordinat titik-titiknya

ditentukan oleh parameter fungsi glVertex2f(). Pada kode, untuk membentuk 4 titik sudut, adalah sebagai

berikut :

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

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

glVertex2f(0.5, 0.5); // koordinat titik kanan atas

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

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Program 2. Segitiga

Program 2 membuat segitiga dimodelkan dengan menggunakan komponen dasar GL_ TRIANGLES dengan

koordinat titik adalah

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

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

glVertex2f(0.5, 0.5); // titik kanan atas

Untuk membuat setting warna , digunakan fungsi glColor3f (1.0, 0.0, 1.0). Artinya :

3 : sumbu koordinat x,y,z

f : tipe data float

v : vector dari sumbu x,y,z

Program 3. Polygon

Program 3 membuat polygon dimodelkan dengan menggunakan komponen dasar GL_ POLYGON dengan

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

koordinat titik terdiri dari 8 yaitu

glVertex2f(-0.5, -0.8);

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

Contoh Program untuk menggambar jenis OpenGL Geometric Primitive yang lain.

Gambar diatas adalah membuat geometri primitive open gl model QUAD dengan koordinat titik adalah :

glBegin(GL_QUADS);

glColor3f(1,1,0);

glVertex2f(-0.5, 0.5);

glVertex2f(-0.85, -0.5);

glVertex2f(0.5, 0);

glVertex2f(0.5, 0.5);

dan settingan warna kuning yaitu glColor3f(1, 1, 0)

Program 4. Polygon Segi Delapan dengan warna

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Gambar diatas adalah Polygon Segi Delapan dengan kombinasi warna pada tiap vertexnya.

glBegin(GL_POLYGON);

glColor3f(0, 1, 0); // pengaturan warna

glVertex2f(-0.5, -0.5); // koordinat x,y

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

Program 5. Dimensional Vertex

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Untuk memodelkan obyek dalam 3D kita perlu memberi properti koordinat z dengan

menggunakan fungsi glVertex3f(). Sehingga koordinat polygon adalah :

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

Program 6. ReShape Callback Function

Pada program 6 diatas, agar gambar tetap berada pada proporsi yang tepat, maka perlu digunakan callback

reshape yang dipanggil setiap kali window berubah ukuran. Untuk itu perlu lakukan dua langkah berikut:

- membuat fungsi yang akan dipanggil saat rehape, di sini fungsinya adalah void reshape(int width, int height)

- melakukan registrasi callback reshape dengan fungsi glutReshapeFunc(.)

glViewport(x_left, x_top, x_right, y_right) bertanggung jawab untuk melakukan setting viewport dari suatu

window, yaitu bagian dari window yang digunakan untuk menggambar.

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Program 7. Proyeksi Persfektif

Program 7 adalah Transformasi obyek menggunakan operasi transformasi (glRotate, glTranslate) dengan didahului

proses merubah status OpenGL ke mode proyeksi dengan perintah glMatrixMode(GL_MODELVIEW). Terdapat

juga fungsi callback keyboard untuk menangani input keyboard. Obyek ditranslasikan pada sumbu z dengan

menggunakan tombol keyboard “,” dan “.”.Callback timer digunakan untuk timer yang di sini digunakan untuk

animasi berputar.

Program 8. Urutan Transformasi

Program 8 menunjukkan tentang urutan transformasi yang tidak bersifat komutatif, artinya, urutan transformasi

juga sangat berpengaruh pada hasilnya. Pada program 8, urutan transformasi adalah “translasi baru dirotasi”.

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Selain itu terdapat konsep Depth Buffer. Pada program 8, mode GLUT_DEPTH dan perintah

glEnable(GL_DEPTH_TEST) harus dikomen, agar objek kubus bisa di render. Pada program di atas mode display

menggunakan tipe GLUT_DOUBLE yang diikuti oleh glutSwapBuffers(). Hal ini merupakan teknik yang disebut

Double Buffer untuk menghindari flicker yaitu objek berkedip.

Tugas : Jika fungsi transformasi di tukar urutannya, yaitu rotasi baru translasi (bergeser) maka

tampilan menjadi seperti dibawah :

Objek akan melakukan rotasi sambil melakukan translasi dengan cara menggeser posisi.

Note : jika komen GLUT_DEPTH dan glEnable(GL_DEPTH_TEST) dihapus, maka objek menjadi tidak tampak. Teknik

ini merupakan salah satu algoritma HIDDEN SURFACE REMOVAL. Menyembunyikan objek sehingga tidak tampak di

permukaan.

Program 9. Texture Mapping dan Blending

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Program 9 adalah contoh penggunaan texture mapping pada sebuah image. Prosedur int LoadGLTexture()

melakukan proses load image bmp ke memory dalam bentuk struktur data AUX_RGBImageRec*. Kemudian image

di konversi menjadi tiga buah texture dalam OpenGL dengan metoda filter pembesaran texture yang berbeda.

Metoda itu adalah metoda Nearest Filtered Texture, metoda Linear Interpolation Texture dan metoda

Mipmapped Texture.

Filter pembesaran texture berpengaruh pada bagaimana OpenGL melakukan proses rasterisasi texture saat texture

ditampilkan pada jumlah pixel yang lebih besar atau lebih kecil dari ukuran sebenarnya. Pada Nearest Filtered

Texture, texture yang ditampilkan merupakan hasil pemilihan nilai pixel pada posisi terdekat. Sedangkan dengan

Linear Interpolation Texture (LPT), texture yang ditampilkan merupakan hasil interpolasi linear antara pixel-pixel

disekitarnya. Pada Mipmapped Texture(MPT), interpolasi linear dilakukan pada awal secara offline sehingga

dihasilkan banyak texture dengan ukuran dari yang kecil hingga yang besar. LPT dan MPT akan menghasilkan kira-

kira hasil yang sama dengan LPT akan sedikit lebih lambat dari MPT walaupun memori yang digunakan jauh lebih

kecil.

Program 10. Ubah warna blending pada tiap surface box

Program 10 adalah proses pencampuran lebih dari satu texture disebut dengan istilah blending, yaitu

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

memblending texture dengan warna.

Fragment program 10 memperlihatkan perubahan yang terjadi pada void mydisplay() jika kita ingin melakukan

pencampuran antara texture dan warna. Fungsi untuk melakukan blending yang diaktifkan adalah glEnable

(GL_BLEND). Sedangkan untuk memberi warna pada tiap-tiap permukaan kubus, maka pada tiap sisi kubus, diberi

settingan untuk warna. Contoh :

// Front Face

glColor3f (1.0, 1.0, 0.0); // setting warna untuk sisi depan

glNormal3f( 0.0f, 0.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);

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

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

Program 11. Transparency

Program 11 menampilkan perubahan yang terjadi pada void init() dan void mydisplay() pada Program 10 untuk

menghasilkan suatu box tranparan.

Hal ini dicapai dengan menggunakan warna blending putih (full-brightness) dengan transparansi 50% :

glColor4f(1.0f, 1.0f, 1.0f, 0.5);

glBlendFunc(GL_SRC_ALPHA,GL_ONE);

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Tugas : Mengubah salah satu bagian box menjadi transparan, dengan cara mengubah fungsi init dan mydisplay.

Sehingga tampilan menjadi seperti di atas.

Program 12. Fog

Program 12 adalah tentang fog.

Untuk melakukan inisialisasi fog digunakan fungsi glEnable(GL_FOG).

Untuk menentukan mode fog dengan variabel array gunakan fungsi

fogModeglFogi(GL_FOG_MODE,fogMode[fogfilter]).Dimana variabel fogMode diinisialisasi dengan tiga nilai, yaitu

GL_EXP, GL_EXP2, dan GL_LINEAR.

Untuk menentukan warna dari fog, gunakan fungsi glFogfv(GL_FOG_COLOR, fogcolor).

Untuk menentukan seberapa padat kabut, gunakan fungsi glFogf(GL_FOG_DENSITY, 0.35f). Semakin tinggi nilainya,

semakin pekat kabut yang dihasilkan.

Untuk memberikan informasi kepada OpenGL tentang bagaimana proses rendering ingin dilakukan, gunakan fungsi

glHint (GL_FOG_HINT, GL_DONT_CARE);

Untuk menentukan jarak dari kamera ketika fog mulai, gunakan fungsi glFogf(GL_FOG_START, 1.0f).

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Untuk menentukan sejauh mana kabut masih berefek, gunakan fungsi glFogf(GL_FOG_END, 5.0f) .

Tugas : Ubah variable Fog pada fungsi init, untuk melihat pengaruhnya.

Pada ke dua gambar diatas, nilai variable FOG diubah, untuk melihat pengaruh fog pada gambar.

Berikut perubahan pada fungsi init.

// FOG

glClearColor(0.5f,0.5f,0.5f,1.0f);

glFogi(GL_FOG_MODE, fogMode[GL_EXP2]);

glFogfv(GL_FOG_COLOR, fogColor); // Set Fog Color

glFogf(GL_FOG_DENSITY, 0.20f);

glHint(GL_FOG_HINT, GL_NICEST);

glFogf(GL_FOG_START, 100.0f);

glFogf(GL_FOG_END, 500.0f);

• Fog Mode diubah menjadi GL_EXP2 yaitu fog standar yang dirender pada keseluruhan screen.

• Fog density diubah , pada gambar bagian kiri besarnya density adalah 0.70, sementara pada bagian kanan

adalah 0.2. Tampak perbedaan tingkat ketebalan fog antara ke dua gambar.

• The line glHint (GL_FOG_HINT, GL_DONT_CARE); memberikan informasi kepada OpenGL tentang

bagaimana proses rendering ingin dilakukan. Pada contoh misalnya GL_NICEST yang berarti perhitungan

fog dilakukan per-pixel..

• glFogf(GL_FOG_START, 100.0f); jarak dari kamera ketika fog mulai adalah 100.

• glFogf(GL_FOG_END, 500.0f); efek kabut sejauh 500. Program 13. Objek Komplek

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Pada Program 13 kita membuat file model 3D dengan format kita sendiri. File format kita

adalah file .txt. Tugas. Mengubah Bentuk Objek di file .txt pada program 13

Pada program 13, tampilan objek tidak memiliki atap (ceiling). Karena pada file .txt, yang diubah adalah vertex

pada bagian ceiling dibuat sama dengan vertex bagian bawah (floor). Yaitu :

// Floor 1

-5.0 0.0 -5.0 0.0 9.0

-5.0 0.0 5.0 0.0 0.0

5.0 0.0 5.0 6.0 0.0

-5.0 0.0 -5.0 0.0 9.0

5.0 0.0 -5.0 6.0 9.0

5.0 0.0 5.0 6.0 0.0

// Ceiling 1

-5.0 0.0 -5.0 0.0 9.0

-5.0 0.0 5.0 0.0 0.0

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

5.0 0.0 5.0 6.0 0.0

-5.0 0.0 -5.0 0.0 9.0

5.0 0.0 -5.0 6.0 9.0

5.0 0.0 5.0 6.0 0.0

Format baris vertex adalah sbb :

X Y Z S T

dengan X,Y, Z adalah posisi vertex sedangkan S, T adalah pixel texture yang

bersesuaian.

Program 14. Load file .3ds (Animasi Pesawat)

Program 14 memberi ilustrasi tentang bagaimana suatu file .3ds dibaca dan dirender. Di dalam file .3ds, terdapat

banyak blok kode yang disebut chunk. Pada tiap chunk, berisi nama objek, koordinat vektor x,y,z, mapping

koordinat, list polygon, warna dan animasi objek.

Cara kerja chunk, adalah linier. Kode dieksekusi secara berurutan. Jadi antar chunk saling berhubungan. Contoh

jika ingin membaca blok Vertices List, maka kita harus membaca blok utama (main chunk) terlebih dahulu, lalu 3D

Editor Chunk, Object blok, akhirnya Triangular Object Mesh Chunk.

Pada program 14, proses rendering objek dilakukan sesuai dengan urutan kode di tiap blok pada file .3ds. Urutan

proses rendering pada file .3ds secara pseudocode dapat dilihat sebagai berikut :

chunkID : 4d4d

chunklength : 5540

...................

list vertices x, y, z

...................

mapping list u,v

.....................

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

chunID

chunkLength

......................

polygon point

face flags

...................

chunID

chunkLength

Program 16. Particle

Program 16 memberi ilustrasi tentang bagaimana sistem partikel bekerja. Setiap partikel memiliki beberapa status yaitu posisi, kecepatan, warna, umur dan kecepatan penurunan umur serta indikator aktif (Particle.h). Setiap partikel memiliki prosedur pembuatan, inisialisasi dan prosedur evolusi selama hidupnya. Proses ini bisa dilihat di fungsi mydisplay void mydisplay(void)

{

glClear(GL_COLOR_BUFFER_BIT); //glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); glLoadIdentity();

glRotatef(50.0,1.0,0.0,0.0); // show scene from top front

glBindTexture(GL_TEXTURE_2D,texture[0]); // untuk memilih tekstur for (int i=0;i<=maxparticle;i++) // looping particle {

if(particle[i].ypos<0.0) particle[i].lifetime=0.0; // inisialisasi partikel

if((particle[i].active==true) && (particle[i].lifetime>0.0)) //syarat partikel

aktif adalah true dan umur > 0

{

glColor3f(particle[i].r,particle[i].g,particle[i].b);// memberi warna partikel

glBegin(GL_TRIANGLE_STRIP); // bentuk awal partikel glTexCoord2f(0.0,1.0); glVertex3f(particle[i].xpos+0.005,

particle[i].ypos+0.005, particle[i].zpos+0.0); // koordinat kanan atas

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

glTexCoord2f(0.0,0.0); glVertex3f(particle[i].xpos-0.005,

particle[i].ypos+0.005, particle[i].zpos+0.0); // koordinat kiri atas

glTexCoord2f(1.0,1.0); glVertex3f(particle[i].xpos+0.005, particle[i].ypos-0.005, particle[i].zpos+0.0); //koordinat kanan bawah

glTexCoord2f(1.0,0.0); glVertex3f(particle[i].xpos-0.005,

particle[i].ypos-0.005, particle[i].zpos+0.0); //koordinat kiri bawah

glEnd();

} else CreateParticle(i);

}

EvolveParticle();

glFlush();

glutSwapBuffers();

}

Program 17. Lighting

Program 17 memberi contoh bagaimana efek sumber cahaya dan material dari obyek. Fungsi void

spotlight_display untuk mengatur posisi material terhadap sumber cahaya Dan fungsi void lighting_display untuk mengatur koordinat sumber cahaya

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Program 18. Lighting Position

Program 18 contoh tentang posisi sumber cahaya berdasarkan posisi kamera. Program 19. Vertex Animation

Tutorial OpenGL

Aila Gema Safitri

NIM : 23213314

Program 19 memberi ilustrasi tentang bagaimana membuat suatu

bendera berkibar. Program 19 melakukan ilusi berkibar dengan merubah posisi relatif

suatu vertex terhadap koordinat bendanya.