Pewarnaan dan Perputaran Polygon Untuk Objek Gambar Segi Tiga dan Segi Empat Menggunakan Program OPENGL 32

Transkripsi

1 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 Abstrak Pada saat ini pembuatan model tiga dimensi untuk simulasi dan permainan 3D mendominasi aplikasi grak komersial di dunia. Untuk dapat membuat sebuah model berbasis 3D dibutuhkan API (Application Programming Interface) yang dapat menjembatani antara aplikasi dan kartu gras. Saat ini API gras 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. Kata Kunci : Rotation, Triangle dan Quadrilateral, OpenGL 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

2 gambar tetap berwarma Hitam (Black) Tabel 1: Mode pada GLBegin 2 Tinjauan Pustaka OpenGL (Open Graphics Library) adalah spesi- kasi standar yang mendenisikan sebuah crossbahasa, cross-platform API untuk menulis aplikasi yang menghasilkan komputer 2D dan 3D gras. 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 gras, dirancang sebagai antarmuka, esien 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 permukaan [2]. 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 grak akomputer dan saat ini telah diimplementasikan dalam berbagai sistem komputer. OpenGL merupakan pustaka program (program library) yang menyediakan sejumlah perintah yang berhubungan dengan graka. 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 2.1, dibawah ini menjelaskan mode menggambar pada OpenGL dan bagaimana tata urutan titik-titik dihubungkan sehingga membentuk primitif. Gambar 1: Mode gambar pada OpenGL 47

3 2.2 GLUT OpenGL tidak menyediakan fungsi fungsi untuk manajemen antarmuka dan interaksi dengan pengguna. Hal ini dikarenakan setiap sistem operasi memiliki fungsi tersendiri untuk menangani OpenGL,misalnya GLX untuk Linux, Wiggle untuk Microsoft Windows, AGL, NSOpenGl,CGLuntuk MacOSX. Karena fungsi fungsi ini spesik untuk system operasi tertentu maka membuat program yang ditulis menjadi tidak multi platform. Untuk menghindari hal ini maka dapat digunakan GLUT (OpenGL Utility Toolkit) untuk membuat antarmuka yang independen[3]. 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. 4 Hasil dan Pembahasan 4.1 Analisis dan Simulasi Program Pembuatan Objek dan Warna Dasar Merupakan penjelasan dalam tahapan pembuatan objek gambar (polygon) dan warna tersebut, sebagai berikut [1]: 1. Pendenisian dan pemanggilan library header le untuk : OpenGL32 Library, GLU32 Library, dan Glaux Library. #i n c l u d e <g l \ g l. h>// Header F i l e For The OpenGL32 Library #include <gl \ glu. h>// Header F i l e For The GLu32 Library #include <gl \ glaux. h>// Header F i l e For The Glaux Library 2. Pemberian warna dasar hitam untuk latar tampilan (background) 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 C a l c u l a t i o n s 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. 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 glmode (GL_PROJECTION) ;// S e l e c t The P r o j e c t i o n glloadidentity ( ) ;// Reset The Projection // Calculate The Aspect Ratio Of The Window g l u P e r s p e c t i v e ( f, ( GLfloat ) width /( GLfloat ) height, 0. 1 f, f ) ; glmode (GL_MODELVIEW) ; // S e l e c t The Modelview glloadidentity ( ) ;// Reset The Modelview glviewport (0,0, width, height ) ;// Reset The Current Viewport glmode (GL_PROJECTION) ;// S e l e c t The P r o j e c t i o n glloadidentity ( ) ;// Reset The Projection // Calculate The Aspect Ratio Of The Window g l u P e r s p e c t i v e ( f, ( GLfloat ) width /( GLfloat ) height, 0. 1 f, f ) ; glmode (GL_MODELVIEW) ;// S e l e c t The Modelview glloadidentity ( ) ;// Reset The Modelview 48

