KATA PENGANTAR
Segala puji syukur kami ucapkan atas kehadirat Tuhan Yang Maha Esa dimana telah melimpahkan taufik serta hidayahnya sehingga kami dapat menyelesaikan buku Grafika Komputer Tingkat Pendidikan Perkuliahan untuk Mahasiswa Program Studi Pendidikan Teknik Informatika.
Buku ini telah disusun untuk memberi kemudahan bagi mahasiswa dalam mengenal dan memahami tentang konsep OpenGL dan GLUT yang meliputi Pengantar Grafika Komputer, OpenGL dan GLUT, Primitive Objek, Transformasi Objek, Animasi, Interaksi Keyboard dan Mouse, Bangun 3 Dimensi, Lighting, dan Texture. Materi pada buku setiap tema bahasan dapat dikembangkan mahasiswa melalui keterampilan dan kreativitas dalam pemrograman menggunakan OpenGL sehingga dapat mendukung pengembangan dari kompetensi dasar itu sendiri.
Penulisan buku ini diharapkan mahasiswa mampu mengembangkan kreativitasnya, baik secara mandiri maupun kelompok melalui pemahaman mengenai konsep serta materi yang ada pada setiap sub bahasan.
Pada kesempatan kali ini penulis mengucapkan terima kasih kepada semua pihak yang telah memberi
dari sempurna, maka penulis sangat mengharapkan kritik dan saran dalam rangka penyempurnaan penyusunan buku ini di kemudian hari. Sehingga dapat memberi manfaat bagi mahasiswa Universitas Negeri Malang pada semua bidang keahlian khususnya bidang Teknik Informatika .
DAFTAR ISI
KATA PENGANTAR ... i
DAFTAR ISI ... iii
BAB 1 ... 1
PENGANTAR GRAFIKA KOMPUTER... 1
A. Pengertian Grafika Komputer………1
B. Sejarah Grafika Komputer………2
C. Peranan dan Penggunaan Grafika Komputer……….3
E. Teknologi Display Komputer Grafik……….15
BAB 2 ... .21
OPENGL dan GLUT ... 21
A. SEJARAH OPENGL……….21
B. PENGENALAN OPENGL……….22
C. EVOLUSI OPENGL……….24
D. GLUT (GL Utility Toolkit)……….25
E. CARA KERJA OPENGL……….26
F. SET UP PROJECT BARU……….30
BAB 3 ... 34
P R I M I T I F O B J E K ... 34
A. Definisi Primitif Objek………..34
B. Algoritma Pembentukan Objek……….40
C. Contoh Program Primitif Objek………46
BAB 4 ... 50
Transformasi Objek ... 50
A. Translasi……….53
B. Rotate………..56
C. Scale………..66
D. Tutorial Urutan Transformasi……….69
E. Implementasi Transformasi Objek………..76
BAB 5 ... 85
ANIMASI ... 85
A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA……….85
B. JENIS-JENIS ANIMASI………96
C. Konsep Animasi pada GLUT………..106
BAB 6 ... 116
INTERAKSI KEYBOARD ... 116
A. STRUKTUR TOMBOL PADA KEYBOARD………..117
B. PEMETAAN (MAPPING)……….. 118
C. JENIS-JENIS KEYBOARD……….119
D. FUNGSI TOMBOL KEYBOARD KOMPUTER………125
E. KONSEP INPUTKEYBOARD PADA GLUT-KEY BIASA DAN SPECIAL KEY……….126
BAB 7 ... 136
INTERAKSI OBJEK 2D (MOUSE FUNCTION) ... 136
A. SEJARAH MOUSE dan JENIS MOUSE………136
C. KONSEP MOUSE PADA GLUT………..149
D. CONTOH PROGAM PENERAPAN MOUSE PADA GLUT……….152
BAB 8 ... 162
OBJEK 3D ... 162
A. Pengertian Objek 3 Dimensi……….162
B. Objek 3 Dimensi………163
C. Alur Proses Rendering Grafis 3D………166
D. Sistem koordinat 3D………..168
E. Primitive 3D……….169
F. Transformasi Objek 3 Dimensi………172
G. Contoh Program dalam Open GL………..177
H. Contoh Implementasi Objek 3 Dimensi dalam Open GL………208
BAB 9 ... 214
LIGHTING ... 214
A. Pendahuluan………214
B. Pencahayaan pada OpenGL dan Dunia Nyata………..216
C. Cahaya Ambient, Diffuse, dan Specular………219
D. Implementasi Pencahayaan (lighting) pada OpenGL………..224
E. Contoh Program………226
A. Pendahuluan………260
B. Konsep Texture Mapping………262
C. Teknik-teknik Realisme dalam Kompuer Grafik……..263
D. Teknik-teknik dalam Geometri………267
E. Mip maps………270
F. Texture maping………..273
G. Object Texture………274
H. Contoh penerapan material dan tekstur……….275
DAFTAR PUSTAKA ... 336
BAB 1
PENGANTAR GRAFIKA KOMPUTER
A. Pengertian Grafika Komputer
Menurut Suyoto (2003), grafika komputer (Computer
Graphic) dapat diartikan sebagai seperangkat alat yang terdiri
dari hardware dan software untuk membuat gambar, grafik atau citra realistik untuk seni, game komputer, foto dan film animasi. Sistem grafika komputer dapat dijalankan dengan komputer pribadi (Personal Computer) atau workstation. Grafika komputer semakin lama semakin pesat perkembangannya sehingga definisi dari grafika komputer dapat diartikan sebagai suatu studi tantang bagaimana menggambar (membuta grafik) dengan menggunakan komputer dan manipulasinya (merubah sedikit/transformasi/ animasi).
Pengertian grafik berbeda dengan image/citra, image adalah gambar yang diperoleh dengan alat pengambil gambar, sperti kamera, scanner, dll. Sedangkan grafik adalah gambar yang dibuat dengan cara tertentu, yaitu cara yang ada di grafik komputer. Grafik dan image termasuk
picture/gambar.
B. Sejarah Grafika Komputer
Sejarah grafika komputer telah dimulai sejak jaman dahulu kala yaitu ketika bangsa Mesir, Roma dan Yunani berkomunikasi secara grafik. Beberapa lukisan terdapat pada batu nisan orang Mesir dapat dikatakan sebagai lukisan teknik. Perkembangan grafika komputer secara sederhana dapat dibagi menjadi empat fase, yaitu :
1. Fase Pertama (1950) era grafika komputer interaktif
- Tidak begitu cepat karena teknologi, jumlah dan harga komputer tidak mendukung.
- MIT berhasil mengembangkan komputer whirlwind dengan tabung sinar katode (Cathode Ray Tube-CRT). - Sudah menggunakan pena cahaya (light pen) yaitu
sebuah alat input bentuknya seperti pensil yang digunakan untuk memilih posisi, menunjuk sesuatu dan menggambar pada layar dengan pendeteksian cahaya yang datang dari titik-titik pada layar CRT. - Telah ada alat pemrograman otomatis (Automatic
Programming Tool)
2. Fase Kedua (1960) Jaman Penelitian/Riset Grafika Komputer Interaktif
- Grafika interaktif modern telah ditemukan oleh Ivan Sutherland.
- Mengembangkan teknik interaktif dengan sarana keyboard dan pena cahaya.
- Sejumlah projek penelitian dan produk Computer Aided Design/Manufacturing (CAD/CAM) telah muncul.
3. Fase Ketiga (1970)
Grafika komputer interaktif telah digunakan oleh sektor industri, pemerintah dan ilmuawan untuk memperbaiki kualitas desain produk secara cepat dan mudah.
4. Fase Keempat (1980-1990)
- Penelitian pada dekade ini bertumpu pada penggabungan dan pengotomasasian pelbagai unsur desain dan pemodelan pejal (solid modelling).
- Teknologi hibrid mulai diperkenalkan. Teknologi ini berguna untuk penggabungan objek pejal dengan permukaan.
C. Peranan dan Penggunaan Grafika Komputer
Grafika komputer telah menunjukkan kemajuan yang pesat dalam pengembangan berbagai aplikasi untuk menghasilkan gambar. Walaupun pada awalnya aplikasi dalam sains dan engineering memerlukan peralatan yang mahal, perkembangan teknologi komputer memberikan
kemudahan penggunaan komputer sebagai alat bantu aplikasi grafik komputer interaktif. Pada saat ini grafika komputer digunakan secara rutin dibidang ilmu pengetahuan, teknik, kedokteran, bisnis, industri, pemerintahan, seni, hiburan, pendidikan, periklanan, dan lain sebagainya.
1. Desain
Dalam proses desain grafika komputer terutama digunakan pada sistem engineering dan arsitektur. Pada umumnya Computer Aided Design (CAD) digunakan untuk pembuatan desain mobil, bangunan, pesawat terbang, kapal, komputer, tekstil, dan lain-lain. Pada beberapa aplikasi desain, objek ditampilkan dalam bentuk wireframe, dimana diperlihatkan keseluruhan bentuk, dengan bentuk internal dari objek tersebut. Penggunaan wireframe bermanfaat bagi designer untuk melihat isi dari objek tersebut. Contoh perangkat lunak yang digunakan yaitu AutoCAD, 3D Studio Max, dan Maya.
2. Grafik Presentasi
Bidang lain yang berhubungan dengan grafika komputer adalah grafik presentasi yang dapat berupa cetakan, slide, dan transparansi. Grafik presentasi biasanya digunakan untuk melengkapi laporan keuangan, sains, data ekonomi, dan lain-lain. Bentuk grafik presentasi tersebut adalah chart, bar chart, pie chart, dan lain-lain.
Gambar 1.2. Grafik Presentasi
3. Computer Art
Metode grafika komputer digunakan dalam aplikasi
commercial art dan fine art. Seniman menggunakan
bermacam-macam perangkat lunak grafik, dan kadang dilengkapi dengan perangkat keras khusus.
Contoh perangkat lunak yang digunakan yaitu Corel Draw, Adobe Photoshop, Adobe Ilustrator, Macromedia, dan sebagainya.
Gambar 1.3. Adobe Photoshop CS 4. Film
Pada pembuatan film layar lebar, komputer banyak digunakan untuk menunjang proses pemodelan, visualisasi, dan editing. Misalnya dalam proses special effect, film animasi. “Toy Story” (1995), merupakan film pertama yang di produksi oleh The Walt Disney Company secara penuh menggunakan teknologi komputer dan ilmu Grafik komputer. Sejak saat itu, mulailah studio animasi digital lain untuk membuat film serupa. diantaranya Blue Sky Studios (Fox), DNA Productions (Paramount Pictures and Warner Bros.), Onation Studios (Paramount Pictures), Sony Pictures Animation (Columbia Pictures) dan DreamWorks.
Gambar 1.4. Toy Story, salah satu contoh film animasi.
Kunci pembuatan film-film ini adalah sebuah aplikasi komputer grafis yang disebut computer generated imagery (CGI). Dengan perangkat lunak ini bisa diciptakan gambar 3D lengkap dengan berbagai efek yang dikehendaki. Beberapa software CGI populer antara lain Art of Illusion (bisa di-download di sourceforce.net), Maya, Blender, dan lain-lain.
Salah satu efek CGI dalam film yang kurang dikenal, namun penting, adalah digital grading. Dengan efek ini warna asli hasil shooting direvisi menggunakan perangkat lunak untuk memberikan kesan sesuai dengan skenario. Contohnya wajah Sean Bean (pemeran Boromir) dalam “The Lord of the Rings: the Two Tower” ketika mati dibuat lebih pucat. Jadi,
5. Televisi
Grafika komputer dalam tayangan televisi juga dapat berupa iklan, tampilan tiap acara, dan lainnya.
6. Video musik
Produksi video musik tidak terlepas dari grafika komputer, diantaranya pembuatan promosi, cover atau kemasan video, serta animasi yang mengiringi setiap lagu. Proses editing video dan audio dilakukan dengan menggunakan komputer.
7. Game
Berbagai game dapat dijalankan pada komputer PC, video player dengan monitor TV, dan ada yang menggunakan perangkat keras khusus. Alat input interaktif seperti mouse dan joystick diperlukan untuk aplikasi game.
Gambar 1.5. Game “Angry Bird Seasons” 8. Pendidikan
Komputer sebagai alat bantu pendidikan (Computer
digunakan pada aplikasi-aplikasi bukan pengajaran untuk menunjang sistem pendidikan, seperti mengolah data, mencatat kehadiran, dan sebagainya. Aplikasi bidang pengajaran dengan komputer sebagai alat bantunya, diantaranya:
- Drill and Practice (latih dan praktek)
- CAI menggantikan pengajar untuk memberikan latihan kepada siswa
- Tutorial (penjelasan) yakni sistem komputer digunakan untuk menyampaikan materi ajaran
- Simulasi digunakan untuk mengkaji permasalahan yang rumit pada bidang biologi, transportasi, ekonomi, dan lain-lain.
Gambar 1.6. Aplikasi bidang pengajaran mata pelajaran Matematika
Aplikasi bidang bukan pengajaran dengan alat bantu komputer, diantaranya :
- Computer Assisted Testing (Ujian Berbantuan Komputer): komputer digunakan untuk sarana ujian.
- Computer Assisted Guidance (Pengarahan Berbantuan Komputer): komputer digunakan sebagai sarana untuk mencari informasi yang diperlukan.
- Computer Managed Instruction : komputer digunakan untuk merencanakan pelajaran, evaluasi belajar, serta memantau prestasi siswa.
9. Visualisasi
Ilmuwan, ahli kedokteran, analis bisnis, dan lain-lain sering menggunakan banyak informasi suatu masalah dalam mempelajari perilaku proses tertentu. Informasi tersebut berisi ribuan data untuk memberikan gambaran hasil suatu evaluasi. Data tersebut diproses sehingga mendapatkan hasil dalam bentuk visual.
Virtual Reality adalah lingkungan virtual yang
seakan-akan begitu nyata di mana user dapat Berinteraksi dengan objek-objek dalam suasana atau lingkungan 3 dimensi. Perangkat keras khusus digunakan untuk memberikan efek pemadangan 3 dimensi dan memampukan user beriteraksi dengan objek-objek yang ada dalam lingkungan. Contoh: aplikasi VR parachute trainer yang digunakan oleh U.S. Navy untuk latihan terjun payung. Aplikasi ini dapat memberikan keutungan berupa mengurangi resiko cedera selama latihan, mengurangi biaya penerbangan, melatih perwira sebelum melakukan terjun payung sesungguhnya.
Sedangkan visualisasi data adalah teknik-teknik membuat image, diagram, atau animasi untuk Mengkomunikasikan pesan. Visualisasi telah menjadi cara yang efektif dalam mengkomunikasikan baik data atau ide abstrak maupun nyata sejak permulaan manusia. Contoh: visualisasi dari struktur protein, strutur suatu website, visualisasi hasil data mining.
Contoh pengolahan citra dalam kehidupan sehari – hari : 1.Bidang kesehatan, digunakan untuk rontgen tubuh manusia yang berfungsi untuk mengetahui ada atau tidaknya kelainan di tubuh.
2.Bidang visual, bisa digunakan untuk pemotretan lewat satelit, GPS, foto kamera dan lain-lain
10. Image Processing
Image processing (pengolahan citra) merupakan
teknik untuk memodifikasi atau menginterpretasi gambar yang ada, seperti foto dan rangkaian gambar film. Dua macam prinsip pengolahan citra adalah :
- Meningkatkan kualitas gambar.
- Memberikan persepsi dari informasi visual, seperti pada robotik.
Untuk melakukan pengolahan citra, pertama-tama membuat digitasi dari foto atau membuat foto menjadi file image. Selanjutnya metode digital dapat digunakan untuk memodifikasi gambar sehingga mendapatkan kualitas yang baik.
11. Graphical User Interface (GUI)
Graphical interface (antarmuka grafik) banyak
digunakan dalam setiap aplikasi. Komponen utamanya adalah window manager, dimana pengguna dapat mengatur tampilan dari window. Interface juga menampilkan menu dan icon untuk mempercepat pemilihan yang dilakukan oleh pengguna.
D. Sistem Grafika Komputer
Graphics library/package (contoh: OpenGL) adalah perantara aplikasi dan display hardware (Graphics System). Application program memetakan objek aplikasi ke
tampilan/citra dengan memanggil graphics library. Hasil dari interaksi user menghasilkan/modifikasi citra.
Penggunan user mengendalikan isi,struktur, dan kemunculan objek serta menampilkan citra melalui suatu komponen dasar visual feedback.
Komponen Dasar Sistem Grafik Interaktif meliputi: - Masukan : mouse,tablet,dan stylus,peralatan feedback,scanner,live video stream,dll.
- Proses & Penyimpanan .
- Keluaran : layar, printer berbasis kertas, perekam video,
Gambar Komponen Sistem Pengolah Citra Digital
Sistem Interaktif Grafik Pertama, Sketchpad, ditemukan oleh Ivan Sutherland (1963) di MIT.
1960, William Fetter, dimulainya pembuatan model animasi
1963, Ivan Shutherland (MIT), menggunakan sketcpad (Manipulasi langsung, CAD), alat untuk menampilkan vector.
1968, Evans & Shutherland.
1970, Pierre B’eezier, pengembangan kurva B’eezier.
1972 Ditayangkannya film Westworld, sebagai film pertama yang menggunakan animasi komputer.
1974, Ed Catmull mengembangkan z-buffer.
1976, Jim Blinn mengembangkan texture dan bumo mapping
1977, Film terkenal Star Wars menggunakan grafik komputer
1979, Turner Whitted mengembangkan algoritma ray tracing.
Pertengahan tahun 70an – 80an, pengembangan Quest for realism radiosity.
1982, Pengembangan grafik untuk menampilkan partikel.
1984, Digunakan untuk menggantikan model fisik pada film The Last Star Fighter.
1986, Film hasil produksi grafik komputer di masukkan dalam academy award, Luxo Jr. (PIXAR).
1989, Film Tin Toy (PIXAR) memenangkan Academy Award.
1995, Produksi film 3D animasi panjang pertama “Toy Story” (PIXAR & DISNEY).
Akhir tahun 90an, teknologi visualisasi interaktif untuk ilmu pengetahuan dan kedokteran.
Tahun 2000 ditemukan perangkat keras untuk real-time photorealistic dan rendering image.
E. Teknologi Display Komputer Grafik
Sejak terjadi pengembangan yang pesat dari tahun ke tahun grafik komputer di gunakan sebagai teknologi yang interaktif dalam pengembangan, maupun penggunaannya. sampai sekrang ini komputer grafik dapat di sinkroinkan dengan suara dalam pembelajaran multimedia. Beberapa
software yang di gunakan untuk memanipulasi grafik adalah
blender, 3D xmax, CorelDraw, Photoshop, Inkscape, Gimp, dll. Penggunaan alat utama untuk menampilkan output pada system grafika adalah video monitor. Operasi pada sebagian besar video monitor berdasarkan perancanangan Cathode
Ray Tube(CRT).
Cathode Ray Tubes (CRT) mampu menampilkan
vektor dan raster dan merupakan awal mula di mana teknologi komputer mengunakan user interface untuk kemudahan dengan pengguna. Tidak hanya itu CRT juga merupakan pengembangan awal dari teknologi televisi.
Diperlukan memori khusus untuk buffer citra dengan scan out sinkronous ke raster yang disebut framebuffer . Warna CRT’s lebih rumit/sulit. Menggunakan pola warna phospors di layer:
Delta electron gun arrangement In-line electron gun arrangement
Sebuah electron gun memancarkan elektron, melalui focusing system (sistem untuk menentukan fokus), dan deflection system (sistem untuk mengatur pembelokan) sehingga pancaran elektron mencapai posisi tertentu dari lapisan fosfor pada layar. Kemudian, fosfor memancarkan sinar kecil pada setiap posisi yang berhubungan dengan pancaran elektron. Sinar yang dipancarkan dari fosfor cepat hilang, maka diperlukan pengaturan supaya fosfor tetap menyala. Hal ini dilakukan dengan cara refreshing, yaitu menembakkan elektron berulang kali pada posisi yang sama.
Focusing system pada CRT diperlukan untuk mengarahkan pancaran elektron pada suatu titik tertentu dari lapisan fosfor. Pengaturan fokus dapat dilakukan pada electric dan magnetic field. Dengan electronic focusing, pancaran
elektron melewati metal electrostatic yang berfungsi sebagai lensa untuk mengatur fokus dari pancaran elektron ke tengah monitor.
Resolusi adalah jumlah titik per centimeter yang dapat ditempatkan menurut arah horizontal dan vertikal. Resolusi tergantung pada tipe fosfor, intensitas yang ditampilkan, serta focusing dan deflection system.
Liquid Crystal Display (LCD) mampu menampilkan gambar labih halus dengan menggunakan teknologi molekul kristal yang teranyam dan mempolarisasi cahaya. LCD
berfungsi sebagai katup cahaya yang tergantung pada cahaya dari luar. LCD biasanya digunakan untuk suatu system yang kecil, seperti computer laptop dan kalkulator.
Plasma, mempunyai cara kerja yang mirip dengan lampu neon. kapsul yang berisi gas yang di gerakkan oleh medan listrik menghasilkan UV. UV menggerakkan phosfor dan phosfor menghasilkan beberapa warna.
monitor menggunakan Teknologi Cathode Ray Tube
(CRT) walaupun ada juga yang menggunakan teknologi lain.
Secara garis besar teknologi CRT dapat digambarkan sebagai berikut :
a. Refreshing, yaitu menembakkan elektron berulang ulang pada posisi yang sama untuk menjaga agar fosfor tetap menyala.
b. Persistence, yaitu berapa lama suatu jenis fosfor dapat menyala (jenis fosfor ada yang low persistence dan ada yang high
persistence)
c. Resolution / resolusi, yaitu jumlah
maksimum titik yang dapat dihasilkan tanpa tupang tindih (horisontal x vertikal).
d. Aspec Ratio, yaitu perbandingan jumlah titik vertikal dan horisontal.
e. Pixel, yaitu satu titik di layar monitor.
Raster Scan Display
Jenis monitor ini paling banyak digunakan, yaitu pancaran elektron bergerak ke seluruh layar baris per baris dari atas ke bawah. (digunakan oleh TV).
Random Scan Display
Pada random scan display pancaran elektron hanya diarahkan ke bagian layar dimana gambar akan dibuat disebut juga Vektor Display, strock display atau calligraphic display.
Color Monitor CRT
Color CRT menampilkan gambar dengan kombinasi fosfor yang memancarkan sinar warna yang berbeda. Dengan menggabungkan sinar dari fosfor yang berbeda, tingkat dari warna yang berbeda.
Terdapat 2 teknik dasar untuk mendapatkan warna, yaitu : a. Beam Penetration
Dua lapisan fosfor (biasanya red dan green) dilapiskan pada bagian dalam, dan warna yang dihasilkan tergantung dari seberapa besar pancaran elektron menembus fosfor, tetapi warna yang dihasilkan kurang banyak dan kurang baik jika dibandingkan dengan teknologi lain. Digunakan untuk gambar berwarna dengan random scan monitor, b. Shadow Mask
Shadow mask mempunyai tiga macam fosfor warna pada titik pixel (red, green dan blue). CRT mempunyai 3 elektron gun untuk tiap warna, warna dihasilkan dari perbedaan intensitas dari tiap-tiap elektron gun. Color CRT dalam sistem grafika dirancang sebagai RGB monitor. Monitor ini menggunakan metode shadow mask dan mengambil tingkat intensitas untuk setiap electron gun (red, green, blue) langsung dari sistem komputer tanpa pemrosesan antara.
Flat Planel Display
Merupakan video display merupakan kelas video yang mengurangi volume, berat dan penggunaan power jika dibandingkan CRT, FPD digunakan untuk kalkulator, Video game saku, TV kecil, Laptop dll.
Terdapat 2 jenis :
a. Emmisive Display = mengkonversikan energi listrik menjadi sinar. Cth. Plasma Panel.
b. Nonemissive Display / Noneemitters = menggunakan efek optik untuk mengkonversikan sinar matahari atau sinar dari sumber lain ke dalam pola grafik. Cth. Liquid Crystal display
BAB 2
OPENGL dan GLUT
A. SEJARAH OPENGL
Tahun 1980-an, mengembangkan perangkat lunak yang dapat berfungsi dengan berbagai hardware grafis adalah tantangan nyata. Pengembang perangkat lunak antarmuka dan kebiasaan menulis driver untuk setiap perangkat keras. Ini mahal dan mengakibatkan banyak duplikasi usaha.
Pada awal 1990-an, Silicon Graphics (SGI) adalah seorang pemimpin dalam grafis 3D untuk workstation. Mereka IRIS GL API dianggap keadaan seni dan menjadi standar industri de facto, membayangi terbuka berbasis standar PHIGS. Ini karena GL IRIS dianggap lebih mudah digunakan, dan karena itu mendukung modus langsung rendering. By contrast, Sebaliknya, PHIGS dianggap sulit untuk digunakan dan ketinggalan zaman dalam hal fungsionalitas.
SGI’s pesaing (termasuk Sun Microsystems, Hewlett-Packard dan IBM) juga dapat membawa ke pasar 3D hardware, didukung oleh ekstensi yang dibuat pada PHIGS standar. Hal ini pada gilirannya menyebabkan pangsa pasar SGI untuk melemahkan karena lebih banyak hardware grafis 3D pemasok memasuki pasar. Dalam upaya untuk mempengaruhi pasar, SGI memutuskan untuk mengubah IrisGL API menjadi standar terbuka. SGI menganggap bahwa IrisGL API itu sendiri tidak cocok untuk membuka karena masalah lisensi dan paten. Juga, IrisGL memiliki fungsi-fungsi API yang tidak relevan dengan grafis 3D. Sebagai contoh,
termasuk windowing, keyboard dan mouse API, sebagian karena dikembangkan sebelum Sistem X Window dan Sun’s NEWS sistem dikembangkan. Selain itu, SGI memiliki sejumlah besar pelanggan perangkat lunak; dengan mengubah ke OpenGL API mereka berencana untuk mempertahankan pelanggan mereka terkunci ke SGI (dan IBM) hardware untuk beberapa tahun sementara pasar dukungan untuk OpenGL matang. Sementara itu, SGI akan terus berusaha untuk mempertahankan pelanggan mereka terikat pada hardware SGI dengan mengembangkan maju dan kepemilikan Iris Inventor dan Iris Performer pemrograman API. Akibatnya, SGI merilis standar OpenGL.
B. PENGENALAN OPENGL
OpenGL adalah sebuah program aplikasi interface yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Program lintas-platform API ini umumnya dianggap ketetapan standar dalam industri komputer dalam interaksi dengan komputer grafis 2D dan juga telah menjadi alat yang biasa untuk digunakan dengan grafis 3D. Singkatnya, Open Graphics Library, OpenGL menghilangkan kebutuhan untuk pemrogram untuk menulis ulang bagian grafis dari sistem operasi setiap kali sebuah bisnis akan diupgrade ke versi baru dari sistem. Fungsi dasar dari OpenGL adalah untuk mengeluarkan koleksi perintah khusus atau executable ke sistem operasi. Dengan demikian, program ini bekerja dengan perangkat keras grafis yang ada yang berada pada hard drive atau sumber tertentu lainnya. Setiap perintah dalam dirancang untuk melakukan tindakan tertentu, atau memulai efek khusus tertentu yang terkait dengan grafis.
OpenGL adalah suatu spefikasi grafik yang low-level yang menyediakan fungsi untuk pembuatan grafik primitif termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk keperluan-keperluan pemrograman grfis.OpenGL bersifat Open-Source, multi-platform dan multi-language serta digunakan mendefinisikan suatu objek, baik objek 2 dimensi maupun objek 3 dimensi. OpenGL juga merupakan suatu antarmuka pemrograman aplikasi (application programming interface (API) yang tidak tergantung pada piranti dan platform yang digunakan, sehingga OpenGL dapat berjalan pada sistem operasi Windows, UNIX dan sistem operasi lainnya.
OpenGL pada awalnya didesain untuk digunakan pada bahasa pemrograman C/C++, namun dalam perkembangannya OpenGL dapat juga digunakan dalam bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual Basic, Delphi, maupun Fortran. Namun OpenGL di-package secara berbeda-beda sesuai dengan bahasa pemrograman yang digunakan. Oleh karena itu, package OpenGL tersebut dapat di-download pada situs http://www.opengl.org sesuai dengan bahasa pemrograman yang akan digunakan.
OpenGl melayani dua tujuan :
Untuk menyembunyikan kompleksitas dari interfacing dengan berbagai 3D accelerators, memamerkan oleh programmer dengan satu, seragam API.
Untuk menyembunyikan kemampuan yang berbeda dari hardware platform, oleh semua yang memerlukan
mendukung implementasi penuh fitur opengl set (menggunakan software emulation jika diperlukan).
C. EVOLUSI OPENGL
Pendahulu openGL adalah IRIS GL dari Silicon Grapics.Padamulanya adalah library grafis 2D,yang berefolusi menjasi API program 3D untuk workstation canggih milik perusahaan tersebut.
OpenGL adalah hasil dari usaha SGI untuk mengembangkan dan meningkatkan kemampuan portable IRIS.API grafis yang baru akan menawarkan kemampuan IRIS GL tetapi dengan standar yang lebih terbuka,dengan input dari pembuatan hardware lain dan sistem operasi lain,dan akn memudahkan adaptasi ke hardware platform dan sistem operasi lain.
Untuk lebih mempopulerkan openGL SGI mengijinkan pihak lain untuk mengembangkan standart openGL,dan beberapa vendor menyambut hal tersebut dengan membentuk OpenGL Architecture Review Board (ARB) Pendiri openGL adalah SGI,Digital Equepment Corporation,IBM,Intel dan Microsoft,pada tanggal 1 juli 1992 OpenGL versi 1.0 diperkenalkan.
Letak openGL dalam aplikasi gambar di atas pada umumnya ketika aplikasi berjalan program tersebut memanggil banyak fungsi,beberapa yang dibuat oleh programer dan beberapa yang disediakan oleh sistem operasi bahasa pemrograman.Aplikasi windows membuat output pada layar biasanya dengan memanggil sebual API windows
yang disebut Graphics Devise Interfase,yang memungkinkan sebagai penulisan teks pada sebuah windows,menggambar garis 2D sederhana dan lainnya.Implementasi dari openGL mengambil permintaan grafis dari aplikasi dan membangun sebuah gambar berwarna dari grafis 3D,kemudian memberikan gambar tersebut ke GDI untuk ditampilkan pada layar monitor.
D. 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 drive:\Program Files\Microsoft
Visual Studio 2010\Vc\include\GL
2. glut32.lib yang dicopy ke drive:\Program
Files\Microsoft Visual Studio 2010\Vc\
3. libglut32.dll yang dicopy ke drive:\Windows\System
Klasifikasi Fungsi
Primitive : berupa geometric, imagesAttribute :
berupa color, line type, light, texture
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 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.
OpenGL mempunyai bnayak fungsi dan penggunaan perintah yang sangat luas, penggunaan openGL membutuhkan library tambahan yang harus di letakkan pada direktory system dari windows (OS),yaitu :
OpenGL32.dll Glu32.dll Glut32.dll
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 :
LoadGlut(‘glut32.dll) - pemanggilan library openGL InitGL – inisialisasi openGL awal yang harus dilakukan glViewport – untuk pengaturan viewport
glMatrixMode – pengaturan viewport gluPerspective – pengaturan persepektif
Contoh script untuk inisialisasi openGL : Try LoadGlut(‘glut32.dll’); InitGL; Exept on e := exeption do Begin
messageDlg{ e.message, mtError, [mbOk],}; Halt {1}; End;
End;
Script di atas merupakan script yang paling sederhana, dalam artian minimal diperlukan untuk menginisialisasi penggunaan openGL.Fungsi-fungsi lain seperti yang disebut diatas seperti glViewport, glMatrixMode, dapat di tambah kan pada script sesuai dengan kebutuhan.
Pembuatan gambar
Didalam openGL pembuatan obyek dilakukan
dengan titik-titik 3 dimensi,dengan mode GL_QUARDS,
maka otomatis setiap 4 titik digambar menjadi sebuah
bidang segiempat,sedangkan mode GL_LINES, pada
setiap 2 titik digambar manjadi sebuah garis.Di dalam
tahap ini setiap garis atau bidang juga dapat di atur
warnanya.
Fungsi atau prosedur yang digunakan :
mode GL_QUARDS – menggambarkan segi empat
mode GL_LINES – menggambark garis
glVertex3f- penentuan titik 3 dimensi
OpenGL memiliki lebih dari 200 fungsi. Fungsi tersebut bisa dikelompokkan menjadi :
Fungsi primitif, menentukan elemen yang bisa menghasilkan gambar di layar. Fungsi ini terdiri dari 2 jenis, yaitu primitif geometric seperti polygon (segi banyak) yang bisa dibuat menjadi dua, tiga, atau empat dimensi, dan primitif gambar seperti bitmaps. Fungsi atribut, mengontrol tampilan dari primitif. Fungsi ini menentukan warna, jenis garis, properti material, sumber cahaya, dan tekstur.
Fungsi pandangan, menentukan properti kamera. OpenGL menyediakan sebuah virtual kamera yang bisa diposisikan dan diorientasikan relatif ke obyek yang ditentukan dengan fungsi primitif. Lensa kamera juga bisa dikendalikan sehingga bisa dihasilkan sudut yang lebar dan pandangan telefoto (jarak jauh). Fungsi windowing, fungsi ini mengendalikan windows
pada layar dan penggunaan dari mouse dan keyboard.
Fungsi kontrol, menghidupkan macam-macam fitur OpenGL. Fungsi-fungsi OpenGL dimuat didalam 2 library yang disebut dengan gl dan glu (atau GL dan GLU). Library yang pertama, adalah fungsi utama dari
dibutuhkan sedangkan yang kedua, openGL Utility Llibrary (GLU) memuat fungsi yang ditulis menggunakan fungsi dari library utama dan sangat membantu bagi pengguna. Fungsi utama mempunyai nama yang diawali dengan “gl” seperti “glVertex3f()”, sedangkan fungsi didalam GLU mempunyai nama yang diawali dengan “glu” seperti “gluOrtho2D()”.
F. SET UP PROJECT BARU
1. Buatlah project baru pada Visual Studio dengan nama
prak0.
Gambar 1.1b New Project – Application Setting
2. Buka windows explorer pada direktori project prak0 dan buatlah direktori baru di dalamnya dengan nama
include dan tempatkan file glut.h di dalamnya.
3. Kembali ke folder project dan copy-paste file
glut32.libdan glut32.dll ke folder project prak0.
Gambar 1.2 Penambahan file untuk grafika komputer menggunakan GLUT
Gambar 1.3 Konfigurasi pada Project Properties
Gambar 1.4a menambah lokasi file include
5. Menciptakan file baru dengan nama cg-0.cpp.
Gambar 1.5a Menambahkan item baru
BAB 3
P R I M I T I F O B J E K
A. Definisi Primitif Objek
Primitif objek merupakan salah satu subbab dari grafika komputer yang terdiri dari titik, garis dan bangun dua dimensi. Dalam grafika komputer penghasilan citra menggunakan primitive grafik dasar, primitif ini memudahkan untur merender atau menggambar pada layar monitor sebagaimana penggunaan persamaan geometri sederhana. 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. Primitive grafis yang umum dijelaskan pada tabel berikut :
Input primitif grafik dan pirantinya sebagaimana banyak piranti dan cara untuk pemaparan output grafika komputer, demikian pula untuk piranti inputnya, yaitu :
Keyboards Tombol Mouse
Graphics tablets Joysticks dan trackballs Knobs
Space balls dan data gloves
Masing-masing input ini mempunyai cara masing-masing untuk mengirimkan input ke komputer. Input ini diinterpretasikan oleh aplikasi grafika komputer dan dipresentasikan ke pengguna melalui layar monitor. Data yang diinputkan disebut primitif input. Beberapa primitif input diantaranya sebagai berikut :
Titik
Strings (keyboards, suara) Pilihan (tombol, layar sentuh) Valuators (analogue dial) Locator (mouse)
Fungsi dasar menggambar titik. Berikut adalah beberapa fungsi didalam menggambar suatu titik, antara lain :
- glVertex2i(x,y)
Yaitu suatu fungsi untuk menggambar titik pada koordinat x dan y, dengan nilai satuan berupa integer. Contoh glVertex2i(10,10)
- glVertex2f(x,y)
Yaitu suatu fungsi untuk menggambar titik pada koordinat x dan y, dengan nilai satuan berupa float. Contoh glVertex2f(10.0,10.0)
- glVertex2d(x,y)
Yaitu suatu fungsi untuk menggambar titik pada koordinat x dan y, dengan nilai satuan berupa double. Contoh glVertex2d(10.0,10.0);
Cara pendefinisian primitive objek yang digunakan dalam pembuatan suatu objek :
#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 # define GL_LINE_STRIP
# define GL_TRIANGLES
Triangle atau segitiga adalah tiga buah titik yang terhubung menjadi suatu segitiga dengan blok di tengahnya.
# define GL_TRIANGLES_STRIP
Pada triangles strip jumlah vertex yang dipergunakan adalah 4 buah vertex
# define GL_TRIANGLE_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_STRIP
Pada quads strip 4 buah vertex merupakan 1 kelompok.
Langkah rendering pada quads strip :
a. Nomor yang berhadap (membentuk 2 garis yang sejajar
b. Nomor ganjil dengan nomor ganjil dipertemukan c. Nomor genap dengan nomor genap dipertemukan d. Garis yang tersisa akan dipertemukan
Polygon merupakan suatu fungsi yang mirip dengan polyline, tetapi menghasilkan kurva tertutup dengan blok warna (fill). Rendering yang dimiliki oleh GL_POLYGON sama dengan GL_TRIANGLE_FAN. Catatan :
a) glLineWidth yaitu suatu fungsi yang berfungsi untuk mengatur tebalnya garis,
b) glPointSize yaitu suatu fungsi yang berfungsi untuk mengatur besarnya suatu objek,
c) gluOrtho2D yaitu suatu fungsi untuk mengatur proyeksi hasil eksekusi dan mendefinisikan besarnya sistem koordinat dengan urutan kiri-kanan dan bawah-atas.
Untuk memberi warna pada objek, seperti titik atau garis, dapat dilakukan dengan menggunakan fungsi glColor3f(red,green,blue). Di mana red, green, blue berada pada 0 sampai dengan 1, yang menunjukkan skala pencerahan dari masing-masing skala. Berikut adalah beberapa fungsi color :
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 glColor3f(1,1,1);//white
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)
Maka sintaks pembuatan segiempat : glBegin (GL_QUADS);
glVertex2i (posx, posy); glVertex2i (posx-w, posy); glVertex2i (posx-w, posy-h); glVertex2i (posx,posy-h);
B. Algoritma Pembentukan Objek
Algoritma Pembentukan Garis
Garis dibuat dengan menentukan dua endpoint atau posisi titik awal dan akhir dari suatu garis. Kemudian peralatan output membuat garis sesuai posisi titik-titik tersebut.
Untuk peralatan analog seperti plotter dan random-scan display garis lurus dapat dihasilkan dengan halus. Pada peralatan digital garis lurus dihasilkan dengan menetapkan titik diskrit antara titik awal dan akhir. Posisi titik diskrit sepanjang garis lurus data diperhitungkan dari persamaan garis tersebut. Untuk menentukan nilai suatu titik, dapat digunakan prosedur dasar dimana x sebagai nilai kolom pixel dan y sebagai nilai scan line sebagai berikut :
setPixel(x,y)
bila nilai x dan y sudah tersimpan pada frame buffer untuk dapat menampilkannya pada layer menggunakan fungsi dasar getPixel(x,y).
Algoritma DDA
Algoritma Digital Differential Analyzer (DDA) adalah algoritma pembentukan garis berdasarkan perhitungan dx maupun dy dengan menggunakan rumus dy = m.dx. Garis dibuat dengan menentukan dua endpoint yaitu titik awal dan titik akhir. Setiap koordinat titik yang membentuk garis diperoleh dari perhitungan kemudian dikonversikan menjadi nilai integer.
Keuntungan dari algoritma ini adalah tidak perlu menghitung koordinat berdasarkan persamaan yang lengkap (menggunakan metode offset). Sedangkan kerugiannya adalah adanya akumulasi Round-off errors, sehingga garis akan melenceng dari garis lurus, selain itu operasi round-off juga menghabiskan waktu. Algoritma pembentukan garis DDA adalah sebagai berikut :
void lineDDA (int x0, int y0, int xEnd, int yEnd)
{
int dx = xEnd - x0, dy = yEnd - y0, steps, k;
float xIncrement, yIncrement, x = x0, y = y0;
if (fabs (dx) > fabs (dy)) steps = fabs (dx);
else
steps = fabs (dy);
xIncrement = float (dx) / float (steps);
yIncrement = float (dy) / float (steps);
setPixel (round (x), round (y)); for (k = 0; k < steps; k++) { x += xIncrement;
y += yIncrement;
setPixel (round (x), round (y)); }
}
Algoritma Pembentukan Lingkaran
Lingkaran merupakan objek grafik yang paling sering digunakan pada grafik sederhana. Lingkaran dapat didefinisikan sebagai kumpulan titik yang memiliki jarak r dari posisi pusat (xc,yc). Persamaan lingkaran dengan titik pusat (xc,yc) dan radius r dapat dispesifikasikan menggunakan koordinat rectangular berikut :
(x – xc)2 + (y-yc)2 = r2
Lingkaran juga dapat didefinisikan menggunakan koordinat polar. Lingkaran yang sama dapat didefinisikan sebagai berikut :
x = r cos _ + xc
y = r sin _ + yc dimana 0 _ _ _ 2_
Kita dapat menggambarkan lingkaran dengan menggunakan persamaan koordinat rectangular diatas, akan tetapi pendekatan ini menimbulkan dua masalah yaitu :
1. Persamaan tersebut mengandung perhitungan akar yang
operasinya memakan waktu.
2. Timbul gap yang cukup signifikan pada lingkaran ketika
digambarkan.
Lingkaran dapat juga digambarkan dengan menggunakan persamaan koordinat polar, tetapi fungsi trigonometri juga membutuhkan cost yang tidak sedikit sehingga algoritma yang disusun tidak akan efisien.
Untuk mengatasi masalah yang timbul dari penerapan koordinat polar maupun rectangular, Bresenham menyusun suatu algoritma pembentukan lingkaran yang hanya menggunakan aritmetika integer. Secara prinsip algoritma ini sejenis denga algoritma penggambaran garis yang disusun oleh orang yang sama. Lingkaran merupakan objek yang simetris sehingga karakteristik ini dapat dimanfaatkan untuk mengurangi pekerjaan pada saat menggambar lingkaran. Lingkaran dibagi menjadi 8 oktan (lihat gambar 3.x), misalkan kita menyusun algoritma untuk menggambarkan lingkaran di oktan pertama, maka koordinat untuk 7 oktan selanjutnya dapat ditentukan pada table berikut :
Gambar lingkaran dengan 8 oktan :
Tahapan penggambaran lingkaran dengan menggunakan algoritma yang dikenal dengan nama algoritma midpoint ini adalah sebagai berikut :
1. Input jari-jari r dan koordinat pusat lingkaran (xc, yc), kemudian tentukan koordinat untuk titik awal yaitu (xo, y0) = (0, r).
2. Hitung nilai awal untuk parameter keputusan p0 = 1 – r 3. Untuk setiap xk, mulai dari k=0, lakukan langkah berikut :
jika pk<0, maka titik selanjutnya pada lingkaran dengan pusat (0,0) adalah (xk + 1, yk) dan pk+1 = pk + 2 xk+1 + 1, jika pk0, titik berikutnya adalah (xk+ 1, yk - 1) dan pk+1 = pk + 2 xk+1 + 1 - 2 yk+1 dimana 2 xk+1 = 2 xk + 2, dan 2 yk+1 = 2 yk – 2
4. Tentukan titik simetri untuk 7 oktan lainnya.
5. Untuk lingkaran dengan pusat bukan di (0,0). Pindahkan setiap posisi pixel hasil perhitungan (x, y) dengan rumus x = x + xc , y = y + yc
6. Ulangi langkah 3 sampai 5, hentikan ketika x >= y Contoh Penerapan algoritma midpoint untuk mengggambarkan lingkaran. Contoh 1: lingkaran dengan persamaan X2 + Y2 =100
C. Contoh Program Primitif Objek
D. Latihan
1. Buatlah project baru pada Visual Studio dengan nama prak1-Points. Dan tambahkan fungsi callback untuk
glutDisplayFunc(drawDot); . Beri nilai x0, x1, x2 dan y0, y1, y2 dengan nilai integer bebas tapi tetap dalam kanvas.
a. Eksekusi program yang telah anda buat dan tampilkan hasilnya berupa screenshot.
b. Jelaskan Proses Rendering untuk primitive object GL_LINES pada bangun anda berupa ilustrasi gambar.
2. Buatlah project baru pada Visual Studio dengan nama prak1-LineStrip. Beri nilai x0, x1, x2, x3 dan y0, y1, y2,
y3 dengan nilai integer bebas tapi tetap dalam kanvas dan menghasilkan tampilan bangun simetris terbuka. a. Sajikan screenshotnya.
b. Jelaskan proses rendering vertex untuk
GL_LINE_STRIP pada bangun anda berupa ilustrasi gambar.
3. Buatlah project baru pada Visual Studio dengan nama prak1-Poligon. Beri nilai x0, x1, x2, x3,x4dan y0, y1,
y2, y3,y4 dengan nilai integer bebas tapi tetap dalam kanvas dan menghasilkan tampilan bangun simetris
tertutup.
a. Sajikan screenshotnya
b. Jelaskan proses rendering vertex untuk
GL_LINE_LOOP pada bangun anda berupa ilustrasi gambar.
BAB 4
Transformasi Objek
Grafika komputer merupakan bidang yang menarik minat banyak orang. Salah sub bagian dari grafika komputer adalah pemodelan objek (object modelling). Dalam pemodelan objek dua dimensi (2D), didapati berbagai objek dapat dimodelkan menurut kondisi tertentu, objek yang dimodelkan itu perlu dimodifikasi. Pemodifikasian objek ini dapat dilakukan dengan melakukan berbagai operasi fungsi atau operasi transformasi geometri. Transformasi ini dapat berupa transformasi dasar ataupun gabungan dari berbagai transformasi geometri. Contoh transformasi geometri adalah translasi, penskalaan, putaran (rotasi), balikan, shearing dan gabungan. Transformasi ini dikenal dengan transformasi affine. Pada dasarnya, transformasi ini adalah memindahkan objek tanpa merusak bentuk.
Tujuan transformasi adalah :
Merubah atau menyesuaikan komposisi pemandangan Memudahkan membuat objek yang simetris
Melihat objek dari sudut pandang yang berbeda
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 (cf. Gambar 4.1).
Gambar 4.1. Grafika Komputer: Transformasi dari Model 3D Obyek menjadi Citra
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 kamera.
Gambar 4.2. Analogi Pengambilan Gambar oleh Kamera
Untuk menghasilkan gambar dari obyek dengan skenario tertentu kita harus melakukan beberapa proses, yaitu:
- Melakukan pengesetan kamera dalam bentuk setting lensa kamera (Transformasi Proyeksi),
- Mengarah kamera dengan mengatur letak tripod (Transformasi Viewing),
- Mengatur skala dan layout dari foto (Transformasi
Viewport)
A. Translasi
Transformasi translasi merupakan suatu operasi yang menyebabkan perpindahan objek 2D dari satu tempat ke tempat yang lain. Perubahan ini berlaku dalam arah yang sejajar dengan sumbu X dan sumbu Y.
Translasi dilakukan dengan penambahan translasi pada suatu titik koordinat dengan translation vector, yaitu (tx,ty), dimana tx adalah translasi menurut sumbu x dan ty adalah translasi menurut sumbu y. Koorinat baru titik yang ditranslasi dapat diperoleh dengan menggunakan rumus :
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
Contoh
Untuk menggambarkan translasi suatu objek berupa segitiga dengan koordinat A(10,10) B(30,10) dan C(10,30) dengan tx,ty(10,20), tentukan koordinat yang barunya?
Jawab A : x’=10+10=20 y’=10+20=30 A‟=(20,30) B : x’=30+10=40 y’=10+20=30 B‟=(40,30) C : x’=10+10=20 y’=30+20=50 C‟=(20,50)
Program di bawah ini akan memberikan ilustrasi bagaimana transformasi translate diimplementasikan.
#include <stdlib.h> #include <glut.h> void drawQuad(){ glBegin(GL_QUADS); glVertex2f(0.,0.); glVertex2f(0.,50.); glVertex2f(200.,50.);
glVertex2f(200.,0.); glEnd(); } void render(){ glClear(GL_COLOR_BUFFER_BIT); //drawKoordinat glColor3f(1.,1.,1.); drawQuad(); glTranslatef(0,50,0); glColor3f(1.,0.,0.); drawQuad(); glFlush(); }
void main (int argc, char **argv) { glutInit (&argc, argv);
glutInitWindowPosition(100,100); glutInitWindowSize(480,480);
glutCreateWindow("Translasi");
glutDisplayFunc(render); glutMainLoop();
}
Dengan output sebagai berikut:
Gambar 4.3 Translasi
B. Rotate
Ada beberapa hal mendasar yang perlu di pelajari dan di pahami untuk bisa membuat dan mengkreasikan suatu bentuk atau bidang dalam grafika komputer.
Banyak istilah2 dasar yang familiar di telinga tp sudah tidak di temukan lagi apa maksud dan pengertiannya," Matrik rotasi, translasi, dan seterusnya. Untuk memindah atau merubah posisi suatu model/bentuk tidak bisa terlepas dari yang namanya Tranformasi. Ada beberapa jenis tranformasi yaitu: Rotasi, Translasi, Dilatasi, dan refleksi. Yang saya bahas disini adalah rotasi dan translasi.
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 :
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.
Dengan menggunakan notasi matrix, maka besaran R bisa dikatakan sbb:
R = cos(0) sin(0)
sin(0) cos(0)
Gambar 4.5 Rotasi objek 3D pada Sumbu x , y , dan z
Fungsi Dasar Pembentuk Objek Contoh:
Semisal kita ingin membuat pergerakan planet dan bulan.
void Rotate(void) { hari += 2; if(hari > 360) hari = hari - 360; tahun += .1; if(tahun > 360) tahun = tahun - 360; glutPostRedisplay(); } Rotasi pergerakan untuk planet dan bulan. Hari menunjukkan perputaran bulan dan tahun menunjukkan perputaran planet
void garisOrbit(float rad, float
inc) { glPushMatrix(); float y = 0.0; glColor3f(1.0, 1.0, 1.0); glBegin(GL_POINTS);
for(float sudut = 0; sudut <= 360; sudut+=inc) { float x = rad*sin((sudut)*phi/180); float z = rad*cos((sudut)*phi/180); Garis orbit untuk menunjukkan perputaran planet yang beraturan dan tetap pada tempatnya
glVertex3f(x, y, z); }
glEnd();
glPopMatrix(); }
void merkurius(void) { glPushMatrix(); garisOrbit(5.5, 1); glRotatef(tahun*9, 0.0, 1.0, 0.0); glTranslatef(5.5, 0.0, 0.0); glutSolidSphere(0.4, 10, 8); glPopMatrix(); } Penggambaran planet dan rotasinya. Untuk pembuatan planet hampir sama fungsi yang digunakannya, yang membedakanny a hanya nilai dari setiap komponen.
void fungsiKeyboard(void) { if(GetAsyncKeyState(VK_LEFT) ) { jarakX += (cos((rot+90)*phi/180))/2;
Void ini untuk interaksi yang dilakukan oleh keyboard yaitu 1. Dengan
jarakZ += -(sin((rot+90)*phi/180))/2; } if(GetAsyncKeyState(VK_RIGHT )) { jarakX += (cos((rot-90)*phi/180))/2; jarakZ += -(sin((rot-90)*phi/180))/2; } if(GetAsyncKeyState(VK_UP)) { jarakX += (cos(rot*phi/180)* cos(pitch*phi/180))/2; jarakZ += -(sin(rot*phi/180) * cos(pitch*phi/180))/2; jarakY += sin(pitch*phi/180); } if(GetAsyncKeyState(VK_DOWN) ) { tombol Up maka gambar akan menjauhi layar 2. Dengan menekan tombol Down maka gambar akan mendekati layar 3. Dengan menekan tombol Right maka gambar akan bergerak ke arah kiri 4. Dengan menekan tombol Left maka gambar akan bergerak ke arah kanan
jarakX -= (cos(rot*phi/180)* cos(pitch*phi/180))/2; jarakZ = -(sin(rot*phi/180) * cos(pitch*phi/180))/2; jarakY -= sin(pitch*phi/180); } xlook = jarakX + (cos(rot*phi/180) * cos(pitch*phi/180)); zlook = jarakZ - (sin(rot*phi/180) * cos(pitch*phi/180)); ylook = jarakY + sin(pitch*phi/180); xup = cos(rot*phi/180) * cos((pitch+90)*phi/180); zup = -sin(rot*phi/180) * cos((pitch+90)*phi/180); yup = sin((pitch+90)*phi/180); glutPostRedisplay(); }
void PassiveMouse(int x, int y) { if( (lastx - x) >50 || (lastx - x) <-50 || (lasty - y) >50 || (lasty - y) <-50 ) { lastx = x; lasty = y; } rot += ((lastx - x)/2); lastx = x; if(rot>360) rot-=360; if(rot<0) rot+=360;
pitch += ((lasty - y))/2; lasty = y;
if(pitch > 90) pitch = 90.0;
if(pitch<-90)
pitch = -90.0;
Void ini untuk interaksi yang digunakan oleh mouse. Pergerakannya sesuai dengan ke arah mana mouse bergerak
glutPostRedisplay(); }
Tampilan Objek
Ini adalah tampilan awal perputaran planet terhadap matahari
Gambar 4.7 Perputaran planet terhadap matahari tampak atas
Gambar dibawah ini adalah gambar matahari yang diberi cahaya agar terlihat seperti matahari
Gambar 4.8 Objek diberi cahaya agar terlihat seperti matahari
Gambar 4.9 Beberapa planet mengelilingi matahari
C. 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)
Contoh penerapan dalam program dari transformasi skala :
Source Code:
void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glColor3f(1,1,0); glScalef(1,2,1); drawQuad(); glFlush(); }
Screen Shot Hasil:
Setelah di scale 2,1,1
void renderScene(void){
glClear(GL_COLOR_BUFFER_BIT); drawKoordinat(); glColor3f(1,1,0); glScalef(2,1,1); drawQuad(); glFlush(); }
Screen shot hasil:
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. Gambar 4.3 memberi ilustrasi akibat urutan transformasi yang berbeda, yaitu hasil operasi “rotasi kemudian di translasi” berbeda dengan operasi “translasi baru dirotasi”.
Gambar 4.10 Pengaruh urutan transformasi
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()
// OpenGL
// - Complex Object
// - Notice:
// 1. There are surfaces that are not correctly rendered in order.
// uncommented the GL_DEPTH
// 2. Flicker can be eliminated by using GL_DOUBLE
//
// Rubah rendering algoritma dengan menggunakan data struktur // #include<stdio.h> #include<stdlib.h> #include<string.h> #include<stdarg.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 myTimeOut(int id) {
// called if timer event
// ...advance the state of animation incrementally...
rot+=10;
glutPostRedisplay(); // request redisplay glutTimerFunc(100, myTimeOut, 0); //
}
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); 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); //glutInitDisplayMode( GLUT_DOUBLE /*| GLUT_DEPTH*/ ); glutInitDisplayMode( GLUT_DOUBLE | GLUT_DEPTH ); glutInitWindowSize(500,500); glutInitWindowPosition(0,0); glutCreateWindow("simple"); // callbacks glutDisplayFunc(mydisplay); glutKeyboardFunc(myKeyboard); glutTimerFunc(100, myTimeOut, 0); glutReshapeFunc(resize); init(); glutMainLoop(); return 0; } Tambahan:
Konsep Depth Buffer. Mode display pada program di atas diberi tambahan mode GLUT_DEPTH dan perintah
glEnable(GL_DEPTH_TEST). Hal ini untuk memastikan bahwa
surface digambar sesuai dengan urutan penampakkan yang logis. Teknik ini merupakan salah satu algoritma HIDDEN SURFACE REMOVAL. Untuk melihat apa yang terjadi bila teknik ini tidak dilakukan, hapus/commented moda GLUT_DEPTH dan glEnable(GL_DEPTH_TEST).
E. Implementasi Transformasi Objek
#include <stdlib.h> #include <glut.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); glPushMatrix(); glTranslatef(-500,-500,0); glColor3f(0,1,0);//green drawQuad(); glPopMatrix(); glPushMatrix(); glRotatef(30,0,0,1); glColor3f(0,0,1);//blue drawQuad(); glPopMatrix();
glPushMatrix(); glTranslatef(-450,-350,0); glRotatef(30,0,0,1); glScalef(0.5,0.5,0); glColor3f(0,1,1);//cyan drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(-320,-420,0); glRotatef(30,0,0,1); glColor3f(1,0,0);//red drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(-200,-350,0); glScalef(0.5,0.5,0); glColor3f(1,0,1);//magenta drawQuad(); glPopMatrix();
glPushMatrix(); glTranslatef(-200,-310,0); glRotatef(45,0,0,1); glScalef(1.5,1.5,0); glColor3f(0,1,0);//green drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(-150,-100,0); glColor3f(1,1,0);//yellow drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(-150,0,0); glScalef(0.3,0.3,0); glColor3f(1,1,1);//white drawQuad(); glPopMatrix(); glPushMatrix();
glTranslatef(320,320,0); glRotatef(45,0,0,1); glColor3f(0,1,1);//cyan drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(320,280,0); glScalef(0.5,0.5,0); glColor3f(1,0,0);//red drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(150,115,0); glScalef(0.3,0.3,0); glColor3f(1,0,1);//pink drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(450,400,0);
glRotatef(45,0,0,1); glScalef(0.6,0.6,0); glColor3f(1,0,1);//pink drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(180,400,0); glScalef(0.3,0.3,0); glColor3f(1,1,0);//yellow drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(-100,115,0); glScalef(0.5,0.5,0); glColor3f(0,1,0);//green drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(-50,-180,0);
glScalef(0.4,0.4,0); glColor3f(1,1,1);//white drawQuad(); glPopMatrix(); glPushMatrix(); glTranslatef(100,90,0); glRotatef(45,0,0,1); glScalef(1.2,1.2,0); glColor3f(1,0,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);
