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 menggunakan dan kreativitas sehingga dalam dapat pemrograman mendukung

OpenGL

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 bantuan sehingga buku ini dapat terselesaikan. Buku ini jauh Page i

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 .

Penulis,

Page ii

DAFTAR ISI
KATA PENGANTAR ..................................................................... i DAFTAR ISI ............................................................................... iii BAB 1 ........................................................................................ 1 PENGANTAR GRAFIKA KOMPUTER........................................... 1 A. B. C. E. Pengertian Grafika Komputer1 Sejarah Grafika Komputer2 Peranan dan Penggunaan Grafika Komputer.3 Teknologi Display Komputer Grafik.15

BAB 2 ..................................................................................... .21 OPENGL dan GLUT .................................................................. 21 A. B. C. D. E. F. SEJARAH OPENGL.21 PENGENALAN OPENGL.22 EVOLUSI OPENGL.24 GLUT (GL Utility Toolkit).25 CARA KERJA OPENGL.26 SET UP PROJECT BARU.30

BAB 3 ...................................................................................... 34 P R I M I T I F O B J E K........................................................... 34 A. B. C. D. Definisi Primitif Objek..34 Algoritma Pembentukan Objek.40 Contoh Program Primitif Objek46 Latihan48 Page iii

BAB 4 ...................................................................................... 50 Transformasi Objek ................................................................ 50 A. B. C. D. E. Translasi.53 Rotate..56 Scale..66 Tutorial Urutan Transformasi.69 Implementasi Transformasi Objek..76

BAB 5 ...................................................................................... 85 ANIMASI ................................................................................. 85 A. B. C. ANIMASI, SEJARAH DAN PERKEMBANGANNYA.85 JENIS-JENIS ANIMASI96 Konsep Animasi pada GLUT..106

BAB 6 .................................................................................... 116 INTERAKSI KEYBOARD .......................................................... 116 A. B. C. D. E. STRUKTUR TOMBOL PADA KEYBOARD..117 PEMETAAN (MAPPING).. 118 JENIS-JENIS KEYBOARD.119 FUNGSI TOMBOL KEYBOARD KOMPUTER125 KONSEP INPUTKEYBOARD PADA GLUT-KEY BIASA DAN SPECIAL KEY.126 BAB 7 ................................................................................... 136 INTERAKSI OBJEK 2D (MOUSE FUNCTION) ........................... 136 A. B. SEJARAH MOUSE dan JENIS MOUSE136 FUNGSI MOUSE..148 Page iv

C. D.

KONSEP MOUSE PADA GLUT..149 CONTOH PROGAM PENERAPAN MOUSE PADA GLUT.152

BAB 8 .................................................................................... 162 OBJEK 3D .............................................................................. 162 A. B. C. D. E. F. G. H. Pengertian Objek 3 Dimensi.162 Objek 3 Dimensi163 Alur Proses Rendering Grafis 3D166 Sistem koordinat 3D..168 Primitive 3D.169 Transformasi Objek 3 Dimensi172 Contoh Program dalam Open GL..177 Contoh Implementasi Objek 3 Dimensi dalam Open GL208 BAB 9 .................................................................................... 214 LIGHTING .............................................................................. 214 A. B. C. D. Pendahuluan214 Pencahayaan pada OpenGL dan Dunia Nyata..216 Cahaya Ambient, Diffuse, dan Specular219 Implementasi Pencahayaan (lighting) pada OpenGL..224 E. Contoh Program226

BAB 10 .................................................................................. 260 TEXTURE ............................................................................... 260 Page v

A. B. C. D. E. F. G. H.

Pendahuluan260 Konsep Texture Mapping262 Teknik-teknik Realisme dalam Kompuer Grafik..263 Teknik-teknik dalam Geometri267 Mip maps270 Texture maping..273 Object Texture274 Contoh penerapan material dan tekstur.275

DAFTAR PUSTAKA ................................................................. 336 KONTRIBUTOR.337

Page vi

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.

Page 1

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.

Page 2

Mengembangkan teknik interaktif dengan sarana keyboard dan pena cahaya.

Sejumlah projek penelitian dan produk Computer Aided muncul. Design/Manufacturing (CAD/CAM) telah

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

Page 3

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.

Gambar 1.1. Contoh Penggunaan 3D dengan 3Ds Max

Page 4

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.

Page 5

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.

Page 6

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 didownload 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, tidak dengan trik kosmetik, tetapi dengan polesan komputer. Page 7

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 Assisted Instruction) sudah cukup dikenal. Komputer juga Page 8

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 lainlain.

Gambar 1.6. Aplikasi bidang pengajaran mata pelajaran Matematika Aplikasi bidang bukan pengajaran dengan alat bantu komputer, diantaranya :

Page 9

- 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 seakanakan 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.

Page 10

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. Page 11

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, non-linear, editor, dll.

Page 12

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

Page 13

1963, Ivan Shutherland (MIT), menggunakan sketcpad (Manipulasi langsung, CAD), alat untuk menampilkan vector.

1968, Evans & Shutherland. 1970, Pierre Beezier, pengembangan kurva Beezier. 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. Page 14

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 realtime 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. Untuk menggambar pada screen, komputer membutuhkan sinkronisasi dengan pola scanning dari raster. Page 15

Diperlukan memori khusus untuk buffer citra dengan scan out sinkronous ke raster yang disebut framebuffer . Warna CRTs 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 Page 16

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. Alat utama untuk menampilkan output pada sistem grafika adalah video monitor. Operasi sebagian besar video Page 17

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).

Page 18

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. Page 19

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

Page 20

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. SGIs pesaing (termasuk Sun Microsystems, HewlettPackard 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, Page 21

termasuk windowing, keyboard dan mouse API, sebagian karena dikembangkan sebelum Sistem X Window dan Suns 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. Page 22

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 Page 23

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 Page 24

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

Viewing : berupa virtual cameraControl : turn fuction ON / OFF Page 25

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 Page 26

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 Page 27

messageDlg{ e.message, mtError, [mbOk],}; Halt {1}; End; Script di atas merupakan script yang paling sederhana, dalam artian minimal diperlukan untuk lain End;

menginisialisasi seperti yang

penggunaan disebut

openGL.Fungsi-fungsi seperti

diatas

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 glColor3f penentuan warna
Page 28

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 OpenGL, berisi semua Page 29 fungsi OpenGL yang

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.1a New Project Template

Page 30

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

4. Lakukan konfigurasi pada properties projek prak0.

Page 31

Gambar 1.3 Konfigurasi pada Project Properties

Gambar 1.4a menambah lokasi file include

Gambar 1.4b Pemilihan folder yang berisi glut.h

Page 32

5. Menciptakan file baru dengan nama cg-0.cpp.

Gambar 1.5a Menambahkan item baru

Gambar 1.5b Menambahkan file c++ baru

Page 33

BAB 3 PRIMITIF OBJEK

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 :

Page 34

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) Ambil (pemilihan sebagian citra, mouse, lightpen)

Page 35

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

Page 36

 # 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 # define GL_POLYGON Page 37

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 kirikanan 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

Page 38

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);

Page 39

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 : Page 40

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 int yEnd) { int dx = xEnd - x0, dy = yEnd steps, k; float xIncrement, yIncrement, x = = y0; if (fabs (dx) > fabs (dy)) steps = fabs (dx); else steps = fabs (dy); xIncrement = float (dx) / (steps); xEnd, - y0, x0, y

float

Page 41

yIncrement = float (dy) / (steps); setPixel (round (x), round (y)); for (k = 0; k < steps; k++) { x += xIncrement; y += yIncrement; setPixel (round (x), round (y)); } }

float

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 :

Page 42

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 :

Page 43

Gambar lingkaran dengan 8 oktan :

Tahapan penggambaran lingkaran dengan menggunakan algoritma yang dikenal dengan nama algoritma midpoint ini adalah sebagai berikut :

Page 44

1.

Input jari-jari r dan koordinat pusat lingkaran (xc, yc), kemudian tentukan koordinat untuk titik awal yaitu (xo, y0) = (0, r).

2. 3.

Hitung nilai awal untuk parameter keputusan p0 = 1 r 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. 5.

Tentukan titik simetri untuk 7 oktan lainnya. 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

Page 45

C. Contoh Program Primitif Objek

Primitif Point (GL_POINTS)

Page 46

Primitif (GL_LINES)

Page 47

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.

Page 48

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.

Page 49

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 Page 50

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.

Page 51

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 letak obyek (Transformasi Modeling), dan Page 52

- 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 sebesar tx,ty. Page 53

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.);

Page 54

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"); gluOrtho2D(-320.0,320.0,-320.0,320.0);

Page 55

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 Page 56

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).

Gambar 4.4 Rotasi dan Translasi

Page 57

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 Keterangan

Page 58

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();

Garis untuk

orbit

menunjukkan perputaran planet beraturan tetap

glBegin(GL_POINTS); for(float sudut = 0; sudut

float y = 0.0; glColor3f(1.0, 1.0, 1.0);

yang dan pada

tempatnya

<= 360; sudut+=inc) { float x = rad*sin((sudut)*phi/180); float z = rad*cos((sudut)*phi/180);

Page 59

glVertex3f(x, y, z); } glEnd();

glPopMatrix(); }

void merkurius(void) { glPushMatrix(); garisOrbit(5.5, 1);

Penggambaran planet dan

rotasinya. Untuk pembuatan planet sama yang digunakannya, hampir fungsi

glRotatef(tahun*9, 0.0, 1.0, 0.0); glTranslatef(5.5, 0.0, 0.0);

glutSolidSphere(0.4, 10, 8); glPopMatrix(); }

yang membedakanny a hanya nilai setiap

dari

komponen.
void fungsiKeyboard(void) { if(GetAsyncKeyState(VK_LEFT) ) { jarakX += (cos((rot+90)*phi/180))/2;

Void ini untuk interaksi dilakukan yang oleh

keyboard yaitu 1. Dengan menekan

Page 60

jarakZ += (sin((rot+90)*phi/180))/2; }

tombol maka

Up

gambar akan menjauhi

if(GetAsyncKeyState(VK_RIGHT )) { jarakX += (cos((rot90)*phi/180))/2; jarakZ += -(sin((rot90)*phi/180))/2; }

layar 2. Dengan menekan tombol Down maka gambar akan mendekati layar

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); }

3. Dengan menekan tombol Right maka gambar akan bergerak ke arah kiri 4. Dengan menekan tombol Left maka

if(GetAsyncKeyState(VK_DOWN) ) {

gambar akan bergerak ke arah kanan

Page 61

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(); }

Page 62

void PassiveMouse(int x, int y) { if( (lastx - x) >50 || (lastx - x) <-50 || (lasty - y) >50 || (lasty - y) <-50 ) { lastx = x; lasty = y; }

Void ini untuk interaksi yang

digunakan oleh mouse. Pergerakannya sesuai dengan

ke arah mana mouse bergerak

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;

Page 63

glutPostRedisplay(); }

Tampilan Objek Ini adalah tampilan awal perputaran planet terhadap matahari

Gambar 4.6 Perputaran planet terhadap matahari

Page 64

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

Page 65

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: Page 66

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(); }

Page 67

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(); }

Page 68

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.

Page 69

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>

Page 70

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); request next timer event

Page 71

} 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

Page 72

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);

Page 73

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;

Page 74

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:

Page 75

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.);

Page 76

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();

Page 77

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();

Page 78

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();

Page 79

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);

Page 80

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);

Page 81

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);

Page 82

glScalef(0.4,0.4,0); glColor3f(1,0,0);//red drawQuad(); glPopMatrix();

glPushMatrix(); glTranslatef(0,200,0); glScalef(0.4,0.4,0); glRotatef(30,0,0,1); glColor3f(0,1,0);//green drawQuad(); glPopMatrix();

glPushMatrix(); glTranslatef(150,300,0); glRotatef(-45,0,0,1); glColor3f(1,1,1);//white drawQuad(); glPopMatrix();

glPushMatrix(); glTranslatef(100,300,0);

Page 83

glScalef(0.5,0.5,0); glColor3f(1,1,0);//yellow drawQuad(); glPopMatrix();

glFlush(); }

void main(int argc,char **argv){ glutInit(&argc,argv); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("Implementasi Transformasi"); gluOrtho2D(-640.,640.,-640.,640.); glutDisplayFunc(renderScene); glutMainLoop();}

Gambar 4.11 Implementasi Transformsi Obje Page 84

BAB 5 ANIMASI
A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA
1. Masa Prasejarah Seperti karya-karya peradaban manusia yang lainnya, sejarah animasi ternyata sama tuanya dengan perkembangan peradaban manusia di bumi ini. Sejak jaman pra sejarah, manusia purba telah berusaha untuk membuat gambargambar bergerak sesuai dengan imajinasi mereka serta dengan keterbatasan alat yang mereka gunakan pada waktu itu. Lukisan dinding gua altamira di Spanyol merupakan bukti peninggalan peradaban manusia pra sejarah pada masa Paleolithicum, berupa lukisan dinding gua tentang binatang dan perburuan, sebagai cermin dari kondisi kehiduapan mereka pada waktu itu. Dari sekian banyak lukisan dinding gua, ada beberapa lukisan yang apabila dicermati, merupakan upaya manusia purba untuk menggambarkan sebuah garakan. Lukisan tersebut berupa lukisan binatang yang digambarkan dengan kaki yang banyak. Hal ini sebagai bukti, bahwa mereka telah berupaya untuk membuat kesan seolaholah binatang tersebut sedang berlarian.

Page 85

2. Masa Peradaban Mesir Kuno Perkembangan animasi tidak berhenti pada masa prasejarah saja, namun terus berkembang bahkan hingga saat ini. Pada masa peradaban Mesir kuno, orang-orang pada masa tersebut telah berupaya untuk membuat sebuah rangkaian gambar yang memiliki makna sebuah gerakan dan bahkan mengandung unsur cerita. Peradaban Mesir telah terbukti sebagai sebuah peradaban yang sangat maju, pada waktu itu. Dengan huruf hieroglif meraka meninggalkan bukti catatan peradaban maju mereka yang mengundang decak kagum manusia hingga saat ini. Diantara ribuan peninggalan peradaban Mesir, mereka juga meninggalkan bukti adanya upaya manusia untuk membuat gambar yang mereka buat seolah-olah sedang bergerak. Pharao Ramses II di Mesir membangun sebuah kuil untuk Dewa Isis. Tidak seperti pada kuil-kuil yang lain, dalam kuil dewa isis tersebut terdapat beberapa tiang yang terdapat relief fugur dewa, dalam urutan gerakan yang runut. Kuil Page 86

tersebut sebagai bukti adanya upaya manusia pada masa Mesir kuno untuk membuat gambar yang seolah-olah sedang bergerak.

3. Masa Perdaban Yunani Kuno Pada masa yunani kuno, upaya untuk membuat rangkaian gambar yang terkesan bergerak telah mereka lakukan. Bukti adanya upaya tersebut dapat dilihat melalui beragam benda-benda seni yang telah dihasilkan oleh peradaban Yunani kuno, diantaranya adalah kendi. Kendikendi yang artistic tersebut seringkali dilukis dengan figurefigur tokoh dalam tahapan gerakan yang mengelilingi kendi. Jika kendi diputar, maka akan memberikan efek gerakan.

Page 87

4. Relief Candi Selain pada peninggalan peradaban kuno diatas, masih ada lagi bukti perkembangan animasi pada perdaban manusia, yaitu relief candi. Dimana pada relief tersebut rentetan panel relief mengandung unsur cerita dan seolaholah hidup dalam benak orang yang melihat dan menghayati alur ceritanya.

Page 88

5. Wayang Wayang kulit yang dimainkan oleh dalang, dengan efek-efek suara berupa gamelan, dan alur cerita yang sangat kuat, mampu menyedot perhatian pemirsanya selama berjam-jam hingga semalam suntuk, adalah bentuk animasi pertama yang sudah dikatakan lengkap, dimana unsur-unsur animasi adanya gambar yang bergerak, alur cerita dan efek suara, sudah terpenuhi.

Page 89

6. The Persistance of Vision Perkembangan animasi selanjutnya, lebih ditekankan pada aspek keilmuan, dan mulai merambah bidang teknologi, meskipun dengan hasil yang sangat sederhana. Adalah Thomas Alfa Edison (1860), selain terkenal dengan penemuan lampu pijarnya, juga mengamukakan sebuah teory yang di kenal dengan "The Persistance of Vision". Inti dari teori tersebut adalah, jika kita melihat sebuah gambar, maka citra gambar tersebut akan terekam dalam retina manusia selama 1/10 detik sebelum citra akan gambar tersebut benar-benar menghilang. Berbasis pada teori tersebut, mulai muncul orangorang yang memperdalam ilmu untuk membuat agar sebuah gambar tampak hidup dan bergerak-gerak. Dengan teknologi yang sangat sederhana, mereka mampu menciptakan alat yang mampu membuat rangkaian gambar, dapat tampak hidup dan bergerak. Tentu saja penemuan teknologi tersebut mampu membuat kekaguman orang pada saat itu. a. Thaumatrope (Paul Roget - 1828) Merupakan sebuah alat yang sangat sederhana, berupa sebuah kepingan yang memiliki dua gambar, di satu sisi bergambar burung dan sisi lain bergambar sangkar. Kepingan tersebut pada kedua sisinya diberi pegas atau tali yang fungsinya untuk memutar. Jika kepingan berputar, maka akan terlihat seekor burung yang ada didalam sangkar. Alat ini membuktikan teori dari Thomas Alfa Edison tentang persistance of vision.

Page 90

b.

(Joseph Plateu - 1826)

Berupa sebuah kepingan gambar, dan di sisi lain terdapat kepingan dengan lubang-lubang di sekitarnya. Ketika kepingan gambar terebut diputar, melalui lubang yang talah disediakan, akan terlihat rangkaian gambar tersebut bergerak.

Page 91

c. Zeotrope (Pierre Desvignes - 1860) Hampir sama dengan Thaumatrope, Zoetrope berupa rangkaian gambar yang dimasukkan dalam sebuah tabung, dibagian lain dari tabung diberi lubang untuk melihat gambar. Ketika tabung digerakkan, maka gambar tersebut akan terlihat bergerak.

Page 92

Penemuan Film Proyektor Penemuan film proyektor oleh Thomas Alfa Edison, membuka peluang baru untuk menciptakan gambar yang bergerak. Dengan menggunakan media film proyektor, semakin mempermudah cara untuk membuat rangkaian gambar menjadi hidup dan bergerak. Gambar dibawah ini merupakan proyektor pertama yang di ciptakan oleh Thomas Alfa Adison.

Page 93

Film Animasi Era setelah diketemukannya proyektor dan perkembangannya, mulai bermunculan film-film animasi pendek yang dibuat dengan teknik yang masih sangat sederhana serta dengan keterbatasan alat yang digunakan. Film-film pada awal perkembangan animasi adalah sebagai berikut. 1. Humourous Phases of Funny Faces. (Stuart Blackton 1906) Film animasi ini, berupa gambar kartun yang di buat dengan kapur tulis diatas papan tulis. Teknik pengambilan gambarnya adalah dengan menggambar kemudian difoto dan dihapus untuk diganti dengan gambar selanjutnya. Rangkaian foto-foto tersebut kemudian digabung dan disajikan sebagai Page 94

film animasi. Film inilah yang menggunakan teknik "stopmotion" yang pertama didunia.

2. Gartie The Dinosaur (Winsor McCay 1914) Merupakan fim animasi yang sudah memasukkan unsur cerita didalamnya.

3. Felix the Cat (Otto Massmer, 1919) Pada film ini sudah jauh lebih menarik, karena adanya

Page 95

unsur cerita yang megalir, serta beberapa efek yang membuat film ini menarik.

4. Flowers and tree (Walt Disney, 1932) Film flowers and tree, sebelumnya telah diproduksi dalam bentuk film hitam putih, film tersebut akhirnya di produksi ulang dengan menambahkan unsur warna. Flowers and tree akhirnya memenangkan Academy Award untuk kategori film pendek animasi.

B. JENIS-JENIS ANIMASI
Animasi yang dulunya mempunyai prinsip sederhana, sekarang telah berkembang menjadi beberapa jenis yaitu ; Animasi 2d Page 96

Animasi 3d Animasi tanah liat (clay animation) Animasi jepang (anime)

1. Animasi 2d Animasi ini yang paling akrab dengan keseharian kita,biasa juga disebut dengan film kartun.kartun berasal dari cartoon yang artinya gambar yang lucu,memang kebanyakan film kartun itu kebanyakan film yang lucu. Contohnya banyak sekali, looney tunes,tom and jerry, scooby doo, doraemon, lion king brother bear dan banyak lagi 2. Animasi 3d Perkembangan teknologi adan komputer membuat teknik pebuuatan animasi 3d semakin berkembang dan maju pesat;. animasi 3d adalah pengembangan animasi 2d dengan animasi 3d karakter yang di perlihatkan semakin hidup dan nyata,mendekati wujud manusia asllinnya. Toy story adalah film animasi 3d pertama buatan disney(pixar studio),dan semenjak itu maka berlomba lombalah studio film dunia memproduksi film sejenis .bermunculanlah bug's life,antz, dinosaurs,final fantasy ,toy story 2,monster inc hingga finding nemo yang merupakan film aniasi terbaik di dunia pada saat itu dan masih banyak lagi lainnya. Kesemuannya itu biasa juga di sebut dengan animasi 3d atau cgi (computer generated imagery). 3. Animasi tanah liat (clay animation) Animasi ini msudah lam sekali sebenarnya bahkan sebelum era animasi 3d,bahkan boleh di bilang nenek Page 97

moyangnya animasi.M eski namanya clay (tanah liat) yang di pakai bukanlah tanah liat biasa.animasi ini memakai plasticin,bahan lentur seperti permen karet yang di temukan pada tahun 1897.tokoh dalam clay di buat dengan memakai rangka khusus untuk kerangka tubuhnya lallu kerangka tersebut di tutup dengan plasticin sesuai bentuk tokoh yang ingin di buat .bagian-bagian tubuh kerangka ini seperti kepala,tangan kaki bisa di lepas dan bisa di pasang lagi, setelah semuanya siap lalu di foto gerkan pergerakan ,inilah yang deisebut teknik pembuatan animasi dengan stop otion picture film animasi clay pertama di rilis 1908 berjudul A Sculptor's welsh rarebit nightmare.dan yang sekarang masih di puta di tv2 kita adlah shawn the sheep dan timmy time. 4. Anime (aniimasi jepang) Anime jepang tak kalah dengan animasi buatan eropa dan amerika,jepang sudah banyak memproduksi anime bahkan anime jepang tidak semua diperuntukkan bagi anakanak,bahkan ada yang khusus dewasa.

Jenis - jenis animasi dalam industri hiburan: 1. Animasi Sel (Cell Animation) Kata cell berasal dari kata celluloid, yang merupakan material yang digunakan untuk membuat film gambar bergerak pada saat awal. Sekarang, material film dibuat dari asetat (acetate), bukan celluloid. Potongan animasi dibuat pada sebuah potongan asetat atau sel (cell). Sel animasi biasanya merupakan lembaranlembaran yang membentuk sebuah frame animasi Page 98

tunggal. Sel animasi merupakan sel yang terpisah dari lembaran latar belakang dan sebuah sel untuk masingmasing obyek yang bergerak secara mandiri di atas latar belakang. Lembaran-lembaran ini memungkinkan animator untuk memisahkan dan menggambar kembali bagian-bagian gambar yang berubah antara frame yang berurutan. Sebuah frame terdiri dari sel latar belakang dan sel di atasnya. Misalnya seorang animator ingin membuat karakter yang berjalan, pertama-tama dia menggambar lembaran latar belakang, kemudian membuat karakter akan berjalan pada lembaran berikutnya, selanjutnya membuat membuat karakter ketika kaki diangkat dan akhirnya membuat karakter kaki dilangkahkan. Di antara lembaran-lembaran (frameframe) dapat disipi efek animasi agar karakter berjalan itu mulus. Frame-frame yang digunakan untuk menyisipi celah-celah tersebut disebut keyframe. Selain dengan keyframe proses dan terminology animasi sel dengan layering dan tweening dapat dibuat dengan animasi computer. Berikut adalah Contoh Gambar Animasi sel.

