pewarnaan dan perputaran polygon untuk objek gambar...

Volume 10 No : 2 ISSN Nomor : 1412-9434 lZOtt

JURNAL ILMIAH

KOMPUTASIKomputer & Sistem lnformasi

1-11

Arsitektur Mikroprosesor Berbasiskan Perangkat Lunak SPARCSunny Arief Sudiro, Dwi Putra Budi Wijaya dan Widya Agsari

t2-24Perancangan Jaringan Komputer Di LPK STMIK Jakarta Dengan Menggunakan TeknologiServer Based Computing Citrix MetaframeYudi Irawan Chandra

25-29Pemanfaatan Embedded Sistem Untuk Menggerakan Motor DC Pada Pintu OtomatisIndrianto

30-4sAnalisa Dan Evaluasi Daya Guna Pada Aplikasi Website (Studi Kasus Padawww.BHTNEKA.COM)Susi Wdayati, Skom., MM dan lre Puspa Wardhani, SKom., MMSI

46-51Pewarnaan dan Perputaran untuk Objek Segitiga dan Segiempat Menggunakan ProgramOpenGL32Aqwam RosadiKardian dan Bheta Agus Wardijono

52-57Penghitung Pengunjung Perpustakaan STMIK Jakarta STI&K Menggunakan SensorInfraredAbdul Hakim, SKom., MT dan Tino Afrizal

STMIK JAKARTASTI&K

Vol. 10, Nomor2Desemb er 20ll

Pewarnaan dan Perputaran Polygon Untuk ObjekGambar 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 mendominasiaplikasi gra�k komersial di dunia. Untuk dapat membuat sebuah model berbasis 3D dibutuhkanAPI (Application Programming Interface) yang dapat menjembatani antara aplikasi dan kartugra�s. Saat ini API gra�s 3D yang hanya bisa digunakan di Windows dan OpenGL yang bersifatmulti platform. Karena sifatnya yang multi platform maka untuk mengembangkan permainan3D digunakan API OpenGL.

Kata Kunci : Rotation, Triangle dan Quadrilateral, OpenGL

1 Pendahuluan

Pada pembuatan program ini adalah pemben-tukan suatu objek polygon dimana dijelaskandengan tahapan atau langkah penyusunan pro-gram, serta source code dibuat dengan menggu-nakan bahasa pemograman C++ dan dapat di-jalankan dengan menggunakan OpenGL 32, Vi-sual C++, Microsoft Visual Studio. Tujuan dariprogram ini adalah untuk merancang, membuat 2(dua) objek gambar suatu segibanyak (polygon)yang letaknya secara berdampingan antar objekgambar satu dengan yang lainnya, yaitu bentuk: Triangle dan Quadrilateral, dengan suatu per-spektif perhitungan yang benar, dan selanjutnyaadalah melakukan pewarnaan (colors) dasar padaobjek gambar dan diluar objek tersebut (back-ground).

Selain itu membuat simulasi program suatuteknik pewarnaan secara halus (smooth) dari su-atu objek polygon pada bidang datar (�at). Tu-juan dari program ini adalah untuk merubahwarna (change colors polygon) dari objek gambarsuatu polygon (segibanyak) yang letaknya secaraberdampingan antar objek gambar satu denganyang lainnya, yaitu Triangle dan Quadrilateral,dengan suatu perspektif perhitungan yang benar,

dan selanjutnya adalah melakukan pemberianwarna (colors) dasar secara halus (smooth) padabidang dari objek gambar tersebut, sedangkanwarna diluar objek tersebut (background) tetapberwarna hitam (black), dimana objek gambar(image) untuk :

1. Objek gambar Segi tiga (Triangle)

Objek gambar segi tiga sama sisi, dariwarna asal Putih (White) dirubah den-gan diberikan 3 (tiga) warna yaitu:Merah (red), Hijau (green) dan Abu-abu(Abu-abu) atau RGB pewarnaan dimu-lai dari pusat sudut Segi tiga tersebutsecara berpendar (Shading) secara halus(smooth), sedangkan warna diluar objekgambar adalah tetap yaitu warna Hitam(Black).

2. Objek gambar Segi empat (Quadrilateral)

Pada objek gambar segi empat, yang mem-punyai bentuk bujur sangkar diberikanatau dirubah warna dasarnya dari warnaputih (White) menjadi Abu-abu (Blue) se-cara merata atau semua bidang tanpa penc-ahayaan (lighting) pada seluruh permukaanobjek tersebut, dan warna diluar objek

Jurnal Komputasi, Volume 10 Nomor: 2 Desember 2011 ISSN: 1412-9434

46

gambar tetap berwarma Hitam (Black)

2 Tinjauan Pustaka

OpenGL (Open Graphics Library) adalah spesi-�kasi standar yang mende�nisikan sebuah cross-bahasa, cross-platform API untuk menulis ap-likasi yang menghasilkan komputer 2D dan 3Dgra�s. Terdiri dari lebih dari 250 panggilanfungsi yang berbeda yang dapat digunakan untukmenggambar tiga dimensi yang kompleks adegan-adegan dari primitif sederhana. OpenGL dikem-bangkan oleh Silicon Graphics Inc (SGI) padatahun 1992 dan secara luas digunakan dalamCAD, Virtual Reality, Visualisasi Ilmiah, Visu-alisasi Informasi, dan Simulasi Penerbangan.

OpenGL adalah API software untuk hard-ware gra�s, dirancang sebagai antarmuka, e�sienhardware-independen untuk diterapkan padabanyak platform hardware yang berbeda Intuitifantarmuka, prosedural dengan C mengikat Tidakada perintah windowing dan tidakada perintahtingkat tinggi untuk menggambarkan model ob-jek tiga dimensi. OpenGL Utility Library (GLU)menyediakan banyak �tur pemodelan, sepertipermukaan quadric dan NURBS Curves dan per-mukaan [2].

