LAPORAN MODUL I

PRAKTIKUM GRAFIKA KOMUTER

PENGENALAN GLUT

Disusun untuk Memenuhi Matakuliah Praktikum Grafika Komputer

Yang Dibimbing oleh Bapak Heru Wahyu Herwanto

Disusun Oleh :

Asnita Meydelia C. K. (13053368143)

PTI Offering E 2013

UNIVERSITAS NEGERI MALANG

FAKULTAS TEKNIK

JURUSAN TEKNIK ELEKTRO

PRODI PENDIDIKAN TEKNIK INFORMATIKA

FEBRUARI, 2015

PRAKTIKUM MODUL-1

PENGENALAN GLUT

A. TUJUAN

a. Memahami GLUT

b. Memahami dasar pemrograman GLUT

c. Memahami dasar menampilkan windows GLUT

B. DASAR TEORI

1. GLUT (OpenGL Utility Toolkit)

Pengertian dari OpenGL adalah suatu library grafis standard yang digunakan untuk

keperluan-keperluan pemrograman grafis. Selain OpenGL, library grafis yang

banyak digunakan adalah DirectX.

OpenGL bersifat Open-Source, multi-platform dan multi-language. Saat ini semua

bahasa pemrograman mendukung OpenGL. Dan OpenGL bisa bekerja dalam

lingkungan Windows, Unix, SGI, Linux, freeBSDdll.

Dikembangkan oleh Mark Kilgard. GLUT merupakan pengembangan dari

OpenGL dimana memiliki keunggulan sebagai berikut:

Mudah, portable window manager, menggunakan callback functions untuk

menambahkan interaksi dari user.

Didesain untuk aplikasi dengan level kecil hingga menengah.

Distribusi library bebas tetapi tidak open source.

Untuk sistem operasi Windows, library ini terdiri dari 3 files yaitu:

glut.h

glut32.lib

glut32.dll

2. Pemrograman berbasis event

GLUT pada dasarnya dibangun untuk menciptakan aplikasi grafis menggunakan

pemrograman yang bersifat prosedural. Di dalamnya terdapat fungsi main loop

yang diatur oleh GLUT dan looping yang terjadi dalam aplikasi bertujuan untuk

penanganan fungsi-fungsi callback sebagai input dari user seperti fungsi redraw,

mouse, keyboard, joystick, dll.

3. Instalasi GLUT pada windows dan aplikasi pengembangan Visual Studio

GLUT tidak secara otomatis dapat diaplikasikan karena membutuhkan beberapa file

tambahan antara lain glut.h, glut32.lib, glut32.dll yang harus disimpan pada lokasi

tertentu sesuai dengan aplikasi pengembangan yaitu Visual Studio 2010 Express.

C. SET UP PROJECT BARU

1. Buatlah project baru dengan visual studio dengan nama prak0

2. Buka windows explorer pada direktori project prak0 dan buatlah direktori baru di

dalamnya dengan nama include dan tempatkan file glut.h di dalamnya.

3. Kembali ke folder project dan copy-paste file glut32.lib dan glut32.dll ke folder

project prak0

4. Menciptakan file baru dengan nama cg-0.cpp.

5. Lakukan konfigurasi pada properties projek prak0

6. Pilih additional Include Directories Edit Klik pada ikon Folder

7. Cari folder include yang telah dibuat sebelumnya. Klik OK

Note : setiap modul file cpp baru yang dibuat harus selalu mensetting seperti di atas.

Mensetting glut ke dalam aplikasi visual basic secara keseluruhan

8. Buka file cg-0.cpp dan tulislah program di bawah ini.

#include #include void renderScene(void){ /*...*/ } void main(int argc, char **argv){ glutInit(&argc, argv); /*.....*/ //judul dari windows glutCreateWindow("Pemrograman Grafis GLUT"); //menampilkan sebuah objek yang ada di dalamnya glutDisplayFunc(renderScene); glutMainLoop(); }

9. Hasil

Penjelasan :

Tampilan diatas merupakan output dari syntax. Dapat dilihat, terdapat dua output

yaitu jendela windows dan jendela console. Obyek-obyek yang akan kita buat akan

tampil pada jendela windows. Jendela Windows keluar pada posisi di pojok kiri atas

karena pada fungsi renderScene tidak dideklarasikan posisi jendela windows

tersebut. Dalam fungsi renderScene diatas terdapat :

a) glutCreateWindow( ) berfungsi untuk membuat dan mengontrol jendela