Page 99

2. Animasi Frame (Bingkai Animasi) Animasi bingkai adalah bentuk animasi Yang Sederhana memucat. Diupamakan Andari mempunyai sebuah Buku bergambar Yang Berseri di Tepi Auditan berurutan. Bila jempol Andari membuka Buku Artikel Baru CEPAT, Maka GAMBAR kelihatan Bergerak. PADA Komputer multimedia, animasi Buku nihil menampilkan sebuah GAMBAR Yang berurutan secara CEPAT. Antara GAMBAR Satu (frame satu) Artikel Baru GAMBAR lain (bingkai Lain) berbeda. Kalau kitd bayangkan bagaimana Film ATB ITU diputar di Bioskop, Maka dapat kitd pahami bagaimana Cara Koperasi Karyawan Bhakti Samudera frame animasi secara lebih BAIK Dalam, sebuah film, serangkaian bingkai Bergerak melalui proyektor Film Artikel Baru kecepatan sekitar 24 frame per Detik. Kita Bisa menangkap adanya Gerak di Layar karena setiap bingkai mengandung Satu GAMBAR Yang tampil PADA Layar begitu bingkai Yang bersangkutan Muncul. Mengapa 24 frame per Detik? Karena kecepatan ITU merupakan Ambang Batas, kurang bahasa Dari ITU Maka Yang Akan kitd lihat di Layar adalah GAMBAR Yang Kabur. Berikut adalah contoh gambar animasi frame

Page 100

3. Animasi Sprite (Sprite Animasi) Animasi sprite serupa Artikel Baru Teknik animasi ATB, yaitu obyek Yang diletakkan Dan dianimasikan PADA bagian Puncak Grafik Artikel Baru latar Belakang diam. Sprite adalah setiap bagian bahasa Dari animasi Andari Yang Bergerak secara mandiri, misalnya Burung Bagus terbang, planert berotasi, bola memantul-mantul atau berputar logo. Sprite beranimasi Dan Bergerak sebagai obyek Yang mandiri. Dalam, animasi sprite, sebuah GAMBAR Tunggal atau berurutan dapat ditempelkan Dalam, sprite. Sprite dapat dianimasikan Dalam, Satu klien untuk membuka posisi, seperti halnya planet berputar atau Burung Bergerak Sepanjang Garis lurus. Animasi sprite berbeda Artikel Baru animasi frame, Illustrasi Urutan masing-masing frame, Andari hanya dapat memperbaiki bahasa Dari Layar Yang mengandung sprite. Andari tidak dapat memperbaiki bagian Dalam, Yang ditampilkan Layar untuk masing-masing bingkai, seperti Yang dapat Andari kerjakan PADA animasi frame. Berikut adalah contoh gambar animasi sprite.

Page 101

4. Animasi Path ( Path Animasi) Animasi path adalah animasi dari objek yang gerakannya mengikuti garis lintasan yang sudah ditentukan. Contoh animasi jenis ini adalah animasi kereta api yang bergerak mengikuti lintasan rel. Biasanya dalam animasi path diberi perulangan animasi, sehingga animasi terus berulang hingga mencapai kondisi tertentu. Dalam Macromedia Flash, animasi jenis ini didapatkan dengan teknik animasi path, teknik ini menggunakan layer tersendiri yang didefinisikan sebagai lintasan gerakan objek. Berikut adalah contoh gambar animasi Path.

5. Animasi Spline ( Spline Animasi ) Spline adalah representasi matematis dari kurva. Bila obyek bergerak, biasanya tidak mengikuti garis lurus, misalnya berbentuk kurva. Program animasi computer memungkinkan Anda untuk membuat animasi spline dengan lintasan gerakan berbentuk kurva. Untuk mendefinisikan animasi spline, posisi pertama Anda pada sebuah titik pijak. Kurva itu sendiri melewati titik pijak. Titik pijak mendefinisikan awal dan akhir titik dari bagian Page 102

kurva yang berbeda. Masing-masing titik pijak dapat dikendalikan sehingga memungkinkan Anda untuk mengubah bentuk kurva antara dua titik pijak. Sebagian besar program animasi memungkinkan Anda untuk membuat variasi gerakan sepanjang lintasan. Jika sebuah lintasan gerakan mempunyai belokan tajam, sebagai contoh sebuah obyek bergerak pelan mengikuti belokan dan kemudian meningkatkan kecepatannya setelah melewati belokan. Beberapa program menyediakan pengontrol kecepatan sprite sepanjang lintasan secara canggih. Berikut adalah contoh gambar dari animasi Spline .

6. Animasi Vektor (Vector Animasi) Animasi vektor serupa Artikel Baru animasi sprite. PADA animasi sprite menggunakan bitmap untuk sprite, animasi vektor menggunakan rumus Matematika untuk menggambarkan sprite. Rumus inisial serupa Artikel Baru Yang rumus menggambarkan kurva spline. Animasi vektor menjadikan objek Bergerak Artikel Baru SIBOR memvariasikan parameter Ujung-Pangkal, arah Dan Panjang PADA segmen-segmen Garis Yang menentukan objek. Macromedia adalah industri terdepan Dalam, Page 103

perangkat lunak animasi berbasis vektor. Perangkat lunak flash Yang dikembangkan Macromedia menggunakan vektor grafis untuk membuat animasi interaktif Serta grafis untuk digunakan di web. Macromedia telah menerbitkan format file Flash (. Swf) sebagai sebuah standar Terbuka.Untuk INFORMASI lebih JAUH, ikuti Link situs web Macromedia Flash, di mana ANDA Bisa mengunjungi sebuah galeri halaman Web Yang berisi animasi Flash Dan mendownload flash gratis selama periode 30 Hari Percobaan terpisah. Berikut adalah contoh dari gambar animasi Vektor.

7. Animasi Clay ( Clay Animasi ) Animasi ini sering disebut juga animasi doll (boneka). Animasi ini dibuat menggunakan boneka-boneka tanah liat atau material lain yang digerakkan perlahan-lahan, kemudian setiap gerakan boneka-boneka tersebut difoto secara beruntun, setelah proses pemotretan selesai, rangkaian foto dijalankan dalam kecepatan tertentu sehingga dihasilkan gerakan animasi yang unik. Contoh penerapan animasi ini adalah pada film Chicken Run dari Dream Work Pictures. Teknik animasi inilah yang menjadi Page 104

cikal bakal animasi 3 Dimensi yang pembuatannya menggunakan alat bantu komputer. Berikut adalah contoh dari gambar animasi clay.

8. Animasi Karakter (Character Animation) Animasi karakter merupakan sebuah cabang khusus animasi. Animasi karakter semacam yang Anda lihat dalam film kartun. Animasi ni berbeda dengan animasi lainnya, misalnya grafik bergerak animasi logo yang melibatkan bentuk organic yang komplek dengan penggandan yang banyak, gerakan yang herarkis. Tidak hanya mulut, mata, muka dan tangan yang bergerak tetapi semua gerakan pada waktu yang sama. Meskipun untuk membuat animasi tunggal dan bitmap mudah, tetapi untuk membuat animasi karakter yang hidup dan meyakinkan merupakan sebuah seni yang membutuhkan pertimbangan khusus dalam pengerjaanya. Teknik ini juga dapat diterapkan terhadap animasi obyek. Perankgat lunak yang dapat dipakai untuk Page 105

animasi karakter, antara lain Maya Unlimited. Film kartun Toy Story dan Monster Inc dibuat dengan Maya Unlimited. Berikut adalah contoh dari gambar animasi karakter.

C. Konsep Animasi pada GLUT

Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat sebuah animasi yang dikontrol oleh waktu. Fungsi dari glutPostRedisplaya dalah mengirimkan perintah untuk mengaktifkan display secara berkala (looping). Kemudian pada main program perlu menambahkan fungsi untuk mengaktifkan timer function.

1. Fungsi
GLUTAPI void millis, void

dasarbpembuatan
APIENTRY

animasi

dengan
int

menggunakan TimerFunction
glutTimerFunc(unsigned

(GLUTCALLBACK *func)(int value), int value);

Page 106

Dalam penggunaan glutTimerFunc dimungkinkan untuk membuat sebuah animasi yang dikontrol olehwaktu. 2. Inisialisasi dalam penggunaan TimerFunction

Fungsi dari glutPostRedisplay adalah mengirim kan perintah untuk mengaktifkan display secara berkala (looping). Kemudian pada main program perlu menambahkan fungsi untuk mengaktifkan timer function. Berikut adalah contoh dari sebuah bentuk jam analog sederhana dengan minimal empat tempat penunjuk angka dan menggunakan 3 jarum. Jarum jam berputar sesuai dengan timer per detik waktu nyata. Source Code:
#include <stdlib.h> #include <glut.h> #include <math.h>

#define PI 3.1415926535 float sudut = 0; int i,n;

Page 107

void lingkaran(int radius, int jumlah_titik, int x_tengah, int y_tengah) { glBegin(GL_POLYGON); for (i=0;i<=360;i++){ float sudut=i*(2*PI/jumlah_titik); float x=x_tengah+radius*cos(sudut); float y=y_tengah+radius*sin(sudut); glVertex2f(x,y); } glEnd(); }

void panahJam(){ glBegin(GL_POLYGON); glColor3f(0,0,0); glVertex2i(0,200); glVertex2i(10,180); glVertex2i(5,180); glVertex2i(5,0); glVertex2i(-5,0); glVertex2i(-5,180); glVertex2i(-10,180);

Page 108

glVertex2i(0,200); glEnd(); }

void panahMenit(){ glBegin(GL_POLYGON); glColor3f(1,1,1); glVertex2i(0,220); glVertex2i(10,200); glVertex2i(5,200); glVertex2i(5,0); glVertex2i(-5,0); glVertex2i(-5,200); glVertex2i(-10,200); glVertex2i(0,220); glEnd(); } void panahDetik(){ glBegin(GL_POLYGON); glColor3f(1,0,0); glVertex2i(0,240); glVertex2i(10,210);

Page 109

glVertex2i(5,210); glVertex2i(5,0); glVertex2i(-5,0); glVertex2i(-5,210); glVertex2i(-10,210); glVertex2i(0,240); glEnd(); }

void angka(float jarak, float x, float y) { glPointSize(10);

glBegin(GL_POINTS); glColor3f(0,0,0); for(n=0;n<360;n+=30) glVertex2f(jarak*(float)sin(n*PI/180.0)+x,ja rak*(float)cos(n*PI/180.0)+y); glEnd(); }

void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT);

Page 110

glPushMatrix(); glColor3f(0.7,0.7,0.7); lingkaran(250,100,0,0); angka(230.,0.,0.); glPopMatrix();

glPushMatrix(); glRotatef(sudut,0,0,1); panahDetik(); glPopMatrix();

glPushMatrix(); glRotatef(sudut/60,0,0,1); panahMenit(); glPopMatrix();

glPushMatrix(); glRotatef(sudut/720,0,0,1); panahJam(); glPopMatrix();

glColor3f(0,0,0);

Page 111

lingkaran(20,100,0,0);

glFlush(); }

void timer(int value){ sudut-=0.6; glutPostRedisplay(); glutTimerFunc(100,timer,0); }

void main (int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100,100); glutInitWindowSize(300,300); glutCreateWindow("JAM ANALOG: Prak Grafkom"); gluOrtho2D(-300.,300.,-300.,300.); glutDisplayFunc(renderScene); glutTimerFunc(60,timer,0); glutMainLoop();

Page 112

Output:

Contoh program ke-2 Membuat sebuah baling-baling yang bisa perputar secara clockwise kemudian unclockwise yang pusatnya berada pada pusat koordinat.
#include <stdlib.h> #include <glut.h> int x=0; int zputer=0; int zbalik=180; void Timer(int value){

Page 113

