BAB I PENGENALAN OPENGL

BAB I PENGENALAN OPENGL A. TUJUAN a. Mampu melakukan konfigurasi Library opengl di Visual Studio 2008 b. Mampu memahami inisialisasi fungsi opengl c. Mampu membuat objek dasar dengan fungsi opengl B. MATERI a. Konfigurasi library opengl b. Inisialisas OpenGL C. GLUT (GL Utility Toolkit) Merupakan pengembangan dari OpenGL yang didesain untuk aplikasi dengan level kecil hingga menengah dan menggunakan callback functions untuk menambahkan interaksi dari user. Untuk pemrograman OpenGL menggunakan C++, diperlukan library tambahan yaitu : 1. glut.h yang dicopy ke $dir-c\microsoft Visual Studio 9.0 (sesuaikan dengan versi visual studio anda)\vc\include 2. glut32.lib yang dicopy ke $dir\program Files\Microsoft Visual Studio 9.0 (sesuaikan dengan versi visual studio anda)\vc\lib 3. glut32.dll yang dicopy ke $dir\windows\system32 or if Win64 to syswow64 D. KLASIFIKASI FUNGSI a. Primitive : berupa geometric, b. imagesattribute : berupa color, line type, light, texture c. Viewing : berupa vithrtual d. cameracontrol : turn fuction ON / OFF e. Windowing : window, mouse, keyboard E. CARA KERJA OPENGL OpenGL lebih mengarah pada prosedural daripada sebuah deskriptif API grafis.untuk mendeskripsikan scene dan bagaimana penampilannya,sebenarnya programer lebih tau untuk menentukan hal-hal yang dibutuhkan untuk menghasilkan efek yang di inginkan.langkah tersebut termasuk memanggil banyak perintah opengl, perintah tersebut digunakan untuk menggambarkan MODUL GRAFIKA KOMPUTER 2017 Page 2

grafis primitif seperti titik,garis dan poligon dalam tiga dimensi.sebagai tambahan,opengl mendukung lighting, shading, texture mapping, blending, transparancy,dan banyak kemampuan efek khusus lainnya. F. INISIALISASI AWAL Inti dari tahapan ini adalah mengatur view port dan persepektif untuk penampilan obyek ke dalam layar monitor, viewport adalah besarnya layar monitor(image) yang dipakai untuk menampilkanobyek, sedangkan persepektif yang dimaksud adalah pengaturan sumbu z dalam penampilan obyek 3 dimensi,sehingga user dapat melihat obyek seolah-olah dalam bidang 3 dimensi (X-Y-Z),selain itu penggambaran obyek yang dilakukan oleh programer juga dapat menggunaan koordinat 3 dimensi. Selain ke dua tujuan di atas pada tahap ini juga dilakukan koneksi awal dengan library opengl, koneksi ini dilakukan supaya fungsi-fungsi yang di sediakan opengl dapat digunakan. Fungsi/prosedur yang digunakan : Fungsi / Prosedur LoadGlut(glut32.dll) if you no include gl in system InitGL glviewport glmatrixmode Pembuatan Gambar Fungsi / Prosedur GL_QUARDS GL_LINES glvertex3f glcolor3f gllinewidth glpointsize gluortho2d Pengertian Pemanggilan library opengl Inisialisasi opengl awal yang harus dilakukan Untuk pengaturan viewport Untuk pengaturan viewport Pengertian Untuk menggambar segi empat Penggambarkan sebuah garis Untuk menentukan titik 3 dimensi Untuk penentuan suatu warna Yaitu suatu fungsi yang berfungsi untuk mengatur tebalnya garis, suatu fungsi yang berfungsi untuk mengatur besarnya suatu objek, yaitu suatu fungsi untuk mengatur proyeksi hasil eksekusi dan mendefinisikan besarnya sistem MODUL GRAFIKA KOMPUTER 2017 Page 3

koordinat dengan urutan kirikanan dan bawah-atas. glclearcolor Menandakan warna apa yang digunakan sebagai background. Warna dinyatakan dalam bentuk RGBA, angka pertama memwakil warna merah, kedua hijau, ketiga biru, dan keempat adalah alpha atau tingkat transparansi. Tiap warna berkisar antara 0 hngga 1. glclear Untuk menghapus window dan memberikan warna yang telah kita definisakn sebelumnya dengan menggunakan glclearcolor glpushmatrix Menyimpan koordinat Matrik yang ada glpopmatrix Berguna untuk memanggil suatu fungsi yang telah disimpan pada glpushmatrix glbegin(gl_lines) Untuk memmulai menggambar dalam bentuk garis. Setiap pasangan verteks sebagai seg,em garis independen glend Untuk mengakhiri penggambaran sebuah garis SwapBuffers(hDC) untuk menukar bagian belakang buffer menjadi buffer screen glflush() Rendiring Fungsi dasar menggambar titik Fungsi / Prosedur Pengertian Contoh glvertex2i(x,y) Yaitu suatu fungsi glvertex2i(10,10) untuk menggambar titik pada koordinat x dan y, dengan nilai satuan berupa integer. glvertex2f(x,y) Yaitu suatu fungsi glvertex2f(10.0,10.0) untuk menggambar titik pada koordinat x dan y, dengan nilai satuan berupa float. glvertex2d(x,y) Yaitu suatu fungsi untuk menggambar titik pada koordinat x dan y, dengan nilai satuan berupa double. glvertex2d(10.0,10.0) MODUL GRAFIKA KOMPUTER 2017 Page 4

Definisi primitive objek Fungsi / Prosedur Pengertian # define GL_POINTS Primitif objek ini dipergunakan untuk menciptakan suatu titik. # define GL_LINES Primitif objek ini adalah suatu primitive objek guna menciptakan suatu garis. # define GL_LINE_LOOP Menarik sekelompok verteks yang terhubung menjadi segmen garis dari titik pertama sampai terakhir, kemudian kembali ke verteks yang pertama. # define GL_LINE_STRIP Menggambar sekelompok verteks yang terhubung menjadi segitiga. Sebuah segitiga baru didefinisikan untuk setiap titik yang diberikan setelah dua verteks pertama dan seterusnya. # define GL_TRIANGLES Triangle atau segitiga adalah tiga buah titik yang terhubung menjadi suatu segitiga dengan blok di tengahnya. #define Pada triangles strip jumlah vertex yang GL_TRIANGLES_STRIP dipergunakan adalah 3 buah vertex. #define GL_TRIANGLES_FAN Triangles fan adalah pembuatan suatu objek dengan menggunakan segitiga dimana hanya menggunakan 1 titik pusat saja. # define GL_QUADS Quad atau segempat adalah empat buah titik yang terhubung menjadi quat segi empat dengan blok di tengahnya. #define GL_QUADS Pada quads strip 4 buah vertex merupakan 1 _STRIP kelompok. # define GL_POLYGON Polygon merupakan suatu fungsi yang mirip dengan polyline, tetapi menghasilkan kurva tertutup dengan blok warna (fill). Fungsi untuk memberikan warna (fungsi color): Fungsi Warna glcolor3f(0,0,0); Black glcolor3f(0,0,1); Blue glcolor3f(0,1,0); Green glcolor3f(0,1,1); Cyan glcolor3f(1,0,0); Red glcolor3f(1,0,1); Magenta glcolor3f(1,1,0); Yellow MODUL GRAFIKA KOMPUTER 2017 Page 5

glcolor3f(1,1,1); White Transformasi objek Fungsi / Prosedur Pengertian gltranslatef(x,y,z); Parameter pertama menunjukkan translasi berdasarkan sumbu x. Parameter ke dua menunjukkan translasi terhadap sumbu y. Parameter ke tiga menunjukkan parameter terhadap sumbu z pada kanvas. glrotatef(sudut,x,y,z) Parameter pertama merupakan nilai perputaran sudut yang ; diinginkan. Parameter ke dua adalah perputaran terhadap sumbu x, parameter ke tiga merupakan perputaran terhadap sumbu y, Parameter ke empat6 adalah perputaran terhadap sumbu z. Dan parameter ke dua, ke tiga, dan ke empat harus bernilai 1 untuk menjadi sumbu putar sempurna. Dan untuk pemberian nilainya akan menyebabkan perputaran searah dengan jarum jam ketika diberi nilai negatif, dan sebaliknya. glscalef(x,y,z); Parameter pertama, kedua, dan ke tiga masing-masing menunjukkan nilai skala untuk obyek berdasarkan sumbu x, y, dan z. Jika nilai skala adalah 1, maka ukuran obyek tersebut adalah tetap MODUL GRAFIKA KOMPUTER 2017 Page 6