windows yang akan ditampilkan obyek-obyeknya dengan nama yang di inginkan

yang terletak di dalam ( ). Pada program diatas nama judulnya adalah

Pemrograman Grafis GLUT.

b) glutDisplayFunc(renderScene); mempunyai fungsi utama untuk menampilkan

sebuah objek yang ada di dalamnya. Dimana objek tersebut di atur dan di control

dalam fungsi renderScene. Dan pada program tersebut renderScenenya masih

kosong maka akan tampil lembar kosong saja.

D. JOBSHEET PRAKTIKUM

Mengembangkan Program dari fungsi main

Source Code

#include #include void renderScene(void){ /*...*/ } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); //mengatur letak windows glutInitWindowSize(320,320); //mengatur ukuran windows glutCreateWindow("Asnita Meydelia C K"); glutDisplayFunc(renderScene); glutMainLoop(); }

Hasil

Penjelasan :

Pada syntax diatas telah dideklarasikan letak jendela windows yaitu (100,100). Disini

maksudnya posisi x=100 dan y=100. Sehingga tampak hasil output seperti diatas.

Kemudian, jendela windows tersebut juga sudah dideklarasikan dengan ukuran

(320,320).

Diatas terdapat syntax glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA);

dimana sintax ini bertujuan untuk mengatur dan mengontrol tampilan windows.

1. Menghilangkan statemen glutDisplayFunc(renderScene);

Source Code

#include #include void renderScene(void){ /*...*/ } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(320,320); glutCreateWindow("Asnita Meydelia C K"); /*glutDisplayFunc(renderScene);*/ glutMainLoop(); }

Hasil

Penjelasan :

Saat glutDisplayFunc(renderScene) dihilangkan, maka jendela window dan

console hanya muncul sekilas kemudian menutup secara tiba-tiba. terdapat pesan

error bahwa display callback functionnya tidak ada. Pesan error tersebut terlihat pada

consolenya. Dengan demikian dapat disimpulkan glutDisplayFunc merupakan

fungsi yang bertugas me-redrawn atau menggambar ulang window yang dibuat,

selain itu namanya render berarti bertugas melakukan eksekusi program dan

memprosesnya.

2. Mengubah parameter pada fungsi glutInitWindowPosition()

Source Code (parameter 0,0)

#include #include void renderScene(void){ /*...*/ } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(0,0); glutInitWindowSize(320,320); glutCreateWindow("Asnita Meydelia C K"); glutDisplayFunc(renderScene); glutMainLoop(); }

Hasil

Source Code (parameter 250, 250)

#include #include void renderScene(void){ /*...*/ } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(250,250); glutInitWindowSize(320,320); glutCreateWindow("Asnita Meydelia C K"); glutDisplayFunc(renderScene); glutMainLoop(); }

Hasil

Penjelasan :

glutInitWindowPosition(x,y) merupakan fungsi atau property dari GLUT.

Yang berfungsi sebagai pengatur letak posisi outputan windows di GLUT. Di mana

formatnya adalah menggunakan format (x,y) seperti pada matematika. Jika nilai x

dan y tersebut di ubah-ubah, maka jendela windows yang muncul posisinya juga

akan berubah-ubah.

Secara default tanpa dideklarasikan glutInitWindowPosition(x,y) maka

windows akan berada pada posisi pojok kiri atas, karena pojok kiri atas merupakan

sumber koordinat (0,) dimana x = 0 dan y = 0 dengan satuan pixels.

Pada program diatas, saya edit glutInitWindowPosition-nya menjadi (250,250)

sehingga letak Windows terletak pada titik koordinat X = 250 dan Y = 250. Maka

tampilan yang dihasilkan seperti gambar diatas.

Agar lebih mudahnya, seperti ini sistem koordinat yang digunakan disini

3. Mengembangkan fungsi renderScene

Source Code

#include #include void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); //menyimpan informasi warna dan pixel

glBegin(GL_TRIANGLES); //membuat sebuah objek segitiga glVertex3f(-0.5,-0.5, 0.0); //a glVertex3f(0.5,0.0, 0.0); //b glVertex3f(0.0,0.5, 0.0); //c glEnd();//mengakhiri pembuatan objek glFlush();//membersihkan memori dari perintah-perintah sebelumnya } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(250,250); //Mengatur posisi windows glutInitWindowSize(320,320); //mengatur panjang lebar windows

glutCreateWindow("Asnita Meydelia C K"); glutDisplayFunc(renderScene); //menampilkan sebuah objek