if(zputer <=360){ x = 1; zputer += 1; } if(zputer>360){ x = -1; zbalik -= 1; } if(zbalik<0){ x = 1; zputer = 0; zbalik = 360; } glutPostRedisplay(); glutTimerFunc(5,Timer,0); } void Draw(){ glBegin(GL_TRIANGLES); glClear(GL_COLOR_BUFFER_BIT); glVertex2d(0,0); glVertex2d(-100,200); glVertex2d(100,200); glVertex2d(0,0); glVertex2d(-100,-200); glVertex2d(100,-200); glEnd(); } void display(){

Page 114

glClear(GL_COLOR_BUFFER_BIT); glPopMatrix(); glRotatef(x,0.,0.,1.); Draw(); glPushMatrix(); glFlush(); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("Praktikum Grafika Komputer"); gluOrtho2D(-300.0,300.0,-300.0,300.0); glutDisplayFunc(display); glutTimerFunc(100,Timer,0); glutMainLoop();

Output:

Page 115

Animasi 2D menggunakan OpenGL dapat dilakukan dengan melakukan perpindahan objek menggunakan glTranslatef, juga dapat dilakukan dengan melakukan perputaran atau pergerakan objek yang berporos pada sumbu-sumbu koordinat dari sumbu pembentuk objek tersebut menggunakan glRotatef. Kemudian waktu yang digunakan dalam pergerakan animasi juga dapat diatur sesuai keinginan dengan menggunakan glutTimerFunc.

BAB 6 INTERAKSI KEYBOARD

Page 116

Keyboard adalah alat input yang berfungsi untuk berfungsi mengetikkan huruf, angka, karakter khusus dan memasukkan perintah atau instruksi ke dalam software atau system operasi yang dijalankan komputer, serta sebagai media bagi user (pengguna) untuk melakukan perintah perintah lainya yang diperluka, seperti menyimpan file dan membuka file.

A. STRUKTUR TOMBOL PADA KEYBOARD

Secara umum, struktur tombol pada keyboard terbagi atas 4, yaitu: a. Tombol Ketik (typing keys) Tombol ketik adalah salah satu bagian dari keyboard yang berisi huruf dan angka serta tanda baca. Secara umum, ada 2 jenis susunan huruf pada keyboard, yaitu tipe QWERTY dan DVORAK. Namun, yang terbanyak digunakan sampai saat ini adalah susunan QWERTY. b. Numeric Keypad Numeric keypad merupakan bagian khusus dari keyboard yang berisi angka dan sangat berfungsi untuk memasukkan data berupa angka dan operasi perhitungan. Struktur angkanya disusun menyerupai kalkulator dan alat hitung lainnya. c. Tombol Fungsi (Function Keys) Tahun 1986, IBM menambahkan beberapa tombol fungsi pada keyboard standard. Tombol ini dapat Page 117

dipergunakan sebagai perintah khusus yang disertakan pada sistem operasi maupun aplikasi. d. Tombol kontrol (Control keys) Tombol ini menyediakan kontrol terhadap kursor dan layar. Tombol yang termasuk dalam kategori ini adalah 4 tombol bersimbol panah di antara tombol ketik dan numeric keypad, home, end, insert, delete, page up, page down, control (ctrl), alternate (alt) dan escape (esc)

B. PEMETAAN (MAPPING)
Karena saluran cache lebih sedikit dibandingkan dengan blok memori utama, diperlukan algoritma untuk pemetaan blok-blok memori utama ke dalam saluran cache. Selain itu diperlukan alat untuk menentukan blok memori utama mana yang sedang memakai saluran cache. Pemilihan fungsi pemetaan akan menentukan bentuk organisasi cache. Dapat digunakan tiga jenis teknik, yaitu sebagai berikut :

a. Pemetaan Langsung (Direct Mapping) Pemetaan ini memetakan masing-masing blok memori utama hanya ke satu saluran cache saja. Jika suatu blok ada di cache, maka tempatnya sudah tertentu. Keuntungan dari direct mapping adalah sederhana dan murah. Sedangkan Page 118

kerugian dari direct mapping adalah suatu blok memiliki lokasi yang tetap (Jika program mengakses 2 block yang di map ke line yang sama secara berulang-ulang, maka cachemiss sangat tinggi). b. Pemetaan Asosiatif (Associative Mapping) ini mengatasi kekurangan pemetaan

Pemetaan

langsung dengan cara mengizinkan setiap blok memori utama untuk dimuatkan ke sembarang saluran cache. Dengan pemetaan asosiatif, terdapat fleksibilitas penggantian blok ketika blok baru dibaca ke dalam cache. Kekurangan pemetaan asosiatif yang utama adalah kompleksitas

rangkaian yang diperlukan untuk menguji tag seluruh saluran cache secara paralel, sehingga pencarian data di cache menjadi lama. c. Pemetaan Asosiatif Set (Set Associative Mapping)

Pada pemetaan ini, cache dibagi dalam sejumlah sets. Setiap set berisi sejumlah line. Pemetaan asosiatif set memanfaatkan kelebihan-kelebihan pendekatan pemetaan langsung dan pemetaan asosiatif

C. JENIS-JENIS KEYBOARD
Jenis Jenis Keyboard Komputer Secara Fisik a. Keyboard Serial : digunakan pada komputer tipe AT

Page 119

b. Keyboard PS/2 : digunakan pada komputer ATX

c. Keyboard Wireless : digunakan pada semua jenis komputer dan laptop

d. Keyboard USB : Untuk menjamin transfer data lebih cepat

Page 120

Jenis Jenis Keyboard Komputer Secara Bentuk dan Tombol 1. Keyboard QWERTY

Keyboard yang biasanya dipakai adalah jenis Qwerty, yang bentuknya ini mirip seperti tuts pada mesin tik. ditemukan oleh Scholes, Glidden dan Soule pada tahun 1878, dan fungsi keyboard QWERTY ini digunakan sebagai standar mesin tik komersial pada tahun 1905. Keyboard QWERTY memiliki empat bagian yaitu : a. Typewriter key b. Numeric key c. Funtion key d. Special function key Tata Letak ini sama dengan keyboard yang biasa digunakan yang terdiri dari 4 bagian yaitu:

Tombol fungsi (function key) Page 121

Tombol alphanumerik (alphanumerik key) Tombol kontrol (control key) Tombol numerik (numerik keypad).

Untuk menghasilkan bilangan dalam jumlah yang besar, orang lebih suka menggunakan tombol numerik (numerik keyped) yang tata letak tombol-tombolnya dapat dijangkau dengan sebuah tangan. Selain itu, fungsinya untuk mengetikkan angka apabila tombol Num Lock di aktifkan. Apabila tombol Num Lock tidak diaktifkan, fungsinya berubah menjadi tombol-tombol untuk menggerakkan kursor. 2. KEYBOARD ALPHABETIC

Tombol-tombol pada papan ketik dengan tata letak alphabetik disusun persis seperti pada tata letak QWERTY maupun Dvorak. Susunan hurufnya berurutan seperti pada urutan alphabet.Biasanya banyak ditemui pada mainan anakanak, sehingga anak-anak dapat diajar mengenal hurup alphabet. Keyboard Alphabetic, digunakan utk negara-negara yg menggunakan alphabetic berbeda dgn alphabetic yg ada. Misal : Arab, Cina, Rusia. Tombol-tombol disusun menurut abjad. Tidak punya kelebihan dibanding tata letak lainnya, karena itu tidak banyak dipakai.

Page 122

3. KEYBOARD DVORAK

Ditemukan pada tahun 1932 dengan dirancang lebih efisien 10-15 % dibanding keyboard QWERTY. Menggunakan susunan papan ketik yang sama, tetapi susunan hurufnya disusun sehingga tangan kanan dibebani oleh banyak pekerjaan dibanding dengan tangan kiri. Dirancang agar 70 persen dari ketukan jatuh pada home row, sehingga jarijemari yang harus mencapai huruf-huruf yang tidak berada pada posisi home row mempunyai kerja yang lebih ringan. Mengurangi kelelahan karena adanya faktor ergonomik yang ditambahkan pada tata letak ini. 4. KEYBOARD CHORD

Keyboard Chord, digunakan utk mencatat ucapan. Untuk menghasilkan suatu kata dgn menekan tombol atau kombinasi tombol. Misal; tombol D kombinasi dari T & +. Keyboard ini hanya mempunyai beberapa tombol antara 4 sampai 5. Untuk memasukkan suatu huruf harus menekan beberapa tombol secara bersamaan. Ukurannya kompak, sangat cocok untuk aplikasi yang portabel. 5. KEYBOARD KLOCKENBERG Page 123

Keyboard ini dibuat dengan maksud menyempurnakan jenis keyboard yang sudah ada, yaitu dengan memisahkan kedua bagian keyboard (bagian kiri dan kanan). 6. KEYBOARD MALTRON

Keyboard ini dibuat agak cekung ke dalam. Dengan pertimbangan bahwa pada saat jari-jari diposisikan akan mengetik, maka jari-jari itu dijamin tidak akan membentuk satu garis lurus. 7. KEYBOARD NUMERIC

Keyboad ini bertujuan untuk memasukkan bilangan dalam jumlah yang besar. Page 124

D. FUNGSI TOMBOL KEYBOARD KOMPUTER

Back Space : untuk menghapus 1 character di kiri cursor Caps Lock : untuk membuat huruf kecil menjadi huruf besar atau Kapital Delete : untuk menghapus 1 karakter pada posisi cursor Esc : untuk membatalkan suatu perintah dari suatu menu End : untuk memindahkan cursor ke akhir baris / halaman / lembar kerja Enter : untuk berpindah ke baris baru atau untuk melakukan suatu proses perintah Home : Untuk menuju ke awal baris atau ke sudut kiri atas layar Insert : untuk menyisipkan character Page Up : untuk meggerakan cursor 1 layar ke atas Page Down : untuk Menggerakkan cursor 1 layar ke bawah Tab : untuk memindahkan cursor 1 tabulasi ke kanan Numeric Key : memberikan perintah menghidupkan dan mematikan fungsi tombol numerik

Page 125

E. KONSEP INPUTKEYBOARD PADA GLUT-KEY BIASA DAN SPECIAL KEY

1. KONSEP INPUT KEYBOARD (GENERAL BUTTON) glutKeyboardFunc adalah suatu fungsi callback untuk digunakan sebagai masukan pada suatu jendela window. Konsepnya pada saat seorang user atau pengguna memberikan input yaitu menekan pada tombol keyboard, setiap tombol keyboard yang ditekan akan menghasilkan suatu karakter ASCII yang akan menghasilkan suatu callback keyboard yang telah didefinisikan berupa fungsi dengan 3 parameter. Penggunaan input keyboard pada tombol-tombol biasa atau normal key (a-z, 1-0), dapat dilakukan dengan menggunakan callback function berupa glutKeyboardFunc(myKeyboard) dengan dideklarasikan terlebih dahulu suatu fungsi buatan untuk menampung semua perintah input yang akan digunakan oleh user. Fungsi buatan tersebut seperti contoh di bawah ini:
void myKeyboard(unsigned char key, int x,int y) { // masukkan perintah disini }

Fungsi tersebut berisi suatu perintah yang akan digunakan dalam pengoperasian program oleh user. Di dalam fungsi tersebut terdapat 3 parameter dan di dalamnya dideklarasikan suatu perintah yang nantinya akan digunakan. Page 126

void timer(int value){ glutPostRedisplay(); glutTimerFunc(100, timer, 0); }

void myKeyboard(unsigned char key, int x, int y) { if(key == 'a') glTranslatef(0,5,0); if(key == 'd') glTranslatef(0,-5,0); }

void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glColor3f(1.,0.,0.); Draw(); glFlush(); }

Sintaks tersebut adalah sintak dasar yang digunakan, untuk bisa menggunakan input keyboard maka harus diberikan callback function untuk memanggilnya.
glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutTimerFunc(30,timer,0);

Page 127

Sintaks tersebut harus disertakan pada fungsi main. Selain itu, pada keyboard juga terdapat method lain yang bisa digunakan dalam proses input ini, yaitu: Key Press, Key Up, dan Key Buffering.

a. Key Press
Metode ini akan memberitahukan kita pada command line tombol apa yang sedang kita tekan. Method ini dapat dinamakan keyPressed dan pada GLUT akan terdapat 3 parameter, satu untuk tombol yang saat itu ditekan, dan dua untuk memberitahukan lokasi mouse ketika tombol ditekan.
void keyPressed(unsigned char key, int x, int y){ If(key == a){ // saat tombol a ditekan // aksi yang diberikan saat tombol a ditekan }}

Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback function-nya sedikit berbeda dari callback function yang sebelumnya.
glutKeyboardFunc(keyPressed); // memberitahukan pada GLUT untuk menggunakan method "keyPressed" untuk tombol yang ditekan

b. Key Up
Fungsi Key Up ini adalah fungsi register yang menyimpan nilai masukan sampai ketika tombol keyboard dilepaskan. Hal ini bisa berguna untuk pengaturan beberapa nilai ketika suatu tombol pertama kali ditekan, dan tetap menjaga nilai tersebut sampai tombol tersebut dilapaskan. Method sama seperti method Key Press tadi yaitu memiliki 3 parameter yang Page 128

memiliki fungsi yang sama, penamaannya yaitu, keyUp.

hanya

berbeda

pada

void keyUp(unsigned char key, int x, int y){ If(key == a){ // saat tombol a ditekan // aksi yang diberikan saat tombol a ditekan } }

Dan fungsi tersebut akan dipanggil pada fungsi main, namun callback function-nya sedikit berbeda dari callback function yang sebelumnya.
glutKeyboardFunc(keyUp); // memberitahukan pada GLUT untuk menggunakan method "keyUp" untuk tombol yang dilepas

c. Key Buffering
Method ini memungkinkan untuk penanganan terhadap tombol yang ditekan dalam jumlah banyak dalam proyekproyek OpenGL. Seperti yang diketahui tipe data char sama dengan byte dan dapat mengambila nilai integer dari 0 sampai 255. Ini dikarenakan tipe data char memiliki ukuran 28 atau 256. Hal ini memungkinkan kita untuk menangani hingga 256 tombol berbeda pada keyboard, atau seluruh set karakter ASCII. Pertama dimulai dengan pendeklarasian sebuah array dari nilai Boolean yang akan menangani masing-masing method keyboard, true untuk tombol yang ditekan, dan false saat tombol dilepaskan.
bool* keyStates = new bool[256]; // membuat array dari nilai boolean dengan ukuran 256 (0255)

kemudian dilanjutkan dengan pendeklarasian masingmasing method.

void keyPressed(unsigned char key, int x, int y) {

Page 129

keyStates[key] = true; } void keyUp(unsigned char key, int x, int y){ keyStates[key] = false; } void keyOperations(void){ if(keyStates['a']){ // saat tombol a ditekan // aksi yang diberikan saat tombol a ditekan } }

Sama seperti sebelumnya fungsi-fungsi tersebut akan dipanggil pada fungsi main dengan callback function berikut:
void display (void){ keyOperations(); glClearColor(1.0f, 0.0f, 0.0f, 1.0f); // menjadikan background menjadi warna merah }

2. KONSEP INPUT KEYBOARD SPECIAL KEY GlutSpecialFunc merupakan suatu fungsi callback pada opengl yang digunakan untuk mengaktifkan tombol-tombol khusus pada keyboard sehingga dapat digunakan untuk berinteraksi antara user dengan objek yang ada di dalam display opengl. Pendeklarasiannya adalah :
void glutSpecialFunc (void (* func) (int key, int x, int y));

Page 130

callback keyboard khusus dipicu ketika keyboard fungsi atau tombol special yang dideklarasikan ditekan. Parameter callback kunci adalah GLUT_KEY_tombol khusus.. Parameter x dan y mengindikasikan koordinat relatif jendela ketika tombol ditekan. Ketika jendela baru dibuat, tidak ada callback khusus awalnya terdaftar dan stroke kunci khusus di jendela diabaikan. Melewati NULL untuk glutSpecialFunc Menonaktifkan generasi callback khusus. Selama callback khusus, glutGetModifiers dapat dipanggil untuk menentukan keadaan tombol pengubah ketika keystroke menghasilkan callback terjadi. Nilai-nilai yang tersedia GLUT_KEY_ * adalah: GLUT_KEY_F1 GLUT_KEY_F2 GLUT_KEY_F3 GLUT_KEY_F4 GLUT_KEY_F5 GLUT_KEY_F6 GLUT_KEY_F7 GLUT_KEY_F8 GLUT_KEY_F9 GLUT_KEY_F10 GLUT_KEY_F11 GLUT_KEY_F12 F1 function key F2 function key F3 function key F4 function key F5 function key F6 function key F7 function key F8 function key F9 function key F10 function key F11 function key F12 function key

Page 131

GLUT_KEY_LEFT GLUT_KEY_RIGHT GLUT_KEY_UP GLUT_KEY_DOWN GLUT_KEY_PAGE_UP GLUT_KEY_PAGE_DOWN GLUT_KEY_HOME GLUT_KEY_END GLUT_KEY_INSERT

Left function key Right function key Up function key Down function key Page Up function key PageDown function key Home function key End function key Insert function key

Tombol-tombol diatas dapat diaktifkan dengan membuat sebuah fungsi callback yang akan dipanggil oleh glutSpecialFunc ke dalam fungsi main program, sehingga user dapat berinteraksi dengan objek yang ada dengan menekan tombol-tombol special keyboard yang telah di deklarasikan ke dalam fungsi callback tersebut. contoh pembuatan fungsi callback untuk tombol special keyboard :
void mySpecialKeyboard(int key, int x, int y){ switch(key){ case GLUT_KEY_LEFT : c+=-4; d+=0; break; case GLUT_KEY_RIGHT : c+=4; d+=0; case GLUT_KEY_UP : c+=0; d+=4; break;

break; break;

case GLUT_KEY_DOWN : c+=0; d+=-4;

Page 132

} }

Selanjutnya fungsi tersebut akan dipanggil oleh glutDisplayFunc ke dalam fungsi main, berikut script nya :
glutSpecialFunc(mySpecialKeyboard);

Selain fungsi callback yang mendeklarasikan tombol special keyboard, untuk dapat berinteraksi fungsi tersebut harus memiliki fungsi callback lain yang akan dipanggil kedalam fungsi glutDisplayfunc dan fungsi glutTimerFunc didalam fungsi main program tersebut. fungsi callback di dalam fungsi glutDisplayFunk merupakan fungsi yang mendklarasikan objek yang akan berinteraksi dengan tombol keyborad, Sedangkan fungsi glutTimerFunc berfungsi agar tombol keyboard dapat terus terdeteksi oleh glut. Contoh program interaksi keyboard lengkap :
#include <stdlib.h> #include <glut.h> int c,d; void triAngles(){ glBegin(GL_TRIANGLES); glVertex2i(280,0); glVertex2i(250,60); glVertex2i(220,0); glEnd();} void mySpecialKeyboard(int key, int x, int y){ switch(key){ case GLUT_KEY_LEFT : c+=-4; d+=0; break; case GLUT_KEY_RIGHT : c+=4; d+=0; break; case GLUT_KEY_UP : c+=0; d+=4; break; case GLUT_KEY_DOWN : c+=0; d+=-4; break; }}

Page 133

void timer(int value){ glutPostRedisplay(); glutTimerFunc(50,timer,0);} void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glTranslatef(c,d,0); triAngles(); glPopMatrix(); glFlush(); } void main (int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100,100); glutInitWindowSize(640,480); glutCreateWindow("ANJAR DWI R & DWI PANGLIPURINGTIAS"); gluOrtho2D(-320.,320.,-240.,240.); glutTimerFunc(50,timer,0); glutDisplayFunc(renderScene); glutSpecialFunc(mySpecialKeyboard); glutMainLoop(); }

Page 134

Panah merah mengindikasikan pergerakan objek ketika tombol arah (up, down. Left, dan right) pada keyborad ditekan oleh user. Sesuai dengan program dimana setiap tombol arah akan memiliki nilai variabel c dan d yang berbeda-beda yang akan mengakibatkan gambar akan bergeser dengan arah yang sesuai nilai variabel tersebut ketika tombol khusus arah (up, down, left dan right) ditekan.

Page 135

BAB 7 INTERAKSI OBJEK 2D (MOUSE FUNCTION)

Mouse merupakan peralatan masukan/ inputan selain keyboard pada computer. Mouse adalah alat/perangkat yang digunakan untuk mengatir perpindahan kursor secara cepat atau digunakan untuk memberikan perintah secara praktis dan cepat pula. Didalam mouse terdapat bola kecil yang jika digerakkan akan menyebabkan sinyal listrik terkirim kkomputer sesuai dengan pergerakan mouse Mouse merupakan salah satu perlengkapan computer meskipun apabila tidak ada juga computer masih bisa beroperasi, akan tetapi dengan menggunakan mouse maka kerja kita akan menjadi lebih cepat dan menghemat waktu, lebih cepat dan efisien. Maka ridak ada salahnya jika kita sedikit melihat sejarah perkembangan mouse itu sendiri.

A. SEJARAH MOUSE dan JENIS MOUSE

Mouse pertama kali ditemukan oleh Douglas Engelbart dari stanford Research Insitute pada tahun 1963. Mouse adalah suatu alat yang terdiri dari beberapa alat penunjuk ( pointing device ) yang dikembangkan untuk oN Line System (NLS) milik Engelbard. Selain mouse yang awalnyya disebut "bug", juga dikembangkan beberapa alat deteksi gerakan tubuh lainnya yang diletakkan di kepala dan

Page 136

dagu. Karena kenyamanan dsalam penguunaannya, mouse dipilih dan dikembangkan. Mouse pertama yang diciptakan berukuran besar, dan menggunakan dua buah roda yang saling tegak lurus utnuk mendeteksi gerakan ke sumbu Xdan sumbu Y. Engelbart kemudian mematenkan nya pada 17 November 1970, dengan nama penunjuk posisi X-Y untuk sistem tampilan grafis (X-Y position Indicator For A Display System). Pada waktu itu, sebetulnya Engelbart beraksud pengguna mouse dengan satu tangan secara terus menerus, sementara tangan yang lainnya mengperasikan alat seperti keyboard dengan lima tombol. Perkembangan selanjutnya dilakukan oleh Bill English di Xerox PARC pada awal tahun 1970, yang menggunakan bola berputar kesegala arah, putaran tersebut dideteksi oleh roda-roda sensor didalam mouse tersebut. Pengembangan inilah yang melahirkan mouse tipe trackball, yaitu mouse terbalik dimana pengguna menggerakkan bola dengan jari.Pada tahun 1980 - 1990 Xerox mempopulerkan penggunaan keyboard QWERTY dengan dua tangan dan menggunakan mouse pada saat dibutukan saja. Mouse sekarang ini mengikuti desain Ecole Polytechnique federale de lausanne (EPFL) yang diinspirasikan oleh profesor Jean-Daniel Nicoud. Jenis yang paling akhir adalah mouse optic dan yang paling mudah dalam perawatannya serta penggunaannya. Mouse jenis ini tidak erlu dibersihkan pada bagian bolanya karena banyak nya

Page 137

debu yang menempel. Mouse optikal pertamakali dibuat oleh Steve Kirsch dari Mouse Systems Corporation. Mouse jenis ini menggunakan LED (Light emitting diode) dan photo dioda untuk mendeteksi gerakan mouse. Mouse optikal petamakali hanya dapat digunakan pada alas (mousepad) khusus yang berwarna metalik bergaris biru abu-abu. Seiring perkembangan jaman mouse sekarang ini dapat digunakan disemua permukaan yang padat dan rata, kecuali permukaan yang memantulkan cahaya. Mouse saat ini bekerja dengan menggunakan sensor optik yang menggunakan LED sebagai sumber penerangan untuk mengambil beribu-ribu frame gambar selama mouse bergerak. Dan jenis mutakhir dari mouse adalah yang berteknologi laser, pertamakali diperkenalkan oleh logitech, perusahaan mouse terkemuka yang bekerja sama dengan Agilent Technologies pada tahun 2004, dengan nama logitech MX 1000. Logitech mengklaim bahwa mouse laser memiliki tingakt akurasi yang 20 kali lebih besar dari mouse optikal. Meskipun dasar kerja dari mouse optikal dengan mouse laser sama hanya berbeda pada laser pengganti LED. Meskipun begitu jenis mouse ini belum banyak dipergunakan diperkirakan harganya yang masih mahal. Dari sekian banyaknya perkembangan dari awal sampai yang terakhir yang tidak berubah dari mouse adalah jumlah tombolnya. Semua mouse memiliki tombol satu sampai tiga buah. Mouse pertama memiliki satu tombol. Kebanyakan mouse saat ini, yang didesain oleh microsoft Windows, memiliki dua tombol. Beberapa mouse Page 138

modernjuga memiliki sebuah wheel untuk memudahkan scrolling. Sementara Ael memperkenalkan mouse satu tombol, yang tidak berubah hingga kini. Mouse modern juga sudah banyak yang tanpa kabel, dengan menggunakan teknologi wireless seperti infra red, gelombang radio ataupun bluetooth. Mouse wireless yang populer saat ini menggunakan gelombang radio dan ataupun bluetooth. Sedangkan mouse yang menggunakan infrared kurang begitu populer karena jarak jangkaunya yang terbatas, selain itu juga kurang begitu praktis karena antara mouse dengan penerimanya tidal boleh ada penghalang. Berikut urutan sejarah perjalanan mouse dan jenis-jenis mouse: 1. Mouse yang Pertama Mouse kali pertama diperkenalkan oleh Douglas Engelbart pada tahun 1967. Kali pertama diperkenalkannya, mouse hanya memiliki dua alat mekanik berbentuk roda sebagai menanda arah yang masing-masing mengacu pada sumbu X dan sumbu Y. Mouse ini hanya memiliki satu tombol saja pada bagian atasnya. Dan bentuknya masih terlihat sangat primitif. Namun biar demikian, mouse inilah yang telah menjadi cikal-bakal mouse yang kini.

Page 139

Untuk dapat memfungsikan mouse sebagai alat penunjuk atau input tidak hanya dibutuhkan fisiknya saja, melainkan juga dibutuhkan keterlibatan software dari mouse itu sendiri. Perkembangan software yang mengirim kemajuan hardware dari mouse ini telah mendorong mouse ke posisi yang sangat penting. Baik sebagai input device pada pekerjaan sederhana seperti mengetik, sampai pada proses design dan bermain game 3D yang supercanggih. 2. Mekanik

Page 140

Mouse trackball yang tidak menggunakan kabel atau wireless hanya membutuhkan tenaga 5 mA saja. Sangat kecil, sehingga Anda tidak perlu sering ganti baterai. Hal ini dikarenakan kerjanya tidak sepenuhnya elektrik. Ada beberapa komponen yang bekerja mekanik, sehingga tidak membutuhkan banyak tenaga listrik. Perawatannya juga tidak sulit, cukup dibersihkan saja rodaroda mouse, maka mouse dapat berjalan baik kembali. Pengunaan bola atau yang disebut trackball ternyata tidak selalu di bawah mouse. Saat ini, ada beberapa mouse yang menggunaka bolanya di atas mouse sehingga menggunakannya tidak perlu menelungkupkan telapak tangan. Sehingga lebih mudah dan nyaman digunakan ketimbang mouse biasa. Oleh sebab itu, harganya umumnya lebih mahal dan tidak terlalu banyak perusahaan IT yang memproduksinya. Beberapa di antarannya adalah Microsoft dan Logitech. Bola yang digunakan untuk mouse jenis ini agak sedikit berbeda. Umumnya lebih besar dan licin. Berbeda dengan mouse yang meletakan bolanya di bawah. Bola tersebut cenderung kecil dengan permukaan yang tidak licin. Hal ini dilakukan agar bola dapat berjalan dengan baik atau tidak tergelincir pada permukaan. Oleh sebab itu, untuk menggunakan mouse mekanik dengan bola di bawah seseorang kerap kali harus menggunakan tatakan khusus yang dinamakan mousepad. Cara kerja mouse mekanik yang meletakkan trackballnya di atas sama dengan kerja mekanik mouse yang memiliki trackball-nya di bawah. Page 141

3. Optic Yang disebut mouse optical adalah mouse yang menggunakan sensor cahaya serta lampu LED merah di bawahnya sebagai pencahaya. Sensor pada mouse optical mampu menangkap gambar dengan kecepatan 1500 frame per detik sampai 7000 frame per detik. Dengan kecepatan mencapai 45 inci per detik dengan resolusi 2000 count per inci (cpi).

Mouse ini dinyatakan memiliki nilai presisi yang lebih baik ketimbang mouse yang menggunakan mekanik. Pernyataan ini tidak sepenuhnya benar. Untuk kelas yang sama, mouse optical tidaklah lebih presisi. Yang memang memiliki nilai presisi yang tinggi harganya saat ini masih terbilang mahal. Sedangkan, mouse optical yang umum dijual tidak memiliki kecepatan dan nilai presisi yang lebih baik ketimbang mouse biasa. Dan keterangan ini sering diabaikan oleh si produsen.

Page 142

Berbeda dengan mouse trackball yang sulit jalan ditempat yang terlalu licin. Oleh sebab itu, mouse ini membutuhkan sebuah landasannya sendiri yang dinamakan mouse pad. Berbeda dengan mouse optical yang cenderung lebih baik bekerja dipermukaan yang mulus dan dengan warna yang cenderung gelap. Mouse optical sulit dijalankan pada permukaan yang putih polos.

Berbeda dengan mouse mekanik yang sulit jalan di tempat yang terlalu licin, mouse optical dapat digunakan hampir pada seluruh jenis permukaan. Asalkan permukaan tersebut tidak transparan atau terlalu glossy. Mouse optic juga membutuhkan arus yang lebih besar ketimbang mouse bola atau mekanis biasa. Lima kali lebih besar arus yang dibutuhkan untuk menggerakan mouse ini(25 mA). Ini artinya bila Anda menggunakan mouse wireless optical akan lima kalilebih sering mengganti baterai ketimbang menggunakan mouse mekanik yang menggunakan bola. Page 143

Cara kerja mouse optical adalah sebagai berikut: lampu LED menembarkan cahayanya pada permukaan lalu, sensor cahaya yang ada pada bagian bawah mouse akan menangkap pergeseran yang terjadi pada cahaya tersebut. Atau dapat juga dikatakan sebagai berikut. Bila mouse mekanik komputer mencatat pergeseran yang dilakukan oleh mouse, sebaliknya dengan mouse optical, komputer mencatat pergeseran yang terjadi pada landasan mouse. Kelebihan mouse optic: Tidak ada celah kotoran masuk kedalam mouse artinya isi mouse tidak akan kotor dan memperkecil kerusakan mouse. Tidak ada mekanisme yang bergerak, artinya mouse akan menjadi lebih awet. Meningkatkan sensor gerakan sehingga respon menjadi mulus

Page 144

Tidak membutuhkan permukaan khusus seperti mouse pad Kekurangan mouse optic:

Tidak dapat berjalan di atas permukaan yang memantul seperti lantai keramik, dll. dapat berjalan di atas permukaan yang tembus pandang seperti kaca, gelas, dll. Mengeluarkan cahaya merah yang menyilaukan dan jika dipandang terus menerus mungkin bisa membahayakan kesehatan mata

4. Mouse Laser

Perkembangan mouse optical kini sudah jauh lebih murah ketimbang waktukali pertama diperkenalkannya. Perlahan-lahan kehadiran mouse optical sudah dinilai sangat umum. Kini ada satu mouse lagi yang mulai diperkenalkan kepada masyarakat. Kerjanya hampir sama Page 145

dengan mouse optical hanya saja bila pada mouse optical biasa menggunakan ampu LED, maka pada mouse laser, bukan lagi sinar LED yang digunakan, melainkan sinar laser. Hal ini membuat ketajaman gambar yang ditangkap oleh sensor menjadi lebih baik. Jika pada permukaan glossy seperti papan whiteboard mouse optical dengan lampu LED-nya sulit membedakan setiap tampilan permukaan, sebaliknya dengan laser, permukaan tidak lagi menjadi sama, melainkan berstruktur atau berpola. Mouse ini kali pertama diperkenalkan tahun 2004 oleh Logitech yang bekerja sama dengan Agilent Technologies dalam pengembangannya. Teknologi baru ini diklaim mampu memiliki ketepatan 20x kali lebih baik dari mouse optical. Hanya saja harga laser mouse sampai saat ini masih tergolong sangat mahal. Kini, selain Logitech, Microsoft juga ikut meluncurkan mouse berbasiskan teknologi laser ini. 5. Single Click dan Scroll

Page 146

Dari sejak awal diperkenalkan, fungsi mouse tidak hanya sebagai penunjuk arah saja. Tetapi, juga sudah berfungsi sebagai input device. Oleh sebab itu, mouse sejak pertama kali diperkenalkan sudah memiliki sebuah tombol. Waktu kali pertama, memang hanya ada satu tombol yang melengkapinya. Namun kini seiring majunya teknologi pada mouse, tidak hanya tombol saja yang bertambah pada mouse, ada beberapa hal lain yang kini juga telah melengkapi mouse. Di antaranya scroll button atau tombol scroll, efek getar, dan masih banyak lagi. Bahkan dari segi keamanan kini juga sudah banyak mouse yang dilengkapi dengan sidk jari. Tombol yang ada pada mouse memiliki berbagai macam fungsi. Untuk fungsi yang paling umum biasanya terletak pada tombol di sebelah kiri. Sedangkan, untuk fungsi tambahan biasanya terletak disebelah kanan. Scroll mouse banyak dipergunakan untuk melihat sebuah dokumen yang panjang, ke bawah. Sedangkan tombol yang lebih banyak dari itu umumnya sangat terasa manfaatnya bila sedang digunakan untuk bermain games. Misalnya saja untuk mengganti senjata, untuk melihat peta, dan sebagainya. Sedangkan pada kebutuhan seharihari tombol-tombol tersebut dapat saja diatur untuk memenuhi kebutuhan lain. Mouse pada aplikasi permainan memiliki fungsi yang tidak jauh berbeda dengan joystick. Kadang sama seperti halnya joystick yang dilengkapi dengan efek getar.

Page 147

Tidak hanya fasilitas yang beragam bentuk mouse juga sangat beragam. Mulai dari yang sangat kecil (setengah besar telur ayam negeri) sampai sangat besar genggaman telapak tangan. Bahkan ada juga yang berbentuk sangat mirip menyerupai joystick. Sebenarnya apapun bentuk mouse harus disesuaikan dengan kenyamanan penggunanya. Untuk presentasi banyak sekali para pebisnis yang menggunakan trackball wireless yang bentuknya sangat nyaman dalam genggaman seperti layaknya sebuah remote atau joystick. ( sumber: http://ya2oke.blogspot.com/2009/04/sejarahmouse-komputer.html)

B. FUNGSI MOUSE
Di bawah ini adalah beberapa fungsi dari mouse: Untuk memasukkan perintah kepada komputer dimana cara kerja dari mouse ini adalah dengan cara menggeser - geser mouse di permukaan papan yang datar. Sebagai penggerak pointer untuk menunjukkan lokasi tertentu di layar monitor. Untuk melakukan kegiatan yang disebut dengan: klik (memilih item), double klik (membuka file), klik tahan dan geser / drag drop (memindahkan item) dan klik kanan (menampilkan pilihan menu perintah.

Page 148

Untuk menggulung (scrolling) layar dengan menggunakan roda scroll. Untuk mendeteksi gerakan 2 dimensi secara relatif terhadap posisinya sekarang. Mempermudah dan mempercepat pekerjaan. Terlebih bagi kita yang sering melakukan aktivitas mengedit foto atau membuat desain.

Sebagai pengontrol perbesaran tampilan objek. Untuk mengaktifkan command button dan juga melakukan suatu aksi tertentu pada aplikasi. Dapat digunakan uantuk memperbesar atau juga memperkecil tampilan worksheet. Untukmelakukan konversi dan isntruksi ke dalam bentuk sinyal elektronik yang dapat dimengerti oleh komputer. Untuk perintah yang tidak menyediakan menu shortcut, tombol kanan pada mouse berfungsi sebagai tombol enter.

C. KONSEP MOUSE PADA GLUT

Dalam konsep mouse pada glut ada beberapa fungsi dasar dan inisialisasi yang digunakan untuk melakukan interaksi mouse. Adapun penjelasannya adalah sebagai berikut : 1. Fungsi dasar pembuatan interaksi dengan menggunakan MouseFunction Page 149

GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK *func)(int button, int state, int x, int y));

Paramater func adalah fungsi yang akan ditangani dengan event klik mouse.
GLUTAPI void APIENTRY glutMotionFunc(void *func(int x, int y));

Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk mendeteksi gerakan mouse. 2. Inisialisasi dalam penggunaan MouseFunction
void mouse(int button, int state, int x,int y){ if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN) drawDot(x,480-y); if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN) drawDot2(x,480-y); if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN) drawDot3(x,480-y); }

void motion(int x,int y){ }

Page 150

Dalam penerapan interaksi mouse pada open gl / glut, Fungsi inisialisasinya adalah sebagai berikut : 1. GLUT_LEFT_BUTTON Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse kiri. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button mouse sebelah kiri maka bisa menggunakan fungsi inisialisasi ini. 2. GLUT_RIGHT_BUTTON Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse kanan. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button mouse sebelah kanan maka bisa menggunakan fungsi inisialisasi ini. 3. GLUT_MIDDLE_BUTTON Fungsi inisialisasi ini bertujuan untuk inisialisasi button mouse tengah. Jadi apabila kita ingin mengaktifkan fungsi penggunaan dari button mouse tengah maka bisa menggunakan fungsi inisialisasi ini. 4. GLUT_DOWN Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol mouse ditekan. 5. GLUT_UP Fungsi inisialisasi ini adalah untuk inisialisasi ketika tombol mouse dilepaskan. Kemudian pada main program perlu menambahkan fungsi untuk callback fungsi MouseFunction.
glutMouseFunc(mouse); glutMotionFunc(motion);

Page 151

3. Sistim Koordinat interaksi mouse pada glut Sistim koordinat interaksi mouse pada glut adalah sebagai berikut. Misalnya ditentukan iinisialisasi awal adalah :
int w = 480, h=480; float x=0, y=0, z=0;

maka : a. Titik 0,0 berada pada pojok kiri atas, koordinatnya akan berubah apabila terjadi pergeseran mouse. b. Titik 480,0 berada pada pojok kanan atas. c. Titik 0, 480 berada pada pojok kiri bawah d. Titik 480,480 berada pada pojok kanan bawah

D. CONTOH PROGAM PENERAPAN MOUSE PADA GLUT

1. Konsep KLIK terhadap sebuah objek Skript code
#include <stdlib.h> #include <glut.h> #include <stdio.h>

void Triangles(){

Page 152

glBegin(GL_TRIANGLES); glVertex2i(0,0); glVertex2i(100,-30); glVertex2i(100,30); glEnd(); } void mouseku(int button, int state, int x, int y){ if(button==GLUT_LEFT_BUTTON){ printf("tombol KIRI (%d,%d)\n",x,y); }else if(button==GLUT_MIDDLE_BUTTON){ printf("tombol TENGAH (%d,%d)\n",x,y); }else{ printf("tombol KANAN (%d,%d)\n",x,y); } if(state==GLUT_DOWN){ printf("tombol DITEKAN\n"); }else{ printf("tombol DILEPAS\n"); } } void display(){ glClear(GL_COLOR_BUFFER_BIT); glRotatef(10,0.,0.,1.); Triangles(); glFlush(); } void Timer(int value){ glutPostRedisplay(); glutTimerFunc(30,Timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(320,320); glutCreateWindow("coba");

Page 153

glutDisplayFunc(display); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutTimerFunc(10,Timer,0); glutMouseFunc(mouseku); glutMainLoop(); }

Screenshot hasil

Analisis: Apabila klik kiri pada mouse ditekan, maka program akan mengeksekusi blok perintah yang ada pada kondisi pertama, window command akan menampilkan tulisan tombol Kiri (x,y) dimana x dan y adalah posisi pointer pada koordinat mouse pointer di kanvas. Begitu juga dengan kondisi tombol yang lain. Sementara operasi klik tombol mouse dapat dideteksi melalui identifikasi tombol pada fungsi mouse(int button, int state, int x, int y). Pada fungsi tersebut diberi kondisi apabila sebuah tombol tertentu di tekan, maka akan dilakukan perintah yang ada di dalam kondisi tersebut. Callback function untuk fungsi klik mouse adalah glutMouseFunc().

Page 154

2. Interaksi Drag Skrip soal

#include <stdlib.h> #include <glut.h> #include <stdio.h>

void Triangles(){ glBegin(GL_TRIANGLES); glVertex2i(0,0); glVertex2i(100,-30); glVertex2i(100,30); glEnd(); } void mouseku(int button, int state, int x, int y){ if(button==GLUT_LEFT_BUTTON){ printf("tombol KIRI (%d,%d)\n",x,y); }else if(button==GLUT_MIDDLE_BUTTON){ printf("tombol TENGAH (%d,%d)\n",x,y); }else{ printf("tombol KANAN (%d,%d)\n",x,y); } if(state==GLUT_DOWN){ printf("tombol DITEKAN\n"); }else{ printf("tombol DILEPAS\n");

Page 155

} } void motionku(int x, int y){ printf("posisi printer mouse (%d,%d)\n",x,y); } void display(){ glClear(GL_COLOR_BUFFER_BIT); glRotatef(89,0.,0.,1.); Triangles(); glFlush(); } void Timer(int value){ glutPostRedisplay(); glutTimerFunc(10,Timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(320,320);

glutCreateWindow("GLUT"); glutDisplayFunc(display); gluOrtho2D(-320.0,320.0,-320.0,320.0);

Page 156

glutTimerFunc(10,Timer,0); glutMouseFunc(mouseku); glutMotionFunc(motionku); glutMainLoop(); }

Sceen shot

Analisa : command window dapat menampilkan tulisan posisi pointer mouse (??,??)? Saat mouse di tekan kemudian dilakukan drag atau ditekan sambil digeser.Ditampilkan ketika dilakukan drag atau ditekan sambil digeser.sehingga Move event (ketika mouse digerakkan dengan tombol mouse tertekan), passive move (ketika mouse digerakkan tanpa menekan tombol), mouse event (ketika tombol mouse ditekan atau dilepaskan). Ketika kita pertama kali menekan tombol mouse, kita mengerjakan sebuah blok perintah (event), tapi mempertahankan tombol mouse tertekan tidak menjalankan blok perintah apapun. Event berikutnya setelah tombol ditekan adalah: drag atau dilepaskan. Ketika event mouse telah dilakukan, mouse akan kembali ke posisinya,

Page 157

sesuai posisi logika (tidak sebenarnya) di layar. Tetapi untuk feedback, muncul tulisan posisi (x,y) pada layar. 3. Buatlah program untuk deteksi DOUBLE CLICK, ketika DOUBLE CLICK object yang dipilih skalanya menjadi 1.5, sedangkan untuk DOUBLE CLICK berikutnya Sript :
#include "stdlib.h" #include "stdio.h" #include <conio.h> #include "glut.h" float x=1,y=1,z=0; int w=480, h=480, flag=0,flg; void drawQuad() { glBegin(GL_POLYGON); glColor3f(0,0,1); glVertex2f(-20.,-20.); glVertex2f(20.,-20.); glVertex2f(20.,20.); glVertex2f(-20.,20.); glEnd(); } void mouse(int button, int state, int xmouse, int ymouse){ if(flg==0) { if (state==GLUT_DOWN) { if(button==GLUT_LEFT_BUTTON) {

Page 158

flag++; if(flag==2) { flg=3; x=3; y=3; printf("%d", flg); } } } } if (flg==3) { if (state==GLUT_DOWN) { if(button==GLUT_LEFT_BUTTON) { flag--; if(flag==0) { x=1; y=1; flg=0; } } } } } void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glClearColor(1,1,1,1); glPushMatrix(); glScalef(x,y,z); drawQuad(); glPopMatrix();

Page 159

glFlush(); } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50,timer,0); } void main (int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Interaksi Mouse"); gluOrtho2D(-w/2,w/2,-h/2,h/2); glutDisplayFunc(renderScene); glutMouseFunc(mouse); glutTimerFunc(1,timer,0); glutMainLoop(); }

Screenshot

Analisa: Jika dilakukan klik dobel, maka akan masuk ke kondisi pertama dimana variabel flg==0, program akan memberi nilai pada variabel global x, dan y, masing-masing 3 yang nantinya Page 160

akan digunakan untuk parameter fungsi scale, sehingga objek akan memiliki ukuran 3x lebih besar. Jika dilakukan klik lagi, maka akan masuk ke kondisi kedua yaitu dimana variabel flg==3, program akan memberi nilai pada variabel global x, dan y, masing-masing 3 yang nantinya akan digunakan untuk parameter fungsi scale, sehingga ukuran objek akan kembali seperti semula.

Page 161

BAB 8 OBJEK 3D
A. Pengertian Objek 3 Dimensi
Grafik komputer 3 dimensi biasa disebut 3D atau adalah bentuk dari benda yang memiliki panjang, lebar, dan tinggi. Grafik 3 Dimensi merupakan teknik penggambaran yg berpatokan pada titik koordinat sumbu x(datar), sumbu y(tegak), dan sumbu z(miring). Representasi dari data geometrik 3 dimensi sebagai hasil dari pemrosesan dan pemberian efek cahaya terhadap grafika komputer 2D. Tiga Dimensi, biasanya digunakan dalam penanganan grafis. 3D secara umum merujuk pada kemampuan dari sebuah video card (link). Saat ini video card menggunakan variasi dari instruksi-instruksi yang ditanamkan dalam video card itu sendiri (bukan berasal dari software) untuk mencapai hasil grafik yang lebih realistis dalam memainkan game komputer. Grafik 3D merupakan perkembangan dari grafik 2D. Didalam grafika komputer, 3D merupakan bentuk grafik yang menggunakan representasi data geometri tiga dimensi. Perbedaan paling utama dari objek 2 dimensi dan objek 3 dimensi yaitu kedalamannya. Yaitu suatu jarak antara pengamat dengan suatu objek yang dilihat (point of view). Jadi, jika objek 2 dimensi hanya menggunakan 2 ukuran (panjang dan lebar), maka 3 dimensi

Page 162

menggunakan 3 ukuran meliputi panjang, lebar, kedalaman yang disimbolkan dengan sumbu x, y, z. Suatu objek rangka 3D apabila disinari dari arah tertentu akan membentuk bayangan pada permukaan gambar. Proses pembuatan grafik komputer 3D dapat dibagi ke dalam tiga fase, yaitu 3D modeling yang mendeskripsikan bentuk dari sebuah objek, layout dan animation yang mendeskripsikan gerakan dan tata letak sebuah objek, dan 3D rendering yang memproduksi image dari objek tersebut. Di dalam dunia game, 3D secara umum merujuk pada kemampuan dari sebuah video card (link). Saat ini video card menggunakan variasi dari instruksi-instruksi yang ditanamkan dalam video card itu sendiri (bukan berasal dari software) untuk mencapai hasil grafik yang lebih realistis dalam memainkan game komputer.

B. Objek 3 Dimensi
Benda tiga dimensi tersusun dari sekumpulan surface. Surface yaitu permukaan kulit.

Gambar 8. 1 contoh permukaan 3 dimensi

Page 163

Surface dapat dibuat dari rangkaian Polygon. Polygon adalah bentuk yang disusun dari serangkaian garis yang terhubung satu dengan yang lain dan berbentuk kurva tertutup sehingga membentuk sebuah objek gambar. Titik sudut dari Polygon disebut vertex sedangkan garis penyusun Polygon disebut edge.

Gambar 8. 2 Polygon Polygon digambar dengan menggambar masingmasing edge dengan setiap edge merupakan pasangan dari vertexi vertexi+1 kecuali untuk edge terakhir merupakan pasangan dari vertexn vertex1.

Gambar 8. 3 Objek 3D yang tersusun dari kumpulan poligon

Page 164

Bentuk polygon yang paling tepat digunakan untuk membuat permukaan benda tiga dimensi adalah polygon segitiga (triangle). Hal ini disebabkan polygon segitiga akan selalu berada dalam keadaan planar (datar) sementara polygon dengan vertex lebih dari 3 dapat berada dalam kondisi non-planar karena salah satu vertex tidak berada di lokasi yang sejajar. Satu hal yang harus diperhatikan pada saat menggunakan polygon segitiga adalah winding. Winding adalah urutan dan arah vertex-vertex penyusun polygon. Winding menganggap bahwa arah vertex berlawanan jarum jam sebagai tampak depan sedangkan arah vertex searah jarum jam dianggap sebagai bagian belakang benda.

Gambar 8. 4 Arah vertex : (a) berlawanan jarum jam; (b) searah jarum jam Pada gambar 8.6.a polygon menggunakan winding berlawanan jarum jam karena didefinisikan sebagai urutan vertex v3-v4-v5 sedangkan pada gambar 8.6.b menggunakan winding searah jarum jam karena urutan vertex yang digunakan v3-v5-v4. Pada setiap permukaan dari poligon yang membentuk objek akan memuncukan garis Normal, yaitu

Page 165

vektor tegak lurus pada permukaan. Fungsinya untuk bayangan benda tersebut.

Gambar 8. 5 garis normal polygon

C. Alur Proses Rendering Grafis 3D

Pada grafika komputer, rendering adalah proses pembuatan/ produksi image/gambar pada layar dari pendeskripsian suatu model. Proses rendering grafis 3D mendeskripsikan objek 3D dari vertex-vertex pada objek primitive(seperti segitiga, titik, garis, dan segiempat), dan menghasilkan warna-warna pada pixel pada layar.

Gambar 8. 6 Alur proses Rendering grafis 3D

Page 166

1. Modelling Trasnformations : Menempatkan model pada sistem koordinat yang disebut world space. Semua objek, sumber cahaya, dan sudut pandang pengamat berada pada world space. 2. Trival Rejection : Rejection (penolakan) dilakukan terhadap bagianbagian yeng tidak perlu sebagai upaya optimalisasi. 3. Illumination : Cahaya menyebabkan suatu objek dapat terlihat. Warna objek ditentukan dari properti material objek itu sendiri dan sumber cahaya pada tampilan tersebut. Algoritma Illuminasi tergantung pada pemodelan bayangan (shading model) dan pemodenl permukaan (surface model).

4. Viewing transformation : Transformasi pengamatan adalah bentuk lain dari koordinat sistem. Memetakan titik-titik yang ada pada world space ke ruang pengamatan. Posisi pengamat ditransformasikan ke asalnya. Arah pengamatan diorientasikan sepanjang axis. Mendefinisikan pengamtan volume 5. Clipping : Proses clipping dulakukan pada penggambaran volume 3D yang biasa disebut viewing frustum. Page 167

Pada tahap ini dilakukan eliminasi total pada objek (dan bagian objek) yang tidak visible bagi citra. 6. Projection : Objek selanjutnya diproyeksikan ke dalam 2D. Transformasikan dari ruang pengamatan ke layar 7. Rasterization : Konversi tiap objek primitive ke suah set fragment. Sebuah fragment diperlakukan seperti pixel pada ruang 3 dimensi, selaras dengan grid pixel, dengan atribut seperti posisi, warna, dan tekstur yang normal. 8. Display : Melakukan interpolasi beragam operasi 2D. parameter. Melakukan

D. Sistem koordinat 3D
Secara umum, sistem koordinat tiga dimensi dibedakan menjadi dua, yaitu sistem koordinat tangan kiri dan sistem koordinat tangan kanan. Sistem koordinat tangan kanan dapat digambarkan dengan tiga buah jari pada tangan kanan yang menghadap pengamat yaitu jari tengah sebagai sumbu z positif, jari telunjuk sebagai sumbu y dan ibu jari sebagai sumbu x. Sedangkan sistem koordinat tangan kiri dapat digambarkan dengan tiga buah jari pada tangan kiri dengan punggung tangan menghadap pengamat dengan jari tengah sebagai sumbu z negatif, jari telunjuk sebagai sumbu y dan ibu jari sebagai sumbu x. Sistem koordinat tangan kanan banyak digunakan pada penggambaran geometri. Sebaliknya sistem Page 168

koordinat tangan kiri banyak digunakan pada peggambaran pada grafika komputer Sistem koordinat tangan kiri digunakan agar objek 3 dimensi memiliki nilai z positif (jarak jauh dekat benda lebih terlihat). Setiap titik dalam sistem koordinat tiga dimensi dapat ditentukan posisinya dengan meentukan seberapa jauh, tingggi dan lebar dari objek aslinya yang dtentukan berdasarkan koordinat-koordinat pada sumbu x, y, dan z.

Gambar 8. 7 sistem koordinat 3D tangan kiri dan tangan kanan

E. Primitive 3D
Ada beberapa bentuk primitive dari objek 3 dimensi. Promitive yaitu bentuk dasar yang dapat dengan mudah didefinisikan secara matematik. Sphere
glutWireSphere(5, 20, 20);

Page 169

Gambar 8. 1 sphere (bola) Cube

glutWireCube(25);

Gambar 8. 2 Cube (kubus) Cone

glutWireCone(alas, tinggi, 20, 20);

Gambar 8. 3 cone (kerucut) Dodecahedron

glutWireDodecahedron();

Page 170

Gambar 8. 4 bola segilima Teapot

glutWireTeapot(15);

Gambar 8. 5 Poci The Torus

glutWireTorus(luar, dalam, 20, 20);

Gambar 8. 6 cincin Page 171

Setiap primitive 3D memiliki parameter nilai yang mengekspresikan letak dan bentuk primitive objek tersebut.

F. Transformasi Objek 3 Dimensi

Metode transformasi objek tiga dimensi sangat berbeda dengan objek dua dimensi karena terdapat sumbu z yang ditambahkan sebagai salah satu acuan untuk memperoleh posisi koordinat baru. a. Translasi (Perpindahan) Dalam tranformasi objek tiga dimensi, translasi adalah pemindahan suatu titik dari titik P=(x,y,z) ke posisi P=(x,y,z) (Hearn, 1994) dengan menggunakan operasi matriks :

Parameter tx, ty, dan tz menjelaskan perpindahan jarak untuk koordinat x, y, dan z.

Gambar 8. 7 memindahkan titik dengan translasi vektor T = (tx, ty, tz) Page 172

Sebuah bangun tiga dimensi yang ditranslasikan dengan vektor tertentu, dilakukan dengan memindahkan titik-titik sesuai dengan vektor tersebut.

Gambar 8. 8 memindahkan balok dengan translasi vektor T=(tx, ty, tz)

gltranslatef(x,y,z: GLfloat);

Gambar 8. 9 posisi bola sebelum dan setelah translasi Kode program dalam OpenGL dari program di atas adalah
glbegin(gl_quads); glcolor3f(1,1,1); glvertex3f(-2,0,-2); glvertex3f(-2,0,2); glvertex3f(2,0,2);

Page 173

glvertex3f(2,0,-2); glend(); quadratic:=glunewquadric(); glusphere(quadratic,0.5,32,32); gltranslatef(1,0,1); glusphere(quadratic,0.5,32,32); glFlush();

Dari kode diatas diketahui bahwa posisi bola sebelum ditranslasikan berada pada koorinat (0,0,0). Kemudian posisinya ditranslasikan sepanjang sumbu x sebesar 1 satuan dan sepanjang sumbu z sebesar 1 satuan. Dengan adanya proses pentranslasian tersebut, maka pusat koordinat yang baru berada pada koordinat (1,0,1). b. Rotasi Untuk merotasikan sebuah objek diperlukan sumbu rotasi (poros untuk merotasikan objek) (Donald Hearn, 1994). Sintaks untuk merotasikan objek pada OpenGL adalah glRotate(sudut, x, y, z). Parameter pertama adalah nilai perputaran sudut. Parameter kedua , ketiga, dan keempat bernilai 1 apabila sumbunya dijadikan sumbu putar. Contoh perotasian objek ditunjukkan pada gambar di bawah ini.

Page 174

Gambar 8. 10 Tabung sebelum dan setelah di rotasi

Kode program :
quadratic:=glunewquadric(); glucylinder(quadratic,0.25,0.25,1,32,32); gltranslatef(1,0,1); glrotatef(-90,1,0,0); glucylinder(quadratic,0.25,0.25,1,32,32);

Pada contoh diatas, diketahui bahwa posisi awal tabung sejajar dengan sumbu z. Namun, setelah dirotasi sebesar putar x, posisi tabung sejajar dengan sumbu y. Itu menunjukkan bahwa perotasian objek dengan sudut putar positif akan berputar berlawanan dengan arah jarum jam, begitu pula sebaliknya, jika sudut putar bernilai negatif, maka objek akan berputar searah dengan jarum jam. c. Skalasi Transformasi skala adalah perubahan ukuran suatu objek (Sutopo, 2002). Sintaks untuk untuk Page 175

melakukan proses penskalaan dalam OpenGL adalah glScalef(x,y,z:glFloat) Parameter pertama, kedua, dan ketiga masingmasing menunjukkan nilai skala dari ukuran objek. Apabila parameter tersebut bernilai 1, maka berarti ukuran objek tersebut tetap. Contoh penskalaan ditunjukkan oleh gambar di bawah ini

Gambar 8. 11 segitiga sebelum dan sesudah diskalasi Kode program :

gltranslatef(-1.5,0,0); glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; gltranslatef(2.5,0,0); glscalef(1.5,0.5,1); glBegin(GL_TRIANGLES); glColor3f(1,0,0);glVertex3f(-1,0,0); glColor3f(0,1,0);glVertex3f(0,1,0); glColor3f(0,0,1);glVertex3f(1,0,0); glEnd; glFlush();

Page 176

G. Contoh Program dalam Open GL

1. Contoh Penerapan Cube pada GLUT Cube menggunakan
glutWireCube(GLdouble size);

fungsi void untuk menentukan

ukuran panjang sisi. Contoh syntax:

#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0; void cube(){ glColor3d(0,0,1); glutWireCube(10); fungsi disamping adalah bentuk pendeklarasian fungsi Cube } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,-40); glRotatef(sudut,sx,sy,sz); cube(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1,

Page 177

1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='x'){ sx=1; sy=0; sz=0; sudut+=10; } else if(key=='y'){ sx=0; sy=1; sz=0; sudut+=10; } else if(key=='z'){ sx=0; sy=0; sz=1; } }