4 4. Penentuan titik-titik (vertex) polygon, yaitu triangle dan quadrilateral i n t 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 g l T r a n s l a t e f ( 1.5 f, 0. 0 f, 6.0 f ) ;//Move Left 1.5 glbegin (GL_TRIANGLES) ;// Drawing Using T r i a n g l e s g l V e r t e x 3 f ( 0.0 f, 1.0 f, 0.0 f ) ;// Top g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Bottom Left g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Bottom Right glend ( ) ;// Finished Drawing The Triangle g l T r a n s l a t e f ( 3. 0 f, 0. 0 f, 0. 0 f ) ; // Move Right 3 Units glbegin (GL_QUADS) ; // Draw A Quad g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Top Left g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Top Right g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Bottom Right g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Bottom Left glend ( ) ;// Done Drawing The Quad return TRUE;// Keep Going Hasil dari simulasi pada pembuatan program terhadap objek polygin tersebut, adalah seperti pada gambar 2.2. Pembuatan warna (Colouring) polygon terhadap titik (vertex) Triangel (Red, Green, Blue) dan Quadrilateral (Blue) int DrawGLScene ( GLvoid ) // Here ' s Where We Do All The Drawing g lclear (GL_COLOR_BUFFER_BIT GL_DEPTH_BUFFER_BIT) ;// Clear Screen And Depth Buffer glloadidentity ( ) ;// Reset The Current Modelview g l T r a n s l a t e f ( 1.5 f, 0. 0 f, 6.0 f ) ;// Move Left 1.5 glbegin (GL_TRIANGLES) ;// Drawing Using Triangles g l C o l o r 3 f ( 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 g l C o l o r 3 f ( 0. 0 f, 1. 0 f, 0. 0 f ) ;// Set The Color To Green glvertex3f ( 1.0 f, 1.0 f, 0.0 f ) ;// Bottom Left g l C o l o r 3 f ( 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 g l T r a n s l a t e f ( 3. 0 f, 0. 0 f, 0. 0 f ) ; // Move Right 3 Units g l C o l o r 3 f ( 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 return TRUE;// Keep Going 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 Quadrilateral dengan warna putih (white) dan warna latar hitam (black). 4.2 Analisis dan Simulasi Program Perubahan Warna pada Bidang datar Objek Polygon Untuk melakukan pengubahan warna obyek dari yang semula putih menjadi warna lain, dilakukan dengan cara sebagai berikut: Gambar 3: Hasil pengubahan warna dasar obyek Tampilan hasil akhir program bagian-2 mengubah dan menentukan warna yang berbeda terhadap objek polygon, Triangle (Red, Green, Blue) dan Quadrilateral (Blue) dan warna latar (background) hitam (Black). 49

5 4.3 Analisis dan Simulasi Program Membuat Rotation pada Bidang datar Objek Polygon Merupakan penjelasan dalam tahapan prosedur pendenisian 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 : i n t DrawGLScene ( GLvoid ) // Here ' s Where We Do All The Drawing g l C l e a r (GL_COLOR_BUFFER_BIT GL_DEPTH_BUFFER_BIT) ;// Clear Screen And Depth Buffer glloadidentity ( ) ;// Reset The Current Modelview g l T r a n s l a t e f ( 1.5 f, 0. 0 f, 6.0 f ) ;// Move Left 1.5 g l R o t a t e f ( r t r i, 0. 0 f, 1. 0 f, 0. 0 f ) ;// Rotate The Triangle On The Y axis (NEW) glbegin (GL_TRIANGLES) ; // Start Drawing A Triangle g l C o l o r 3 f ( 1. 0 f, 0. 0 f, 0. 0 f ) ;// Set Top Point Of Triangle To Red g l V e r t e x 3 f ( 0.0 f, 1.0 f, 0.0 f ) ;// F i r s t Point Of The Triangle g l C o l o r 3 f ( 0. 0 f, 1. 0 f, 0. 0 f ) ;// Set Left Point Of Triangle To Green g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Second Point Of The Triangle g l C o l o r 3 f ( 0. 0 f, 0. 0 f, 1. 0 f ) ;// Set Right Point Of Triangle To Blue g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Third Point Of The Triangle glend ( ) ;// Done Drawing The Triangle glloadidentity ( ) ; // Reset The Current Modelview g l T r a n s l a t e f ( 1. 5 f, 0. 0 f, 6.0 f ) ;// Move Right 1.5 g l R o t a t e f ( rquad, 1. 0 f, 0. 0 f, 0. 0 f ) ;// Rotate The Quad On The X axis (NEW) g l C o l o r 3 f ( 0. 5 f, 0. 5 f, 1. 0 f ) ;// Set The Color To Blue One Time Only glbegin (GL_QUADS) ; // Draw A Quad g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Top Left g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Top Right g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ;// Bottom Right g l V e r t e x 3 f ( 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 ( f, f, 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). S c r i p t program : glbegin (GL_TRIANGLES) ; g l C o l o r 3 f ( 1. 0 f, 0. 0 f, 0. 0 f ) ; glvertex3f ( 0.0 f, 1.0 f, 0.0 f ) ; g l C o l o r 3 f ( 0. 0 f, 1. 0 f, 0. 0 f ) ; glvertex3f ( 1.0 f, 1.0 f, 0.0 f ) ; g l C o l o r 3 f ( 1. 0 f, 1. 0 f, 1. 0 f ) ; glvertex3f ( 1.0 f, 1.0 f, 0.0 f ) ; glend ( ) ; 50