glutMainLoop(); }

Hasil

Penjelasan :

Syntax diatas untuk membuat sebuah segitiga sembarang. Sytax untuk menampilkan

segitiga tersebut ditulis pada fungsi renderScene. Untuk membuat segitiga perlu

dideklarasikan terlebih dahulu glBegin(GL_TRIANGLES);

Kemudian, melakukan pendeklarasian titik koordinat. Titik a pada koordinat (-0,5;-

0,5), titik b (0,5;0,0) dan titik c (0,0;0.5)

glVertex3f(-0.5,-0.5, 0.0); //a glVertex3f(0.5,0.0, 0.0); //b glVertex3f(0.0,0.5, 0.0); //c

4. Membuat segitiga siku-siku di 5 Posisi

Source Code

#include #include void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); //Segitiga Siku-siku Pojok Kanan Atas glVertex3f(1.0,1.0,0.0); //a glVertex3f(0.5,1.0,0.0); //b glVertex3f(1.0,0.5,0.0); //c //Segitiga Siku-siku Pojok Kiri Atas glVertex3f(-1.0,1.0,0.0); //a glVertex3f(-0.5,1.0,0.0); //b glVertex3f(-1.0,0.5,0.0); //c //Segitiga Siku-siku Pojok Kanan bawah glVertex3f(1.0,-1.0,0.0); //a glVertex3f(0.5,-1.0,0.0); //b glVertex3f(1.0,-0.5,0.0); //c //Segitiga Siku-siku Pojok Kiri Bawah glVertex3f(-1.0,-1.0,0.0); //a glVertex3f(-0.5,-1.0,0.0); //b glVertex3f(-1.0,-0.5,0.0); //c //Segitiga siku-siku di Tengah glVertex3f(-0.2,-0.2,0.0); //a glVertex3f(-0.2,0.2,0.0); //b glVertex3f(0.2,-0.2,0.0); //c glEnd(); glFlush(); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(250,250); glutInitWindowSize(320,320); glutCreateWindow("Asnita Meydelia C K"); glutDisplayFunc(renderScene); glutMainLoop(); }

Hasil

Penjelasan :

Program ini hampir sama dengan program sebelumnya. Hanya saja pada program ini

menggambar 5 buah segitiga dalam satu jendela windows. Pada dasarnya untuk

membuat sebuh segitiga menggunkan keyword GL_TRIANGLES. Cara kerja

TRIANGLES adalah menghubungkan 3 buah titik dimana tiga buah titik yang

dihubungkan tersebut akan diblok dengan warna putih dan membentuk bangun datar

segitiga. Untuk membuat lima buah segitiga maka kita juga harus membuat 5 buah

glVertex3f . seperti sudah diterapkan pada sintax diatas. Dapat dilihat dalam

tampilan yang dihasilkan, kelima segitiga tersebut berbentuk siku-siku yang 4

diantaranya berada pada posisi pojok jendela windows dan yang satunya lagi berada

pada tengah-tengah windows. Posisi dari kelima segitiga tersebut dipengaruhi oleh

titik-titik koordinatnya, sbb :

1) Segitiga yang berada pada pojok kanan atas memiliki 3 titik koordinat yaitu :

a (1,1,0), b (0.5,1,0) dan c (1,0.5,0)

2) Segitiga yang berada pada pojok kiri atas memiliki 3 titik koordinat yaitu :

a (-1,1,0), b (-0.5,1,0) dan c (-1,0.5,0)

3) Segitiga yang berada pada pojok kanan bawah memiliki 3 titik koordinat yaitu :

a (1,-1,0), b (0.5,-1,0) dan c (1,-0.5,0)

4) Segitiga yang berada pada pojok kiri bawah memiliki 3 titik koordinat yaitu :

a (-1,-1,0), b (-0.5,-1,0) dan c (-1,-0.5,0)

5) Segitiga yang berada pada pojok kanan bawah memiliki 3 titik koordinat yaitu :

a (-2,-2,0), b (-2,2,0) dan c (2,-2,0)

5. Merubah dimensi window aplikasi menjadi 640 x 640 (w x h).

Source Code

#include #include void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); //Segitiga Siku-siku Pojok Kanan Atas glVertex3f(1.0,1.0,0.0); //a glVertex3f(0.5,1.0,0.0); //b glVertex3f(1.0,0.5,0.0); //c //Segitiga Siku-siku Pojok Kiri Atas glVertex3f(-1.0,1.0,0.0); //a glVertex3f(-0.5,1.0,0.0); //b glVertex3f(-1.0,0.5,0.0); //c