Page 178

void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil - Tanpa interaksi keyboard

Dengan interaksi keyboard x, maka objek akan bergerak pada sumbu x saja. Page 179

Dengan interaksi keyboard y, maka objek akan bergerak pada sumbu y saja.

2. Contoh Penerapan WireSphere pada GLUT WireSphere menggunakan

glutWireSphere(GLdouble void radius,GLint

fungsi

slices, GLint stacks); untuk membuat bola

berpusat pada asal pemodelan sistem koordinat. Contoh syntax:

#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0,z=-320; void sphere (){ glColor3d(1,1,1); glutWireSphere(100,150,150); fungsi

Page 180

disamping adalah bentuk pendeklarasian fungsi Sphere } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,z); glRotatef(sudut,sx,sy,sz); sphere(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); }

void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='y'){

Page 181

sy=1; sudut+=10; } } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil - Tanpa interaksi keyboard

Page 182

Dengan interaksi keyoboard y, objek akan bergerak pada sumbu y saja.

Page 183

3. Contoh Penerapan WireCone pada GLUT a. WireCone menggunakan fungsi

void

glutWireCone(GLdouble base, GLdouble height,GLint slices, GLint stacks); untuk membuat ukuran benda

ditentukan dari dasar jari-jari alasnya. Contoh syntax:

#include<stdlib.h> #include<glut.h> float w=480,h=480;

Page 184

float sudut=0,sx=0,sy=0,sz=0,zz=-70; int t=20; void WireCone(){ glColor3d(0,1,1); glutWireCone(10,t,50,50); fungsi disamping adalah bentuk pendeklarasian fungsi Cone } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,zz); glRotatef(sudut,sx,sy,sz); WireCone(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity();

Page 185

gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='x'){ sx=1; sy=0; sz=0; sudut+=10; } else if(key=='y'){ sx=0; sy=1; sz=0; sudut+=10; } else if(key=='z'){ sx=0; sy=0; sz=1; } } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);