BAB II P R I M I T I F O B J E K A. TUJUAN a. Mampu melakukan inisialisasi pembuatan primitif objek pada opengl b. Mampu membuat primitif objek menggunakan opengl B. MATERI a. Konsep primitif objek di opengl b. Pembuatan primitif objek di opengl C. Definisi Primitif Objek Contoh primitive grafika dasar antara lain : titik, garis, kurva, fill area dan text. Objek kompleks dapat dibuat dengan kombinasi dari primitive ini. Misalkan, Poligaris atau yang dapat didefinisikan sebagai urutan garis lurus yang saling terhubung. Secara umum algoritma grafis memiliki persamaan yaitu bagaimana menampilkan hasil. Contoh SegiEmpat yang menggunakan Primitive Objek : Pada primitive object dapat digunakan untuk membuat segi empat berikut adalah pembuatan suatu objek berupa segiempat, pertama mengalami Proses Rendering : SegiEmpat (posx, posy, w, h) MODUL GRAFIKA KOMPUTER 2017 Page 7

1. Maka sintaks pembuatan segiempat : Segitiga MODUL GRAFIKA KOMPUTER 2017 Page 8

Segi_8 MODUL GRAFIKA KOMPUTER 2017 Page 9

BAB III Algoritma Pembentukan Objek A. TUJUAN a. Mampu memhami konsep algoritma bresenham b. Mampu menerapkan algoritma bresenham pada opengl c. Mampu membuat garis dengan algoritma bresenham B. MATERI a. Konsep algoritma bresenham b. Penerapan algoritma bresenham pada opengl C. Algoritma Bresenham Algoritma Garis Bresenham adalah suatu algoritma yang menentukan titiktitik dalam dimensi yang membentuk pendekatan dekat dengan garis lurus antara dua titik yang diberikan. Pendekatan ini biasa digunakan untuk menggambar garis pada layar komputer, karena hanya menggunakan integer penambahan, pengurangan dan pergeseran. Algoritma ini merupakan salah satu algoritma paling awal yang dikembangkan di bidang komputer grafis. Konsep Algoritma Bresenham adalah: Langkah-langkah pembentukan garis berdasarkan algoritm Bressenham 1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis. 2. Tentukan salah satu sebagai titik awal (x0, y0) dan titik akhir (x1,y1). 3. Hitung dx, dy, 2dy dan 2dy - 2dx 4. Hitung parameter : p = 2dy dx 5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k=0, a. bila pk < 0 maka titik selanjutn ya adalah: (xk+1, yk) dan pk+1 = pk + 2dy b. bila tidak, titik selanjutnya adalah: (xk+1, yk+1) dan pk+1 = pk + 2dy 2dx 6. Ulangi nomor 5 untuk menentukan posisi pixel berikutnya, sampai x = x1 atau y = y1. Contoh : Diketahui 2 buah titik A(10,10) dan titik B(17,16) bila titik A sebagai titik awal dan titik B sebagai titik akhir, tentukan titik-titik antara yang menghubungkan titik A dan titik B sehingga membentuk garis AB dengan menggunakan algoritma Bressenham. MODUL GRAFIKA KOMPUTER 2017 Page 10

MODUL GRAFIKA KOMPUTER 2017 Page 11

Contoh program #include <stdio.h> #include <glut.h> void display() glmatrixmode(gl_projection); gluortho2d(0.0,300.0,0.0,300.0); void setpixel (GLint xcoordinate, GLint ycoordinate) glbegin (GL_POINTS); glvertex2i (xcoordinate, ycoordinate glend(); glflush(); void linebres (GLint x0, GLint y0, GLint xend, GLint yend)//rumus GLint dx = (xend - x0); GLint dy = (yend - y0); GLint p = 2*dy-dx; GLint twody = 2*dy; GLint twodyminusdx = 2*(dy-dx); GLint x,y; if(x0 > xend) x=xend; y=yend; xend=x; else x=x0; y=y0; setpixel(x,y); while(x<xend) x++; if(p<0) p+=twody; else y++; p+=twodyminusdx; setpixel(x,y); void drawmyline () glcolor3f(1.0,0.0,0.0); glpointsize(4.0); GLint x0 = 50; GLint y0 = 50; GLint xend = 150; GLint yend = 50; linebres(x0,y0,xend,yend); glcolor3f(0.0,1.0,0.0); glpointsize(4.0); GLint x1 = 50; MODUL GRAFIKA KOMPUTER 2017 Page 12

GLint y1 = 100; GLint x2 = 150; GLint y2 = 100; linebres(x1,y1,x2,y2); glcolor3f(0.0,0.0,1.0); glpointsize(4.0); GLint x3 = 50; GLint y3 = 150; GLint x4 = 150; GLint y4 = 150; linebres(x3,y3,x4,y4); int main(int argc, char** argv) glutinitwindowsize(400,400); glutinitwindowposition(0,0); glutcreatewindow("bresenham"); display(); glutdisplayfunc(drawmyline); glutmainloop(); return 0; TUGAS MODUL GRAFIKA KOMPUTER 2017 Page 13

BAB IV Transformasi objek A. TUJUAN a. Mampu memahami transformasi objek pada opengl b. Mampu melakukan transformasi objek menggunakan opengl c. Mampu melakukan implementasi transformasi objek pada opengl B. MATERI a. Konsep Transformasi Objek b. Penerapan Transformasi objek pada opengl C. Tujuan transformasi adalah : 1. Merubah atau menyesuaikan komposisi pemandangan 2. Memudahkan membuat objek yang simetris 3. Melihat objek dari sudut pandang yang berbeda 4. Memindahkan satu atau beberapa objek dari satu tempat ke tempat lain, ini biasa dipakai untuk animasi komputer. Secara substansi, Grafika Komputer adalah proses transformasi dari model 3D obyek berupa informasi geometri bentuk, informasi pose, warna, texture, dan pencahayaan menjadi citra 2D Jika dilihat secara analogi, hal di atas mirip dengan cara kerja kamera dalam mengambil foto dalam bidang fotografi (cf. Gambar 4). Model ini disebut model sintesis camera. MODUL GRAFIKA KOMPUTER 2017 Page 14

Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita harus melakukan beberapa proses, yaitu: 1. Melakukan pengesetan kamera dalam bentuk setting lensa kamera (Transformasi Proyeksi), 2. Mengarah kamera dengan mengatur letak tripod (Transformasi Viewing), 3. Mengatur letak obyek (Transformasi Modeling), dan 4. Mengatur skala dan layout dari foto (Transformasi Viewport) D. Translasi Translasi adalah transformasi dengan bentuk yang tetap, memindahkan objek apa adanya. Setiap titik dari objek akan ditranslasikan dengan besaran yang sama.dalam operasi translasi, setiap titik pada suatu entitas yang ditranslasi bergerak dalam jarak yang sama. Pergerakan tersebut dapat berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y saja atau keduanya. Translasi juga berlaku pada garis, objek atau gabungan objek 2D yang lain. Untuk hal ini, setiap titik pada garis atau objek yang ditranslasi dalam arah x dan y masing -masing sebesar t x,t y. Program di bawah ini akan memberikan ilustrasi bagaimana transformasi translate diimplementasikan. MODUL GRAFIKA KOMPUTER 2017 Page 15