//Segitiga Siku-siku Pojok Kanan bawah glVertex3f(1.0,-1.0,0.0); //a glVertex3f(0.5,-1.0,0.0); //b glVertex3f(1.0,-0.5,0.0); //c //Segitiga Siku-siku Pojok Kiri Bawah glVertex3f(-1.0,-1.0,0.0); //a glVertex3f(-0.5,-1.0,0.0); //b glVertex3f(-1.0,-0.5,0.0); //c //Segitiga siku-siku di Tengah glVertex3f(-0.2,-0.2,0.0); //a glVertex3f(-0.2,0.2,0.0); //b glVertex3f(0.2,-0.2,0.0); //c glEnd(); glFlush(); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(640,640); glutCreateWindow("Asnita Meydelia C K"); glutDisplayFunc(renderScene); glutMainLoop(); }

Hasil

Ukuran 320x320 Ukuran 640x640

Penjelasan

Program ini pada dasarnya hampir sama dengan sebelumnya, hanya saja pada

program ini ukuran windows-nya diubah menjadi 640x640 (w x h). Pada program

sebelumnya, ukuran windows hanya 320x320 jadi jendela windows yang dihasilkan

kecil. Kemudian ketika ukurannya diubah menjadi 640x640, jendela windows yang

ditampilkan 2 kali lebih besar dari semula. Ukuran obyek yang ada didalamnya juga

menjadi lebih besar dari ukuran semula.

6. Mengenal Ortho2D

Source Code

#include #include void renderScene(void) { //menyimpan informasi warna dan pixel glClear(GL_COLOR_BUFFER_BIT); //ukuran Objek glPointSize(10); //membuat sebuah objek primitif -> berupa segitiga(Triangles) glBegin(GL_TRIANGLES); //membuat sebuah vertex sumbu (x,y,z) glVertex3f(-10., 10., 0.0); glVertex3f(-10., 0.0, 0.0); glVertex3f(0.0, 0.0, 0.0); glEnd(); //mengakhiri pembuatan objek primitif //membersihkan memori dari perintah-perintah sebelumnya glFlush(); } void main(int argc, char **argv) { glutInit(&argc, argv); //paket GLUT untuk mengatur tampilan glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); //Mengatur posisi windows glutInitWindowPosition(250, 250); //mengatur panjang lebar windows glutInitWindowSize(320, 320); gluOrtho2D(-50.0, 50.0, -50.0, 50.0); //Membuat windows, sekaligus judulnya glutCreateWindow("GLUT : Praktikum Grafika"); glutDisplayFunc(renderScene); //menampilkan sebuah objek glutMainLoop(); }

Hasil

Penjelasan

gluOrtho2d adalah suatu fungsi untuk mengatur proyeksi hasil eksekusi dan

mendefinisikan besarnya sistem koordinat dengan urutan kiri-kanan dan bawah-atas.

Mengubah sistem koordinat yang digunakan pada window aplikasi atau fungsi yang

berguna untuk mengatur ulang sistem koordinat yang digunakan pada window.

Pada syntax diatas, gluOrtho2d mempunyai batas maksimal kiri -50, kanan 50,

bawah -50 dan atas 50.

Saat syntax diubah menjadi

glVertex3f(50., -50., 0.0);

glVertex3f(0.0, -50.0, 0.0);

glVertex3f(0.0, 0.0, 0.0);

Tampilan yang dihasilkan :

Dari perbedaan antara output yang dihasilkan setelah sytax dirubah dan syntax yang

belum dirubah diatas, dapat disimpulkan bahwa terdapat 3 buah titik yang saling

menghubungkan titik pertama A(0.0) berada di tengah-tengah, titik kedua B(50,-50)

berada di pojok kiri bawah sedangkan titik ketiga C(0,-50) berada di tengah bawah.

Ketiga titik tersebut saling dihubungkan dan membentuk segitiga.

E. TUGAS ASISTENSI

Buatlah sebuah aplikasi yang menampilkan segitiga siku-siku, segitiga sembarang, sama

kaki, dan sama sisi dengan koordinat yang berbeda. Dan window aplikasi berukuran :

panjang = 3 digit NIM

lebar = 3 digit NIM

judul window = Nama lengkap

Source Code

#include #include void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glBegin(GL_TRIANGLES); //Segitiga Sembarang glVertex3f(-0.2,-0.2, 0.0); //a glVertex3f(0.2,0.0, 0.0); //b glVertex3f(0.0,0.2, 0.0); //c