Page 186

glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil - Tanpa interaksi keyboard

Dengan interaksi keyoboard x, objek akan bergerak pada sumbu x saja.

Dengan interaksi keyboard y, objek akan bergerak pada sumbu y saja. Page 187

Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja.

4. Contoh Penerapan Torus pada GLUT Torus

outerRadius,GLint

menggunakan
nsides, GLint

fungsi
rings);

void
GLdouble

glutWireTorus(GLdouble

innerRadius,

untuk merender 12 sisi yang berpusat pada asal,dan dengan radius sama dengan kuadrat dari 3. Contoh syntax:
#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0,dalam=20,luar=50,sides=50,ri ngs=50;

Page 188

void torus(){ glColor3d(0,1,1); glutWireTorus(dalam,luar,sides,rings); fungsi disamping adalah bentuk pendeklarasian fungsi Torus } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,-200); glRotatef(sudut,sx,sy,sz); torus(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.);

Page 189

glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='x'){ sx=1; sy=0; sz=0; sudut+=10; } else if(key=='y'){ sx=0; sy=1; sz=0; sudut+=10; } else if(key=='z'){ sx=0; sy=0; sz=1; sudut+=10; } } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); }

void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);

Page 190

glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil - Tanpa interaksi keyboard

Dengan interaksi keyoboard x, objek akan bergerak pada sumbu x saja.

Dengan interaksi keyboard y, objek akan bergerak pada sumbu y saja. Page 191

Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja.

5. Contoh Penerapan Dose pada GLUT fungsi void glutWireDodecahedron(void); untuk merenders padat atau wireframe 12-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sama dengan akar kuadrat dari 3 Contoh syntax: Dode menggunakan
#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0,t=-7;

Page 192

void wireDode(){ glColor3d(0,1,0); glutWireDodecahedron(); } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,t); glRotatef(sudut,sx,sy,sz); wireDode(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } fungsi disamping adalah bentuk pendeklarasian fungsi Dode

void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){

Page 193

if(key=='x'){ sx=1; sy=0; sz=0; sudut+=10; } else if(key=='y'){ sx=0; sy=1; sz=0; sudut+=10; } else if(key=='z'){ sx=0; sy=0; sz=1; sudut+=10; } } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0);

Page 194

glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil Tanpa interaksi keyboard

Dengan interaksi keyoboard x, objek akan bergerak pada sumbu x saja.

Dengan interaksi keyboard y, objek akan bergerak pada sumbu y saja.

Page 195

Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja.

6. Contoh Penerapan TetraHedron pada GLUT fungsi glutWiredTetrahedronvoid (void); untuk merenders padat atau wireframe 4-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sama dengan akar kuadrat dari 3. Contoh syntax:
#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0,t=-5; void WireTetrahedron(){ glColor3d(1,0,1); glutWireTetrahedron(); fungsi disamping adalah bentuk pendeklarasian fungsi TetraHedron } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,t);

TetraHedron

menggunakan

Page 196

glRotatef(sudut,sx,sy,sz); WireTetrahedron(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='x'){ sx=1; sy=0; sz=0; sudut+=10; } else if(key=='y'){ sx=0; sy=1;

Page 197

sz=0; sudut+=10; } else if(key=='z'){ sx=0; sy=0; sz=1; sudut+=10; } }

void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil

Page 198

Tanpa interaksi keyboard

Dengan interaksi keyoboard x, objek akan bergerak pada sumbu x saja.

Dengan interaksi keyboard y, objek akan bergerak pada sumbu y saja.

Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja.

Page 199

7. Contoh Penerapan OctaHedron pada GLUT menggunakan fungsi void glutWireOctahedron(void); merenders padat atau wireframe 8-sisi biasa padat. Berpusat di sekitar asal dan dengan radius sebesar 1.0. Contoh syntax: OctaHedron
#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0,t=-5; void WireOctahedron(){ glColor3d(1,0,1); glutWireOctahedron(); } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,t); glRotatef(sudut,sx,sy,sz); WireOctahedron(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); fungsi disamping adalah bentuk pendeklarasian fungsi OctaHedron

Page 200

} void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='x'){ sx=1; sy=0; sz=0; sudut+=10; } else if(key=='y'){ sx=0; sy=1; sz=0; sudut+=10; } else if(key=='z'){ sx=0; sy=0; sz=1; sudut+=10; } }

void update(int value){

Page 201

glutPostRedisplay(); glutTimerFunc(50,update,0); }

void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil Tanpa interaksi keyboard

Dengan interaksi keyoboard x, objek akan bergerak pada sumbu x saja. Page 202

Dengan interaksi keyboard y, objek akan bergerak pada sumbu y saja.

Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja.

8. Contoh Penerapan Teapot pada GLUT

Page 203

Teapot

menggunakan

fungsi
size);

void

glutWireTeapot(GLdouble

Untuk

merender dengan membuat membuat poci teh Contoh syntax:

#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0,t=-100, tepot=10;

void teapot(){ glColor3d(1,1,1); glutWireTeapot(tepot); fungsi disamping adalah bentuk pendeklarasian fungsi Teapot } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,t); glRotatef(sudut,sx,sy,sz); teapot(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity();

Page 204

} void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h, 1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='x'){ sx=1; sy=0; sz=0; sudut+=10; } else if(key=='y'){ sx=0; sy=1; sz=0; sudut+=10; } else if(key=='z'){ sx=0; sy=0; sz=1; sudut+=10; } }

void mySpecialKeyboard(int key,int x, int y){

Page 205

switch(key){ case GLUT_KEY_UP: tepot+=1; break; case GLUT_KEY_DOWN: tepot-=1; break; } } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Objek 3D"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil Tanpa interaksi keyboard

Page 206

Dengan interaksi keyoboard x, objek akan bergerak pada sumbu x saja.

Dengan interaksi keyboard y, objek akan bergerak pada sumbu y saja.

Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja.

Page 207

H. Contoh Implementasi Objek 3 Dimensi dalam Open GL

Penerapan/implementasi obyek 3 dimensi OpenGL, adalah dengan mengkombinasikan beberapa obyek dasar dari obyek 3D, seperti Wirecube, Wiresphere, dll. Berikut merupakan contoh pengimplementasian dari obyek 3 dimensi OpenGL: Membuat boneka salju. Contoh syntax:
#include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,rx=0,ry=0,rz=0,p=-50; void satu(){ //bagian kepala glColor3d(1,1,1); glutSolidSphere(7,200,200); //berfungsi untuk membuat bentuk bola }

void dua(){ //bagian badan glColor3d(1,1,1); glutSolidSphere(9,250,250); //berfungsi untuk membuat bentuk bola bagian badan } void tiga(){ //topi segitiga glColor3d(1,1,0); glRotatef(-90,1,0,0); //ditotasikan dari bentuk topi pada umumnya menjadi bentuk segi3 glutSolidCone(5,10,150,150); //berfungsi untuk membuat bentuk segitiga

Page 208

} void empat(){ //mata glColor3d(0,0,0); glutSolidSphere(1.1,100,100); } void lima(){ //hidung glColor3d(0,1,0); glutSolidCone(1.1,5,50,50); } void manusiaSalju3D(){ satu(); glPushMatrix(); glTranslatef(0,-15,0); dua(); glPopMatrix(); glPushMatrix(); glTranslatef(0,5,0); tiga(); glPopMatrix(); glPushMatrix(); glTranslatef(-2,1,6); empat(); glPopMatrix(); glPushMatrix(); glTranslatef(2,1,6); empat(); glPopMatrix();

Page 209

glPushMatrix(); glTranslatef(0,-0.5,6); lima(); glPopMatrix(); } void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,p); glRotatef(sudut,rx,ry,rz); manusiaSalju3D(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdouble)h,1.,3 00.);

Page 210

glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='x'){ rx=1; ry=0; rz=0; sudut+=10; } else if(key=='y'){ rx=0; ry=1; rz=0; sudut+=10; } else if(key=='z'){ rx=0; ry=0; rz=1; sudut+=10; } } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA);

Page 211

glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Boneka Salju"); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Hasil - Tanpa interaksi keyboard

- Dengan interaksi keyoboard x, objek akan bergerak pada sumbu x saja.

- Dengan interaksi keyboard y, objek akan bergerak pada sumbu y saja. Page 212

Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja.

Page 213

BAB 9 LIGHTING
A. Pendahuluan
Visualisasi tentu saja tidak akan terjadi bila tidak ada cahaya. Pencahayaan merupakan esensi dari visualisasi dan merupakan topik yang sangat kompleks. Hingga tahap ini lingkungan diberi pencahayaan default atau standar dengan cahaya lingkungan (ambient) yang sama pada setiap titik. Kondisi default atau standar dapat dicapai kapan saja dengan mematikan status Lighting menjadi disabled dengan glDisable(GL_LIGHT0). OpenGL akan melakukan komputasi warna setiap pixel di display akhir, ditampilkan adegan itu dilakukan di frame buffer. Bagian dari komputasi ini tergantung pada pencahayaan yang digunakan dalam adegan dan hal tersebut berkenaan dengan bagaimana suatu benda dalam adegan yang memantulkan atau menyerap cahaya. Sebagai contoh saja misalnya sebuah lautan memiliki warna yang berbeda pada cerah maupun pada saat hari mendung. Adanya sinar matahari atau awan menentukan apakah laut termelihat sebagai pirus terang atau abu-abu keruh kehijauan. Pada kenyataannya, sebagian besar objek bahkan yang tidak terlihat tiga dimensi sampai mereka diterangi cahaya. Pada gambar 2 menunjukkan dua versi dari adegan yang persis sama

Page 214

yaitu sebuah bola, dimana satu dengan pencahayaan dan satu tanpa pencahayaan.

Gambar 1.1 Sebuah spere dengan diterangi cahaya dan tidak diterangi Seperti ditunjukkan pada Gambar 1.1, wilayah gelap tampak tidak berbeda dari bulatan dua dimensi . hal Ini menunjukkan betapa pentingnya interaksi antara obyek dan cahaya adalah dalam menciptakan adegan tiga dimensi. Agar obyek yang telah dibuat terlihat lebih nyata, diperlukan tambahan efek pencahayaan pada obyek yang telah kita buat. Pencahayaan adalah proses pemberian cahaya pada suatu obyek, dikenal dengan istilah lighting atau iluminasi. Pada OpenGL terdapat sebuah perbedaan penting antara warna dan pencahayaan yang perlu pahami. Ketika menggunakan pencahayaan atau tekstur pemetaan dengan efek pencahayaan dihidupkan, warna dari vertex adalah efek kumulatif dari warna bahan dan cahaya yang bersinar di puncak. Ketika pencahayaan dimatikan, maka warna dari vertex adalah efek pengaturan warna dan warna yang berbeda dengan bahan warna.

Page 215

Gambar 1.2 Contoh ambient, diffuse, dan specular pada pantulan cahaya Dengan menggunakan OpenGL, dapat memanipulasi pencahayaan dan obyek dalam sebuah adegan untuk menciptakan berbagai macam efek. Dalam pokok bahasan pada bab pencahayaan akan dimulai dengan sebuah pencahayaan yang penting pada permukaan tersembunyi penghapusan. Kemudian menjelaskan bagaimana untuk mengontrol pencahayaan dalam suatu adegan, membahas model konseptual OpenGL pencahayaan, dan menggambarkan secara rinci cara mengatur pencahayaan dengan banyak parameter untuk mendapatkan efek tertentu. Pada akhir bab, perhitungan matematis yang menentukan bagaimana warna mempengaruhi pencahayaan disajikan

B. Pencahayaan pada OpenGL dan Dunia Nyata

Ketika melihat permukaan fisik, persepsi warna pada mata tergantung pada distribusi energi foton yang datang dan memicu sel-sel kerucut mata. Foton berasal dari sumber cahaya atau kombinasi dari sumber, yang sebagian diserap dan sebagian yang Page 216

dipantulkan oleh permukaan. Selain itu, permukaan yang berbeda memiliki sifat yang sangat berbeda ada, misalnya yang mengkilap dengan sempurna akan memantulkan cahaya dalam arah tertentu, sementara yang lain menyebarkan cahaya sama-sama masuk di segala penjuru. Pencahayaan pada OpenGL hanya dengan cahaya pendekatan dan cahaya lampu seolah-olah dapat dipecah menjadi komponen merah, hijau, dan biru. Dengan demikian, warna sumber cahaya dicirikan oleh jumlah warna yang memancarkan cahaya merah, hijau, dan biru, dan materi permukaan ditandai dengan persentase komponen warna merah, hijau, dan biru yang masuk dan tercermin dalam berbagai arah. Persamaan pencahayaan pada OpenGL hanya sebuah pendekatan, tetapi satu yang bekerja cukup baik dan dapat dihitung relatif cepat. Jika menginginkan yang lebih akurat atau model pencahayaan hanya berbeda, harus melakukan perhitungan sendiri dalam perangkat lunak. Dengan perangkat lunak tersebut dapat menjadi sangat kompleks, seperti beberapa jam membaca buku teks optik pun harus meyakinkan. Model pencahayaan dalam OpenGL, cahaya dalam sebuah adegan berasal dari beberapa sumber cahaya yang dapat secara individual diaktifkan dan dinonaktifkan. Beberapa cahaya datang dari arah atau posisi tertentu, dan beberapa cahaya umumnya tersebar karena adanya suatu peristiwa. Sebagai contoh, ketika menghidupkan bola lampu dalam ruangan, sebagian besar berasal dari cahaya bola lampu, tetapi beberapa cahaya datang setelah ada pantulan dari dinding satu, dua, tiga, atau lebih. Cahaya Page 217

yang memantul ini disebut ambient dan dapat diasumsikan begitu cahaya tersebar tidak ada cara untuk mengetahui arah semula, tetapi hal ini akan menghilang jika suatu sumber cahaya dimatikan. Akhirnya, mungkin ada cahaya ambient umum dalam adegan yang tidak berasal dari sumber tertentu, seolaholah telah tersebar beberapa kali sumber cahaya asli dan tidak mungkin untuk menentukan. Dalam model OpenGL, sumber cahaya hanya memiliki efek ketika ada permukaan yang menyerap dan memantulkan cahaya. Setiap permukaan diasumsikan terdiri dari bahan dengan berbagai sifat. Sebuah bahan dapat memancarkan cahaya sendiri seperti lampu pada sebuah mobil atau mungkin menyebarkan beberapa cahaya yang masuk ke segala penjuru, dan mungkin juga memantulkan sebagian dari cahaya masuk dalam arah preferensial seperti cermin atau permukaan mengilap. Model pencahayaan yang OpenGL mempertimbangkan pencahayaan yang dibagi menjadi empat komponen independen: memancarkan (emissi), ambient, diffuse, dan specular. Semua empat komponen dihitung secara independen dan kemudian ditambahkan secara bersama-sama. Dalam pencahayaan, ada dua hal yang menentukan tampilan suatu obyek, yaitu: 1. Sumber cahaya dan pengaruh lingkungan terhadap cahaya Lokasi sumber cahaya

Page 218

Arah pencahayaan dari sumber cahaya (omni, spot) Komponen pengaruh lingkungan terhadap cahaya (ambient, diffuse, specular)

2. Material dari obyek, yang memodelkan bagaimana material bereaksi terhadap sumber cahaya, yaitu: Material reflektan terhadap komponen cahaya ambient Material reflektan terhadap komponen cahaya diffuse Material reflektan terhadap komponen cahaya specular Material sebagai sumber cahaya (emitance)

C. Cahaya Ambient, Diffuse, dan Specular

Pencahayaan ambient adalah cahaya yang sudah berserakan begitu banyak disebabkan oleh lingkungan dan arahnya tidak mungkin ditentukan atau tampaknya datang dari segala penjuru. Backlighting pada sebuah ruangan memiliki komponen ambient besar, karena sebagian besar cahaya yang mencapai mata yang memantul dari banyak permukaan. Sebuah lampu sorot kecil di luar rumah memiliki komponen ambient, sebagian besar cahaya dalam arah yang sama, dan karena diluar, sangat sedikit cahaya mencapai mata setelah memantul dari benda-benda lain. Ketika cahaya ambient Page 219

menyerang permukaan, maka akan tersebar merata di segala penjuru. Komponen cahaya diffuse adalah komponen yang berasal dari satu arah, jadi akan terang kalau hal tersebut terjadi tepat diatas sebuah permukaan dibandingkan jika hampir tidak terjadi di atas permukaan. Setelah mengenai permukaan, akan tersebar merata di segala penjuru, sehingga tampak sama-sama terang, tak peduli di mana mata berada. Setiap cahaya yang datang dari posisi atau arah tertentu mungkin memiliki komponen diffuse.

Gambar 1.3 Cahaya Diffuse Cahaya specular datang dari arah tertentu, dan cenderung terpental pada permukaan dalam arah yang diinginkan. sinar laser berkualitas tinggi memantul pada cermin dan menghasilkan hampir 100 persen refleksi specular. Logam atau plastik mengkilap memiliki komponen specular tinggi, dan kapur atau karpet telah hampir tidak ada. Specularity dapat juga dianggap sebagai shininess.

Page 220

Gambar 1.4 Cahaya Specular Meskipun sumber cahaya memberikan satu distribusi frekuensi, komponen ambient, diffuse, dan specular mungkin berbeda. Sebagai contoh, jika memiliki cahaya putih di sebuah ruangan dengan dinding merah, cahaya yang tersebar cenderung menjadi warna merah, meskipun cahaya secara langsung objek putih yang mencolok. OpenGL memungkinkan untuk mengatur nilai merah, hijau, dan biru untuk setiap komponen cahaya secara bebas. Gambaran pada lighting :

Page 221

Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat juga pencahayaan Emmisive, yaitu sebuah objek memancarkan cahayanya sendiri. Contoh pada program :
init lighting(); void init lighting() { GLfloat lightPos [] = {100.0, 100.0, 200.0, 1.0}; //variabel posisi GLfloat shin[] = {100.0}; GLShade Model (GL_SMOOTH) ; GLlightfv(GL_LIGHT0, glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); GL_POSITION, lightpos); // mengkonfigurasi sumber cahaya

Untuk diffuse dan ambient dipergunakan atau diperuntukkan pada light sedangkan spekular dan emmisive diperuntukan pada material. Contoh sintaks :
GLfloat light_diffuse[]= {}; GLfloat light_specular[]={}; //mengatur cahaya kilau pada objek GLfloat shine[] = {100.0}; // mengatur definisi kekilauan GLfloat lightspec[] = {};

Berikut adalah sintaks fungsi init pada light :

Page 222

Fungsi di atas adalah fungsi inisialisasi untuk pencahayaan dimana efek pencahayaan bersifat menyeluruh dan menyebabkan semua obyek memiliki warna serupa. Agar warna tiap obyek 3d berbeda dengan efek pencahayaan yang aktif maka fungsi dasarnya pada inisialisasi adalah :

Fungsi di atas dapat diaktifkan setelah glEnable(GL_COLOR_MATERIAL). Parameter face adalah variabel untuk menentukan bagaimana material warna obyek 3D ditampilkan, pilihannya antara lain GL_FRONT atau GL_BACK. Sedangkan parameter mode adalah variabel untuk memilih material warna jenis apa yang diaktifkan pilihannya antara terdapat di halaman selanjutnya:

Page 223

D. Implementasi Pencahayaan (lighting) pada OpenGL

Object 3D (Solid) Bentuk Solid Fungsi Solid merupakan implementasi dari object 3D yang berpusat pada asal pemodelan sistem koordinat. Utara dan kutub selatan bola berada di Z positif dan negatif sumbumasing-masing dan meridian utama persimpangan sumbu X positif. Berikut adalah list untuk bangun 3D:

Page 224

a. Kubus Solid void glutSolidCube(GLdouble size); b. Fungsi glutSolidSphere membuat bola berpusat pada asal pemodelan sistem koordinat. Utara dan kutub selatan bola berada di Z positif dan negatif sumbumasing-masing dan meridian utama persimpangan sumbu X positif.
void glutSolidSphere(GLdouble radius,GLint slices, GLint stacks); c. Kerucut Solid. void glutSolidCone(GLdouble base, GLdouble height,GLint slices, GLint stacks);

d. Torus Solid.
void glutSolidTorus(GLdouble innerRadius, GLdouble outerRadius, GLint nsides, GLint rings);

e. Dodecahedron Solid
void glutSolidDodecahedron(void);

f. Tetra Hedron solid.

glutSolidTetrahedron void (void);

g. Oktahedron solid.
void glutSolidOctahedron(void);

h. Icosahedron solid.
void glutSolidIcosahedron(void);

i. Poci teh solid Page 225

void glutSolidTeapot(GLdouble size);

E. Contoh Program
Contoh program Level medium Membuat kubus sederhana dengan pencahayaan Script
#include <Windows.h> #include <iostream> #include <glut.h> #include <math.h>

void cube() { //menggambar kubus dan transformasi tarnslasi ke titik 0.5 0.5 0.5 dan skala 1 1 1 glPushMatrix(); glTranslated(0.5,0.5,0.5);//cube glScaled(1.0,1.0,1.0); glutSolidCube(1.0); glPopMatrix(); } void setMaterial()

Page 226

{ //set properties of surfaces material GLfloat mat_ambient[] = {0.7f,0.7f,0.7f,1.0f}; // ada 4 jenis material yang dipakai, dengan kombinasi warna tertentu GLfloat mat_diffuse[] = {0.6f,0.6f,0.6f,1.0f}; GLfloat mat_specular[] = {1.0f,1.0f,1.0f,1.0f}; GLfloat mat_shininess[] = {50.0f}; glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambien t); glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffus e); glMaterialfv(GL_FRONT,GL_SPECULAR,mat_specu lar); glMaterialfv(GL_FRONT,GL_SHININESS,mat_shin iness); } void setLighting() { //set light sources GLfloat lightIntensity[] = {0.7f,0.7f,0.7f,1.0f};//mensetting pencahayaan

Page 227

GLfloat light_position[] = {2.0f,6.0f,3.0f,0.0f}; glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntensi ty); glLightfv(GL_LIGHT0,GL_POSITION,light_posit ion); } void setViewport() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); double winHt = 1.0;//half height of the window glOrtho(-winHt*64/48,winHt*64/48,winHt,winHt,0.1,100.0); } void setCamera() { //set the camera glMatrixMode(GL_MODELVIEW); glLoadIdentity(); gluLookAt(3.3,3.3,3.0,0,0.25,0,0.0,1.0,0.0) ; }

Page 228