Contoh Translasi E. Rotate Rotasi artinya berputar. Ketika suatu bentuk benda sengaja diputar maka perlu di tentukan pusat dan besar sudut putar. sedangkan translasi adalah pergeseran. Benda yang telah berpindah dari pusatnya berarti mengalami pergeseran, yaitu apakah dia bergerak maju mundur ataupun menuju ke atas bawah. Rotasi berbeda dengan translasi karena perubahan posisi pada translasi tidak mengacu pada suatu titik tertentu. Keistimewaan dari rotasi adalah jarak antara titik pusat dengan masing-masing bagian dari obyek yang diputar akan selalu tetap, seberapa jauh pun obyek itu diputar. Pada sebuah game yang menggunakan grafik vektor dan grafik bitmap, rotasi dan translasi sangat di butuhkan. Dengan basic4gl kita bisa menggunakan source code yang tersedia yaitu : MODUL GRAFIKA KOMPUTER 2017 Page 16

gltranslatef (x, y, z) digunakan untuk merubah titik posisi awal sumbu koordinat menuju posisi yang ditentukan sesuai koordinat x,y, dan z. glrotatef (angle, x, y, z) digunakan untuk memutar suatu bidang pada sudut tertentu (angle). Untuk membangkitkan rotasi pada objek 3D kita harus membuat aksis dari rotasi dan jumlah sudut rotasi. Tidak seperti melakukan rotasi pada objek 2D yang semua proses transformasi dilakukan di koordinat xy, sebuah rotasi objek tiga dimensi bisa dilakukan di space manapun. Contoh Program Rotasi MODUL GRAFIKA KOMPUTER 2017 Page 17

F. Scale Skala merupakan salah satu bentuk transformasi yang merubah ukuran dari objek yang ditentukan, baik membesar ataupun mengecil. Perubahan ukuran tersebut didasarkan pada sumbu x, sumbu y, maupun sumbu z, dimana jika yang diubah hanya sumbu x, maka besarnya objek akan berubah sesuai dengan sumbu x baru yang telah ditentukan, begitu pula jika diubah terhadap sumbu dan zy, maka objek akan menguikuti perubahan sesuai sumbu y maupun z baru yang telah ditentukan. Perubahan skala diperoleh dari mengalikan nilai koordinat objek dengan skala tertentu sesuai dengan sumbu masing - masing. Bentuk dari matriks skala adalah: Transformasi skala dapat dilakukan dengan cara memanggil fungsi: glscalef(sx, Sy, Sz) glscaled(sx, Sy, Sz) Dimana Sx, Sy, dan Sz merupakan parameter dari masing masing sumbu ( Sx merupakan parameter pada sumbu x, Sy merupakan parameter pada sumbu y, dan Sz merupakan parameter pada sumbu z) MODUL GRAFIKA KOMPUTER 2017 Page 18

Source code Scale D. Tutorial Urutan Transformasi Transformasi dapat dilakukan pada level vertex, level surface, maupun level obyek bergantung dimana transformasi diletakkan dalam program. Operasi transformasi merupakan operasi yang tidak bersifat komutatif, artinya, urutan transformasi juga sangat berpengaruh pada hasilnya. ilustrasi akibat urutan transformasi yang berbeda, yaitu hasil operasi rotasi kemudian di translasi berbeda dengan operasi translasi baru dirotasi. MODUL GRAFIKA KOMPUTER 2017 Page 19

Program obyeknya sudah berupa obyek 3D berupa kubus. Perhatikan bagaimana kubus dibentuk dari vertex dan surface. Selain dengan mendefinisikan obyeknya sendiri, GLUT telah menyediakan beberapa fungsi untuk menggambar standard obyek, yaitu kubus, bola, dan poci teh. Perhatikan apa yang terjadi bila gltranslate() dan glrotate() di fungsi mydisplay() ditukar posisinya atau diletakkan didalam salah satu glbegin()..glend() #include<stdlib.h> #include<glut.h> float z_pos = -10.0f; float rot = 0.0f; void resize(int width, int height) glviewport(0, 0, width, height); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45.0,(float)width / (float)height, 1.0, 300.0); glmatrixmode(gl_modelview); glloadidentity(); void putaran(int id) rot += 10; glutpostredisplay(); // request redisplay gluttimerfunc(100, putaran, 0); // request next timer event void mykeyboard(unsigned char key, int x, int y) if ((key == '<') (key == ',')) z_pos -= 0.1f; if ((key == '>') (key == '.')) z_pos += 0.1f; void mydisplay(void) glclear(gl_color_buffer_bit); glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0.0, 0.0f, z_pos); glrotatef(rot, 0, 1, 0); MODUL GRAFIKA KOMPUTER 2017 Page 20

glbegin(gl_quads); // Front Face, red glcolor3f(1.0, 0.0, 0.0); glvertex3f(-1.0f, -1.0f, 1.0f); glvertex3f(1.0f, -1.0f, 1.0f); glvertex3f(1.0f, 1.0f, 1.0f); glvertex3f(-1.0f, 1.0f, 1.0f); // Back Face, green glcolor3f(0.0, 1.0, 0.0); glvertex3f(1.0f, -1.0f, -1.0f); glvertex3f(1.0f, 1.0f, -1.0f); glvertex3f(-1.0f, 1.0f, -1.0f); glvertex3f(-1.0f, -1.0f, -1.0f); // Top Face, blue glcolor3f(0.0, 0.0, 1.0); glvertex3f(-1.0f, 1.0f, -1.0f); glvertex3f(-1.0f, 1.0f, 1.0f); glvertex3f(1.0f, 1.0f, 1.0f); glvertex3f(1.0f, 1.0f, -1.0f); // Bottom Face, yellow glcolor3f(1.0, 1.0, 0.0); glvertex3f(-1.0f, -1.0f, -1.0f); glvertex3f(1.0f, -1.0f, -1.0f); glvertex3f(1.0f, -1.0f, 1.0f); glvertex3f(-1.0f, -1.0f, 1.0f); // Right face, cyan glcolor3f(0.0, 1.0, 1.0); glvertex3f(1.0f, -1.0f, -1.0f); glvertex3f(1.0f, 1.0f, -1.0f); glvertex3f(1.0f, 1.0f, 1.0f); glvertex3f(1.0f, -1.0f, 1.0f); // Left Face, magenta glcolor3f(1.0, 0.0, 1.0); glvertex3f(-1.0f, -1.0f, -1.0f); glvertex3f(-1.0f, -1.0f, 1.0f); glvertex3f(-1.0f, 1.0f, 1.0f); glvertex3f(-1.0f, 1.0f, -1.0f); glend(); glflush(); glutswapbuffers(); void init() glenable(gl_depth_test); glclearcolor(0.0, 0.0, 0.0, 1.0); // A Background Clear Color glmatrixmode(gl_projection); glloadidentity(); gluperspective(45, (GLdouble)500.0 / (GLdouble)500.0, 0, 100); glmatrixmode(gl_modelview); return; int main(int argc, char** argv) glutinit(&argc, argv); MODUL GRAFIKA KOMPUTER 2017 Page 21

//glutinitdisplaymode( GLUT_DOUBLE /* GLUT_DEPTH* / ); glutinitdisplaymode(glut_double GLUT_DEPTH); glutinitwindowsize(500, 500); glutinitwindowposition(0, 0); glutcreatewindow("transformasi"); // callbacks glutdisplayfunc(mydisplay); glutkeyboardfunc(mykeyboard); gluttimerfunc(100, putaran, 0); glutreshapefunc(resize); init(); glutmainloop(); return 0; G. Implementasi Transformasi Objek Contoh Program : #include <stdlib.h> #include <glut.h> //#include <DrawLine.h> void drawquad() glbegin(gl_polygon); glvertex2f(77., 70.); glvertex2f(80., 146.); glvertex2f(99., 90.); glvertex2f(157., 90.); glvertex2f(110., 55.); glvertex2f(128., 1.); glvertex2f(80., 34.); glvertex2f(32., 1.); glvertex2f(54., 55.); glvertex2f(3., 90.); glvertex2f(63., 90.); glvertex2f(80., 146.); glend(); glflush(); void renderscene(void) glclear(gl_color_buffer_bit); // drawkordinat(); glpushmatrix(); gltranslatef(-500, -500, 0); glcolor3f(0, 1, 0); //blue drawquad(); glpopmatrix(); glpushmatrix(); gltranslatef(-450, -350, 0); glrotatef(30, 0, 0, 1); glscalef(0.5, 0.5, 0); glcolor3f(0, 1, 1); //red drawquad(); glpopmatrix(); glpushmatrix(); MODUL GRAFIKA KOMPUTER 2017 Page 22

