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 kirakira 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 :
XYZST
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.

Tutorial OpenGL
Aila Gema Safitri
NIM : 23213314