void displayObject() { setMaterial(); setLighting(); setViewport(); setCamera(); //startDrawing glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER _BIT); cube();//memanggil fungsi menggambar kubus glFlush();//mengirim smua objek untuk dirender }

void main(int argc, char **argv) { glutInit(&argc,argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB|GL UT_DEPTH); glutInitWindowSize(640,480); glutInitWindowPosition(100,100); glutCreateWindow("simple 3d scene");

Page 229

glutDisplayFunc(displayObject);//fungsi dari display object yang menggabungkan kubus lighting material dan kamera glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glShadeModel(GL_SMOOTH); glEnable(GL_DEPTH_TEST); glEnable(GL_NORMALIZE); glClearColor(1.0f,1.0f,1.0f,0.0f); glViewport(0,0,640,480); glutMainLoop(); }

Output

Page 230

 Contoh program Level Hard Membuat rumah sederhana dengan pencahayaan

#include<stdlib.h> #include<glut.h>

float w=700, h=600; float tr=-50; float xl=-10, yl=10; int sudut=0, xx=0, yy=0, zz=0;

void pagar(){ glColor3f(0,1,1); //pagar luar

glPushMatrix(); glTranslatef(1.5, -2.4, 9); glScalef(0.2, 1.1, 0.2); glutSolidCube(3); glPopMatrix();

glPushMatrix();

Page 231

glTranslatef(3.5, -2.4, 9); glScalef(0.2, 1.1, 0.2); glutSolidCube(3); glPopMatrix();

glPushMatrix(); glTranslatef(5.5, -2.4, 9); glScalef(0.2, 1.1, 0.2); glutSolidCube(3); glPopMatrix(); glPushMatrix(); glTranslatef(7.5, -2.4, 9); glScalef(0.2, 1.1, 0.2); glutSolidCube(3); glPopMatrix(); } void motionku(int xmouse, int ymouse){ xl = (xmouse-(w/2))/30; yl = ((h/2)-ymouse)/30; } void renderScene(void){

Page 232

GLfloat LightPosition[] = {xl, yl, 30.0f, 1.0f}; glLightfv(GL_LIGHT0, GL_POSITION, LightPosition);

glClear(GL_COLOR_BUFFER_BIT|GL_DEP TH_BUFFER_BIT); glLoadIdentity(); glEnable(GL_COLOR_MATERIAL); glTranslatef(0, 0, tr); glRotatef(sudut, xx, yy, zz); glPushMatrix(); //tembok rumah glColor3f(1, 0, 1); glScalef(1.5,1,1); glutSolidCube(9); glPopMatrix(); glPushMatrix(); //genteng dengan 8 sudut yang nanti akan ditutup oleh dinding glScalef(10,6,8); glTranslatef(0, 0.7,0.05);

Page 233

glColor3f(0, 0, 1); glRotatef(45, 0, 1, 0); glutSolidOctahedron(); glPopMatrix();

glPushMatrix(); glColor3f(1, 1, 1); glTranslatef(-3, -0.8, 0.5); glScalef(0.5, 0.8,1); glutSolidCube(9); glPopMatrix();

glPushMatrix(); //pintu glColor3f(1, 1, 1); glTranslatef(2, 1.3, 0.5); glScalef(0.5, 0.3,1); glutSolidCube(10); glPopMatrix();

Page 234

glPushMatrix(); //pagar kanan pagar(); glTranslatef(-9.0, 0.0, 0.0); pagar();

glTranslatef(9.0, 0.0, 0.0);//pagar depan glRotatef(-90, 0, 1, 0); pagar(); glTranslatef(-8.0, 0.0, 0.0); pagar(); glTranslatef(9.0, 0.0, 0.0); //pagar kiri glRotatef(-90, 0, 1, 0); pagar(); glTranslatef(-9.0, 0.0, 0.0); pagar(); glTranslatef(9.0, 0.0, 0.0); //pagar belakang glRotatef(-90, 0, 1, 0);

Page 235

pagar(); glTranslatef(-8.0, 0.0, 0.0); pagar(); glPopMatrix();

glDisable(GL_COLOR_MATERIAL); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0, w1, h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0, 300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void init(){ GLfloat LightPosition[]={10.0f, 0.0f, 0.0f, 0.0f}; GLfloat LightAmbient[]={25.0f, 0.0f, 0.0f, 1.0f};

Page 236

GLfloat LightDiffuse[]={0.0f, 0.0f, -30.0f, 1.0f}; GLfloat LightSpecular[]={0.0f, 0.0f, 0.0f, 1.0f}; GLfloat Shine[]={80};

glShadeModel(GL_SMOOTH); glClearColor(0.0f, 0.0f, 0.0f, 0.5f); glClearDepth(1.0f); glEnable(GL_DEPTH_TEST); glHint(GL_PERSPECTIVE_CORRECTION_H INT, GL_NICEST);

glMaterialfv(GL_FRONT, GL_AMBIENT, LightAmbient); glMaterialfv(GL_FRONT, GL_DIFFUSE, LightDiffuse); glMaterialfv(GL_FRONT, GL_SPECULAR, LightSpecular);

glLightfv(GL_LIGHT0, GL_POSITION, LightPosition);

Page 237

glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); return; } void myKeyboard(unsigned char key, int x, int y){ if(key == 'a'){ sudut +=5; xx=1; yy=0; zz=0; } else if(key == 'b'){ sudut +=5; xx=0; yy=1; zz=0; } else if(key == 'c'){ sudut +=5; xx=0; yy=0; zz=1;

Page 238

} }

void update(int value){ glutPostRedisplay(); glutTimerFunc(50, update, 0); }

int main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Lighting"); glutReshapeFunc(resize); glutDisplayFunc(renderScene); init(); gluOrtho2D(-w/2, w/2, -h/2, h/2); glutTimerFunc(50, update, 0); glutMotionFunc(motionku);

Page 239

glutKeyboardFunc(myKeyboard); glutMainLoop(); }

Screenshoot output :

Contoh program Level Experd Membuat danbo lighting sederhana dengan pencahayaan Silver Danbo Syntax
#include<stdlib.h> #include<glut.h>

Page 240

float w=480, h=480; float sudut=0, p=-50, t=0, u=0, v=0; void drawCub(){ //badan-badan glPushMatrix(); glColor3f(1,0,0); glutSolidCube(4); glPopMatrix();

glPushMatrix(); glColor3f(1,1,0); glTranslatef(0,-4,0); glutSolidCube(4); glPopMatrix(); //akhir badan

//celana glPushMatrix(); glColor3f(1,0,0); glTranslatef(0,-6,0); glutSolidCube(4.5);

Page 241

glPopMatrix(); //akhir celana

//tangan kanan glPushMatrix(); glRotatef(45,0,0,1); glTranslatef(-2,0,0); glPushMatrix(); glColor3f(0,0,1); glTranslatef(4,-1,0); //glRotatef(45,0,0,1); glutSolidCube(3); glPopMatrix();

glPushMatrix(); glColor3f(0,0,1); glTranslatef(4,-4,0); //glRotatef(45,0,0,1); glutSolidCube(3); glPopMatrix(); glPopMatrix();

Page 242

//akhir tangan kanan

//tangan kiri glPushMatrix(); glRotatef(-45,0,0,1); glTranslatef(2,0,0); glPushMatrix(); glColor3f(1,1,1); glTranslatef(-4,-1,0); //glRotatef(45,0,0,1); glutSolidCube(3); glPopMatrix();

glPushMatrix(); glColor3f(1,1,1); glTranslatef(-4,-4,0); //glRotatef(45,0,0,1); glutSolidCube(3); glPopMatrix(); glPopMatrix(); //akhir tangan kiri

Page 243

//kaki-kaki kiri glPushMatrix(); glColor3f(0.8,0.8,0); glTranslatef(-1.2,-9,0); glutSolidCube(2); glPopMatrix();

glPushMatrix(); glColor3f(1,0.8,1); glTranslatef(-1.2,-8,0); glutSolidCube(2); glPopMatrix(); //akhir kaki kiri

//kaki-kaki kiri glPushMatrix(); glColor3f(0,0.8,0); glTranslatef(1.2,-9,0); glutSolidCube(2); glPopMatrix();

Page 244

glPushMatrix(); glColor3f(1,0.8,0); glTranslatef(1.2,-8,0); glutSolidCube(2); glPopMatrix(); //akhir kaki kiri

//kepala glPushMatrix(); glTranslatef(0,6,0); glColor3f(1,0,1); glutSolidCube(8); glPopMatrix(); //akhir kepala } void setMaterial() { //set properties of surfaces material GLfloat mat_ambient[] = {1.7f,1.7f,1.7f,1.0f}; // ada 4 jenis

Page 245

material yang dipakai, dengan kombinasi warna tertentu GLfloat mat_diffuse[] = {0.6f,0.6f,0.6f,1.0f}; GLfloat mat_specular[] = {1.0f,1.0f,1.0f,1.0f}; GLfloat mat_shininess[] = {50.0f}; glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambie nt); glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffu se); glMaterialfv(GL_FRONT,GL_SPECULAR,mat_spec ular); glMaterialfv(GL_FRONT,GL_SHININESS,mat_shi niness); } void setLighting() { //set light sources GLfloat lightIntensity[] = {0.7f,0.7f,0.7f,1.0f};//mensetting pencahayaan GLfloat light_position[] = {2.0f,6.0f,3.0f,0.0f}; glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntens ity);

Page 246

glLightfv(GL_LIGHT0,GL_POSITION,light_posi tion); } void setViewport() { glMatrixMode(GL_PROJECTION); glLoadIdentity(); double winHt = 1.0;//half height of the window glOrtho(-winHt*64/48,winHt*64/48,winHt,winHt,0.1,100.0); } void displayObject() { setMaterial(); setLighting(); setViewport(); glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFE R_BIT); drawCub();//memanggil fungsi menggambar kubus glFlush();//mengirim smua objek untuk dirender }

Page 247

void display(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glLoadIdentity(); glTranslatef(0,0,p); glRotatef(sudut,t,u,v); //glColor3f(0,0,1); drawCub(); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void init(){ glClearColor(0.0,0.0,0.0,1.0); glEnable(GL_DEPTH_TEST);

Page 248

glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.,(GLdouble)w/(GLdoubl e)h,1.,300.); glMatrixMode(GL_MODELVIEW); } void myKeyboard(unsigned char key, int x, int y){ if(key=='a'){ p +=5; } else if (key=='s'){ p-=5; } else if(key=='x'){ sudut+=10; t=1; u=0; v=0; } else if (key=='y'){ sudut+=10;

Page 249

t=0; u=1; v=0; } else if (key=='z'){ sudut+=10; t=0; u=0; v=1; } } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_SINGLE|GLUT_RG B|GLUT_DEPTH); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100);

Page 250

glutInitWindowSize(w,h); glutCreateWindow(" Lighting "); glutDisplayFunc(display); glutReshapeFunc(resize); init(); glutTimerFunc(50,update,0); glutKeyboardFunc(myKeyboard); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glShadeModel(GL_SMOOTH); glEnable(GL_DEPTH_TEST); glEnable(GL_NORMALIZE); glClearColor(1.0f,1.0f,1.0f,0.0f); glViewport(0,0,640,480); glutMainLoop(); }

Output

Page 251

Page 252

Page 253

F. Evaluasi 1. Fungsi yang merupakan implementasi dari object 3D yang berpusat pada asal pemodelan sistem koordinat adalah...
a. Fungsi Solid b. Fungsi Hardness c. Fungsi Roughness d. Fungsi Torus e. Fungsi Unbreakablle

2. Pencahayaan yang sifatnya menyinari seluruh ruangan adalah jenis pencahayaan...

a. LED b. Laser Beam

Page 254

c. Ambient Lightning d. Spot Light e. Light Resistor

3. Dalam proses rendering, lightning dipengaruhi oleh faktor-faktor sebagai berikut, kecuali...
a. Jarak objek dengan sumber cahaya b. Posisi Objek c. bentuk permukaan objek d. Letak Objek dan jarak objek dengan sumber cahaya e. Besar objek

4. Sebelum menggunakan fungsi material atau pencahayaan, harus melakukan pemanggilan fungsi, yakni...
a. glMaterialState(ON) b. glFunction3Dmode(ON) c. gl3Dstate(ON) d. glEnable(GL_COLOR_MATERIAL) e. glEnable(CL_COLOR_TURN_ON)

5. Yang bukan merupakan nama parameter dari fungsi 3D adalah...

a. GL_AMBIENT

Page 255

b. GL_COLORIZE c. GL_SPOT d. GL_DIFUSE e. GL_EMISSION

6. Fungsi yang digunakan untuk membuat kerucut solid adalah...

a. glutSolidCone() b. glutSolidCone() c. glutSolidTorus() d. glutTriangle() e. glutSolidOctahedral()

7. Fungsi yang digunakan untuk membuat bola solid adalah...

a. glutSolidCone() b. glutSolidCone() c. glutSolidTorus() d. glutSolidSphere() e. glutSolidOctahedral()

8. Manakah yang merupakan hasil dari pencahayaan menggunakan ambient...

Page 256

a.

b.

c.

Page 257

d.

e.

9. Untuk menghasilkan objek seperti gambar di bawah menggunakan fungsi...

Page 258

a. GL_COLOR_INDEXE b. GL_AMBIENT c. GL_DIFUSSE d. GL_SPECULAR e. GL_WHITE

10. Pada fungsi glut kita dapat menciptakan objek berupa teko teh dengan menggunakan...

a. glutTeaPot() b. GlutSolidTeaPot() c. GLUT_SOLID_TEA_POT() d. glutSolidPot() e. glutSolidTeaPot()

Page 259

BAB 10 TEXTURE
A. Pendahuluan
Objek 3D pada open GL merupakan objek yang lebih hidup dibandingkan objek 2D. Namun permukaan objek 3D yang polos membuat 3D cenderung kurang menarik dan kaku. Untuk membuat objek yang lebih hidup pada OpenGL diperlukan suatu texture mapping. Mapping ialah sebuah bentuk kegiatan untuk melakukan pewarnaan atau

memetakan permukaan geometri pada objek 3D. Sedangkan Maps adalah bentuk gambar atau warna yang digunakan untuk melapisi objek 3D pada saat dilakukan mapping. Dengan kata lain pemetaan texture merupakan pemberian sebuah gambar pada permukaan objek sehingga objek akan tampak realistis. Texture mapping memungkinkan untuk menaruh gambar pada geometric primitive tersebut dan sekaligus mengikuti transformasi yang diterapkan kepada objek. Contohnya apabila sebuah objek kubus tanpa gambar diberi texture bebatuan pada permukaannya, maka objek tersebut akan tampak memiliki tekstur kasar seperti batu. Texture pada permukaan objek dapat dilihat dari berbagai

Page 260

perspective yang berbeda. Beberapa contoh texture pada objek sebagai berikut: Texture 1 dimensi

Texture 2 dimensi

Texture 3 dimensi

Filter

pembesaran

texture

berpengaruh

pada

bagaimana OpenGL melakukan proses rasterisasi texture saat texture ditampilkan pada jumlah pixel yang lebih besar atau lebih kecil dari ukuran sebenarnya. Pada Nearest Filtered Page 261

Texture, texture yang ditampilkan merupakan hasil pemilihan nilai pixel pada posisi terdekat. Sedangkan dengan Linear Interpolation Texture (LPT), texture yang ditampilkan merupakan hasil interpolasi linear antara pixel-pixel

disekitarnya. Pada Mipmapped Texture(MPT), interpolasi linear dilakukan pada awal secara offline sehingga dihasilkan banyak texture dengan ukuran dari yang kecil hingga yang besar.LPT dan MPT akan menghasilkan kira-kira hasil yang sama dengan LPT akan sedikit lebih lambat dari MPT walaupun memori yang digunakan jauh lebih kecil. Namun terkadang efek texture yang diinginkan dapat diperoleh dengan mencampur lebih dari satu texture. Proses pencampuran lebih dari satu texture disebut dengan istilah blending. Salah satu efek blending yang paling sederhana adalah dengan memblending texture dengan warna. Fungsi yang digunakan pada proses blending adalah

glEnable(GL_BLEND). Implementasi texture pada objek grafika computer terdapat pada, animasi seperti toy story maupun game animasi.

B. Konsep Texture Mapping

Texture mapping merupakan teknik pemetaan sebuah tekstur pada pola gambar wireframe, dimana wireframe yang telah dibuat akan ditampilkan memiliki kulit luar seperti Page 262

tekstur yang diinginkan. Beberapa hal yang perlu diperhatikan dalam pemberian tekstur, diantaranya: Menentukan tekstur 1. Membaca atau membangkitkan tekstur 2. Menandai tekstur 3. Mengenablekan tekstur Menandai koordinat tekstur pada vertek Menentukan parameter tekstur

C. Teknik-teknik Realisme dalam Kompuer Grafik

1. . Tekstur-Maps Maps berwujud gambar tekstur 2D yang dituangkan ke permukaan geometri/objek untuk membuat penampilan objek tersebut tampak halus untuk detail permukaannya. Pada pengembangan grafik realisme tingkat tinggi diperlukan lebih banyak lapisan tekstur, agar hasil mapping mendekati kesempurnaan. Sebuah tekstur maps yang diterapkan (dipetakan) biasanya dipakai untuk permukaan bentuk objek polygon, proses ini mirip dengan menerapkan texture pada kertas berpola kotak putih yang polos.Kegiatan texture mapping untuk texture maps dapat didefinisikan sebagai sebuah metode untuk menambahkan detail tekstur

permukaan (bitmap atau raster image), atau warna yang dihasilkan komputer grafis atau model 3D. Penerapannya Page 263

pada grafis 3D dirintis oleh Dr Edwin Catmull pada proyek Ph.D tesisnya tahun 1974. 2. Environment-Maps

Environtment-Maps ialah maps yang memiliki pewarnaan dengan banyak gambar (tekstur) yang merekam refleksi global dan pencahayaan pada objek. Gambar-gambar ini difungsikan sebagai resampled selama proses rendering, dengan tujuan untuk mengekstrak, dan melihat informasi spesifik yang kemudian diterapkan sebagai tekstur objek pada permukaan geometri. Maps ini sering disebut reflection yang berarti tekstur pencahayaan dari benda-benda luar di sekitar objek, maps jenis ini sangat cocok untuk benda-benda yang memiliki tingkat refleksi yang sangat tinggi, seperti kaca, dan lain sebagainya.Environmet mapping pada maps ini memiliki definisi yaitu metode yang efisien untuk simulasi kompleks permukaan bercermin melalui suatu gambar tekstur. Tekstur yang digunakan bekerja untuk menyimpan gambar dari lingkungan sekitar objek yang diberikan. Ada beberapa cara untuk menyimpan tekstur lingkungan sekitar objek, salah satu metode yang paling umum adalah metode Spherical Environment Mapping, di mana dalam metode ini suatu tekstur yang berisi citra lingkungan sekitar akan direfleksikan sebagai bola cermin, dan kemudian dimasukkan sebagai tekstur objek yang diberi maps. Page 264

3.

Bump-Maps

Bump maps adalah maps yang memfokuskan permukaan tekstur pada objek, dengan menggunakan maps ini, permukaan geometri/objek akan terlihat berbeda dan unik, tidak seperti objek-objek yang memiliki permukaan normal pada umumnya. Rumus pekerjaan dari maps ini akan menerapkan bidang untuk intensitas dalam maps yang menunjukkan tingkat rendah tingginya suatu permukaan objek, fungsi maps ini akan mengacaukan permukaan objek yang normal, sehingga menimbulkan kesan unik ketika hasilnya sudah di-render.Untuk kegiatannya, bump mapping adalah sebuah teknik grafis komputer di mana pada setiap pixel untuk permukaan normal objek, akan diberikan efek tidak halus dan diterapkan sebelum melakukan perhitungan iluminasi. Hasilnya, objek yang diberi maps akan lebih kaya, serta lebih rinci untuk representasi permukaan objek dan lebih mirip pada permukaan alam. 4. Normal-Maps

Maps ini serupa dengan bump-maps, perbedaannya adalah fungsionalitas yang ada pada normal maps, maps ini secara alami akan menghasilkan bentuk permukaan yang tidak halus tanpa menggunakan lebih banyak penambahan atau pengurangan poligon pada objek.Dalam dunia grafik komputer 3D, normal mapping pada maps ini bisa disebut " Page 265

Dot3 bump mapping ", definisinya adalah sebuah teknik yang digunakan untuk berpura-pura menambahkan efek tidak halus pada permukaan objek. Kenapa disebut berpura-pura ? Hal ini disebabkan karena mapping ini bekerja dengan menambahkan rincian tidak halus pada permukaan objek tanpa menggunakan poligon. Normal mapping biasanya diakurasi sebagai sebuah gambar RGB yang berhubungan dengan koordinat X, Y, dan Z dari permukaan normal suatu objek. Penggunaan umum teknik ini adalah untuk lebih meningkatkan tampilan dan detail dari model poligon rendah dengan menghasilkan peta normal dari model poligon yang tinggi. 5. Shadow-Maps

Shadow maps yaitu maps yang menghasilkan suatu bayangan tekstur pada objek dengan menangkap siluet objek tersebut dari sumber cahaya yang terlihat. Maps ini sangat sering dipakai oleh pengembang grafik 3D, karena efek yang dihasilkan seolah-olah menunjukkan objek tersebut sangat realistis, dan disebabkan adanya bayangan dari sumber cahaya yang ada.Fungsi kerjanya yang berkonsep shadow mapping adalah proses di mana bayang-bayang ditambahkan ke grafik komputer 3D. Konsep ini diperkenalkan oleh Lance Williams pada tahun 1978, dalam sebuah makalah yang berjudul "Casting curved shadows on curved surfaces". Sejak Page 266

saat itu, teknik ini telah digunakan baik dalam pra-render adegan, dipakai secara realtime, atau bahkan diterapkan ke banyak konsol dan PC high-end game.

D. Teknik-teknik dalam Geometri

1. Texture- Mapping. Sebuah metode untuk menambahkan detail, tekstur permukaan (bitmap atau raster image), atau warna yang dihasilkan komputer grafis atau model 3D. Penerapannya pada grafis 3D dirintis oleh Dr Edwin Catmull di gelar Ph.D. tesis 1974. 2. Poligonization. Dengan merubah bentuk asli objek, namun, ini membutuhkan resource hardware yang besar. 3. Splines. Merupakan teknik yang menggunakan representasi permukaan matematis (polynomial), tanpa

menggunakan polygon sama sekali. 4. Implicit surface (Blobbies). Teknik ini didasarkan pada fungsi x,y, dan z. 5. Subdivision Surfaces. Membagi objek menjadi segitiga yang bertumpuk. 6. Degradasi tingkat detail.

Page 267

Mengganti poligon pada objek yang berada pada posisi yang jauh, menghemat waktu render. 7. Mesh decimation. Mengurangi poligon pada suatu objek untuk

menghemat waktu rendering. Tekstur merupakan sebuah wadah dari sebuah gambar atau lebih. Namun, tekstur tidak menyimpan gambar begitu saja, gambar tekstur memiliki konfigurasi tertentu. Ada tiga karakteristik untuk mendefinisikan tekstur, karakteristik tersebut adalah: jenis tekstur, ukuran tekstur, dan format gambar yang digunakan tekstur. Jenis tekstur mendefinisikan susunan gambar dalam tekstur, ukuran mendefinisikan ukuran gambar dalam tekstur, dan format gambar

mendefinisikan format gambar yang digunakan dalam tekstur. Berikut ini adalah macam-macam tekstur: GL_TEXTURE_1D: semua gambar dalam tekstur ini 1dimensi. Memiliki lebar, tapi tidak memiliki ketinggian atau kedalaman. GL_TEXTURE_2D: semua gambar dalam tekstur ini 2dimensi. Memiliki lebar dan tinggi, namun tidak punya kedalaman. GL_TEXTURE_3D: semua gambar dalam tekstur ini 3dimensi. Memiliki lebar, tinggi, dan kedalaman. Page 268

GL_TEXTURE_RECTANGLE: Gambar dalam tekstur ini (hanya satu gambar pada mipmapping) 2-dimensi. Koordinat tekstur yang digunakan untuk tekstur ini tidak dinormalisasi.

GL_TEXTURE_BUFFER: Gambar dalam tekstur ini (Hanya satu gambar ada mipmapping) 1-dimensi. Penyimpanan data berasal dari Buffer Object.

GL_TEXTURE_CUBE_MAP: terdapat 6 set gambar 2D berbeda, dengan ukuran yang sama. Berbentuk seperti 6 sisi kubus.

GL_TEXTURE_1D_ARRAY: Gambar dalam tekstur ini semua 1-dimensi. Namun, berisi beberapa set gambar 1-dimensi, semua dalam satu tekstur. Panjang array bagian dari ukuran tekstur itu.

GL_TEXTURE_2D_ARRAY: Gambar dalam tekstur ini semua adalah 2-dimensi. Namun, mengandung beberapa set gambar 2 dimensi, semua dalam satu tekstur. Panjang array bagian dari ukuran tekstur itu.

GL_TEXTURE_CUBE_MAP_ARRAY:

Gambar

dalam

tekstur ini merupakan pemetaan kubus. Berisi beberapa set peta kubus yang kesemuanya berada dalam sebuah tekstur. Panjang Array * 6 (jumlah sisi kubus) merupakan bagian dari ukuran tekstur.