gltranslatef(-200, -350, 0); glscalef(0.5, 0.5, 0); glcolor3f(1, 0, 1); //yellow drawquad(); glpopmatrix(); glpushmatrix(); gltranslatef(-150, 0, 0); glscalef(0.3, 0.3, 0); glcolor3f(1, 1, 1); //pink drawquad(); glpopmatrix(); glpushmatrix(); gltranslatef(450, 400, 0); glrotatef(45, 0, 0, 1); glscalef(0.6, 0.6, 0); glcolor3f(1, 0, 1); //green drawquad(); glpopmatrix(); glpushmatrix(); gltranslatef(-50, -180, 0); glscalef(0.4, 0.4, 0); glcolor3f(1, 1, 1); //magenta drawquad(); glpopmatrix(); glpushmatrix(); gltranslatef(-400, -200, 0); glscalef(0.4, 0.4, 0); glcolor3f(10, 0, 1); //blue drawquad(); glpopmatrix(); glpushmatrix(); gltranslatef(50, 0, 0); glscalef(0.4, 0.4, 0); glcolor3f(1, 0, 0); //green drawquad(); glpopmatrix(); glpushmatrix(); gltranslatef(150, 300, 0); glrotatef(-45, 0, 0, 1); glcolor3f(1, 1, 1); glpopmatrix(); glflush(); void main(int argc, char **argv) glutinit(&argc, argv); glutinitwindowposition(100, 100); glutinitwindowsize(480, 480); glutcreatewindow("implementasi Transformasi"); gluortho2d(-640., 640., -640., 640.); MODUL GRAFIKA KOMPUTER 2017 Page 23

glutdisplayfunc(renderscene); glutmainloop(); Tugas MODUL GRAFIKA KOMPUTER 2017 Page 24

BAB V ANIMASI DAN PEMROGRAMAN A. TUJUAN a. Mampu memahami animasi pada opengl b. Mampu melakukan implementasi animasi objek pada opengl B. MATERI a. Animasi Object pada OpenGL C. Konsep Animasi pada GLUT Dalam penggunaan gluttimerfunc dimungkinkan untuk membuat sebuah animasi yang dikontrol oleh waktu. Fungsi dari glutpostredisplaya dalah mengirimkan perintah untuk mengaktifkan display secara berkala (looping). Kemudian pada main program perlu menambahkan fungsi untuk mengaktifkan timer function. a. Fungsi dasar pembuatan animasi dengan menggunakan TimerFunction GLUT void APIENTRY gluttimerfunc(unsigned int millis, void (GLUTCALLBACK *func)(int value), int value); Dalam penggunaan gluttimerfunc dimungkinkan untuk membuat sebuah animasi yang dikontrol olehwaktu. b. Inisialisasi dalam penggunaan TimerFunction Fungsi dari glutpostredisplay adalah mengirim kan perintah untuk mengaktifkan display secara berkala (looping). Kemudian pada main program perlu menambahkan fungsi untuk mengaktifkan timer function. MODUL GRAFIKA KOMPUTER 2017 Page 25

Contoh program Membuat sebuah baling-baling yang bisa perputar secara clockwise kemudian unclockwise yang pusatnya berada pada pusat koordinat. #include <stdlib.h> #include <glut.h> int x=0; int zputer=0; int zbalik=180; void Timer(int value) if (zputer <= 360) x = 1; zputer += 1; if (zputer>360) x = -1; zbalik -= 1; if (zbalik<0) x = 1; zputer = 0; zbalik = 360; glutpostredisplay(); gluttimerfunc(5, Timer, 0); void Draw() glbegin(gl_triangles); glclear(gl_color_buffer_bit); glvertex2d(0, 0); glvertex2d(-100, 200); glvertex2d(100, 200); glvertex2d(0, 0); glvertex2d(-100, -200); glvertex2d(100, -200); glend(); void display() glclear(gl_color_buffer_bit); glpopmatrix(); glrotatef(x, 0., 0., 1.); Draw(); glpushmatrix(); glflush(); void main(int argc, char **argv) glutinit(&argc, argv); glutinitwindowposition(100, 100); glutinitwindowsize(300, 300); glutcreatewindow("jam ANALOG: Prak Grafkom"); gluortho2d(-300., 300., -300., 300.); glutdisplayfunc(display); gluttimerfunc(60, Timer, 0); glutmainloop(); MODUL GRAFIKA KOMPUTER 2017 Page 26

Animasi 2D menggunakan OpenGL dapat dilakukan dengan melakukan perpindahan objek menggunakan gltranslatef, juga dapat dilakukan dengan melakukan perputaran atau pergerakan objek yang berporos pada sumbu-sumbu koordinat dari sumbu pembentuk objek tersebut menggunakan glrotatef. Kemudian waktu yang digunakan dalam pergerakan animasi juga dapat diatur sesuai keinginan dengan menggunakan gluttimerfunc. MODUL GRAFIKA KOMPUTER 2017 Page 27

BAB VI INTERAKSI DENGAN PERANGKAT A. TUJUAN a. Mampu memahami interasksi perangkat keras dengan opengl b. Mampu melakukan implementasi interkasi perangkat keras dengan opengl B. MATERI a. Interaksi perangkat keras dengan opengl Pada bab ini akan membahas tentang bagaimana objek yang kita buat akan berinteraksi dengan perangkat keras komputer serperti, keyboard dan mouse. 1. KONSEP INPUT KEYBOARD PADA GLUT-KEY BIASA DAN SPECIAL KEY a. KONSEP INPUT KEYBOARD (GENERAL BUTTON) glutkeyboardfunc adalah suatu fungsi callback untuk digunakan sebagai masukan pada suatu jendela window. Konsepnya pada saat seorang user atau pengguna memberikan input yaitu menekan pada tombol keyboard, setiap tombol keyboard yang ditekan akan menghasilkan suatu karakter ASCII yang akan menghasilkan suatu callback keyboard yang telah didefinisikan berupa fungsi dengan 3 parameter. Penggunaan input keyboard pada tombol-tombol biasa atau normal key (a-z, 1-0), dapat dilakukan dengan menggunakan callback function berupa glutkeyboardfunc(mykeyboard) dengan dideklarasikan terlebih dahulu suatu fungsi buatan untuk menampung semua perintah input yang akan digunakan oleh user. Fungsi buatan tersebut seperti contoh di bawah ini: void mykeyboard(unsigned char key, int x,int y) // masukkan perintah disini Fungsi tersebut berisi suatu perintah yang akan digunakan dalam pengoperasian program oleh user. Di dalam fungsi tersebut terdapat 3 parameter dan di dalamnya dideklarasikan suatu perintah yang nantinya akan digunakan. void timer(int value) MODUL GRAFIKA KOMPUTER 2017 Page 28

glutpostredisplay(); gluttimerfunc(100, timer, 0); void mykeyboard(unsigned char key, int x, int y) if(key == 'a') gltranslatef(0,5,0); if(key == 'd') gltranslatef(0,-5,0); void renderscene(void) glclear(gl_color_buffer_bit); glcolor3f(1.,0.,0.); Draw(); glflush(); Sintaks tersebut adalah sintak dasar yang digunakan, untuk bisa menggunakan input keyboard maka harus diberikan callback function untuk memanggilnya. glutdisplayfunc(renderscene); glutkeyboardfunc(mykeyboard); gluttimerfunc(30,timer,0); Sintaks tersebut harus disertakan pada fungsi main. Selain itu, pada keyboard juga terdapat method lain yang bisa digunakan dalam proses input ini, yaitu: Key Press, Key Up, dan Key Buffering. a. Key Press Metode ini akan memberitahukan kita pada command line tombol apa yang sedang kita tekan. Method ini dapat dinamakan keypressed dan pada GLUT akan terdapat 3 parameter, satu untuk tombol yang saat itu ditekan, dan dua untuk memberitahukan lokasi mouse ketika tombol ditekan. void keypressed(unsigned char key, int x, int y) MODUL GRAFIKA KOMPUTER 2017 Page 29