2.1 OPENGL

OpenGL merupakan kepanjangan dari opengraphic library. OpenGL diproduksi oleh Sili-con Graphics, Inc (SGI) dan pada awalnya di-tujukan hanya untuk sistem komputer mereka,tetapi dalam perkembangannya, OpenGL diter-ima menjadi salah satu bakuan (standard) dalamgra�k akomputer dan saat ini telah diimple-mentasikan dalam berbagai sistem komputer.OpenGL merupakan pustaka program (programlibrary) yang menyediakan sejumlah perintahyang berhubungan dengan gra�ka.

Perintah glBegin (mode) mengawali perin-tah menggambar. Mode merupakan konstantayang menyatakan bagaimana OpenGL harus ter-hubung titik (vertex) yang akan digambar. Modeyang dapat digunakan diperlihatkan pada tabel2.1, dibawah ini.

Tabel 1: Mode pada GLBegin

Gambar 2.1, dibawah ini menjelaskan modemenggambar pada OpenGL dan bagaimana tataurutan titik-titik dihubungkan sehingga mem-bentuk primitif.

Gambar 1: Mode gambar pada OpenGL


47

2.2 GLUT

OpenGL tidak menyediakan fungsi fungsi un-tuk manajemen antarmuka dan interaksi den-gan pengguna. Hal ini dikarenakan setiap sis-tem operasi memiliki fungsi tersendiri untukmenangani OpenGL,misalnya GLX untuk Lin-ux, Wiggle untuk Microsoft Windows, AGL,NSOpenGl,CGLuntuk MacOSX. Karena fungsifungsi ini spesi�k untuk system operasi terten-tu maka membuat program yang ditulis menjaditidak multi platform. Untuk menghindari hal inimaka dapat digunakan GLUT (OpenGL UtilityToolkit) untuk membuat antarmuka yang inde-penden[3] .

3 Metode Penelitian

Metodologi yang digunakan dalam pembuatanobjek gambar segitiga dan segiempat ini adalahsebagai berikut:

1. Studi literatur

Tentang bagaimana mengimplementasikandalam memodelkan suatu struktur tana-man. Kami juga perlu mempelajari per-tumbuhan tanaman yang telah ada dan ju-ga proses penetuan warna dan titik atauvertex. Studi untuk mempelajari pen-gontrolan koordinat dalam ruang dalam do-main tiga dimensi juga diperlukan untukproses visualisasi.

2. Pembuatan dan analisa program

Proses pembuatan program dibagi kedalam beberapa tahapan : membuatblok program untuk pengontrolan windowOpenGL, membuat blok program untukmelakukan proses penentuan titik dan war-na objek. Membuat blok program untukpenerapan kontrol visualisasi tiga dimensidan juga menampilkan hasil ke layar.

3. Pengujian dan simulasi program

Langkah selanjutnya adalah menguji pro-gram atau aplikasi yang telah dibuat, danmengamati hasil yang didapatkan.

4 Hasil dan Pembahasan

4.1 Analisis dan Simulasi Program

Pembuatan Objek dan Warna

Dasar

Merupakan penjelasan dalam tahapan pembu-atan objek gambar (polygon) dan warna terse-but, sebagai berikut [1]:

1. Pende�nisian dan pemanggilan libraryheader �le untuk : OpenGL32 Library,GLU32 Library, dan Glaux Library.Scr ip t :#inc lude <g l \ g l . h>// Header F i l e For The

OpenGL32 Library#inc lude <g l \ glu . h>// Header F i l e For The

GLu32 Library#inc lude <g l \ glaux . h>// Header F i l e For The

Glaux Library

2. Pemberian warna dasar hitam untuk latartampilan (background)Scr ip t :i n t InitGL (GLvoid ) // Al l Setup For OpenGL Goes

Here{glShadeModel (GL_SMOOTH) ;// Enable Smooth

Shadingg lClearColor ( 0 . 0 f , 0 .0 f , 0 .0 f , 0 .5 f ) ;// Black

BackgroundglClearDepth (1 . 0 f ) ;// Depth Buf fer SetupglEnable (GL_DEPTH_TEST) ;// Enables Depth

TestingglDepthFunc (GL_LEQUAL) ;// The Type Of Depth

Testing To DoglHint (GL_PERSPECTIVE_CORRECTION_HINT,

GL_NICEST) ;// Real ly Nice Perspect iveCa lcu la t i ons

return TRUE; // I n i t i a l i z a t i o n Went OK}

3. Penentuan objek tampilan pada layar mon-itor (view) baik lebar dan tinggi objek darigambar objek tersebut secara perspektif.Scr ip t :Lvoid ReSizeGLScene ( GLsize i width , GLsize i

he ight ) // Res ize And I n i t i a l i z e The GLWindow

{i f ( he ight==0) // Prevent A Divide By Zero By

{height =1;// Making Height Equal One}

glViewport (0 ,0 , width , he ight ) ;// Reset TheCurrent Viewport

glMatrixMode (GL_PROJECTION) ;// Se l e c t ThePro j ec t ion Matrix

g lLoadIdent i ty ( ) ;// Reset The Pro jec t ionMatrix

// Calcu late The Aspect Ratio Of The Windowg luPer spec t ive (45 .0 f , ( GLfloat ) width /( GLfloat )

height , 0 . 1 f , 1 00 . 0 f ) ;glMatrixMode (GL_MODELVIEW) ; // Se l e c t The

Modelview Matrixg lLoadIdent i ty ( ) ;// Reset The Modelview Matrix

}glViewport (0 ,0 , width , he ight ) ;// Reset The

Current ViewportglMatrixMode (GL_PROJECTION) ;// Se l e c t The

Pro j ec t ion Matrixg lLoadIdent i ty ( ) ;// Reset The Pro jec t ion

Matrix// Calcu late The Aspect Ratio Of The Windowg luPer spec t ive (45 .0 f , ( GLfloat ) width /( GLfloat )

height , 0 . 1 f , 1 00 . 0 f ) ;glMatrixMode (GL_MODELVIEW) ;// Se l e c t The