Page 269

GL_TEXTURE_2D_MULTISAMPLE:

Gambar

dalam

tekstur ini (hanya satu gambar ada mipmapping) adalah 2-dimensi. Setiap pixel dalam gambar ini berisi beberapa sampel bukan hanya satu nilai. GL_TEXTURE_2D_MULTISAMPLE_ARRAY: Menggabungkan 2D array dan jenis multisample 2D. Tidak ada mipmapping. Ukuran tekstur memiliki batas dalam implementasinya di open GL. Untuk tekstur 1D dan 2D (dan setiap jenis tekstur yang menggunakan dimensi yang sama, seperti cubemaps) ukuran maksimalnya adalah GL_MAX_TEXTURE_SIZE. Untuk tekstur array, panjang maksimum Untuk lebih dalam array adalah 3D, dari ukuran.

GL_MAX_ARRAY_TEXTURE_LAYERS. dimensi tidak boleh

tekstur besar

GL_MAX_3D_TEXTURE_SIZE

Dalam batas-batas ini, ukuran tekstur dapat bernilai berapapun. Disarankan bagaimanapun, Anda harus tetap mangacu pada pangkat dua untuk ukuran tekstur, kecuali Anda memiliki kebutuhan yang signifikan untuk menggunakan ukuran tertentu.

E. Mip maps
Ketika tekstur secara langsung diterapkan ke permukaan, berapa banyak piksel tekstur yang (biasa disebut Page 270

"texels") digunakan tergantung pada sudut di mana permukaan akan dirender. Sebuah tekstur dipetakan ke gambar pesawat yang hampir di tepi kamera hanya akan menggunakan sebagian kecil dari pixel tekstur. Demikian pula, melihat langsung ke bawah pada tekstur dari jauh akan menunjukkan texels lebih sedikit daripada melihat dari dekat. Masalahnya adalah dengan animasi. Ketika Anda perlahanlahan melakukan zoom out pada tekstur, Anda akan mulai melihat bentuk asing muncul. Ini disebabkan oleh pengambilan sampel yang lebih sedikit dari semua texels, pilihan texel mana yang yang akan dijadikan sample berubah berdasarkan frame yang berbeda pada animasi. Bahkan dengan linear filtering (lihat di bawah), bentuk akan muncul seperti kamera di-zoom out. Untuk mengatasi masalah ini, kita dapat menggunakan mip maps.metode ini adalah menyusut versi gambar berukuran penuh. Setiap mipmap adalah setengah ukuran dari sebelumnya dalam rangkaian, menggunakan dimensi terbesar gambar. Jadi 2D tekstur 64x16 dapat memiliki 6 mip-map: 32x8, 16x4, 8x2, 4x1, 2x1, dan 1x1. OpenGL tidak mengharuskan rantai mipmap selesai, Anda dapat menentukan apa yang rentang mipmaps dalam tekstur yang tersedia.

Page 271

Beberapa jenis tekstur memiliki beberapa set independen mipmaps. Setiap sisi cubemap memiliki pemetaan mipmaps sendiri, seperti halnya setiap entri dalam tekstur array. Namun, tekstur secara keseluruhan hanya memiliki satu pengaturan yang mipmaps tertentu. Jadi jika tekstur sudah diatur sedemikian rupa sehingga hanya bagian top 4 levels mipmaps, Anda harus memiliki rangkaian bagian mipmaps tersebut dalam sebuah tekstur. Ketika melakukan sampel tekstur, implementasi secara otomatis akan memilih mipmap yang digunakan untuk sudut pandang, ukuran tekstur, dan berbagai faktor lainnya. Bila menggunakan ukuran tekstur yang tidak pangkat dua, setengah ukuran mipmaps lebih rendah dibulatkan ke bawah. Jadi tekstur 63x63 memiliki tingkat terendah berikutnya: 31x31. Dan seterusnya. Tingkat dasar rantai mipmap adalah yang terbesar. Hal ini juga salah satu yang mendefinisikan ukuran penuh tekstur. Nomor OpenGL ini tingkat mipmap sebagai 0, tingkat mipmap terbesar berikutnya adalah 1, dan seterusnya. Tingkat dasar tekstur tidak harus di-load. Selama Anda menentukan rentang mipmaps dengan benar, Anda dapat meninggalkan setiap tingkat mipmap yang Anda inginkan.

Page 272

F. Texture maping

(0.0, 1.0)

(1.0, 0.0) (0.0, 0.0) Obyek CG

Proses texture mapping (2)

Obyek CG

(0.0, 0.5)

Obye k CG

(0.0, 0.0)

Obye k CG

Page 273

G. Object Texture

Diagram konten objek tekstur

Tekstur dalam OpenGL adalah objek OpenGL, dan mengikuti konvensi standar tersebut. Tekstur memiliki standar glGenTextures, glBindTexture.Target parameter

lBindTexture sesuai dengan jenis tekstur itu. Jadi, ketika Anda menggunakan nama tekstur baru yang dihasilkan, rangkaian pertama akan menentukan jenis tekstur. Anda tidak dapat memasukkan objek pada target dengan tipe yang berbeda. Jadi, jika Anda membuat tekstur sebagai GL_TEXTURE_1D, maka Anda harus terus menggunakan tipe itu. Seperti jenis objek lain di OpenGL, kita dapat menggunakan target dengan tipe yang berbeda. Sehingga Anda dapat memiliki GL_TEXTURE_1D dan

GL_TEXTURE_2D_ARRAY. Page 274

H. Contoh penerapan material dan tekstur

1. Membuat papan catur dengan 2 warna yaitu hitam dan putih Syntax:
#include<gl.h> #include<glu.h> #include<aux.h> #define checkImageWidth 50 #define checkImageHeight 50 GLubyte checkImage[checkImageWidth][checkImageHeig ht][3]; void makeCheckImage(void) { int i, j, r, c; for (i = 0; i < checkImageWidth; i++) { for (j = 0; j < checkImageHeight; j++) { c = ((((i&0x8)==0)^((j&0x8))==0))*255; checkImage[i][j][0] = (GLubyte) c; checkImage[i][j][1] = (GLubyte) c; checkImage[i][j][2] = (GLubyte) c; } }

Page 275

} void myinit(void) { glClearColor (0.0, 0.0, 0.0, 0.0); glEnable(GL_DEPTH_TEST); glDepthFunc(GL_LEQUAL); makeCheckImage(); glPixelStorei(GL_UNPACK_ALIGNMENT, 1); glTexImage2D(GL_TEXTURE_2D, 0, 3, checkImageWidth, checkImageHeight, 0, GL_RGB, GL_UNSIGNED_BYTE, &checkImage[0][0][0]); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST); glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTexEnvf(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_DECAL); glEnable(GL_TEXTURE_2D);

Page 276

glShadeModel(GL_FLAT); } void display(void) { glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glBegin(GL_QUADS); glTexCoord2f(0.0, 0.0); glVertex3f(-2.0, 1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(-2.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(0.0, 1.0, 0.0); glTexCoord2f(1.0, 0.0); glVertex3f(0.0, 1.0, 0.0); glTexCoord2f(0.0, 0.0); glVertex3f(1.0, 1.0, 0.0); glTexCoord2f(0.0, 1.0); glVertex3f(1.0, 1.0, 0.0); glTexCoord2f(1.0, 1.0); glVertex3f(2.41421, 1.0, -1.41421); glTexCoord2f(1.0, 0.0); glVertex3f(2.41421, -1.0,-1.41421); glEnd(); glFlush(); }

Page 277

void myReshape(GLsizei w, GLsizei h) { glViewport(0, 0, w, h); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(60.0, 1.0*(GLfloat)w/(GLfloat)h, 1.0, 30.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glTranslatef(0.0, 0.0, -3.6); } int main(int argc, char** argv) { auxInitDisplayMode (AUX_SINGLE | AUX_RGBA | AUX_DEPTH); auxInitPosition (0, 0, 500, 500); auxInitWindow (argv[0]); myinit(); auxReshapeFunc (myReshape); auxMainLoop(display); }

Page 278

Hasil Output:

2. Contoh program yang menampilkan sebuah kubus dengan texture tiap sisinya menampilkan texture nama yang berbeda. Gambar awal berukuran 320x320

Syntax header (imageloader.h)

#ifndef IMAGE_LOADER_H_INCLUDED #define IMAGE_LOADER_H_INCLUDED //Represents an image

Page 279

class Image { public: Image(char* ps, int w, int h); ~Image(); /* An array of the form (R1, G1, B1, R2, G2, B2, ...) indicating the * color of each pixel in image. 255. * The array starts the bottom-left pixel, then moves right to the end * of the row, then moves up to the next column, and so on. the * format in which OpenGL likes images. */ char* pixels; int width; int height; }; //Reads a bitmap image from file. Image* loadBMP(const char* filename); #endif This is Color components range from 0 to

Syntax cpp Page 280

#include <assert.h> #include <fstream> #include <stdlib.h> #include <glut.h> #include "imageloader.h" int w=480, h=480; //lebar, tinggi int s=0, p=-10; // sudut, sumbu z int rx=0, ry=0, rz=0; //sumbu simetri GLuint _textureId; GLuint loadTexture(Image* image){ GLuint textureId; glGenTextures(1, &textureId); //allocate texture name glBindTexture(GL_TEXTURE_2D, textureId); //select our current texture glTexImage2D(GL_TEXTURE_2D, //select GL_TEXTURE_2D 0, //0 for default 2D texture GL_RGB, //RGB format for image image->width, image->height, 0, //border image must be 0 GL_RGB, //format image for the stored pixels GL_UNSIGNED_BYTE, //pixels stored as unsigned numbers image->pixels); return textureId;

Page 281

} using namespace std; Image::Image(char* ps, int w, int h) : pixels(ps), width(w), height(h) {} Image::~Image() { delete[] pixels; } namespace { int toInt(const char* bytes) { return (int)(((unsigned char)bytes[3] << 24) | ((unsigned char)bytes[2] << 16) | ((unsigned char)bytes[1] << 8) | (unsigned char)bytes[0]); } short toShort(const char* bytes) { return (short)(((unsigned char)bytes[1] << 8) | (unsigned char)bytes[0]); } int readInt(ifstream &input) {

Page 282

char buffer[4]; input.read(buffer, 4); return toInt(buffer); } short readShort(ifstream &input) { char buffer[2]; input.read(buffer, 2); return toShort(buffer); } template<class T> class auto_array { private: T* array; mutable bool isReleased; public: explicit auto_array(T* array_ = NULL) : array(array_), isReleased(false) { } auto_array(const auto_array<T> &aarray) { array = aarray.array; isReleased = aarray.isReleased; aarray.isReleased = true;

Page 283

} ~auto_array() { if (!isReleased && array != NULL) { delete[] array; } } T* get() const { return array; } T &operator*() const { return *array; } void operator=(const auto_array<T> &aarray) { if (!isReleased && array != NULL) { delete[] array; } array = aarray.array; isReleased = aarray.isReleased; aarray.isReleased = true;

Page 284

} T* operator->() const { return array; } T* release() { isReleased = true; return array; } void reset(T* array_ = NULL) { if (!isReleased && array != NULL) { delete[] array; } array = array_; } T* operator+(int i) { return array + i; } T &operator[](int i) { return array[i]; } }; }

Page 285

Image* loadBMP(const char* filename) { ifstream input; input.open(filename, ifstream::binary); assert(!input.fail() || !"Could not find file"); char buffer[2]; input.read(buffer, 2); assert(buffer[0] == 'B' && buffer[1] == 'M' || !"Not a bitmap file"); input.ignore(8); int dataOffset = readInt(input); //Read the header int headerSize = readInt(input); int width; int height; switch(headerSize) { case 40: //V3 width = readInt(input); height = readInt(input); input.ignore(2); assert(readShort(input) == 24 || !"Image is not 24 bits per pixel"); assert(readShort(input) == 0 || !"Image is compressed"); break; case 12: //OS/2 V1 width = readInt(input);

Page 286

height = readInt(input); input.ignore(2); assert(readShort(input) == 24 || !"Image is not 24 bits per pixel"); break; case 64: //OS/2 V2 assert(!"Can't load OS/2 V2 bitmaps"); break; case 108: //Windows V4 assert(!"Can't load Windows V4 bitmaps"); break; case 124: //Windows V5 assert(!"Can't load Windows V5 bitmaps"); break; default: assert(!"Unknown bitmap format"); } //Read the data int bytesPerRow = ((width * 3 + 3) / 4) * 4 - (width * 3 % 4); int size = bytesPerRow * height; auto_array<char> pixels(new char[size]);

Page 287

input.seekg(dataOffset, ios_base::beg); input.read(pixels.get(), size); //Get the data into the right format auto_array<char> pixels2(new char[width * height * 3]); for(int y = 0; y < height; y++) { for(int x = 0; x < width; x++) { for(int c = 0; c < 3; c++) { pixels2[3 * (width * y + x) + c] = pixels[bytesPerRow * y + 3 * x + (2 c)]; } } } input.close(); return new Image(pixels2.release(), width, height); } void init(){ GLfloat LightPosition[]={-10.0f, 20.0f, 20.0f, 0.0f}; glShadeModel(GL_SMOOTH);

Page 288

glClearColor(0.0f,0.0f,0.0f,0.5f); glClearDepth(1.0f); glEnable(GL_DEPTH_TEST); glHint(GL_PERSPECTIVE_CORRECTION_HINT, GL_NICEST); glLightfv(GL_LIGHT0, GL_POSITION, LightPosition); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_COLOR_MATERIAL); glBlendFunc(GL_SRC_ALPHA,GL_ONE); glColorMaterial(GL_BACK, GL_DIFFUSE); Image* image = loadBMP("gambar.bmp"); _textureId = loadTexture(image); return; } void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, _textureId); glTexParameteri(GL_TEXTURE_2D,

Page 289

GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTranslatef(0,0,p); glRotatef(s,rx,ry,rz); glPushMatrix(); glRotatef(180,0,1,0); glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-2.0f, -2.0f); glTexCoord2f(0.5f, 0.0f); glVertex2f(2.0f, -2.0f); glTexCoord2f(0.5f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glPopMatrix(); glPushMatrix(); glTranslatef(2,0,2); glRotatef(90,0,1,0); glBegin(GL_QUADS); glTexCoord2f(0.5f, 0.0f); glVertex2f(-2.0f, -2.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(2.0f, -2.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.5f, 1.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glTranslatef(-2,0,-2);

Page 290

glRotatef(-90,0,1,0); glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-2.0f, -2.0f); glTexCoord2f(0.5f, 0.0f); glVertex2f(2.0f, -2.0f); glTexCoord2f(0.5f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glTranslatef(-2,0,-2); glRotatef(-90,0,1,0); glBegin(GL_QUADS); glTexCoord2f(0.5f, 0.0f); glVertex2f(-2.0f, -2.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(2.0f, -2.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.5f, 1.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glPopMatrix(); glPushMatrix(); glTranslatef(0,2,2); glRotatef(-90,1,0,0); glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-2.0f, -2.0f); glTexCoord2f(1.0f, 0.0f);

Page 291

glVertex2f(2.0f, -2.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glPopMatrix(); glPushMatrix(); glTranslatef(0,-2,2); glRotatef(90,1,0,0); glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-2.0f, -2.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(2.0f, -2.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glPopMatrix(); glDisable(GL_TEXTURE); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(45.0, (float) w1/(float) h1, 1.0,300.0);

Page 292

glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void myKeyboard(unsigned char key, int x, int y) { if (key == 'y'){ rx=0; ry=1; rz=0; s +=5; } else if (key == 'x'){ rx=1; ry=0; rz=0; s +=5; } else if (key == 'z'){ rx=0; ry=0; rz=1; s +=5; } } void mySpecialKeyboard(int key, int x, int y) { switch(key){ case GLUT_KEY_UP :

Page 293

p += 5; break; case GLUT_KEY_DOWN : p -= 5; break; } } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("kubus"); glutDisplayFunc(mydisplay); glutReshapeFunc(resize); init(); glutTimerFunc(50,timer,0); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard); glClearColor(1,1,1,1); glutMainLoop(); }

Page 294

Hasil Output: Tampilan awal:

Apabila ditekan tombol x

Page 295

Apabila ditekan tombol y

Apabila ditekan tombol z

Penjelasan Program: Fungsi mydisplay pada kode program tersebut digunakan untuk menggambar kubus yang di buat dan akan digeser pada kode translatefnya. Sourcecode tersebut menampilkan gambar dan tekstur dengan 6 sisi sehingga membentuk Page 296

kubus. glVertex2f berfungsi untuk menentukan ukuran kotak/box bidang tekstur. Dan gambar tersebut menampilkan nama Anggota kelompok pada sisi kubus. 3. Contoh Shadow mapping

Cara pembuatannya yaitu: 1. Render seluruh adegan dari sudut sumber cahaya dan meletakkannya di z-penyangga (peta kedalaman) 2. Render seluruh adegan lagi tapi dari sudut pandang 3. Untuk setiap pixel dalam sudut pandang render (Langkah 1), jika tidak terlihat dari sumber cahaya render (Langkah 2) itu adalah baik dalam bayangan itu menyala 4. Contoh Pemetaan normal

Page 297

Untuk pemetaan normal, maka yang akan digunakan dalam perhitungan dot product untuk perhitungan pencahayaan diffuse, kita dapat melihat bahwa {0, 0, -1} akan dipetakan ke {128, 128, 255} nilai, memberikan semacam langit biru warna terlihat dalam peta normal (biru (z) koordinat adalah perspektif (kedalaman) Page 298 koordinat dan RG-xy

koordinat datar di layar). {0.3, 0.4, -0,866} akan dipetakan ke ({0.3, 0.4, -0,866} / 2 + {0,5, 0,5, 0,5}) * 255 = {0.15 +0.5, +0.5 0,2, -0,433 +0.5} * 255 = {0,65, 0,7, 0,067} * 255 = {166, 179, 17} nilai (0,3 ^ 2 ^ 2 + 0,4 (-0,866) ^ 2 = 1). 1. Implementasi Mapping texture Dalam menerapkan mapping texture dperlukan header imageloader.h untuk me-load gambar dari computer. Format gambar yang dapat digunakan untuk texture mapping adalah dengan extension .bmp. Dalam membuat program terlebih dahulu membuat header imageloader sebagai Inisialisasi yang

menghubungkan antara source code untuk texture mapping dengan program utama dengan langkah berikut ini : a. Membuat Project baru pada Visual C++ b. Klik kanan pada header file add new Item pilih header file dan beri nama imageloader ok c. Pada sheet code isikan kode seperti dibawah ini Code Program :
#ifndef IMAGE_LOADER_H_INCLUDED #define IMAGE_LOADER_H_INCLUDED

Page 299

//Represents an image class Image { public: Image(char* ps, int w, int h); ~Image(); /* An array of the form (R1, G1, B1, R2, G2, B2, ...) indicating the * color of each pixel in image. Color components range * The array starts the bottom-left pixel, then moves right to the end * of the row, then moves up to the next column, and so on. This is the * format in which OpenGL likes images. */ char* pixels; int width; int height; }; //Reads a bitmap image from file. Image* loadBMP(const char* filename); from 0 to 255.

Page 300

#endif

Kemudian setelah membuat header file untuk meload gambar , kita dapat membuat program dengan menerapkan mapping texture.Obyek yang akan dipakai dalam texture mapping adalah gambar.bmp

Program berikut adalah contoh dari penerapan texture mapping pada program Code Program
#include <assert.h> #include <fstream> #include <stdlib.h> #include <glut.h> #include "imageloader.h" int w=480, h=480; //lebar, tinggi

Page 301

int s=0, p=-10; // sudut, sumbu z int rx=0, ry=0, rz=0; //sumbu simetri GLuint _textureId; GLuint loadTexture(Image* image){ GLuint textureId; glGenTextures(1, &textureId); //allocate texture name glBindTexture(GL_TEXTURE_2D, textureId); //select our current texture glTexImage2D(GL_TEXTURE_2D, //select GL_TEXTURE_2D 0, //0 for default 2D texture GL_RGB, //RGB format for image image->width, image->height, 0, //border image must be 0 GL_RGB, //format image for the stored pixels GL_UNSIGNED_BYTE, //pixels stored as unsigned numbers image->pixels); return textureId; }

Page 302

using namespace std; Image::Image(char* ps, int w, int h) : pixels(ps), width(w), height(h) {} Image::~Image() { delete[] pixels; } namespace { int toInt(const char* bytes) { return (int)(((unsigned char)bytes[3] << 24) | ((unsigned char)bytes[2] << 16) | ((unsigned char)bytes[1] << 8) | (unsigned char)bytes[0]); } short toShort(const char* bytes) { return (short)(((unsigned char)bytes[1] << 8) | (unsigned char)bytes[0]); }

Page 303

int readInt(ifstream &input) { char buffer[4]; input.read(buffer, 4); return toInt(buffer); } short readShort(ifstream &input) { char buffer[2]; input.read(buffer, 2); return toShort(buffer); } template<class T> class auto_array { private: T* array; mutable bool isReleased; public: explicit auto_array(T* array_ = NULL) : array(array_), isReleased(false) { } auto_array(const auto_array<T> &aarray) { array =

Page 304

aarray.array; isReleased = aarray.isReleased; aarray.isReleased = true; } ~auto_array() { if (!isReleased && array != NULL) { delete[] array; } } T* get() const { return array; } T &operator*() const { return *array; } void operator=(const auto_array<T> &aarray) { if (!isReleased && array != NULL) { delete[]

Page 305

array; } array = aarray.array; isReleased = aarray.isReleased; aarray.isReleased = true; } T* operator->() const { return array; } T* release() { isReleased = true; return array; } void reset(T* array_ = NULL) { if (!isReleased && array != NULL) { delete[] array; }

Page 306

array = array_; } T* operator+(int i) { return array + i; } T &operator[](int i) { return array[i]; } }; } Image* loadBMP(const char* filename) { ifstream input; input.open(filename, ifstream::binary); assert(!input.fail() || !"Could not find file"); char buffer[2]; input.read(buffer, 2); assert(buffer[0] == 'B' && buffer[1] == 'M' || !"Not a bitmap file"); input.ignore(8); int dataOffset = readInt(input);

Page 307

//Read the header int headerSize = readInt(input); int width; int height; switch(headerSize) { case 40: //V3 width = readInt(input); height = readInt(input); input.ignore(2); assert(readShort(input) == 24 || !"Image is not 24 bits per pixel"); assert(readShort(input) == 0 || !"Image is compressed"); break; case 12: //OS/2 V1 width = readInt(input); height = readInt(input); input.ignore(2); assert(readShort(input) == 24 ||

Page 308

!"Image is not 24 bits per pixel"); break; case 64: //OS/2 V2 assert(!"Can't load OS/2 V2 bitmaps"); break; case 108: //Windows V4 assert(!"Can't load Windows V4 bitmaps"); break; case 124: //Windows V5 assert(!"Can't load Windows V5 bitmaps"); break; default: assert(!"Unknown bitmap format"); } //Read the data int bytesPerRow = ((width * 3 + 3) / 4) * 4 - (width * 3 % 4); int size = bytesPerRow * height; auto_array<char> pixels(new char[size]);

Page 309

input.seekg(dataOffset, ios_base::beg); input.read(pixels.get(), size); //Get the data into the right format auto_array<char> pixels2(new char[width * height * 3]); for(int y = 0; y < height; y++) { for(int x = 0; x < width; x++) { for(int c = 0; c < 3; c++) { pixels2[3 * (width * y + x) + c] = pixels[bytesPerRow * y + 3 * x + (2 - c)]; } } } input.close(); return new Image(pixels2.release(), width, height); } void init(){

Page 310

GLfloat LightPosition[]={-10.0f, 20.0f, 20.0f, 0.0f}; glShadeModel(GL_SMOOTH); glClearColor(0.0f,0.0f,0.0f,0.5f); glClearDepth(1.0f); glEnable(GL_DEPTH_TEST); glHint(GL_PERSPECTIVE_CORRECTION_H INT, GL_NICEST); glLightfv(GL_LIGHT0, GL_POSITION, LightPosition); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0); glEnable(GL_COLOR_MATERIAL); glBlendFunc(GL_SRC_ALPHA,GL_ONE); glColorMaterial(GL_BACK, GL_DIFFUSE); Image* image = loadBMP("gambar.bmp"); _textureId = loadTexture(image); return; } void mydisplay(){

Page 311

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, _textureId); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTranslatef(0,0,p); glRotatef(s,rx,ry,rz); glPopMatrix(); glPushMatrix(); glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-2.0f, -2.0f); glTexCoord2f(1.0f, 0.0f); glVertex2f(2.0f, -2.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glPopMatrix(); glDisable(GL_TEXTURE);

Page 312

glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(70.0, (float) w1/(float) h1, 1.0,100.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); } void myKeyboard(unsigned char key, int x, int y) { if (key == 'y'){ rx=0; ry=1; rz=0; s +=5; } else if (key == 'x'){ rx=1; ry=0; rz=0; s +=5; }

Page 313

else if (key == 'z'){ rx=0; ry=0; rz=1; s +=5; } } void mySpecialKeyboard(int key, int x, int y) { switch(key){ case GLUT_KEY_UP : p += 5; break; case GLUT_KEY_DOWN : p -= 5; break; } } void timer(int value){ glutPostRedisplay(); glutTimerFunc(100,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE |

Page 314

GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Modul 10 - Nomor 2-3-4"); glutDisplayFunc(mydisplay); glutReshapeFunc(resize); init(); glutTimerFunc(100,timer,0); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard) ; glClearColor(1,1,1,1); glutMainLoop(); }

Tampilan

Page 315

Penjelasan

Page 316

Pada program terdapat implemetasi mapping texture dimana terdapat header dan syntak untuk me-load gambar

Pada mapping texture terdapat inisialisasi texture yang nantinya akan digunakan untuk meload gambar dan pada fungsi load texture terdapat fungsinya. Untuk membuat suatu obyek yang dapat dikenai suatu fungsi tekstur, maka hal yang perlu dilakukan adalah dengan mendeklarasikan fungsi glEnable(GL_TEXTURE_2D);. Karena koordinat Page 317 syntax dengan masing masing

pada gambar dan pada obyek window aplikasi tidak sama, maka perlu dihubungkan koordinat gambar dengan obyek. Titik (0,0) pada gambar berada di pojok kiri bawah, sedangkan pada obyek windows aplikasi titik (0,0) berada di tengah-tengah windows, sehingga

glTexCoord2f(0.f,0.f); untuk posisi koordinat (0,0) obyek dihubungkan dengan glVertex2f(2.f,-2.f); (pojok kiri bawah). glTexCoord2f(1.f,0.f); dihubungkan dengan glVertex2f(2.f,-2.f); (pojok kanan bawah). glTexCoord2f(1.f,1.f);

dihubungkan dengan glVertex2f(2.f,2.f); (pojok kanan atas). Dan glTexCoord2f(0.f,1.f);

dihubungkan dengan glVertex2f(-2.f,2.f); (pojok kiri atas). Apabila program tersebut dijalankan, gambar yang telah di-import tadi akan menampilkan hasilnya. Apabila ditekan huruf x, maka program akan berputar searah sumbu x, ditekan huruf y, maka program akan berputar searah sumbu y, dan apabila ditekan huruf z, maka program akan berputar searah sumbu z, setelah itu apabila PgUp ditekan maka gambar(objek)tersebut akan bertambah besar, sedangkan apabila PgDn Page 318

ditekan maka obyek tersebut akan bertambah kecil. 2. Membuat tampilan texture mapping dengan glTexCoord2f Code Program
#include <assert.h> #include <fstream> #include <stdlib.h> #include <glut.h> #include "imageloader.h" int w=480, h=480; //lebar, tinggi int s=0, p=-10; // sudut, sumbu z int rx=0, ry=0, rz=0; //sumbu simetri GLuint _textureId; GLuint loadTexture(Image* image){ GLuint textureId; glGenTextures(1, &textureId); //allocate texture name glBindTexture(GL_TEXTURE_2D, textureId); //select our current texture glTexImage2D(GL_TEXTURE_2D, //select GL_TEXTURE_2D 0, //0 for default 2D texture

Page 319

GL_RGB, //RGB format for image image->width, image->height, 0, //border image must be 0 GL_RGB, //format image for the stored pixels GL_UNSIGNED_BYTE, //pixels stored as unsigned numbers image->pixels); return textureId; } using namespace std; Image::Image(char* ps, int w, int h) : pixels(ps), width(w), height(h) {} Image::~Image() { delete[] pixels; } namespace { int toInt(const char* bytes) { return (int)(((unsigned char)bytes[3] << 24) | ((unsigned char)bytes[2] << 16) |

Page 320

((unsigned char)bytes[1] << 8) | (unsigned char)bytes[0]); } short toShort(const char* bytes) { return (short)(((unsigned char)bytes[1] << 8) | (unsigned char)bytes[0]); } int readInt(ifstream &input) { char buffer[4]; input.read(buffer, 4); return toInt(buffer); } short readShort(ifstream &input) { char buffer[2]; input.read(buffer, 2); return toShort(buffer); } template<class T> class auto_array { private:

Page 321

T* array; mutable bool isReleased; public: explicit auto_array(T* array_ = NULL) : array(array_), isReleased(false) { } auto_array(const auto_array<T> &aarray) { array = aarray.array; isReleased = aarray.isReleased; aarray.isReleased = true; } ~auto_array() { if (!isReleased && array != NULL) { delete[] array; } }

Page 322

T* get() const { return array; } T &operator*() const { return *array; } void operator=(const auto_array<T> &aarray) { if (!isReleased && array != NULL) { delete[] array; } array = aarray.array; isReleased = aarray.isReleased; aarray.isReleased = true; } T* operator->() const { return array; }

Page 323

T* release() { isReleased = true; return array; } void reset(T* array_ = NULL) { if (!isReleased && array != NULL) { delete[] array; } array = array_; } T* operator+(int i) { return array + i; } T &operator[](int i) { return array[i]; } }; } Image* loadBMP(const char* filename) {

Page 324

ifstream input; input.open(filename, ifstream::binary); assert(!input.fail() || !"Could not find file"); char buffer[2]; input.read(buffer, 2); assert(buffer[0] == 'B' && buffer[1] == 'M' || !"Not a bitmap file"); input.ignore(8); int dataOffset = readInt(input); //Read the header int headerSize = readInt(input); int width; int height; switch(headerSize) { case 40: //V3 width = readInt(input); height = readInt(input); input.ignore(2); assert(readShort(input) == 24 || !"Image is not 24 bits per pixel");

Page 325

assert(readShort(input) == 0 || !"Image is compressed"); break; case 12: //OS/2 V1 width = readInt(input); height = readInt(input); input.ignore(2); assert(readShort(input) == 24 || !"Image is not 24 bits per pixel"); break; case 64: //OS/2 V2 assert(!"Can't load OS/2 V2 bitmaps"); break; case 108: //Windows V4 assert(!"Can't load Windows V4 bitmaps"); break; case 124: //Windows V5 assert(!"Can't load

Page 326

Windows V5 bitmaps"); break; default: assert(!"Unknown bitmap format"); } //Read the data int bytesPerRow = ((width * 3 + 3) / 4) * 4 - (width * 3 % 4); int size = bytesPerRow * height; auto_array<char> pixels(new char[size]); input.seekg(dataOffset, ios_base::beg); input.read(pixels.get(), size); //Get the data into the right format auto_array<char> pixels2(new char[width * height * 3]); for(int y = 0; y < height; y++) { for(int x = 0; x < width; x++) { for(int c = 0; c < 3; c++) { pixels2[3 * (width * y + x) + c] =

Page 327

pixels[bytesPerRow * y + 3 * x + (2 - c)]; } } } input.close(); return new Image(pixels2.release(), width, height); } void init(){ GLfloat LightPosition[]={-10.0f, 20.0f, 20.0f, 0.0f}; glShadeModel(GL_SMOOTH); glClearColor(0.0f,0.0f,0.0f,0.5f); glClearDepth(1.0f); glEnable(GL_DEPTH_TEST); glHint(GL_PERSPECTIVE_CORRECTION_H INT, GL_NICEST); glLightfv(GL_LIGHT0, GL_POSITION, LightPosition); glEnable(GL_LIGHTING); glEnable(GL_LIGHT0);

Page 328

glEnable(GL_COLOR_MATERIAL); glBlendFunc(GL_SRC_ALPHA,GL_ONE); glColorMaterial(GL_BACK, GL_DIFFUSE); Image* image = loadBMP("gambar.bmp"); _textureId = loadTexture(image); return; } void mydisplay(){ glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT); glMatrixMode(GL_MODELVIEW); glLoadIdentity(); glEnable(GL_TEXTURE_2D); glBindTexture(GL_TEXTURE_2D, _textureId); glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST); glTranslatef(0,0,p); glRotatef(s,rx,ry,rz); glPopMatrix(); glPushMatrix();