If(key == a ) // saat tombol a ditekan // aksi yang diberikan saat tombol a ditekan Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback function-nya sedikit berbeda dari callback function yang sebelumnya. glutkeyboardfunc(keypressed); // memberitahukan pada GLUT untuk menggunakan method "keypressed" untuk tombol yang ditekan b. Key Up Fungsi Key Up ini adalah fungsi register yang menyimpan nilai masukan sampai ketika tombol keyboard dilepaskan. Hal ini bisa berguna untuk pengaturan beberapa nilai ketika suatu tombol pertama kali ditekan, dan tetap menjaga nilai tersebut sampai tombol tersebut dilapaskan. Method sama seperti method Key Press tadi yaitu memiliki 3 parameter yang memiliki fungsi yang sama, hanya berbeda pada penamaannya yaitu, keyup. void keyup(unsigned char key, int x, int y) If(key == a ) // saat tombol a ditekan // aksi yang diberikan saat tombol a ditekan Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback function-nya sedikit berbeda dari callback function yang sebelumnya. glutkeyboardfunc(keyup); // memberitahukan pada GLUT untuk menggunakan method "keyup" untuk tombol yang dilepas c. Key Buffering Method ini memungkinkan untuk penanganan terhadap tombol yang ditekan dalam jumlah banyak dalam proyekproyek OpenGL. Seperti yang diketahui tipe data char sama dengan byte dan dapat mengambila nilai integer dari 0 sampai 255. Ini dikarenakan tipe data char memiliki ukuran 2 8 atau 256. Hal ini memungkinkan kita untuk menangani hingga 256 tombol berbeda pada keyboard, atau seluruh set karakter ASCII. Pertama dimulai dengan pendeklarasian sebuah array dari nilai Boolean yang akan menangani masing-masing method keyboard, true untuk tombol yang ditekan, dan false saat tombol dilepaskan. bool* keystates = new bool[256]; // membuat array dari nilai boolean dengan ukuran 256 (0-255) MODUL GRAFIKA KOMPUTER 2017 Page 30

kemudian dilanjutkan dengan pendeklarasian masing-masing method. void keypressed(unsigned char key, int x, int y) keystates[key] = true; void keyup(unsigned char key, int x, int y) keystates[key] = false; void keyoperations(void) if(keystates['a']) // saat tombol a ditekan // aksi yang diberikan saat tombol a ditekan Sama seperti sebelumnya fungsi-fungsi tersebut akan dipanggil pada fungsi main dengan callback function berikut: void display (void) keyoperations(); glclearcolor(1.0f, 0.0f, 0.0f, 1.0f); // menjadikan background menjadi warna merah 2. KONSEP INPUT KEYBOARD SPECIAL KEY GlutSpecialFunc merupakan suatu fungsi callback pada opengl yang digunakan untuk mengaktifkan tombol-tombol khusus pada keyboard sehingga dapat digunakan untuk berinteraksi antara user dengan objek yang ada di dalam display opengl. Pendeklarasiannya adalah : void glutspecialfunc (void (* func) (int key, int x, int y)); callback keyboard khusus dipicu ketika keyboard fungsi atau tombol special yang dideklarasikan ditekan. Parameter callback kunci adalah GLUT_KEY_tombol khusus.. Parameter x dan y mengindikasikan koordinat relatif jendela ketika tombol ditekan. Ketika jendela baru dibuat, tidak ada callback khusus awalnya terdaftar dan stroke kunci khusus di jendela diabaikan. Melewati NULL untuk glutspecialfunc Menonaktifkan generasi callback khusus. Selama callback khusus, glutgetmodifiers dapat dipanggil untuk menentukan keadaan tombol pengubah ketika keystroke menghasilkan callback terjadi. Nilai-nilai yang tersedia GLUT_KEY_ * adalah: GLUT_KEY_F1 GLUT_KEY_F2 GLUT_KEY_F3 GLUT_KEY_F4 GLUT_KEY_F5 F1 function key F2 function key F3 function key F4 function key F5 function key MODUL GRAFIKA KOMPUTER 2017 Page 31

GLUT_KEY_F6 GLUT_KEY_F7 GLUT_KEY_F8 GLUT_KEY_F9 GLUT_KEY_F10 GLUT_KEY_F11 GLUT_KEY_F12 GLUT_KEY_LEFT GLUT_KEY_RIGHT GLUT_KEY_UP GLUT_KEY_DOWN GLUT_KEY_PAGE_UP GLUT_KEY_PAGE_DOWN GLUT_KEY_HOME GLUT_KEY_END GLUT_KEY_INSERT F6 function key F7 function key F8 function key F9 function key F10 function key F11 function key F12 function key Left function key Right function key Up function key Down function key Page Up function key PageDown function key Home function key End function key Insert function key Tombol-tombol diatas dapat diaktifkan dengan membuat sebuah fungsi callback yang akan dipanggil oleh glutspecialfunc ke dalam fungsi main program, sehingga user dapat berinteraksi dengan objek yang ada dengan menekan tombol-tombol special keyboard yang telah di deklarasikan ke dalam fungsi callback tersebut. contoh pembuatan fungsi callback untuk tombol special keyboard : void myspecialkeyboard(int key, int x, int y) switch(key) case GLUT_KEY_LEFT : c+=-4; d+=0; break; case GLUT_KEY_RIGHT : c+=4; d+=0; break; case GLUT_KEY_UP : c+=0; d+=4; break; case GLUT_KEY_DOWN : c+=0; d+=-4; break; MODUL GRAFIKA KOMPUTER 2017 Page 32

Selanjutnya fungsi tersebut akan dipanggil oleh glutdisplayfunc ke dalam fungsi main, berikut script nya : glutspecialfunc(myspecialkeyboard); Selain fungsi callback yang mendeklarasikan tombol special keyboard, untuk dapat berinteraksi fungsi tersebut harus memiliki fungsi callback lain yang akan dipanggil kedalam fungsi glutdisplayfunc dan fungsi gluttimerfunc didalam fungsi main program tersebut. fungsi callback di dalam fungsi glutdisplayfunk merupakan fungsi yang mendklarasikan objek yang akan berinteraksi dengan tombol keyborad, Sedangkan fungsi gluttimerfunc berfungsi agar tombol keyboard dapat terus terdeteksi oleh glut. Contoh program interaksi keyboard lengkap : #include <stdlib.h> #include <glut.h> int c, d; void triangles() glbegin(gl_triangles); glvertex2i(280, 0); glvertex2i(250, 60); glvertex2i(220, 0); glend(); void myspecialkeyboard(int key, int x, int y) switch (key) case GLUT_KEY_LEFT: c += -4; d += 0; break; case GLUT_KEY_RIGHT: c += 4; d += 0; break; case GLUT_KEY_UP: c += 0; d += 4; break; case GLUT_KEY_DOWN: c += 0; d += -4; break; void timer(int value) glutpostredisplay(); gluttimerfunc(50, timer, 0); void renderscene(void) glclear(gl_color_buffer_bit); MODUL GRAFIKA KOMPUTER 2017 Page 33

glpushmatrix(); gltranslatef(c, d, 0); triangles(); glpopmatrix(); glflush(); void main(int argc, char **argv) glutinit(&argc, argv); glutinitwindowposition(100, 100); glutinitwindowsize(640, 480); glutcreatewindow("uji keyfunc"); gluortho2d(-320., 320., -240., 240.); gluttimerfunc(50, timer, 0); glutdisplayfunc(renderscene); glutspecialfunc(myspecialkeyboard); glutmainloop(); Sesuai dengan program dimana setiap tombol arah akan memiliki nilai variabel c dan d yang berbeda-beda yang akan mengakibatkan gambar akan bergeser dengan arah yang sesuai nilai variabel tersebut ketika tombol khusus arah (up, down, left dan right) ditekan. 2. KONSEP MOUSE PADA GLUT Dalam konsep mouse pada glut ada beberapa fungsi dasar dan inisialisasi yang digunakan untuk melakukan interaksi mouse. Adapun penjelasannya adalah sebagai berikut : 1. Fungsi dasar pembuatan interaksi dengan menggunakan MouseFunction GLUTAPI void APIENTRY glutmousefunc(void (GLUTCALLBACK *func)(int button, int state, int x, int y)); Paramater func adalah fungsi yang akan ditangani dengan event klik mouse. GLUTAPI void APIENTRY glutmotionfunc(void *func(int x, int y)); Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk mendeteksi gerakan mouse. 2. Inisialisasi dalam penggunaan MouseFunction void mouse(int button, int state, int x,int y) if(button==glut_left_button && state==glut_down) drawdot(x,480-y); if(button==glut_right_button && state==glut_down) drawdot2(x,480-y); if(button==glut_middle_button && state==glut_down) drawdot3(x,480-y); MODUL GRAFIKA KOMPUTER 2017 Page 34

