Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: 1412-9434
Pewarnaan dan Perputaran Polygon Untuk Objek Gambar Segi Tiga dan Segi Empat Menggunakan Program OPENGL 32 Aqwam Rosadi Kardian, Bheta Agus Wardijono STMIK JAKARTA STI&K
[email protected],
[email protected] Abstrak Pada saat ini pembuatan model tiga dimensi untuk simulasi dan permainan 3D mendominasi aplikasi gra k komersial di dunia. Untuk dapat membuat sebuah model berbasis 3D dibutuhkan API (Application Programming Interface) yang dapat menjembatani antara aplikasi dan kartu gra s. Saat ini API gra s 3D yang hanya bisa digunakan di Windows dan OpenGL yang bersifat multi platform. Karena sifatnya yang multi platform maka untuk mengembangkan permainan 3D digunakan API OpenGL. : Rotation, Triangle dan Quadrilateral, OpenGL
Kata Kunci
1 Pendahuluan Pada pembuatan program ini adalah pembentukan suatu objek polygon dimana dijelaskan dengan tahapan atau langkah penyusunan program, serta source code dibuat dengan menggunakan bahasa pemograman C++ dan dapat dijalankan dengan menggunakan OpenGL 32, Visual C++, Microsoft Visual Studio. Tujuan dari program ini adalah untuk merancang, membuat 2 (dua) objek gambar suatu segibanyak (polygon) yang letaknya secara berdampingan antar objek gambar satu dengan yang lainnya, yaitu bentuk : Triangle dan Quadrilateral, dengan suatu perspektif perhitungan yang benar, dan selanjutnya adalah melakukan pewarnaan (colors) dasar pada objek gambar dan diluar objek tersebut (background). Selain itu membuat simulasi program suatu teknik pewarnaan secara halus (smooth) dari suatu objek polygon pada bidang datar ( at). Tujuan dari program ini adalah untuk merubah warna (change colors polygon) dari objek gambar suatu polygon (segibanyak) yang letaknya secara berdampingan antar objek gambar satu dengan yang lainnya, yaitu Triangle dan Quadrilateral, dengan suatu perspektif perhitungan yang benar,
dan selanjutnya adalah melakukan pemberian warna (colors) dasar secara halus (smooth) pada bidang dari objek gambar tersebut, sedangkan warna diluar objek tersebut (background) tetap berwarna hitam (black), dimana objek gambar (image) untuk : 1. Objek gambar Segi tiga (Triangle) Objek gambar segi tiga sama sisi, dari warna asal Putih (White) dirubah dengan diberikan 3 (tiga) warna yaitu: Merah (red), Hijau (green) dan Abu-abu (Abu-abu) atau RGB pewarnaan dimulai dari pusat sudut Segi tiga tersebut secara berpendar (Shading) secara halus (smooth), sedangkan warna diluar objek gambar adalah tetap yaitu warna Hitam (Black). 2. Objek gambar Segi empat (Quadrilateral) Pada objek gambar segi empat, yang mempunyai bentuk bujur sangkar diberikan atau dirubah warna dasarnya dari warna putih (White) menjadi Abu-abu (Blue) secara merata atau semua bidang tanpa pencahayaan (lighting) pada seluruh permukaan objek tersebut, dan warna diluar objek 46
Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: 1412-9434
gambar tetap berwarma Hitam (Black)
Tabel 1: Mode pada GLBegin
2 Tinjauan Pustaka OpenGL (Open Graphics Library) adalah spesi kasi standar yang mende nisikan sebuah crossbahasa, cross-platform API untuk menulis aplikasi yang menghasilkan komputer 2D dan 3D gra s. Terdiri dari lebih dari 250 panggilan fungsi yang berbeda yang dapat digunakan untuk menggambar tiga dimensi yang kompleks adeganadegan dari primitif sederhana. OpenGL dikembangkan oleh Silicon Graphics Inc (SGI) pada tahun 1992 dan secara luas digunakan dalam CAD, Virtual Reality, Visualisasi Ilmiah, Visualisasi Informasi, dan Simulasi Penerbangan. OpenGL adalah API software untuk hardware gra s, dirancang sebagai antarmuka, e sien hardware-independen untuk diterapkan pada banyak platform hardware yang berbeda Intuitif antarmuka, prosedural dengan C mengikat Tidak ada perintah windowing dan tidakada perintah tingkat tinggi untuk menggambarkan model objek tiga dimensi. OpenGL Utility Library (GLU) menyediakan banyak tur pemodelan, seperti permukaan quadric dan NURBS Curves dan perGambar 2.1, dibawah ini menjelaskan mode mukaan [2]. menggambar pada OpenGL dan bagaimana tata urutan titik-titik dihubungkan sehingga membentuk primitif. 2.1 OPENGL OpenGL merupakan kepanjangan dari open graphic library. OpenGL diproduksi oleh Silicon Graphics, Inc (SGI) dan pada awalnya ditujukan hanya untuk sistem komputer mereka, tetapi dalam perkembangannya, OpenGL diterima menjadi salah satu bakuan (standard) dalam gra k akomputer dan saat ini telah diimplementasikan dalam berbagai sistem komputer. OpenGL merupakan pustaka program (program library) yang menyediakan sejumlah perintah yang berhubungan dengan gra ka. Perintah glBegin (mode) mengawali perintah menggambar. Mode merupakan konstanta yang menyatakan bagaimana OpenGL harus terhubung titik (vertex) yang akan digambar. Mode yang dapat digunakan diperlihatkan pada tabel 2.1, dibawah ini.
Gambar 1: Mode gambar pada OpenGL 47
Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: 1412-9434 2.2
GLUT
4 Hasil dan Pembahasan
OpenGL tidak menyediakan fungsi fungsi un- 4.1 Analisis dan Simulasi Program tuk manajemen antarmuka dan interaksi denPembuatan Objek dan Warna gan pengguna. Hal ini dikarenakan setiap sisDasar tem operasi memiliki fungsi tersendiri untuk menangani OpenGL,misalnya GLX untuk Lin- Merupakan penjelasan dalam tahapan pembuux, Wiggle untuk Microsoft Windows, AGL, atan objek gambar (polygon) dan warna terseNSOpenGl,CGLuntuk MacOSX. Karena fungsi but, sebagai berikut [1]: fungsi ini spesi k untuk system operasi terten1. Pende nisian dan pemanggilan library tu maka membuat program yang ditulis menjadi header le untuk : OpenGL32 Library, tidak multi platform. Untuk menghindari hal ini GLU32 Library, dan Glaux Library. Script : maka dapat digunakan GLUT (OpenGL Utility #include
// Header File For The Toolkit) untuk membuat antarmuka yang indeOpenGL32 Library #include // Header File For The penden[3] . GLu32 Library #include // Header File For The Glaux Library
3 Metode Penelitian Metodologi yang digunakan dalam pembuatan objek gambar segitiga dan segiempat ini adalah sebagai berikut: 1. Studi literatur Tentang bagaimana mengimplementasikan dalam memodelkan suatu struktur tanaman. Kami juga perlu mempelajari pertumbuhan tanaman yang telah ada dan juga proses penetuan warna dan titik atau vertex. Studi untuk mempelajari pengontrolan koordinat dalam ruang dalam domain tiga dimensi juga diperlukan untuk proses visualisasi. 2. Pembuatan dan analisa program Proses pembuatan program dibagi ke dalam beberapa tahapan : membuat blok program untuk pengontrolan window OpenGL, membuat blok program untuk melakukan proses penentuan titik dan warna objek. Membuat blok program untuk penerapan kontrol visualisasi tiga dimensi dan juga menampilkan hasil ke layar. 3. Pengujian dan simulasi program Langkah selanjutnya adalah menguji program atau aplikasi yang telah dibuat, dan mengamati hasil yang didapatkan.
2. Pemberian warna dasar hitam untuk latar tampilan (background) Script : int InitGL (GLvoid)// All Setup For OpenGL Goes Here { glShadeModel (GL_SMOOTH) ;// Enable Smooth Shading glClearColor (0.0 f , 0.0 f , 0.0 f , 0.5 f ) ;// Black Background glClearDepth (1.0 f ) ;// Depth Buffer Setup glEnable (GL_DEPTH_TEST) ;// Enables Depth Testing glDepthFunc (GL_LEQUAL) ;// The Type Of Depth Testing To Do glHint (GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST) ;// Really Nice Perspective Calculations return TRUE; // I n i t i a l i z a t i o n Went OK }
3. Penentuan objek tampilan pada layar monitor (view) baik lebar dan tinggi objek dari gambar objek tersebut secara perspektif. Script : Lvoid ReSizeGLScene ( GLsizei width , GLsizei height )// Resize And I n i t i a l i z e The GL Window { i f ( height==0) // Prevent A Divide By Zero By { height =1;// Making Height Equal One } glViewport (0 ,0 , width , height ) ;// Reset The Current Viewport glMatrixMode (GL_PROJECTION) ;// Select The Projection Matrix glLoadIdentity () ;// Reset The Projection Matrix // Calculate The Aspect Ratio Of The Window gluPerspective (45.0 f , ( GLfloat ) width /( GLfloat ) height ,0.1 f ,100.0 f ) ; glMatrixMode (GL_MODELVIEW) ; // Select The Modelview Matrix glLoadIdentity () ;// Reset The Modelview Matrix } glViewport (0 ,0 , width , height ) ;// Reset The Current Viewport glMatrixMode (GL_PROJECTION) ;// Select The Projection Matrix glLoadIdentity () ;// Reset The Projection Matrix // Calculate The Aspect Ratio Of The Window gluPerspective (45.0 f , ( GLfloat ) width /( GLfloat ) height ,0.1 f ,100.0 f ) ; glMatrixMode (GL_MODELVIEW) ;// Select The Modelview Matrix glLoadIdentity () ;// Reset The Modelview Matrix 48
Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: 1412-9434
4. Penentuan titik-titik (vertex) polygon, Pembuatan warna (Colouring) polygon teryaitu triangle dan quadrilateral hadap titik (vertex) Triangel (Red, Green, Blue) dan Quadrilateral (Blue) Script : int DrawGLScene(GLvoid) //Here ' s Where We Do All The Drawing { glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) ;// Clear Screen And Depth Buffer glLoadIdentity () ;// Reset The Current Modelview Matrix glTranslatef ( − 1.5 f ,0.0 f , − 6.0 f ) ;//Move Left 1.5 Units And Into The Screen 6.0 glBegin (GL_TRIANGLES) ;// Drawing Using Triangles glVertex3f ( 0.0 f , 1.0 f , 0.0 f ) ;// Top glVertex3f ( − 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Left glVertex3f ( 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Right glEnd () ;// Finished Drawing The Triangle glTranslatef (3.0 f ,0.0 f ,0.0 f ) ; // Move Right 3 Units glBegin (GL_QUADS) ;// Draw A Quad glVertex3f ( − 1.0 f , 1.0 f , 0.0 f ) ;// Top Left glVertex3f ( 1.0 f , 1.0 f , 0.0 f ) ;// Top Right glVertex3f ( 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Right glVertex3f ( − 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Left glEnd () ;// Done Drawing The Quad return TRUE;// Keep Going
Script : int DrawGLScene(GLvoid) // Here ' s Where We Do All The Drawing { glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) ;// Clear Screen And Depth Buffer glLoadIdentity () ;// Reset The Current Modelview Matrix glTranslatef ( − 1.5f ,0.0 f , − 6.0 f ) ;// Move Left 1.5 Units And Into The Screen 6.0 glBegin (GL_TRIANGLES) ;// Drawing Using Triangles glColor3f (1.0 f ,0.0 f ,0.0 f ) ;// Set The Color To Red glVertex3f ( 0.0 f , 1.0 f , 0.0 f ) ;// Top glColor3f (0.0 f ,1.0 f ,0.0 f ) ;// Set The Color To Green glVertex3f ( − 1.0f , − 1.0 f , 0.0 f ) ;// Bottom Left glColor3f (0.0 f ,0.0 f ,1.0 f ) ;// Set The Color To Blue glVertex3f ( 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Right glEnd () ;// Finished Drawing The Triangle glTranslatef (3.0 f ,0.0 f ,0.0 f ) ; // Move Right 3 Units glColor3f (0.5 f ,0.5 f ,1.0 f ) ;// Set The Color To Blue One Time Only glBegin (GL_QUADS) ;// Draw A Quad glVertex3f ( − 1.0f , 1.0 f , 0.0 f ) ;// Top Left glVertex3f ( 1.0 f , 1.0 f , 0.0 f ) ;// Top Right glVertex3f ( 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Right glVertex3f ( − 1.0f , − 1.0 f , 0.0 f ) ;// Bottom Left Hasil dari simulasi pada pembuatan program ter- glEnd () ;// Done Drawing The Quad hadap objek polygin tersebut , adalah seperti pa- }return TRUE;// Keep Going
da gambar 2.2.
Hasil dari simulasi pada pembuatan program terhadap objek polygin tersebut , dalah seperti pada gambar 2.3.
Gambar 2: Obyek seti tiga dan segi empat
Tampilan hasil akhir program bagian-1, membuat 2 buah objek polygon, Triangle dan Quadri- Gambar 3: Hasil pengubahan warna dasar obyek lateral dengan warna putih (white) dan warna latar hitam (black). 4.2
Analisis
dan
Perubahan
Simulasi
Warna
Program
pada
Bidang
Tampilan hasil akhir program bagian-2 mengubah dan menentukan warna yang berbeda terUntuk melakukan pengubahan warna obyek dari hadap objek polygon, Triangle (Red, Green, yang semula putih menjadi warna lain, dilakukan Blue) dan Quadrilateral (Blue) dan warna latar dengan cara sebagai berikut: (background) hitam (Black). datar Objek Polygon
49
Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: 1412-9434 4.3
Analisis
dan
Simulasi
Program
Membuat Rotation pada Bidang datar Objek Polygon
Merupakan penjelasan dalam tahapan prosedur pende nisian putaran terhadap objek gambar segitiga yang berputar secara horizontal terhadap koordinat sumbu-y, dan segiempat yang berputar secara vertical terhadap koordinat sumbu-x dan sumbu-y, sebagai berikut : Script : int DrawGLScene(GLvoid) // Here ' s Where We Do All The Drawing { glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT) ;// Clear Screen And Depth Buffer glLoadIdentity () ;// Reset The Current Modelview Matrix glTranslatef ( − 1.5 f ,0.0 f , − 6.0 f ) ;// Move Left 1.5 Units And Into The Screen 6.0 glRotatef ( rtri ,0.0 f ,1.0 f ,0.0 f ) ;// Rotate The Triangle On The Y axis (NEW) glBegin (GL_TRIANGLES) ;// Start Drawing A Triangle glColor3f (1.0 f ,0.0 f ,0.0 f ) ;// Set Top Point Of Triangle To Red glVertex3f ( 0.0 f , 1.0 f , 0.0 f ) ;// First Point Of The Triangle glColor3f (0.0 f ,1.0 f ,0.0 f ) ;// Set Left Point Of Triangle To Green glVertex3f ( − 1.0 f , − 1.0 f , 0.0 f ) ;// Second Point Of The Triangle glColor3f (0.0 f ,0.0 f ,1.0 f ) ;// Set Right Point Of Triangle To Blue glVertex3f ( 1.0 f , − 1.0 f , 0.0 f ) ;// Third Point Of The Triangle glEnd () ;// Done Drawing The Triangle glLoadIdentity () ; // Reset The Current Modelview Matrix glTranslatef (1.5 f ,0.0 f , − 6.0 f ) ;// Move Right 1.5 Units And Into The Screen 6.0 glRotatef ( rquad ,1.0 f ,0.0 f ,0.0 f ) ;// Rotate The Quad On The X axis (NEW) glColor3f (0.5 f ,0.5 f ,1.0 f ) ;// Set The Color To Blue One Time Only glBegin (GL_QUADS) ; // Draw A Quad glVertex3f ( − 1.0 f , 1.0 f , 0.0 f ) ;// Top Left glVertex3f ( 1.0 f , 1.0 f , 0.0 f ) ;// Top Right glVertex3f ( 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Right glVertex3f ( − 1.0 f , − 1.0 f , 0.0 f ) ;// Bottom Left glEnd () ;// Done Drawing The Quad r t r i +=0.2 f ;// Increase The Rotation Variable For The Triangle (NEW) rquad −=0.15 f ;// Decrease The Rotation Variable For The Quad (NEW) return TRUE;// Keep Going }
Hasil akhir dari program setelah dilakukan proses debug (compile) dan run seperti tampak pada gambar 2.3. Tampilan hasil akhir program bagian-3, melakukan putaran(rotating) terhadap sumbu objek polygon untuk segitiga (triangle) rotasi secara dari kiri ke kanan (horizontal), dan untuk segi empat (quadrilateral) dari atas ke bawah (vertical).
Gambar 4: Obyek yang telah mengalami rotasi
4.4
Hasil Pengamatan dan Simulasi
Selanjutnya pada bagian ini program dilakukan perubahan yaitu untuk mengubah warna (color) dan juga putaran (rotasi) terhadap objek polygon tersebut, yaitu sebagai berikut : 1. Mengubah warna Latar (background) Proses untuk dapat mengubah warna latar dari tampilan yang asli, iatu dari hitam ke putih adalah dengan mengubah kode warna tersebut, sepert pada script berikut ini : glClearColor (30.0 f ,190.0 f ,100.0 f , 0.5 f ) ; // White Background
2. Mengubah warna Polygon (a) Objek gambar Segi tiga (Triangle) Objek gambar (image) segi tiga sama sisi, dilakukan dari warna asal yaitu: Merah (red), Hijau (green) dan Abuabu (abu-abu) dirubah menjadi Hijau (green), Merah (red) dan Putih (white) yang dimulai dari sudut Segitiga tersebut secara berpendar (shading), sedangkan diluar objek gambar adalah tetap warna Hitam (black). Script program : glBegin (GL_TRIANGLES) ; glColor3f (1.0 f ,0.0 f ,0.0 f ) ; glVertex3f ( 0.0 f , 1.0 f , 0.0 f ) ; glColor3f (0.0 f ,1.0 f ,0.0 f ) ; glVertex3f ( − 1.0f , − 1.0 f , 0.0 f ) ; glColor3f (1.0 f ,1.0 f ,1.0 f ) ; glVertex3f ( 1.0 f , − 1.0 f , 0.0 f ) ; glEnd () ;
50
Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: 1412-9434
(b) Objek gambar Segi empat (Quadrilat- 5 Penutup eral) Pada objek gambar segi empat, Dari hasil analisis dengan pengujian dan simuyang mempunyai bentuk bujur lasi, maka dapat disimpulkan sebagai berikut : sangkar diberikan atau dirubah warna 1. OpenGL adalah suatu library gra s dasarnya dari Abu-abu (blue) menjastandar yang dapat digunakan untuk di Merah Muda (Red) secara merata keperluan-keperluan pemrograman gra s. ( at) pada seluruh permukaan objek Library dasar dari OpenGL adalah GLUT, tersebut. dengan warna objek gambar (Graphic Library Utility) dengan fasilitas putih dan warna diluar objek gambar yang bisa dikembangkan. Selain itu dipertetap berwarma Hitam (black). lukan le header OpenGL-GLUT yaitu Script program : glut.h. glColor3f (1.0 f ,0.0 f ,0.5 f ) ; glBegin (GL_QUADS) ; glVertex3f ( − 1.0 f , 1.0 f , glVertex3f ( 1.0 f , 1.0 f , glVertex3f ( 1.0 f , − 1.0 f , glVertex3f ( − 1.0 f , − 1.0 f , glEnd () ;
0.0 f ) ; 0.0 f ) ; 0.0 f ) ; 0.0 f ) ;
3. Mengubah Putaran (rotasi) Kedua objek polygon tersebut selanjutnya dilakukan perubahan putaran (rotasi) terhadap sumbu-Y (Y-Axis) dari 00 ke 900 . Script program : glRotatef (45 ,0.0 f ,1.0 f ,0.0 f ) ;
2. Pemakaian OpenGL sangat membantu dalam membuat dan merancang suatu model objek baik untuk 2D dan 3D, serta melakukan modi kasi obyek yang telah dibuat dengan cara mengubah parameter dari fungsi-fungsi dari OpenGL yang ada. Dalam contoh yang telah dibahas sebelumnya, pengubahan parameter dari fungsi glColor3f dapat mengubah warna, dan glRotatef dapat merotasi/memutar obyek.
Dari pembahasan analisis program bagian-1, bagian-2 dan bagian-3, maka hasil dari perubaDaftar Pustaka han warna (color) dan perputaran (rotation) terhadap objek polygon, Triangle dan Quadrilateral [1] Je Molofee, http://nehe.gamedev.net, 2011. tampak seperti pada Gambar 2.5, berikut [2] Shreiner, Dave, OpenGL Programming Guide; The Khronos OpenGL ARB Working Group, Seventh Edition : The O cial Guide to Learning OpenGL, Version 3.0 and 3.1 Addison Wesley, Boston, 2009. [3] URL:http://download.microsoft.com/download/9/b/0/9b06f663-23d0-4709-a2-90df8dc 558bb/ MSDNlibvs2008sp1Readme.htm/ MSDN Library for Visual Studio 2008, 2011. [4] URL:http://www.users.itlabs.umn.edu/class es/Spring-2009/csci4107/GlutSetupWin.html, 2011.
Gambar 5: Hasil perubahan dari warna dan 5 URL: http://user.xmission.com/~nate/ glut. putaran terhadap objek segitiga dan segiempat [4] html, 2011.
51