48

4. Penentuan titik-titik (vertex) polygon,yaitu triangle dan quadrilateral

Sc r ip t :i n t DrawGLScene (GLvoid ) //Here ' s Where We Do

Al l The Drawing {g lC l ea r (GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT) ;// Clear Screen AndDepth Buf fe r

g lLoadIdent i ty ( ) ;// Reset The Current ModelviewMatrix

g lT ran s l a t e f (−1.5 f , 0 . 0 f ,−6.0 f ) ;//Move Left 1 .5Units And Into The Screen 6 .0

glBegin (GL_TRIANGLES) ;// Drawing UsingTr iang l e s

g lVer tex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;// Topg lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom Leftg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Bottom RightglEnd ( ) ;// Finished Drawing The Tr iang leg lT ran s l a t e f ( 3 . 0 f , 0 . 0 f , 0 . 0 f ) ; // Move Right

3 Unitsg lBegin (GL_QUADS) ;// Draw A Quadg lVer tex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;// Top Leftg lVer tex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;// Top Rightg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Bottom Rightg lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom LeftglEnd ( ) ;// Done Drawing The Quadreturn TRUE;// Keep Going

Hasil dari simulasi pada pembuatan program ter-hadap objek polygin tersebut , adalah seperti pa-da gambar 2.2.

Gambar 2: Obyek seti tiga dan segi empat

Tampilan hasil akhir program bagian-1, mem-buat 2 buah objek polygon, Triangle dan Quadri-lateral dengan warna putih (white) dan warnalatar hitam (black).


Perubahan Warna pada Bidang

datar Objek Polygon

Untuk melakukan pengubahan warna obyek dariyang semula putih menjadi warna lain, dilakukandengan cara sebagai berikut:

Pembuatan warna (Colouring) polygon ter-hadap titik (vertex) Triangel (Red, Green, Blue)dan Quadrilateral (Blue)

Scr ip t :i n t DrawGLScene(GLvoid ) // Here ' s Where We Do All

The Drawing{g lClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)

;// Clear Screen And Depth Buf ferg lLoadIdent i ty ( ) ;// Reset The Current Modelview

Matrixg lTrans l a t e f ( −1.5 f , 0 . 0 f , −6.0 f ) ;// Move Left 1 .5

Units And Into The Screen 6.0glBegin (GL_TRIANGLES) ;// Drawing Using Tr iang lesg lCo lo r3 f ( 1 . 0 f , 0 . 0 f , 0 . 0 f ) ;// Set The Color To Redg lVertex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;// Topg lCo lo r3 f ( 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;// Set The Color To Greeng lVertex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom Leftg lCo lo r3 f ( 0 . 0 f , 0 . 0 f , 1 . 0 f ) ;// Set The Color To Blueg lVertex3 f ( 1 .0 f , −1.0 f , 0 .0 f ) ;// Bottom RightglEnd () ;// Finished Drawing The Triangleg lTran s l a t e f ( 3 . 0 f , 0 . 0 f , 0 . 0 f ) ; // Move Right 3 Unitsg lCo lo r3 f ( 0 . 5 f , 0 . 5 f , 1 . 0 f ) ;// Set The Color To Blue

One Time OnlyglBegin (GL_QUADS) ;// Draw A Quadg lVertex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;// Top Leftg lVertex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;// Top Rightg lVertex3 f ( 1 .0 f , −1.0 f , 0 .0 f ) ;// Bottom Rightg lVertex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom LeftglEnd () ;// Done Drawing The Quadreturn TRUE;// Keep Going}

Hasil dari simulasi pada pembuatan programterhadap objek polygin tersebut , dalah sepertipada gambar 2.3.

Gambar 3: Hasil pengubahan warna dasar obyek

Tampilan hasil akhir program bagian-2 men-gubah dan menentukan warna yang berbeda ter-hadap objek polygon, Triangle (Red, Green,Blue) dan Quadrilateral (Blue) dan warna latar(background) hitam (Black).


49


Membuat Rotation pada Bidang

datar Objek Polygon

Merupakan penjelasan dalam tahapan prosedurpende�nisian putaran terhadap objek gambar se-gitiga yang berputar secara horizontal terhadapkoordinat sumbu-y, dan segiempat yang berputarsecara vertical terhadap koordinat sumbu-x dansumbu-y, sebagai berikut :

Sc r ip t :i n t DrawGLScene (GLvoid ) // Here ' s Where We Do Al l The

Drawing{g lC l ea r (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)


Matrixg lT ran s l a t e f (−1.5 f , 0 . 0 f ,−6.0 f ) ;// Move Left 1 .5

Units And Into The Screen 6 .0g lRota te f ( r t r i , 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;// Rotate The

Tr iang le On The Y ax i s (NEW)glBegin (GL_TRIANGLES) ;// Start Drawing A Triang leg lCo l o r3 f ( 1 . 0 f , 0 . 0 f , 0 . 0 f ) ;// Set Top Point Of

Tr iang le To Redg lVer tex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;// F i r s t Point Of The

Tr iang leg lCo l o r3 f ( 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;// Set Le f t Point Of

Tr iang le To Greeng lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Second Point Of The

Tr iang leg lCo l o r3 f ( 0 . 0 f , 0 . 0 f , 1 . 0 f ) ;// Set Right Point Of

Tr iang le To Blueg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Third Point Of The

Tr iang leglEnd ( ) ;// Done Drawing The Tr iang leg lLoadIdent i ty ( ) ; // Reset The Current

Modelview Matrixg lT ran s l a t e f ( 1 . 5 f , 0 . 0 f ,−6.0 f ) ;// Move Right 1 .5

Units And Into The Screen 6 .0g lRota te f ( rquad , 1 . 0 f , 0 . 0 f , 0 . 0 f ) ;// Rotate The Quad

On The X ax i s (NEW)g lCo l o r3 f ( 0 . 5 f , 0 . 5 f , 1 . 0 f ) ;// Set The Color To Blue

One Time OnlyglBegin (GL_QUADS) ; // Draw A Quadg lVer tex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;// Top Leftg lVer tex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;// Top Rightg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Bottom Rightg lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom LeftglEnd ( ) ;// Done Drawing The Quadr t r i +=0.2 f ;// Inc r ea s e The Rotation Var iable For The

Tr iang le (NEW)rquad−=0.15 f ;// Decrease The Rotation Var iable For

The Quad (NEW)return TRUE;// Keep Going}

Hasil akhir dari program setelah dilakukanproses debug (compile) dan run seperti tampakpada gambar 2.3.

Tampilan hasil akhir program bagian-3,melakukan putaran(rotating) terhadap sumbuobjek polygon untuk segitiga (triangle) rotasi se-cara dari kiri ke kanan (horizontal), dan untuk se-gi empat (quadrilateral) dari atas ke bawah (ver-tical).

Gambar 4: Obyek yang telah mengalami rotasi

4.4 Hasil Pengamatan dan Simulasi

Selanjutnya pada bagian ini program dilakukanperubahan yaitu untuk mengubah warna (color)dan juga putaran (rotasi) terhadap objek poly-gon tersebut, yaitu sebagai berikut :

1. Mengubah warna Latar (background)

Proses untuk dapat mengubah warna latardari tampilan yang asli, iatu dari hitam keputih adalah dengan mengubah kode war-na tersebut, sepert pada script berikut ini:

g lClearColor (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 samasisi, dilakukan dari warna asal yaitu:Merah (red), Hijau (green) dan Abu-abu (abu-abu) dirubah menjadi Hi-jau (green), Merah (red) dan Putih(white) yang dimulai dari sudut Segit-iga tersebut secara berpendar (shad-ing), sedangkan diluar objek gambaradalah tetap warna Hitam (black).

Scr ipt program :glBegin (GL_TRIANGLES) ;g lCo lo r3 f (1 . 0 f , 0 . 0 f , 0 . 0 f ) ;g lVertex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;g lCo lo r3 f (0 . 0 f , 1 . 0 f , 0 . 0 f ) ;g lVertex3 f ( −1.0 f ,−1.0 f , 0 .0 f ) ;g lCo lo r3 f (1 . 0 f , 1 . 0 f , 1 . 0 f ) ;g lVertex3 f ( 1 .0 f , −1.0 f , 0 .0 f ) ;glEnd () ;


4646

50

(b) Objek gambar Segi empat (Quadrilat-eral)

Pada objek gambar segi empat,yang mempunyai bentuk bujursangkar diberikan atau dirubah warnadasarnya dari Abu-abu (blue) menja-di Merah Muda (Red) secara merata(�at) pada seluruh permukaan objektersebut. dengan warna objek gambarputih dan warna diluar objek gambartetap berwarma Hitam (black).

Sc r ip t program :g lCo l o r3 f ( 1 . 0 f , 0 . 0 f , 0 . 5 f ) ;g lBegin (GL_QUADS) ;g lVer tex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;g lVer tex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;g lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;g lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;glEnd ( ) ;

3. Mengubah Putaran (rotasi)

Kedua objek polygon tersebut selanjutnyadilakukan perubahan putaran (rotasi) ter-hadap sumbu-Y (Y-Axis) dari 00 ke 900.

Sc r ip t program :g lRota te f ( 45 , 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;

Dari pembahasan analisis program bagian-1,bagian-2 dan bagian-3, maka hasil dari peruba-han warna (color) dan perputaran (rotation) ter-hadap objek polygon, Triangle dan Quadrilateraltampak seperti pada Gambar 2.5, berikut

Gambar 5: Hasil perubahan dari warna danputaran terhadap objek segitiga dan segiempat

5 Penutup

Dari hasil analisis dengan pengujian dan simu-lasi, maka dapat disimpulkan sebagai berikut :

1. OpenGL adalah suatu library gra�sstandar yang dapat digunakan untukkeperluan-keperluan pemrograman gra�s.Library dasar dari OpenGL adalah GLUT,(Graphic Library Utility) dengan fasilitasyang bisa dikembangkan. Selain itu diper-lukan �le header OpenGL-GLUT yaituglut.h.

2. Pemakaian OpenGL sangat membantudalam membuat dan merancang suatumodel objek baik untuk 2D dan 3D, ser-ta melakukan modi�kasi obyek yang telahdibuat dengan cara mengubah parameterdari fungsi-fungsi dari OpenGL yang ada.Dalam contoh yang telah dibahas sebelum-nya, pengubahan parameter dari fungsi gl-Color3f dapat mengubah warna, dan glRo-

tatef dapat merotasi/memutar obyek.

Daftar Pustaka

[1] Je� Molofee, http://nehe.gamedev.net, 2011.

[2] Shreiner, Dave, OpenGL ProgrammingGuide; The Khronos OpenGL ARB WorkingGroup, Seventh Edition : The O�cial Guideto Learning OpenGL, Version 3.0 and 3.1Addison Wesley, Boston, 2009.

[3] URL:http://download.microsoft.com/down-load/9/b/0/9b06f663-23d0-4709-a2�-90df8dc558bb/ MSDNlibvs2008sp1Readme.htm/MSDN Library for Visual Studio 2008, 2011.

[4] URL:http://www.users.itlabs.umn.edu/classes/Spring-2009/csci4107/GlutSetupWin.html,2011.

[4] URL: http://user.xmission.com/~nate/ glut.html, 2011.


51

5

Pewarnaan dan Perputaran Polygon Untuk ObjekGambar 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 mendominasiaplikasi gra�k komersial di dunia. Untuk dapat membuat sebuah model berbasis 3D dibutuhkanAPI (Application Programming Interface) yang dapat menjembatani antara aplikasi dan kartugra�s. Saat ini API gra�s 3D yang hanya bisa digunakan di Windows dan OpenGL yang bersifatmulti platform. Karena sifatnya yang multi platform maka untuk mengembangkan permainan3D digunakan API OpenGL.

Kata Kunci : Rotation, Triangle dan Quadrilateral, OpenGL

1 Pendahuluan

Pada pembuatan program ini adalah pemben-tukan suatu objek polygon dimana dijelaskandengan tahapan atau langkah penyusunan pro-gram, serta source code dibuat dengan menggu-nakan bahasa pemograman C++ dan dapat di-jalankan dengan menggunakan OpenGL 32, Vi-sual C++, Microsoft Visual Studio. Tujuan dariprogram ini adalah untuk merancang, membuat 2(dua) objek gambar suatu segibanyak (polygon)yang letaknya secara berdampingan antar objekgambar satu dengan yang lainnya, yaitu bentuk: Triangle dan Quadrilateral, dengan suatu per-spektif perhitungan yang benar, dan selanjutnyaadalah melakukan pewarnaan (colors) dasar padaobjek gambar dan diluar objek tersebut (back-ground).

Selain itu membuat simulasi program suatuteknik pewarnaan secara halus (smooth) dari su-atu objek polygon pada bidang datar (�at). Tu-juan dari program ini adalah untuk merubahwarna (change colors polygon) dari objek gambarsuatu polygon (segibanyak) yang letaknya secaraberdampingan antar objek gambar satu denganyang lainnya, yaitu Triangle dan Quadrilateral,dengan suatu perspektif perhitungan yang benar,

dan selanjutnya adalah melakukan pemberianwarna (colors) dasar secara halus (smooth) padabidang dari objek gambar tersebut, sedangkanwarna diluar objek tersebut (background) tetapberwarna hitam (black), dimana objek gambar(image) untuk :

1. Objek gambar Segi tiga (Triangle)

Objek gambar segi tiga sama sisi, dariwarna asal Putih (White) dirubah den-gan diberikan 3 (tiga) warna yaitu:Merah (red), Hijau (green) dan Abu-abu(Abu-abu) atau RGB pewarnaan dimu-lai dari pusat sudut Segi tiga tersebutsecara berpendar (Shading) secara halus(smooth), sedangkan warna diluar objekgambar adalah tetap yaitu warna Hitam(Black).

2. Objek gambar Segi empat (Quadrilateral)

Pada objek gambar segi empat, yang mem-punyai bentuk bujur sangkar diberikanatau dirubah warna dasarnya dari warnaputih (White) menjadi Abu-abu (Blue) se-cara merata atau semua bidang tanpa penc-ahayaan (lighting) pada seluruh permukaanobjek tersebut, dan warna diluar objek


46

gambar tetap berwarma Hitam (Black)

2 Tinjauan Pustaka

OpenGL (Open Graphics Library) adalah spesi-�kasi standar yang mende�nisikan sebuah cross-bahasa, cross-platform API untuk menulis ap-likasi yang menghasilkan komputer 2D dan 3Dgra�s. Terdiri dari lebih dari 250 panggilanfungsi yang berbeda yang dapat digunakan untukmenggambar tiga dimensi yang kompleks adegan-adegan dari primitif sederhana. OpenGL dikem-bangkan oleh Silicon Graphics Inc (SGI) padatahun 1992 dan secara luas digunakan dalamCAD, Virtual Reality, Visualisasi Ilmiah, Visu-alisasi Informasi, dan Simulasi Penerbangan.

OpenGL adalah API software untuk hard-ware gra�s, dirancang sebagai antarmuka, e�sienhardware-independen untuk diterapkan padabanyak platform hardware yang berbeda Intuitifantarmuka, prosedural dengan C mengikat Tidakada perintah windowing dan tidakada perintahtingkat tinggi untuk menggambarkan model ob-jek tiga dimensi. OpenGL Utility Library (GLU)menyediakan banyak �tur pemodelan, sepertipermukaan quadric dan NURBS Curves dan per-mukaan [2].

2.1 OPENGL

OpenGL merupakan kepanjangan dari opengraphic library. OpenGL diproduksi oleh Sili-con Graphics, Inc (SGI) dan pada awalnya di-tujukan hanya untuk sistem komputer mereka,tetapi dalam perkembangannya, OpenGL diter-ima menjadi salah satu bakuan (standard) dalamgra�k akomputer dan saat ini telah diimple-mentasikan dalam berbagai sistem komputer.OpenGL merupakan pustaka program (programlibrary) yang menyediakan sejumlah perintahyang berhubungan dengan gra�ka.

Perintah glBegin (mode) mengawali perin-tah menggambar. Mode merupakan konstantayang menyatakan bagaimana OpenGL harus ter-hubung titik (vertex) yang akan digambar. Modeyang dapat digunakan diperlihatkan pada tabel2.1, dibawah ini.

Tabel 1: Mode pada GLBegin

Gambar 2.1, dibawah ini menjelaskan modemenggambar pada OpenGL dan bagaimana tataurutan titik-titik dihubungkan sehingga mem-bentuk primitif.

Gambar 1: Mode gambar pada OpenGL


47

2.2 GLUT

OpenGL tidak menyediakan fungsi fungsi un-tuk manajemen antarmuka dan interaksi den-gan pengguna. Hal ini dikarenakan setiap sis-tem operasi memiliki fungsi tersendiri untukmenangani OpenGL,misalnya GLX untuk Lin-ux, Wiggle untuk Microsoft Windows, AGL,NSOpenGl,CGLuntuk MacOSX. Karena fungsifungsi ini spesi�k untuk system operasi terten-tu maka membuat program yang ditulis menjaditidak multi platform. Untuk menghindari hal inimaka dapat digunakan GLUT (OpenGL UtilityToolkit) untuk membuat antarmuka yang inde-penden[3] .

3 Metode Penelitian

Metodologi yang digunakan dalam pembuatanobjek gambar segitiga dan segiempat ini adalahsebagai berikut:

1. Studi literatur

Tentang bagaimana mengimplementasikandalam memodelkan suatu struktur tana-man. Kami juga perlu mempelajari per-tumbuhan tanaman yang telah ada dan ju-ga proses penetuan warna dan titik atauvertex. Studi untuk mempelajari pen-gontrolan koordinat dalam ruang dalam do-main tiga dimensi juga diperlukan untukproses visualisasi.

2. Pembuatan dan analisa program

Proses pembuatan program dibagi kedalam beberapa tahapan : membuatblok program untuk pengontrolan windowOpenGL, membuat blok program untukmelakukan proses penentuan titik dan war-na objek. Membuat blok program untukpenerapan kontrol visualisasi tiga dimensidan juga menampilkan hasil ke layar.

3. Pengujian dan simulasi program

Langkah selanjutnya adalah menguji pro-gram atau aplikasi yang telah dibuat, danmengamati hasil yang didapatkan.

4 Hasil dan Pembahasan


Pembuatan Objek dan Warna

Dasar

Merupakan penjelasan dalam tahapan pembu-atan objek gambar (polygon) dan warna terse-but, sebagai berikut [1]:

1. Pende�nisian dan pemanggilan libraryheader �le untuk : OpenGL32 Library,GLU32 Library, dan Glaux Library.Scr ip t :#inc lude <g l \ g l . h>// Header F i l e For The

OpenGL32 Library#inc lude <g l \ glu . h>// Header F i l e For The

GLu32 Library#inc lude <g l \ glaux . h>// Header F i l e For The

Glaux Library

2. Pemberian warna dasar hitam untuk latartampilan (background)Scr ip t :i n t InitGL (GLvoid ) // Al l Setup For OpenGL Goes

Here{glShadeModel (GL_SMOOTH) ;// Enable Smooth

Shadingg lClearColor ( 0 . 0 f , 0 .0 f , 0 .0 f , 0 .5 f ) ;// Black

BackgroundglClearDepth (1 . 0 f ) ;// Depth Buf fer SetupglEnable (GL_DEPTH_TEST) ;// Enables Depth

TestingglDepthFunc (GL_LEQUAL) ;// The Type Of Depth

Testing To DoglHint (GL_PERSPECTIVE_CORRECTION_HINT,

GL_NICEST) ;// Real ly Nice Perspect iveCa lcu la t i ons

return TRUE; // I n i t i a l i z a t i o n Went OK}

3. Penentuan objek tampilan pada layar mon-itor (view) baik lebar dan tinggi objek darigambar objek tersebut secara perspektif.Scr ip t :Lvoid ReSizeGLScene ( GLsize i width , GLsize i

he ight ) // Res ize And I n i t i a l i z e The GLWindow

{i f ( he ight==0) // Prevent A Divide By Zero By

{height =1;// Making Height Equal One}

glViewport (0 ,0 , width , he ight ) ;// Reset TheCurrent Viewport

glMatrixMode (GL_PROJECTION) ;// Se l e c t ThePro j ec t ion Matrix

g lLoadIdent i ty ( ) ;// Reset The Pro jec t ionMatrix

// Calcu late The Aspect Ratio Of The Windowg luPer spec t ive (45 .0 f , ( GLfloat ) width /( GLfloat )

height , 0 . 1 f , 1 00 . 0 f ) ;glMatrixMode (GL_MODELVIEW) ; // Se l e c t The


}glViewport (0 ,0 , width , he ight ) ;// Reset The

Current ViewportglMatrixMode (GL_PROJECTION) ;// Se l e c t The

Pro j ec t ion Matrixg lLoadIdent i ty ( ) ;// Reset The Pro jec t ion

Matrix// Calcu late The Aspect Ratio Of The Windowg luPer spec t ive (45 .0 f , ( GLfloat ) width /( GLfloat )

height , 0 . 1 f , 1 00 . 0 f ) ;glMatrixMode (GL_MODELVIEW) ;// Se l e c t The



48

4. Penentuan titik-titik (vertex) polygon,yaitu triangle dan quadrilateral

Sc r ip t :i n t DrawGLScene (GLvoid ) //Here ' s Where We Do

Al l The Drawing {g lC l ea r (GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT) ;// Clear Screen AndDepth Buf fe r

g lLoadIdent i ty ( ) ;// Reset The Current ModelviewMatrix

g lT ran s l a t e f (−1.5 f , 0 . 0 f ,−6.0 f ) ;//Move Left 1 .5Units And Into The Screen 6 .0

glBegin (GL_TRIANGLES) ;// Drawing UsingTr iang l e s

g lVer tex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;// Topg lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom Leftg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Bottom RightglEnd ( ) ;// Finished Drawing The Tr iang leg lT ran s l a t e f ( 3 . 0 f , 0 . 0 f , 0 . 0 f ) ; // Move Right

3 Unitsg lBegin (GL_QUADS) ;// Draw A Quadg lVer tex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;// Top Leftg lVer tex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;// Top Rightg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Bottom Rightg lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom LeftglEnd ( ) ;// Done Drawing The Quadreturn TRUE;// Keep Going

Hasil dari simulasi pada pembuatan program ter-hadap objek polygin tersebut , adalah seperti pa-da gambar 2.2.

Gambar 2: Obyek seti tiga dan segi empat

Tampilan hasil akhir program bagian-1, mem-buat 2 buah objek polygon, Triangle dan Quadri-lateral dengan warna putih (white) dan warnalatar hitam (black).


Perubahan Warna pada Bidang

datar Objek Polygon

Untuk melakukan pengubahan warna obyek dariyang semula putih menjadi warna lain, dilakukandengan cara sebagai berikut:

Pembuatan warna (Colouring) polygon ter-hadap titik (vertex) Triangel (Red, Green, Blue)dan Quadrilateral (Blue)

Scr ip t :i n t DrawGLScene(GLvoid ) // Here ' s Where We Do All

The Drawing{g lClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)


Matrixg lTrans l a t e f ( −1.5 f , 0 . 0 f , −6.0 f ) ;// Move Left 1 .5

Units And Into The Screen 6.0glBegin (GL_TRIANGLES) ;// Drawing Using Tr iang lesg lCo lo r3 f ( 1 . 0 f , 0 . 0 f , 0 . 0 f ) ;// Set The Color To Redg lVertex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;// Topg lCo lo r3 f ( 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;// Set The Color To Greeng lVertex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom Leftg lCo lo r3 f ( 0 . 0 f , 0 . 0 f , 1 . 0 f ) ;// Set The Color To Blueg lVertex3 f ( 1 .0 f , −1.0 f , 0 .0 f ) ;// Bottom RightglEnd () ;// Finished Drawing The Triangleg lTran s l a t e f ( 3 . 0 f , 0 . 0 f , 0 . 0 f ) ; // Move Right 3 Unitsg lCo lo r3 f ( 0 . 5 f , 0 . 5 f , 1 . 0 f ) ;// Set The Color To Blue

One Time OnlyglBegin (GL_QUADS) ;// Draw A Quadg lVertex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;// Top Leftg lVertex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;// Top Rightg lVertex3 f ( 1 .0 f , −1.0 f , 0 .0 f ) ;// Bottom Rightg lVertex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom LeftglEnd () ;// Done Drawing The Quadreturn TRUE;// Keep Going}

Hasil dari simulasi pada pembuatan programterhadap objek polygin tersebut , dalah sepertipada gambar 2.3.

Gambar 3: Hasil pengubahan warna dasar obyek

Tampilan hasil akhir program bagian-2 men-gubah dan menentukan warna yang berbeda ter-hadap objek polygon, Triangle (Red, Green,Blue) dan Quadrilateral (Blue) dan warna latar(background) hitam (Black).


49


Membuat Rotation pada Bidang

datar Objek Polygon

Merupakan penjelasan dalam tahapan prosedurpende�nisian putaran terhadap objek gambar se-gitiga yang berputar secara horizontal terhadapkoordinat sumbu-y, dan segiempat yang berputarsecara vertical terhadap koordinat sumbu-x dansumbu-y, sebagai berikut :

Sc r ip t :i n t DrawGLScene (GLvoid ) // Here ' s Where We Do Al l The

Drawing{g lC l ea r (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT)


Matrixg lT ran s l a t e f (−1.5 f , 0 . 0 f ,−6.0 f ) ;// Move Left 1 .5

Units And Into The Screen 6 .0g lRota te f ( r t r i , 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;// Rotate The

Tr iang le On The Y ax i s (NEW)glBegin (GL_TRIANGLES) ;// Start Drawing A Triang leg lCo l o r3 f ( 1 . 0 f , 0 . 0 f , 0 . 0 f ) ;// Set Top Point Of

Tr iang le To Redg lVer tex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;// F i r s t Point Of The

Tr iang leg lCo l o r3 f ( 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;// Set Le f t Point Of

Tr iang le To Greeng lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Second Point Of The

Tr iang leg lCo l o r3 f ( 0 . 0 f , 0 . 0 f , 1 . 0 f ) ;// Set Right Point Of

Tr iang le To Blueg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Third Point Of The

Tr iang leglEnd ( ) ;// Done Drawing The Tr iang leg lLoadIdent i ty ( ) ; // Reset The Current

Modelview Matrixg lT ran s l a t e f ( 1 . 5 f , 0 . 0 f ,−6.0 f ) ;// Move Right 1 .5

Units And Into The Screen 6 .0g lRota te f ( rquad , 1 . 0 f , 0 . 0 f , 0 . 0 f ) ;// Rotate The Quad

On The X ax i s (NEW)g lCo l o r3 f ( 0 . 5 f , 0 . 5 f , 1 . 0 f ) ;// Set The Color To Blue

One Time OnlyglBegin (GL_QUADS) ; // Draw A Quadg lVer tex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;// Top Leftg lVer tex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;// Top Rightg lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;// Bottom Rightg lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;// Bottom LeftglEnd ( ) ;// Done Drawing The Quadr t r i +=0.2 f ;// Inc r ea s e The Rotation Var iable For The

Tr iang le (NEW)rquad−=0.15 f ;// Decrease The Rotation Var iable For

The Quad (NEW)return TRUE;// Keep Going}

Hasil akhir dari program setelah dilakukanproses debug (compile) dan run seperti tampakpada gambar 2.3.

Tampilan hasil akhir program bagian-3,melakukan putaran(rotating) terhadap sumbuobjek polygon untuk segitiga (triangle) rotasi se-cara dari kiri ke kanan (horizontal), dan untuk se-gi empat (quadrilateral) dari atas ke bawah (ver-tical).

Gambar 4: Obyek yang telah mengalami rotasi

4.4 Hasil Pengamatan dan Simulasi

Selanjutnya pada bagian ini program dilakukanperubahan yaitu untuk mengubah warna (color)dan juga putaran (rotasi) terhadap objek poly-gon tersebut, yaitu sebagai berikut :

1. Mengubah warna Latar (background)

Proses untuk dapat mengubah warna latardari tampilan yang asli, iatu dari hitam keputih adalah dengan mengubah kode war-na tersebut, sepert pada script berikut ini:

g lClearColor (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 samasisi, dilakukan dari warna asal yaitu:Merah (red), Hijau (green) dan Abu-abu (abu-abu) dirubah menjadi Hi-jau (green), Merah (red) dan Putih(white) yang dimulai dari sudut Segit-iga tersebut secara berpendar (shad-ing), sedangkan diluar objek gambaradalah tetap warna Hitam (black).

Scr ipt program :glBegin (GL_TRIANGLES) ;g lCo lo r3 f (1 . 0 f , 0 . 0 f , 0 . 0 f ) ;g lVertex3 f ( 0 .0 f , 1 .0 f , 0 .0 f ) ;g lCo lo r3 f (0 . 0 f , 1 . 0 f , 0 . 0 f ) ;g lVertex3 f ( −1.0 f ,−1.0 f , 0 .0 f ) ;g lCo lo r3 f (1 . 0 f , 1 . 0 f , 1 . 0 f ) ;g lVertex3 f ( 1 .0 f , −1.0 f , 0 .0 f ) ;glEnd () ;


4646

50

(b) Objek gambar Segi empat (Quadrilat-eral)

Pada objek gambar segi empat,yang mempunyai bentuk bujursangkar diberikan atau dirubah warnadasarnya dari Abu-abu (blue) menja-di Merah Muda (Red) secara merata(�at) pada seluruh permukaan objektersebut. dengan warna objek gambarputih dan warna diluar objek gambartetap berwarma Hitam (black).

Sc r ip t program :g lCo l o r3 f ( 1 . 0 f , 0 . 0 f , 0 . 5 f ) ;g lBegin (GL_QUADS) ;g lVer tex3 f (−1.0 f , 1 .0 f , 0 .0 f ) ;g lVer tex3 f ( 1 .0 f , 1 .0 f , 0 .0 f ) ;g lVer tex3 f ( 1 .0 f ,−1.0 f , 0 .0 f ) ;g lVer tex3 f (−1.0 f ,−1.0 f , 0 .0 f ) ;glEnd ( ) ;

3. Mengubah Putaran (rotasi)

Kedua objek polygon tersebut selanjutnyadilakukan perubahan putaran (rotasi) ter-hadap sumbu-Y (Y-Axis) dari 00 ke 900.

Sc r ip t program :g lRota te f ( 45 , 0 . 0 f , 1 . 0 f , 0 . 0 f ) ;

Dari pembahasan analisis program bagian-1,bagian-2 dan bagian-3, maka hasil dari peruba-han warna (color) dan perputaran (rotation) ter-hadap objek polygon, Triangle dan Quadrilateraltampak seperti pada Gambar 2.5, berikut

Gambar 5: Hasil perubahan dari warna danputaran terhadap objek segitiga dan segiempat

5 Penutup

Dari hasil analisis dengan pengujian dan simu-lasi, maka dapat disimpulkan sebagai berikut :

1. OpenGL adalah suatu library gra�sstandar yang dapat digunakan untukkeperluan-keperluan pemrograman gra�s.Library dasar dari OpenGL adalah GLUT,(Graphic Library Utility) dengan fasilitasyang bisa dikembangkan. Selain itu diper-lukan �le header OpenGL-GLUT yaituglut.h.

2. Pemakaian OpenGL sangat membantudalam membuat dan merancang suatumodel objek baik untuk 2D dan 3D, ser-ta melakukan modi�kasi obyek yang telahdibuat dengan cara mengubah parameterdari fungsi-fungsi dari OpenGL yang ada.Dalam contoh yang telah dibahas sebelum-nya, pengubahan parameter dari fungsi gl-Color3f dapat mengubah warna, dan glRo-

tatef dapat merotasi/memutar obyek.

Daftar Pustaka

[1] Je� Molofee, http://nehe.gamedev.net, 2011.

[2] Shreiner, Dave, OpenGL ProgrammingGuide; The Khronos OpenGL ARB WorkingGroup, Seventh Edition : The O�cial Guideto Learning OpenGL, Version 3.0 and 3.1Addison Wesley, Boston, 2009.

[3] URL:http://download.microsoft.com/down-load/9/b/0/9b06f663-23d0-4709-a2�-90df8dc558bb/ MSDNlibvs2008sp1Readme.htm/MSDN Library for Visual Studio 2008, 2011.

[4] URL:http://www.users.itlabs.umn.edu/classes/Spring-2009/csci4107/GlutSetupWin.html,2011.

[4] URL: http://user.xmission.com/~nate/ glut.html, 2011.


51

5

pewarnaan dan perputaran polygon untuk objek gambar...

Documents