void motion(int x,int y) Dalam penerapan interaksi mouse pada open gl / glut, Fungsi inisialisasinya adalah sebagai berikut : 1. GLUT_LEFT_BUTTON Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse kiri. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button mouse sebelah kiri maka bisa menggunakan fungsi inisialisasi ini. 2. GLUT_RIGHT_BUTTON Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse kanan. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button mouse sebelah kanan maka bisa menggunakan fungsi inisialisasi ini. 3. GLUT_MIDDLE_BUTTON Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse tengah. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button mouse tengah maka bisa menggunakan fungsi inisialisasi ini. 4. GLUT_DOWN Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol mouse ditekan. 5. GLUT_UP Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol mouse dilepaskan. Kemudian pada main program perlu menambahkan fungsi untuk callback fungsi MouseFunction. glutmousefunc(mouse); glutmotionfunc(motion); 3. Sistim Koordinat interaksi mouse pada glut Sistim koordinat interaksi mouse pada glut adalah sebagai berikut. Misalnya ditentukan iinisialisasi awal adalah : int w = 480, h=480; float x=0, y=0, z=0; maka : MODUL GRAFIKA KOMPUTER 2017 Page 35

a. Titik 0,0 berada pada pojok kiri atas, koordinatnya akan berubah apabila terjadi pergeseran mouse. b. Titik 480,0 berada pada pojok kanan atas. c. Titik 0, 480 berada pada pojok kiri bawah d. Titik 480,480 berada pada pojok kanan bawah CONTOH PROGAM PENERAPAN MOUSE PADA GLUT #include <stdlib.h> #include <glut.h> #include <stdio.h> void Triangles() glbegin(gl_triangles); glvertex2i(0, 0); glvertex2i(100, -30); glvertex2i(100, 30); glend(); void mouseku(int button, int state, int x, int y) if (button == GLUT_LEFT_BUTTON) printf("tombol KIRI (%d,%d)\n", x, y); else if (button == GLUT_MIDDLE_BUTTON) printf("tombol TENGAH (%d,%d)\n", x, y); else printf("tombol KANAN (%d,%d)\n", x, y); if (state == GLUT_DOWN) printf("tombol DITEKAN\n"); else printf("tombol DILEPAS\n"); void display() glclear(gl_color_buffer_bit); glrotatef(10, 0., 0., 1.); Triangles(); glflush(); void Timer(int value) glutpostredisplay(); gluttimerfunc(30, Timer, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_depth GLUT_SINGLE GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(320, 320); glutcreatewindow("mouse"); glutdisplayfunc(display); gluortho2d(-320.0, 320.0, -320.0, 320.0); MODUL GRAFIKA KOMPUTER 2017 Page 36

gluttimerfunc(10, Timer, 0); glutmousefunc(mouseku); glutmainloop(); 2. Interaksi Drag #include <stdlib.h> #include <glut.h> #include <stdio.h> void Triangles() glbegin(gl_triangles); glvertex2i(0, 0); glvertex2i(100, -30); glvertex2i(100, 30); glend(); void mouseku(int button, int state, int x, int y) if (button == GLUT_LEFT_BUTTON) printf("tombol KIRI (%d,%d)\n", x, y); else if (button == GLUT_MIDDLE_BUTTON) printf("tombol TENGAH (%d, %d)\n", x, y); else printf("tombol KANAN (%d,%d)\n", x, y); if (state == GLUT_DOWN) printf("tombol DITEKAN\n"); else printf("tombol DILEPAS\n"); void motionku(int x, int y) printf("posisi printer mouse (%d, %d)\n", x, y); void display() glclear(gl_color_buffer_bit); glrotatef(89, 0., 0., 1.); Triangles(); glflush(); void Timer(int value) glutpostredisplay(); gluttimerfunc(10, Timer, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_depth GLUT_SINGLE GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(320, 320); glutcreatewindow("glut"); glutdisplayfunc(display); MODUL GRAFIKA KOMPUTER 2017 Page 37

gluortho2d(-320.0, 320.0, -320.0, 320.0); gluttimerfunc(10, Timer, 0); glutmousefunc(mouseku); glutmotionfunc(motionku); glutmainloop(); 3. Contoh Implementasi #include <stdlib.h> #include <stdio.h> #include <glut.h> float x = 1, y = 1, z = 0; int w = 480, h = 480, flag = 0, flg; void drawquad() glbegin(gl_polygon); glcolor3f(0, 0, 1); glvertex2f(-20., -20.); glvertex2f(20., -20.); glvertex2f(20., 20.); glvertex2f(-20., 20.); glend(); void mouse(int button, int state, int xmouse, int ymouse) if (flg == 0) if (state == GLUT_DOWN) if (button == GLUT_LEFT_BUTTON) flag++; if (flag == 2) flg = 3; x = 3; y = 3; printf("%d", flg); if (flg == 3) if (state == GLUT_DOWN) if (button == GLUT_LEFT_BUTTON) flag--; if (flag == 0) 0; x = 1; y = 1; flg = MODUL GRAFIKA KOMPUTER 2017 Page 38

void renderscene(void) glclear(gl_color_buffer_bit); glclearcolor(1, 1, 1, 1); glpushmatrix(); glscalef(x, y, z); drawquad(); glpopmatrix(); glflush(); void timer(int value) glutpostredisplay(); gluttimerfunc(50, timer, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("interaksi Mouse"); gluortho2d(-w / 2, w / 2, -h / 2, h / 2); glutdisplayfunc(renderscene); glutmousefunc(mouse); gluttimerfunc(1, timer, 0); glutmainloop(); 4. MODUL GRAFIKA KOMPUTER 2017 Page 39

BAB VII OBJEK 3D A. TUJUAN a. Mampu memahami konsep Objek 3D wireframe pada opengl b. Mampu membuat objek 3d wirefirme pada opengl c. Mampu melakukan implemntasi transformasi pada objek 3d dengan OpenGL B. MATERI a. Pembuatan Objek 3D wireframe b. Transformasi Objek 3D wireframe a. Primitive 3D Ada beberapa bentuk primitive dari objek 3 dimensi. Promitive yaitu bentuk dasar yang dapat dengan mudah didefinisikan secara matematik. a. Sphere glutwiresphere(5, 20, 20); b. Cube glutwirecube(25); c. Cone glutwirecone(alas, tinggi, 20, 20); MODUL GRAFIKA KOMPUTER 2017 Page 40

d. Dodecahedron glutwiredodecahedron(); e. Teapot glutwireteapot(15); f. Torus glutwiretorus(luar, dalam, 20, 20); Setiap primitive 3D memiliki parameter nilai yang mengekspresikan letak dan bentuk primitive objek tersebut. b. Transformasi Objek 3 Dimensi Metode transformasi objek tiga dimensi sangat berbeda dengan objek dua dimensi karena terdapat sumbu z yang ditambahkan sebagai salah satu acuan untuk memperoleh posisi koordinat baru. a. Translasi (Perpindahan) Dalam tranformasi objek tiga dimensi, translasi adalah pemindahan suatu titik dari titik P=(x,y,z) ke posisi P=(x,y,z ) (Hearn, 1994) dengan menggunakan operasi matriks : Parameter t x, t y, dan t z menjelaskan perpindahan jarak untuk koordinat x, y, dan z. MODUL GRAFIKA KOMPUTER 2017 Page 41

Sebuah bangun tiga dimensi yang ditranslasikan dengan vektor tertentu, dilakukan dengan memindahkan titik-titik sesuai dengan vektor tersebut. Contoh Program dalam Open GL 1. Contoh Penerapan Cube pada GLUT Cube menggunakan fungsi void glutwirecube(gldouble size); untuk menentukan ukuran panjang sisi. #include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut = 0, sx = 0, sy = 0, sz = 0; void cube() glcolor3d(0, 0, 1); glutwirecube(10); void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, -40); glrotatef(sudut, sx, sy, sz); cube(); glutswapbuffers(); void init() glclearcolor(0.0, 0.0, 0.0, 1.0); glenable(gl_depth_test); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45., (GLdouble)w / (GLdouble)h,1., 300.); glmatrixmode(gl_modelview); void mykeyboard(unsigned char key, int x, int y) MODUL GRAFIKA KOMPUTER 2017 Page 42

if (key == 'x') sx = 1; sy = 0; sz = 0; sudut += 10; void update(int value) glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); Note: saja. Dengan interaksi keyboard y, maka objek akan berotasi pada sumbu y 2. Contoh Penerapan WireSphere pada GLUT WireSphere menggunakan fungsi void glutwiresphere(gldouble radius,glint slices, GLintstacks); untuk membuat bola berpusat pada asal pemodelan sistem koordinat. #include<stdlib.h> #include<glut.h> float w = 480, h = 480; float sudut = 0, sx = 0, sy = 0, sz = 0, z = -320; void sphere() glcolor3d(1, 1, 1); glutwiresphere(100, 150,100); void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, z); glrotatef(sudut, sx, sy, sz); sphere(); glutswapbuffers(); void resize(int w1, int h1) MODUL GRAFIKA KOMPUTER 2017 Page 43