Page 329

glBegin(GL_QUADS); glTexCoord2f(0.0f, 0.0f); glVertex2f(-2.0f, 2.0f); glTexCoord2f(1.0f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.0f, 1.0f); glVertex2f(2.0f, 2.0f); glTexCoord2f(0.0f, 0.0f); glVertex2f(-2.0f, 2.0f); glEnd(); glPopMatrix(); glDisable(GL_TEXTURE); glutSwapBuffers(); } void resize(int w1, int h1){ glViewport(0,0,w1,h1); glMatrixMode(GL_PROJECTION); glLoadIdentity(); gluPerspective(50.0, (float) w1/(float) h1, 1.0,100.0); glMatrixMode(GL_MODELVIEW); glLoadIdentity();

Page 330

} void myKeyboard(unsigned char key, int x, int y) { if (key == 'y'){ rx=0; ry=1; rz=0; s +=10; } else if (key == 'x'){ rx=1; ry=0; rz=0; s +=10; } else if (key == 'z'){ rx=0; ry=0; rz=1; s +=10; } } void mySpecialKeyboard(int key, int x, int y) { switch(key){

Page 331

case GLUT_KEY_UP : p += 10; break; case GLUT_KEY_DOWN : p -= 10; break; } } void timer(int value){ glutPostRedisplay(); glutTimerFunc(100,timer,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("Modul 10 LAtihan 5"); glutDisplayFunc(mydisplay); glutReshapeFunc(resize); init(); glutTimerFunc(100,timer,0); glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard)

Page 332

; glClearColor(1,1,1,1); glutMainLoop(); }

Tampilan

Page 333

Penjelasan Pada saat pertama kali program

dijalankan hasil output yang ditampilkan adalah posisi tekstur pada gambar akan berurutan sesuai dengan pendeklarasian pada program. Jadi, untuk program di atas, posisi gambar akan terbalik karena urutan pendeklarasian pada gambar (tekstur) bukan dimulai dari titik (0,0). glTexCoord2f(1.f,0.f); dihubungkan dengan

glVertex2f(-2.f,-2.f); sehingga posisi b gambar akan berada pada pojok kiri bawah, yang mana seharusnya posisi a yang berada di pojok kiri bawah. dengan cberada glTexCoord2f(1.f,1.f); glVertex2f(2.f,-2.f); pada pojok dihubungkan posisi bawah. dengan

sehingga kanan

glTexCoord2f(0.f,1.f);

dihubungkan

glVertex2f(2.f,2.f); sehingga posisi d menempati posisi c semula, pada pojok kanan atas. Dan glTexCoord2f(0.f,0.f); dihubungkan dengan

glVertex2f(-2.f,2.f); sehingga posisi a berada pada pojok kiri atas. Apabila program tersebut dijalankan, gambar yang telah di-import tadi akan menampilkan hasilnya. Apabila ditekan huruf x, maka program akan berputar searah Page 334

sumbu x, ditekan huruf y, maka program akan berputar searah sumbu y, dan apabila ditekan huruf z, maka program akan berputar searah sumbu z, setelah itu apabila PgUp ditekan maka gambar(objek)tersebut akan bertambah besar, sedangkan apabila PgDn ditekan maka obyek tersebut akan bertambah kecil.

Efek texture diatas di dapat dari manipulasi fungsi vertex pada glTexCoord.

Page 335

DAFTAR PUSTAKA
. . Glut Tutorial (Keyboard). http://www.lighthouse3d.com/opengl/glut/index-php3?5. Online diakses pada tanggal 13 April 2013 ___. 2011. Komputer Grafik. http://dotsal.wordpress.com/2011/09/25/komputergrafik/ diakses tanggal 10 April 2013 _____, 2008. Primitif Grafika. Online. http://materiquliah.wordpress.com/2008/11/15/prim itif-grafika/. Diakses pada tanggal 17 April 2013. _____. 2012. Suplemen openGL glut turorial. (online)( http://ferygeps.files.wordpress.com/2012/12/suplem en_opengl-glut_tutorial.pdf ) diakses pada tanggal 6 April 2013. ______. _____. 3D Animation. Online. http://kelompokkami.wordpress.com/3d-animation/. Diakses pada tanggal 17 April 2013. ______. 2012. Animasi, Sejarah, dan Perkembangannya. Online. http://jagadgrafis.blogspot.com/2012/07/animasisejarah-dan-perkembangannya.html. Diakses pada tanggal 15 April 2013. ________. 2011. Opengl Transformations glscale sltranslate. (Online). (http://stackoverflow.com /questions/5360597/opengl-transformations-glscalegltranslate-etc). Diakses tanggal 13 April 2013. ________. 2012. Translasi, dan Rotasi Grafik Komputer. (Online). (http://kripiksukun.blogspot.com/2012

Page 336

/04/translasiskala-dan-rotasi-grafik.html). Diakses tanggal 12 April 2013. _________. 2013. Grafika Komputer3D. (Online). (http://id.wikipedia.org/wiki/Grafika_komputer_3D). Diakses tanggal 12 April 2013. __________. 2003. Looking for glscalef. (Online). (http://www.opengl.org/discussion_boards/showthre ad.php/135130-looking-for-glScalef-examples). Diakses tanggal 13 April 2013. Azizah, marina. 2011. Pemetaan Texture pada openGL. (online). (http://blog.um.ac.id/marina/2011/12/13/pemetaantexture-pada-opengl.com ) diakses pada tanggal 5 April 2013. Chua Hock-Chuan. 2012. 3D Graphics with OpenGL. Basic Theory. Deni.2009. Pengenalan OpenGL. putudeni.blogspot.com/2009/04/pengenalanopengl.html. Diakses tanggal 18 April 2013 . Eko Pusber. 2012. Jenis-jenis Keyboard komputer. http://pusber.-com/2012/12/jenis-jenis-keyboardkomputer/ Halidrus, Shofiya. _____. OpenGL. Online. http://blog.um.ac.id/shofiyahalidrus/teknikinformatika/grafika-komputer/open-gl/. Dikases tanggal 17 April 2013 Halidrus, Shofiyah. 2012. Lighting. Online, http://blog.um.ac.id/shofiyahalidrus/teknikinformatika/grafika-komputer/lighting/ diakses pada tanggal 1 April 2013 pukul 20.15 WIB

Page 337

Hendarto, Janoe, Drs, M Kom., 2006. Bahan Ajar Grafika Komputer. http://www.scribd.com/doc/74599978/GrafikaKomputer-Pemrograman-3D-www-digizoneku-com Diakses 13 April 2013 Henry.2010. Keyboard function in OpenGL. http://henry2005.-jimdo.com/2010/02/14/keyboardfunction-in-opengl/. (Diakses pada tanggal 14 April 2013.Pukul 16.18 WIB) http://amutiara.staff.gunadarma.ac.id/Downloads/files/2793 6/7+Grafik+Komp-Konsep++3D.pdf Diakses 13 April 2013 http://www.ntu.edu.sg/home/ehchua/programming/opengl/ CG_BasicsTheory.html Diakses 13 April 2013 http://www.transiskom.com/2010/08/pengertian-dan-jeniskeyboard. html .(Diakses pada tanggal 14 April 2013.Pukul 16.20 WIB) Iqbal, Rizal. 2012. Jenis-jenis Animasi di Dunia. http://tolastoles.blogspot.com/2012/11/jenis-jenisanimasi-di-dunia.html Jinsona. 2009.Sejarah Mouse Komputer. Online. http://ya2oke.blogspot.com/2009/04/sejarah-mousekomputer.html. diakses tanggal 14 April 2013 Kaskot. 2011. Kelebihan dan Kekurangan Mouse optic Logitech. http://www.kasurkotor.com/2011/03/kelebihan-dankekurangan-mouse-optic-logitech-m100/. Diakses tanggal 16 April 2013 Kilgrad, Mark. 1996. glutSpecialFunc(3Glut). http://wwwetud.iro.umontreal.ca/~clavetsi/api/glut/glutSpecialF unc.html.online diakses pada tanggal 13 April 2013. Page 338

Kilgrad, Mark. 1996. glutSpecialFunc. glutKeyboardFunc. http://www.opengl.org/resources/libraries/glut/spec 3/node49.html#944. (Diakses pada tanggal 14 April 2013.Pukul 16.15 WIB) Kilgrad, Mark. 1996. glutSpecialFunc. http://www.opengl.org/resources/libraries/glut/spec3/-node54.html#1044. (Diakses pada tanggal 14 April 2013.Pukul 16.16 WIB) Kilgrad, Mark. 1996. glutSpecialFunc. http://www.opengl.org/resource/libraries/glut/spec3/node54.html.online diakses pada tanggal 13 April 2013. Maliki, Irfan, S. T., Grafika Komputer. http://elib.unikom.ac.id/download.php?id=108172 Diakses 13 April 2013 Maliki, Irfan. 2010. Grafika Komputer. (Online). http://elib.unikom.ac.id/files/disk1/470/jbptunikomp p-gdl-irfanmalik-23471-1-modulgr-r.pdf. Diakses tanggal 9 April 2013. Maliki, Irfan.2010. Grafika Komputer. Yogyakarta ; Andi Offset. Mamiuri, Ruthpita Ruth. 2009. http://ruthpita.blogspot.com/. Diakses tanggal 16 Aptil 2013 Modul 4 Grafika Komputer Universitas Negeri Malang: Transformasi Objek. 2013. Modul Material Tekstur Praktikum Grafika Komputer Nandhi, angga. 2010. Pemetaan Texture. (online) (http://angganandhi.blogspot.com/2010/10/pemetaa n-tekstur.html ) diakses pada tanggal 6 April 2013. Noval. 2013. Animasi Beserta Jenis-jenis Animasi. http://novalismylove.blogspot.com/2013/04/animasidan-jenis-jenis-nya.html Page 339

Nur, Alivi Rosida. 2011. Membuat Jam Analog Menggunakan OpenGL. http://aliphoemarley.blogspot.com/2011/10/membu at-jam-analog-menggunakan-.opengl.html Official Website OpenGL. 1996. glutKeyboardFunc. (accessed at April 4th, 2013). http://www.opengl.org/resources/libraries/glut/spec3/node49.html#SECTION000840000000000 00000 Official Website Zeus Communication, Multimedia & Development. 2005. Keyboard Input. (accessed at April 4th, 2013). http://www.zeuscmd.com/tutorials/opengles/04Keyb oardInput.php Prihatmanto, Ary Setijadi. 2007. EC5130 Grafika Komputer dan Pemrograman GPU. Suplemen Diktat Kuliah. OpenGL Tutorial dengan GLUT: Fixed Pipeline. (Online). http://ferygeps.files.wordpress.com /2012/12/suplemen_opengl-glut_tutorial.pdf. Diakses tanggal 9 April 2013. Priyatmono, Dody. 2011. Jenis Animasi. Online. http://dodyandanimation.wordpress.com/2011/03/2 7/jenis-animasi-2/. Diakses pada tanggal 17 April 2013. Rahmat, Abdullah Basuki. 2012. Pencahayaan Pada OpenGL. http://tony911.files.wordpress. com/2012/09/modulprak-komgraf.pdf diakses pada tanggal 1 April 2013 pukul 20.02 WIB Saputra, Jacky. 2012. Grafika Komputer Translasi Rotasi dan Skala. (Online). (http://jackyrsaputra.blogspot.com

Page 340

/2012/04/grafika-komputer-translasi-rotasidan.html). Diakses tanggal 12 April 2013. Sputri, frizki. 2013. BAB 1 Texture Modelling. (online) (http://frizkisputri.blogspot.com/2013/02/bab-1texture-modelling.html ) diakses pada tanggal 5 April 2013. Subedi, Bibek. 2012. GLUT Tutorial Handling Keyboard Events.http://programmingtechnique.blogspot.com/ 2012/01/glut-tutorial-handling-keyboardevents.html. online diakses pada tanggal 13 April 2013. Swiftless Tutorials. 2010. OpenGL Keyboard Interaction (Version 2.0). (accessed at April 6th, 2013). http://www.swiftless.com/tutorials/opengl/keyboard .html Teknik Elektro UM: Modul 5 Praktikum Grafika Komputer Ulum, Miftahul. 2011. Transformasi Objek Dalam Grafika Komputer. (Online). (http://blog.um.ac.id /crazyrevo/2011/12/12/transformasi-objek-dalamgrafika-komputer/). Diakses tanggal 12 April 2013. Vanduto. 2010. Grafik Komputer. (online)( http://vandutto.blogspot.com/2010/10/grafikkomputer.html ) diakses pada tanggal 6 April 2013. Vicky. 2008. Online, http://vicknite.wordpress.com/category/open-gl/ diakses pada tanggal 1 April 2013 pukul 20.30 WIB Wikipedia. Texture. (Online) (http://www.opengl.org/wiki/ Texture) diakses pada tanggal 6 April 2013. Wikipedia.Papan ketik. http://id.wikipedia.org/wiki/Papan_ketik

Page 341

KONTRIBUTOR
BAB 1 KELOMPOK 3 dan 4 110533406975 Ika Rizki Choirunnisaa 110533406968 Jalu Febry Kesumaninggalih 110533406990 Muhammad Ridwan 110533406977 Nabilla Zamzamiyah BAB 2 KELOMPOK 1 dan 2 110533406994 Ahmad Rizqiyani P 110533406993 Ainun Fikri L 110533406989 Iman Budi Hutomo 110533406969 Selly Handik P BAB 3 KELOMPOK 19 dan 20 110533406995 Akhmad Aprilianto 110533406973 Alifian Ranum Herliantika 110533406986 Dewi Rizka Fithriyah 110533406992 Setia Putri BAB 4 KELOMPOK 7 dan 8 110533406976 Rafsanjaya Mahaputra 110533430504 Rizka Rahmania AmeIlia 110533406974 Sigma Akhiria Maulida 110533406964 Virginia Nurita BAB 5 KELOMPOK 11 dan 12 110533406996 Anik Triasih 110533406961 Armanda Prastyan Pratama 110533406991 Bahtiyar Hidayat 110533406963 Ria Suciati BAB 6 KELOMPOK 9 dan 10 110533406962 Ahmad Khakim Amrullah 110533406968 Anjar Dwi Rahmawati 110533406983 David Chandra Kusuma 110533406984 Dwi Panglipuringtias
Page 342

BAB 7 KELOMPOK 15 dan 16 110533406988 Nani Masrifah 110533406981 Nefi Liana 110533406997 Salwa Ika Wulandari 110533406987 Shofiana Fitri BAB 8 KELOMPOK 13 dan 14 110533406967 Aulia Rahmah 110533406960 Evania Kurniawati 110533406972 Ifanatun Nadhiroh 110533406979 M. Damaris Widigdya BAB 9 KELOMPOK 5 dan 6 110533406985 Akhsin Nurlaily 110533406978 Novi Adi Triswandi 110533406970 Novia Ratnasari 110533406982 Qoimatul Adilah BAB 10 KELOMPOK 17 dan 18 110533406959 Elsa Dwi Rochmah R 110533406971 Indri Widyarti 110533406965 Sotya Renaningwibi S 110533406980 Sulis Setyowati

Page 343

Page 344

Page 1