//Segitiga Sama Kaki glVertex3f(0.5,-0.5,0.0); //a glVertex3f(0.1,-0.8,0.0); //b glVertex3f(0.9,-0.8,0.0); //c glColor3f(0,0,1); //Segitiga Sama Sisi glVertex3f(-0.65,0.5,0.0); //a glVertex3f(-0.15,0.5,0.0); //b glVertex3f(-0.4,0.9,0.0); //c glColor3f(0,1,1); //Segitiga siku-siku glVertex3f(-0.8,-0.8,0.0); //a glVertex3f(-0.6,-0.6,0.0); //b glVertex3f(-0.6,-0.8,0.0); //c glColor3f(1,0,1); glEnd(); glFlush(); } void main (int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(240,240); glutInitWindowSize(143,143); glutCreateWindow("Asnita Meydelia C K"); glutDisplayFunc(renderScene); glutMainLoop(); }

Hasil

Penjelasan :

Pada progam ini digunakan untuk menampilkan 4 buah segitiga, yaitu segitiga siku-siku,

sembarang, sama kaki, dan segitiga sama sisi. Untuk membedakan, keempat segitiga

tersebut saya beri warna yang masing-masing berbeda. Dapat dilihat pada tampilan

diatas, segitiga sama sisi yang saya buat berwarna biru, segitiga sembarang berwana

putih, segitiga siku-siku saya beri warna tosca dan segitiga sama kaki saya beri warna

merah. Jendela windows yang tampilkan berukuran 143x143 karena nim saya adalah

130533608143, 3 digit terakhirnya adalah 143. Titik koordinat segitiga-segitiga diatas

yaitu :

//Segitiga Sembarang glVertex3f(-0.2,-0.2, 0.0); //a glVertex3f(0.2,0.0, 0.0); //b glVertex3f(0.0,0.2, 0.0); //c

Untuk segitiga sembarang diatas, saya tidak menambahkan syntax warna. Sehingga

warna yang dihasilkan adalah warna putih.

//Segitiga Sama Kaki glVertex3f(0.5,-0.5,0.0); //a glVertex3f(0.1,-0.8,0.0); //b glVertex3f(0.9,-0.8,0.0); //c glColor3f(0,0,1);

Segitiga sama kaki diatas, saya menambahkan syntax warna yaitu glColor3f(0,0,1);.

Sehingga warna yang dihasilkan adalah warna merah.

//Segitiga Sama Sisi glVertex3f(-0.65,0.5,0.0); //a glVertex3f(-0.15,0.5,0.0); //b glVertex3f(-0.4,0.9,0.0); //c glColor3f(0,1,1);

Kemudian pada segitiga sama sisi diatas, saya menambahkan syntax warna yaitu

glColor3f(0,1,1);. Sehingga warna yang dihasilkan adalah warna biru.

//Segitiga siku-siku glVertex3f(-0.8,-0.8,0.0); //a glVertex3f(-0.6,-0.6,0.0); //b glVertex3f(-0.6,-0.8,0.0); //c glColor3f(1,0,1);

Pada segitiga siku-siku diatas, saya menambahkan syntax warna yaitu

glColor3f(1,0,1);. Sehingga warna yang dihasilkan adalah warna tosca.

F. KESIMPULAN

Pada GLUT terdapat fungsi untuk mengatur proyeksi hasil eksekusi dan

mendefinisikan besarnya sistem koordinat dengan urutan kiri-kanan dan bawah-atas

Skala letak objek atau vertex3f pada GLUT ini akan mengikuti besar dari

windowsnya.

Sistem koordinat yang diterapkan bagi window aplikasi ialah posisi (0, 0) dimulai dari

sudut kiri atas layar monitor.

Untuk system default windows outputannya adalah titik pusat (tengah) (0,0)

sedangkan titik maksimalnya adalah 1 untuk kanan, kiri, atas dan bawah. 1 untuk batas

maksimal kanan dan atas, -1 untuk batas maksimal kiri dan bawah.

glutDisplayFunc merupakan fungsi yang bertugas me-redrawn atau menggambar

ulang window yang dibuat, selain itu namanya render berarti bertugas melakukan

eksekusi program dan memprosesnya

G. DAFTAR RUJUKAN

Asisten Praktikum. 2015. Modul 1 Pengenalan GLUT. Malang : Universitas Negeri

Malang.