glviewport(0, 0, w1, h1); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45.0, (float)w1 / (float)h1, 1.0, 300.0); glmatrixmode(gl_modelview); glloadidentity(); void mykeyboard(unsigned char key, int x, int y) if (key == 'y') sy = 1; sudut += 10; void update(int value) glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); 3. Contoh Penerapan WireCone pada GLUT WireCone menggunakan fungsi void glutwirecone(gldouble base, GLdouble height,glintslices, GLint stacks); untuk membuat ukuran benda ditentukan dari dasar jari-jari alasnya. #include<stdlib.h> #include<glut.h> float w = 480, h = 480; float sudut = 0, sx = 0, sy = 0, sz = 0, zz = -70; int t = 20; void WireCone() glcolor3d(0, 1, 1); glutwirecone(20, t, 50, 50); void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, zz); glrotatef(sudut, sx, sy, sz); WireCone(); glutswapbuffers(); MODUL GRAFIKA KOMPUTER 2017 Page 44

void init() glclearcolor(0.0, 0.0, 0.0, 1.0); glenable(gl_depth_test); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45., (GLdouble)w / (GLdouble)h,1., 300.); glmatrixmode(gl_modelview); void mykeyboard(unsigned char key, int x, int y) if (key == 'x') sx = 1; sy = 0; sz = 0; sudut += 10; void update(int value) glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); Note : Dengan interaksi keyoboard x, objek akan berotasi pada sumbu x saja. Dengan interaksi keyboard z, objek akan berotasi pada sumbu z saja 4. Contoh Penerapan Torus pada GLUT Torus menggunakan fungsi void glutwiretorus(gldouble innerradius, GLdouble outerradius,glint nsides, GLint rings);. untuk merender 12 sisi yang berpusat pada asal, dan dengan radius sama dengan kuadrat dari 3. #include <stdlib.h> #include <glut.h> float w = 480, h = 480; float sudut = 0, sx = 0, sy = 0, sz = 0, dalam = 20, luar = 50, sides = 50, rings = 50; void torus() glcolor3d(0, 1, 1); glutwiretorus(dalam, luar, sides, rings); MODUL GRAFIKA KOMPUTER 2017 Page 45

void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, -200); glrotatef(sudut, sx, sy, sz); torus(); glutswapbuffers(); void init() glclearcolor(0.0, 0.0, 0.0, 1.0); glenable(gl_depth_test); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45., (GLdouble)w / (GLdouble)h, 1., 300.); glmatrixmode(gl_modelview); void mykeyboard(unsigned char key, int x, int y) if (key == 'x') sx = 1; sy = 0; sz = 0; sudut += 10; void update(int value) glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); Note : Dengan interaksi keyoboard x, objek akan berotasi pada sumbu x saja. Dengan interaksi keyboard y, objek akan berotasi pada sumbu y saja. Dengan interaksi keyboard z, objek akan berotasi pada sumbu z saja. 5. Contoh Penerapan Dose pada GLUT Dode menggunakan fungsi void glutwiredodecahedron(void); untuk merenders padat atau wireframe 12-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sama dengan akar kuadrat dari 3 MODUL GRAFIKA KOMPUTER 2017 Page 46

#include <stdlib.h> #include <glut.h> float w = 480, h = 480; float sudut = 0, sx = 0, sy = 0, sz = 0, t = -7; void wiredode() glcolor3d(0, 1, 0); glutwiredodecahedron(); void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, t); glrotatef(sudut, sx, sy, sz); wiredode(); glutswapbuffers(); void init() glclearcolor(0.0, 0.0, 0.0, 1.0); glenable(gl_depth_test); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45., (GLdouble)w / (GLdouble)h,1., 300.); glmatrixmode(gl_modelview); void mykeyboard(unsigned char key, int x, int y) if (key == 'x') sx = 1; sy = 0; sz = 0; sudut += 10; void update(int value) glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); Note : Dengan interaksi keyoboard x, objek akan berotasi pada sumbu x saja. Dengan interaksi keyboard y, objek akan berotasi pada sumbu y saja. Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja. MODUL GRAFIKA KOMPUTER 2017 Page 47

6. Contoh Penerapan TetraHedron pada GLUT TetraHedron menggunakan fungsi glutwiredtetrahedronvoid (void); untuk merenders padat atau wireframe 4-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sama dengan akar kuadrat dari 3. #include <stdlib.h> #include <glut.h> float w=480,h=480; float sudut = 0, sx = 0, sy = 0, sz = 0, t = -5; void WireTetrahedron() glcolor3d(1, 0, 1); glutwiretetrahedron(); void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, t); glrotatef(sudut, sx, sy, sz); WireTetrahedron(); glutswapbuffers(); void init() glclearcolor(0.0, 0.0, 0.0, 1.0); glenable(gl_depth_test); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45., (GLdouble)w / (GLdouble)h,1., 300.); glmatrixmode(gl_modelview); void mykeyboard(unsigned char key, int x, int y) if (key == 'x') sx = 1; sy = 0; sz = 0; sudut += 10; void update(int value) glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); MODUL GRAFIKA KOMPUTER 2017 Page 48

Note : Dengan interaksi keyoboard x, objek akan berotasi pada sumbu x saja. Dengan interaksi keyboard y, objek akan berotasi pada sumbu y saja. Dengan interaksi keyboard z, objek akan berotasi pada sumbu z saja. 7. Contoh Penerapan OctaHedron pada GLUT OctaHedron menggunakan fungsi void glutwireoctahedron(void); #include <stdlib.h> #include <glut.h> float w = 480, h = 480; float sudut = 0, sx = 0, sy = 0, sz = 0, t = -5; void WireOctahedron() glcolor3d(1, 0, 1); glutwireoctahedron(); void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, t); glrotatef(sudut, sx, sy, sz); WireOctahedron(); glutswapbuffers(); void resize(int w1, int h1) glviewport(0, 0, w1, h1); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45.0, (float)w1 / (float)h1,1.0, 300.0); glmatrixmode(gl_modelview); glloadidentity(); void init() glclearcolor(0.0, 0.0, 0.0, 1.0); glenable(gl_depth_test); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45., (GLdouble)w / (GLdouble)h,1., 300.); glmatrixmode(gl_modelview); void mykeyboard(unsigned char key, int x, int y) if (key == 'x') sx = 1; sy = 0; sz = 0; sudut += 10; void update(int value) MODUL GRAFIKA KOMPUTER 2017 Page 49

glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); Note : init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); Dengan interaksi keyoboard x, objek akan berotasi pada sumbu x saja. Dengan interaksi keyboard y, objek akan berotasi pada sumbu y saja. Dengan interaksi keyboard z, objek akan berotasi pada sumbu z saja. 8. Contoh Penerapan Teapot pada GLUT Teapot menggunakan fungsi void glutwireteapot(gldouble size); Untuk merender dengan teapot dengan source code sebagai berikut : #include<stdlib.h> #include<glut.h> float w = 480, h = 480; float sudut = 0, sx = 0, sy = 0, sz = 0, t = -100, tepot = 10; void teapot() glcolor3d(1, 1, 1); glutwireteapot(tepot); void display() glclear(gl_color_buffer_bit GL_DEPTH_BUFFER_BIT); glloadidentity(); gltranslatef(0, 0, t); glrotatef(sudut, sx, sy, sz); teapot(); glutswapbuffers(); void init() glclearcolor(0.0, 0.0, 0.0, 1.0); glenable(gl_depth_test); glmatrixmode(gl_projection); glloadidentity(); gluperspective(45., (GLdouble)w / (GLdouble)h, 1., 300.); glmatrixmode(gl_modelview); void mykeyboard(unsigned char key, int x, int y) if (key == 'x') sx = 1; sy = 0; MODUL GRAFIKA KOMPUTER 2017 Page 50

sz = 0; sudut += 10; void myspecialkeyboard(int key, int x, int y) switch (key) case GLUT_KEY_UP: tepot += 1; break; case GLUT_KEY_DOWN: tepot -= 1; break; void update(int value) glutpostredisplay(); gluttimerfunc(50, update, 0); void main(int argc, char **argv) glutinit(&argc, argv); glutinitdisplaymode(glut_double GLUT_DEPTH GLUT_RGBA); glutinitwindowposition(100, 100); glutinitwindowsize(w, h); glutcreatewindow("objek 3D"); glutdisplayfunc(display); init(); gluttimerfunc(50, update, 0); glutkeyboardfunc(mykeyboard); glutmainloop(); Note : Dengan interaksi keyoboard x, objek akan berotasi pada sumbu x saja. Dengan interaksi keyboard y, objek akan beritasi pada sumbu y saja. Dengan interaksi keyboard z, objek akan berotasi pada sumbu z saja. MODUL GRAFIKA KOMPUTER 2017 Page 51

Bab VIII Objek Solid dan Lighting A. TUJUAN a. Mampu memahami konsep Objek 3D solid pada opengl b. Mampu membuat objek 3d solid pada opengl c. Mampu melakukan implemntasi transformasi pada objek 3d dengan OpenGL d. Mampu memahami konsep lighting pada opengl e. Mampu melakukan implementasi lighting objek 3d dengan opngl B. MATERI a. Pembuatan Objek 3D Solid b. Transformasi Objek 3D Solid c. Lighting Objek 3d Solid Visualisasi tentu saja tidak akan terjadi bila tidak ada cahaya. Pencahayaan merupakan esensi dari visualisasi dan merupakan topik yang sangat kompleks. Hingga tahap ini lingkungan diberi pencahayaan default atau standar dengan cahaya lingkungan (ambient) yang sama pada setiap titik. Kondisi default atau standar dapat dicapai kapan saja dengan mematikan status Lighting menjadi disabled dengan gldisable(gl_light0). OpenGL akan melakukan komputas\i warna setiap pixel di display akhir, ditampilkan adegan itu dilakukan di frame buffer. Bagian dari komputasi ini tergantung pada pencahayaan yang digunakan dalam adegan dan hal tersebut berkenaan dengan bagaimana suatu benda dalam adegan yang memantulkan atau menyerap cahaya. Sebagai contoh saja misalnya sebuah lautan memiliki warna yang berbeda pada cerah maupun pada saat hari mendung. Adanya sinar matahari atau awan menentukan apakah laut termelihat sebagai pirus terang atau abu-abu keruh kehijauan. Pada kenyataannya, sebagian besar objek bahkan yang tidak terlihat tiga dimensi sampai mereka diterangi cahaya. Pada gambar 2 menunjukkan dua versi dari adegan yang persis sama yaitu sebuah bola, dimana satu dengan pencahayaan dan satu tanpa pencahayaan. Seperti ditunjukkan pada Gambar diatas, wilayah gelap tampak tidak berbeda dari bulatan dua dimensi. hal Ini menunjukkan betapa pentingnya interaksi antara obyek dan cahaya adalah dalam menciptakan adegan tiga dimensi. Agar obyek yang telah dibuat terlihat lebih nyata, diperlukan MODUL GRAFIKA KOMPUTER 2017 Page 52

tambahan efek pencahayaan pada obyek yang telah kita buat. Pencahayaan adalah proses pemberian cahaya pada suatu obyek, dikenal dengan istilah lighting atau iluminasi. Pada OpenGL terdapat sebuah perbedaan penting antara warna dan pencahayaan yang perlu pahami. Ketika menggunakan pencahayaan atau tekstur pemetaan dengan efek pencahayaan dihidupkan, warna dari vertex adalah efek kumulatif dari warna bahan dan cahaya yang bersinar di puncak. Ketika pencahayaan dimatikan, maka warna dari vertex adalah efek pengaturan warna dan warna yang berbeda dengan bahan warna. Dengan menggunakan OpenGL, dapat memanipulasi pencahayaan dan obyek dalam sebuah adegan untuk menciptakan berbagai macam efek. Dalam pokok bahasan pada bab pencahayaan akan dimulai dengan sebuah pencahayaan yang penting pada permukaan tersembunyi penghapusan. Kemudian menjelaskan bagaimana untuk mengontrol pencahayaan dalam suatu adegan, membahas model konseptual OpenGL pencahayaan, dan menggambarkan secara rinci cara mengatur pencahayaan dengan banyak parameter untuk mendapatkan efek tertentu. Pada akhir bab, perhitungan matematis yang menentukan bagaimana warna mempengaruhi pencahayaan disajikan A. Cahaya Ambient, Diffuse, dan Specular Pencahayaan ambient adalah cahaya yang sudah berserakan begitu banyak disebabkan oleh lingkungan dan arahnya tidak mungkin ditentukan atau tampaknya datang dari segala penjuru. Backlighting pada sebuah ruangan memiliki komponen ambient besar, karena sebagian besar cahaya yang mencapai mata yang memantul dari banyak permukaan. Sebuah lampu sorot kecil di luar rumah memiliki komponen ambient, sebagian besar cahaya dalam arah yang sama, dan karena diluar, sangat sedikit cahaya mencapai mata setelah memantul dari benda-benda lain. Ketika cahaya ambient menyerang permukaan, maka akan tersebar merata di segala penjuru. Komponen cahaya diffuse adalah komponen yang berasal dari satu arah, jadi akan terang kalau hal tersebut terjadi tepat diatas sebuah permukaan dibandingkan jika hampir tidak terjadi di atas permukaan. Setelah mengenai permukaan, akan tersebar merata di segala penjuru, sehingga tampak sama-sama terang, tak peduli di mana mata berada. Setiap cahaya yang datang dari posisi atau arah tertentu mungkin memiliki komponen diffuse. MODUL GRAFIKA KOMPUTER 2017 Page 53

Cahaya specular datang dari arah tertentu, dan cenderung terpental pada permukaan dalam arah yang diinginkan. sinar laser berkualitas tinggi memantul pada cermin dan menghasilkan hampir 100 persen refleksi specular. Logam atau plastik mengkilap memiliki komponen specular tinggi, dan kapur atau karpet telah hampir tidak ada. Specularity dapat juga dianggap sebagai shininess. Meskipun sumber cahaya memberikan satu distribusi frekuensi, komponen ambient, diffuse, dan specular mungkin berbeda. Sebagai contoh, jika memiliki cahaya putih di sebuah ruangan dengan dinding merah, cahaya yang tersebar cenderung menjadi warna merah, meskipun cahaya secara langsung objek putih yang mencolok. OpenGL memungkinkan untuk mengatur nilai merah, hijau, dan biru untuk setiap komponen cahaya secara bebas. Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat juga pencahayaan Emmisive, yaitu sebuah objek memancarkan cahayanya sendiri. parameter variabel untuk memilih material warna jenis apa yang diaktifkan pilihannya antara lain seprti tabel dibawah MODUL GRAFIKA KOMPUTER 2017 Page 54