6 (b) Objek gambar Segi empat (Quadrilateral) Pada objek gambar segi empat, yang mempunyai bentuk bujur sangkar diberikan atau dirubah warna dasarnya dari Abu-abu (blue) menjadi Merah Muda (Red) secara merata (at) pada seluruh permukaan objek tersebut. dengan warna objek gambar putih dan warna diluar objek gambar tetap berwarma Hitam (black). S c r i p t program : g l C o l o r 3 f ( 1. 0 f, 0. 0 f, 0. 5 f ) ; glbegin (GL_QUADS) ; g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ; g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ; g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ; g l V e r t e x 3 f ( 1.0 f, 1.0 f, 0.0 f ) ; glend ( ) ; 3. Mengubah Putaran (rotasi) Kedua objek polygon tersebut selanjutnya dilakukan perubahan putaran (rotasi) terhadap sumbu-y (Y-Axis) dari 0 0 ke S c r i p t program : g l R o t a t e f ( 4 5, 0. 0 f, 1. 0 f, 0. 0 f ) ; Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: Penutup Dari hasil analisis dengan pengujian dan simulasi, maka dapat disimpulkan sebagai berikut : 1. OpenGL adalah suatu library gras standar yang dapat digunakan untuk keperluan-keperluan pemrograman gras. Library dasar dari OpenGL adalah GLUT, (Graphic Library Utility) dengan fasilitas yang bisa dikembangkan. Selain itu diperlukan le header OpenGL-GLUT yaitu glut.h. 2. Pemakaian OpenGL sangat membantu dalam membuat dan merancang suatu model objek baik untuk 2D dan 3D, serta melakukan modikasi 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 gl- Color3f dapat mengubah warna, dan glrotatef dapat merotasi/memutar obyek. Dari pembahasan analisis program bagian-1, bagian-2 dan bagian-3, maka hasil dari perubahan warna (color) dan perputaran (rotation) terhadap objek polygon, Triangle dan Quadrilateral tampak seperti pada Gambar 2.5, berikut Daftar Pustaka [1] Je Molofee, [2] Shreiner, Dave, OpenGL Programming Guide; The Khronos OpenGL ARB Working Group, Seventh Edition : The Ocial Guide to Learning OpenGL, Version 3.0 and 3.1 Addison Wesley, Boston, [3] URL: 558bb/ MSDNlibvs2008sp1Readme.htm/ MSDN Library for Visual Studio 2008, Gambar 5: Hasil perubahan dari warna dan putaran terhadap objek segitiga dan segiempat [4] URL: es/spring-2009/csci4107/glutsetupwin.html, [4] 5 URL: glut. html,