KATA PENGANTAR Page i

Transkripsi

1

2 KATA PENGANTAR Segala puji syukur kami ucapkan atas kehadirat Tuhan Yang Maha Esa dimana telah melimpahkan taufik serta hidayahnya sehingga kami dapat menyelesaikan buku Grafika Komputer Tingkat Pendidikan Perkuliahan untuk Mahasiswa Program Studi Pendidikan Teknik Informatika. Buku ini telah disusun untuk memberi kemudahan bagi mahasiswa dalam mengenal dan memahami tentang konsep OpenGL dan GLUT yang meliputi Pengantar Grafika Komputer, OpenGL dan GLUT, Primitive Objek, Transformasi Objek, Animasi, Interaksi Keyboard dan Mouse, Bangun 3 Dimensi, Lighting, dan Texture. Materi pada buku setiap tema bahasan dapat dikembangkan mahasiswa melalui keterampilan dan kreativitas dalam pemrograman menggunakan OpenGL sehingga dapat mendukung pengembangan dari kompetensi dasar itu sendiri. Penulisan buku ini diharapkan mahasiswa mampu mengembangkan kreativitasnya, baik secara mandiri maupun kelompok melalui pemahaman mengenai konsep serta materi yang ada pada setiap sub bahasan. Pada kesempatan kali ini penulis mengucapkan terima kasih kepada semua pihak yang telah memberi bantuan sehingga buku ini dapat terselesaikan. Buku ini jauh i

3 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, ii

4 DAFTAR ISI KATA PENGANTAR... i DAFTAR ISI... iii BAB PENGANTAR GRAFIKA KOMPUTER... 1 A. Pengertian Grafika Komputer 1 B. Sejarah Grafika Komputer 2 C. Peranan dan Penggunaan Grafika Komputer.3 E. Teknologi Display Komputer Grafik.15 BAB OPENGL dan GLUT A. SEJARAH OPENGL.21 B. PENGENALAN OPENGL.22 C. EVOLUSI OPENGL.24 D. GLUT (GL Utility Toolkit).25 E. CARA KERJA OPENGL.26 F. SET UP PROJECT BARU.30 BAB P R I M I T I F O B J E K A. Definisi Primitif Objek..34 B. Algoritma Pembentukan Objek.40 C. Contoh Program Primitif Objek 46 D. Latihan 48 iii

5 BAB Transformasi Objek A. Translasi.53 B. Rotate..56 C. Scale..66 D. Tutorial Urutan Transformasi.69 E. Implementasi Transformasi Objek..76 BAB ANIMASI A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA.85 B. JENIS-JENIS ANIMASI 96 C. Konsep Animasi pada GLUT..106 BAB INTERAKSI KEYBOARD A. STRUKTUR TOMBOL PADA KEYBOARD..117 B. PEMETAAN (MAPPING) C. JENIS-JENIS KEYBOARD.119 D. FUNGSI TOMBOL KEYBOARD KOMPUTER 125 E. KONSEP INPUTKEYBOARD PADA GLUT-KEY BIASA DAN SPECIAL KEY.126 BAB INTERAKSI OBJEK 2D (MOUSE FUNCTION) A. SEJARAH MOUSE dan JENIS MOUSE 136 B. FUNGSI MOUSE..148 iv

6 C. KONSEP MOUSE PADA GLUT..149 D. CONTOH PROGAM PENERAPAN MOUSE PADA GLUT.152 BAB OBJEK 3D A. Pengertian Objek 3 Dimensi.162 B. Objek 3 Dimensi 163 C. Alur Proses Rendering Grafis 3D 166 D. Sistem koordinat 3D..168 E. Primitive 3D.169 F. Transformasi Objek 3 Dimensi 172 G. Contoh Program dalam Open GL..177 H. Contoh Implementasi Objek 3 Dimensi dalam Open GL 208 BAB LIGHTING A. Pendahuluan 214 B. Pencahayaan pada OpenGL dan Dunia Nyata..216 C. Cahaya Ambient, Diffuse, dan Specular 219 D. Implementasi Pencahayaan (lighting) pada OpenGL..224 E. Contoh Program 226 BAB TEXTURE v

7 A. Pendahuluan 260 B. Konsep Texture Mapping 262 C. Teknik-teknik Realisme dalam Kompuer Grafik..263 D. Teknik-teknik dalam Geometri 267 E. Mip maps 270 F. Texture maping..273 G. Object Texture 274 H. Contoh penerapan material dan tekstur.275 DAFTAR PUSTAKA KONTRIBUTOR.337 vi

8 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. 1

9 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. 2

10 Mengembangkan teknik interaktif dengan sarana keyboard dan pena cahaya. Sejumlah projek penelitian dan produk Computer Aided Design/Manufacturing (CAD/CAM) telah muncul. 3. Fase Ketiga (1970) Grafika komputer interaktif telah digunakan oleh sektor industri, pemerintah dan ilmuawan untuk memperbaiki kualitas desain produk secara cepat dan mudah. 4. Fase Keempat ( ) 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 3

11 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 4

12 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. 5

13 4. Film Gambar 1.3. Adobe Photoshop CS 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. 6

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

15 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 8

16 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 : 9

17 - 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. 10

18 Sedangkan visualisasi data adalah teknik-teknik membuat image, diagram, atau animasi untuk Mengkomunikasikan pesan. Visualisasi telah menjadi cara yang efektif dalam mengkomunikasikan baik data atau ide abstrak maupun nyata sejak permulaan manusia. Contoh: visualisasi dari struktur protein, strutur suatu website, visualisasi hasil data mining. Contoh pengolahan citra dalam kehidupan sehari hari : 1.Bidang kesehatan, digunakan untuk rontgen tubuh manusia yang berfungsi untuk mengetahui ada atau tidaknya kelainan di tubuh. 2.Bidang visual, bisa digunakan untuk pemotretan lewat satelit, GPS, foto kamera dan lain-lain 10. Image Processing Image processing (pengolahan citra) merupakan teknik untuk memodifikasi atau menginterpretasi gambar yang ada, seperti foto dan rangkaian gambar film. Dua macam prinsip pengolahan citra adalah : Meningkatkan kualitas gambar. Memberikan persepsi dari informasi visual, seperti pada robotik. Untuk melakukan pengolahan citra, pertama-tama membuat digitasi dari foto atau membuat foto menjadi file image. Selanjutnya metode digital dapat digunakan untuk memodifikasi gambar sehingga mendapatkan kualitas yang baik. 11

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

20 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 13

21 1963, Ivan Shutherland (MIT), menggunakan sketcpad (Manipulasi langsung, CAD), alat untuk menampilkan vector. 1968, Evans & Shutherland. 1970, Pierre B eezier, pengembangan kurva B eezier 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. 14

22 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. 15

23 Diperlukan memori khusus untuk buffer citra dengan scan out sinkronous ke raster yang disebut framebuffer. Warna CRT s lebih rumit/sulit. Menggunakan pola warna phospors di layer: Delta electron gun arrangement In-line electron gun arrangement Sebuah electron gun memancarkan elektron, melalui focusing system (sistem untuk menentukan fokus), dan deflection system (sistem untuk mengatur pembelokan) sehingga pancaran elektron mencapai posisi tertentu dari lapisan fosfor pada layar. Kemudian, fosfor memancarkan sinar kecil pada setiap posisi yang berhubungan dengan pancaran elektron. Sinar yang dipancarkan dari fosfor cepat hilang, maka diperlukan pengaturan supaya fosfor tetap menyala. Hal ini dilakukan dengan cara refreshing, yaitu menembakkan elektron berulang kali pada posisi yang sama. Focusing system pada CRT diperlukan untuk mengarahkan pancaran elektron pada suatu titik tertentu dari lapisan fosfor. Pengaturan fokus dapat dilakukan pada electric dan magnetic field. Dengan electronic focusing, pancaran 16

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

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

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

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

28 BAB 2 OPENGL dan GLUT A. SEJARAH OPENGL Tahun 1980-an, mengembangkan perangkat lunak yang dapat berfungsi dengan berbagai hardware grafis adalah tantangan nyata. Pengembang perangkat lunak antarmuka dan kebiasaan menulis driver untuk setiap perangkat keras. Ini mahal dan mengakibatkan banyak duplikasi usaha. Pada awal 1990-an, Silicon Graphics (SGI) adalah seorang pemimpin dalam grafis 3D untuk workstation. Mereka IRIS GL API dianggap keadaan seni dan menjadi standar industri de facto, membayangi terbuka berbasis standar PHIGS. Ini karena GL IRIS dianggap lebih mudah digunakan, dan karena itu mendukung modus langsung rendering. By contrast, Sebaliknya, PHIGS dianggap sulit untuk digunakan dan ketinggalan zaman dalam hal fungsionalitas. SGI s pesaing (termasuk Sun Microsystems, Hewlett- Packard dan IBM) juga dapat membawa ke pasar 3D hardware, didukung oleh ekstensi yang dibuat pada PHIGS standar. Hal ini pada gilirannya menyebabkan pangsa pasar SGI untuk melemahkan karena lebih banyak hardware grafis 3D pemasok memasuki pasar. Dalam upaya untuk mempengaruhi pasar, SGI memutuskan untuk mengubah IrisGL API menjadi standar terbuka. SGI menganggap bahwa IrisGL API itu sendiri tidak cocok untuk membuka karena masalah lisensi dan paten. Juga, IrisGL memiliki fungsi-fungsi API yang tidak relevan dengan grafis 3D. Sebagai contoh, 21

29 termasuk windowing, keyboard dan mouse API, sebagian karena dikembangkan sebelum Sistem X Window dan Sun s NEWS sistem dikembangkan. Selain itu, SGI memiliki sejumlah besar pelanggan perangkat lunak; dengan mengubah ke OpenGL API mereka berencana untuk mempertahankan pelanggan mereka terkunci ke SGI (dan IBM) hardware untuk beberapa tahun sementara pasar dukungan untuk OpenGL matang. Sementara itu, SGI akan terus berusaha untuk mempertahankan pelanggan mereka terikat pada hardware SGI dengan mengembangkan maju dan kepemilikan Iris Inventor dan Iris Performer pemrograman API. Akibatnya, SGI merilis standar OpenGL. B. PENGENALAN OPENGL OpenGL adalah sebuah program aplikasi interface yang digunakan untuk mendefinisikan komputer grafis 2D dan 3D. Program lintas-platform API ini umumnya dianggap ketetapan standar dalam industri komputer dalam interaksi dengan komputer grafis 2D dan juga telah menjadi alat yang biasa untuk digunakan dengan grafis 3D. Singkatnya, Open Graphics Library, OpenGL menghilangkan kebutuhan untuk pemrogram untuk menulis ulang bagian grafis dari sistem operasi setiap kali sebuah bisnis akan diupgrade ke versi baru dari sistem. Fungsi dasar dari OpenGL adalah untuk mengeluarkan koleksi perintah khusus atau executable ke sistem operasi. Dengan demikian, program ini bekerja dengan perangkat keras grafis yang ada yang berada pada hard drive atau sumber tertentu lainnya. Setiap perintah dalam dirancang untuk melakukan tindakan tertentu, atau memulai efek khusus tertentu yang terkait dengan grafis. 22

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

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

32 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 25

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

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

35 messagedlg{ e.message, mterror, [mbok],; Halt {1; End; End; Script di atas merupakan script yang paling sederhana, dalam artian minimal diperlukan untuk menginisialisasi penggunaan opengl.fungsi-fungsi lain seperti yang disebut diatas seperti glviewport, glmatrixmode, dapat di tambah kan pada script sesuai dengan kebutuhan. Pembuatan gambar Didalam opengl pembuatan obyek dilakukan dengan titik-titik 3 dimensi,dengan mode GL_QUARDS, maka otomatis setiap 4 titik digambar menjadi sebuah bidang segiempat,sedangkan mode GL_LINES, pada setiap 2 titik digambar manjadi sebuah garis.di dalam tahap ini setiap garis atau bidang juga dapat di atur warnanya. Fungsi atau prosedur yang digunakan : mode GL_QUARDS menggambarkan segi empat mode GL_LINES menggambark garis glvertex3f- penentuan titik 3 dimensi glcolor3f penentuan warna 28

36 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 fungsi OpenGL yang 29

37 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 30

38 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. 31

39 Gambar 1.3 Konfigurasi pada Project Properties Gambar 1.4a menambah lokasi file include Gambar 1.4b Pemilihan folder yang berisi glut.h 32

40 5. Menciptakan file baru dengan nama cg-0.cpp. Gambar 1.5a Menambahkan item baru Gambar 1.5b Menambahkan file c++ baru 33

41 BAB 3 P R I M I T I F O B J E K A. Definisi Primitif Objek Primitif objek merupakan salah satu subbab dari grafika komputer yang terdiri dari titik, garis dan bangun dua dimensi. Dalam grafika komputer penghasilan citra menggunakan primitive grafik dasar, primitif ini memudahkan untur merender atau menggambar pada layar monitor sebagaimana penggunaan persamaan geometri sederhana. Contoh primitive grafika dasar antara lain : titik, garis, kurva, fill area dan text. Objek kompleks dapat dibuat dengan kombinasi dari primitive ini. Misalkan, Poligaris atau yang dapat didefinisikan sebagai urutan garis lurus yang saling terhubung. Secara umum algoritma grafis memiliki persamaan yaitu bagaimana menampilkan hasil. Primitive grafis yang umum dijelaskan pada tabel berikut : 34

42 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) 35

43 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 36

44 # 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 37

45 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 38

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

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

48 setpixel(x,y) bila nilai x dan y sudah tersimpan pada frame buffer untuk dapat menampilkannya pada layer menggunakan fungsi dasar getpixel(x,y). Algoritma DDA Algoritma Digital Differential Analyzer (DDA) adalah algoritma pembentukan garis berdasarkan perhitungan dx maupun dy dengan menggunakan rumus dy = m.dx. Garis dibuat dengan menentukan dua endpoint yaitu titik awal dan titik akhir. Setiap koordinat titik yang membentuk garis diperoleh dari perhitungan kemudian dikonversikan menjadi nilai integer. Keuntungan dari algoritma ini adalah tidak perlu menghitung koordinat berdasarkan persamaan yang lengkap (menggunakan metode offset). Sedangkan kerugiannya adalah adanya akumulasi Round-off errors, sehingga garis akan melenceng dari garis lurus, selain itu operasi round-off juga menghabiskan waktu. Algoritma pembentukan garis DDA adalah sebagai berikut : void linedda (int x0, int y0, int xend, int yend) { int dx = xend - x0, dy = yend - y0, steps, k; float xincrement, yincrement, x = x0, y = y0; if (fabs (dx) > fabs (dy)) steps = fabs (dx); else steps = fabs (dy); xincrement = float (dx) / float (steps); 41

49 yincrement = float (dy) / float (steps); setpixel (round (x), round (y)); for (k = 0; k < steps; k++) { x += xincrement; y += yincrement; setpixel (round (x), round (y)); Algoritma Pembentukan Lingkaran Lingkaran merupakan objek grafik yang paling sering digunakan pada grafik sederhana. Lingkaran dapat didefinisikan sebagai kumpulan titik yang memiliki jarak r dari posisi pusat (xc,yc). Persamaan lingkaran dengan titik pusat (xc,yc) dan radius r dapat dispesifikasikan menggunakan koordinat rectangular berikut : (x xc)2 + (y-yc)2 = r2 Lingkaran juga dapat didefinisikan menggunakan koordinat polar. Lingkaran yang sama dapat didefinisikan sebagai berikut : x = r cos _ + xc y = r sin _ + yc dimana 0 _ 2_ Kita dapat menggambarkan lingkaran dengan menggunakan persamaan koordinat rectangular diatas, akan tetapi pendekatan ini menimbulkan dua masalah yaitu : 42

50 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 : 43

51 Gambar lingkaran dengan 8 oktan : Tahapan penggambaran lingkaran dengan menggunakan algoritma yang dikenal dengan nama algoritma midpoint ini adalah sebagai berikut : 44

52 1. Input jari-jari r dan koordinat pusat lingkaran (xc, yc), kemudian tentukan koordinat untuk titik awal yaitu (xo, y0) = (0, r). 2. Hitung nilai awal untuk parameter keputusan p0 = 1 r 3. Untuk setiap xk, mulai dari k=0, lakukan langkah berikut : jika pk<0, maka titik selanjutnya pada lingkaran dengan pusat (0,0) adalah (xk + 1, yk) dan pk+1 = pk + 2 xk+1 + 1, jika pk0, titik berikutnya adalah (xk+ 1, yk - 1) dan pk+1 = pk + 2 xk yk+1 dimana 2 xk+1 = 2 xk + 2, dan 2 yk+1 = 2 yk 2 4. Tentukan titik simetri untuk 7 oktan lainnya. 5. Untuk lingkaran dengan pusat bukan di (0,0). Pindahkan setiap posisi pixel hasil perhitungan (x, y) dengan rumus x = x + xc, y = y + yc 6. Ulangi langkah 3 sampai 5, hentikan ketika x >= y Contoh Penerapan algoritma midpoint untuk mengggambarkan lingkaran. Contoh 1: lingkaran dengan persamaan X2 + Y2 =100 45

53 C. Contoh Program Primitif Objek Primitif Point (GL_POINTS) 46

54 Primitif (GL_LINES) 47

55 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. 48

56 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. 49

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

58 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. 51

59 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 52

60 - 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 t x,t y. 53

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

62 glend(); glvertex2f(200.,0.); 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); 55

63 glutdisplayfunc(render); glutmainloop(); Dengan output sebagai berikut: B. Rotate Gambar 4.3 Translasi 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 56

64 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 57

65 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 58

66 void Rotate(void) { hari += 2; if(hari > 360) hari = hari - 360; tahun +=.1; if(tahun > 360) tahun = tahun - 360; glutpostredisplay(); void garisorbit(float rad, float inc) { glpushmatrix(); float y = 0.0; glcolor3f(1.0, 1.0, 1.0); glbegin(gl_points); for(float sudut = 0; sudut <= 360; sudut+=inc) { float x = rad*sin((sudut)*phi/180); float z = rad*cos((sudut)*phi/180); Rotasi pergerakan untuk planet dan bulan. Hari menunjukkan perputaran bulan dan tahun menunjukkan perputaran planet Garis orbit untuk menunjukkan perputaran planet yang beraturan dan tetap pada tempatnya 59

67 glvertex3f(x, y, z); glend(); glpopmatrix(); void merkurius(void) { glpushmatrix(); garisorbit(5.5, 1); glrotatef(tahun*9, 0.0, 1.0, 0.0); gltranslatef(5.5, 0.0, 0.0); glutsolidsphere(0.4, 10, 8); glpopmatrix(); void fungsikeyboard(void) { if(getasynckeystate(vk_left) ) { jarakx += (cos((rot+90)*phi/180))/2; Penggambaran planet dan rotasinya. Untuk pembuatan planet hampir sama fungsi yang digunakannya, yang membedakanny a hanya nilai dari setiap komponen. Void ini untuk interaksi yang dilakukan oleh keyboard yaitu 1. Dengan menekan 60

68 jarakz += - (sin((rot+90)*phi/180))/2; if(getasynckeystate(vk_right )) { jarakx += (cos((rot- 90)*phi/180))/2; jarakz += -(sin((rot- 90)*phi/180))/2; if(getasynckeystate(vk_up)) { jarakx += (cos(rot*phi/180)* cos(pitch*phi/180))/2; jarakz += - (sin(rot*phi/180) * cos(pitch*phi/180))/2; jaraky += sin(pitch*phi/180); if(getasynckeystate(vk_down) ) { tombol Up maka gambar akan menjauhi layar 2. Dengan menekan tombol Down maka gambar akan mendekati layar 3. Dengan menekan tombol Right maka gambar akan bergerak ke arah kiri 4. Dengan menekan tombol Left maka gambar akan bergerak ke arah kanan 61

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

70 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; 63

71 glutpostredisplay(); Tampilan Objek Ini adalah tampilan awal perputaran planet terhadap matahari Gambar 4.6 Perputaran planet terhadap matahari 64

72 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 65

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

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

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

76 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. 69

77 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> 70

78 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 71

79 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 72

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

81 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; 74

82 int main(int argc, char** argv) { glutinit(&argc,argv); //glutinitdisplaymode( GLUT_DOUBLE /* GLUT_DEPTH*/ ); glutinitdisplaymode( GLUT_DOUBLE GLUT_DEPTH ); Tambahan: glutinitwindowsize(500,500); glutinitwindowposition(0,0); glutcreatewindow("simple"); // callbacks glutdisplayfunc(mydisplay); glutkeyboardfunc(mykeyboard); gluttimerfunc(100, mytimeout, 0); glutreshapefunc(resize); init(); glutmainloop(); return 0; 75

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

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

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

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

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

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

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

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

91 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 84

92 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. 85

93 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 86

94 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. 87

95 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. 88

96 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. 89

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

98 b. (Joseph Plateu ) 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. 91

99 c. Zeotrope (Pierre Desvignes ) 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. 92

100 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. 93

101 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 ) 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 94

102 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 95

103 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 96

104 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 97

105 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 98

106 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. 99

107 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 100

108 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. 101

109 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 102

110 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, 103

111 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 104

112 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 105

113 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 dasarbpembuatan animasi dengan menggunakan TimerFunction GLUTAPI void APIENTRY gluttimerfunc(unsigned int millis, void (GLUTCALLBACK *func)(int value), int value); 106

114 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 float sudut = 0; int i,n; 107

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

116 glend(); glvertex2i(0,200); 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); 109

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

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

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

120 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){ 113

121 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(){ 114

122 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: 115

123 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 116

124 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 117

125 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 118

126 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) Pemetaan ini mengatasi kekurangan 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 119

127 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 120

128 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 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) 121

129 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. 122

130 3. KEYBOARD DVORAK Ditemukan pada tahun 1932 dengan dirancang lebih efisien % 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 123

131 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. 124

132 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 Up : untuk meggerakan cursor 1 layar ke atas 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 125

133 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. 126

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

135 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 128

136 memiliki fungsi yang sama, hanya berbeda pada penamaannya yaitu, keyup. 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 2 8 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 (0-255) kemudian dilanjutkan dengan pendeklarasian masingmasing method. void keypressed(unsigned char key, int x, int y) { 129

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

138 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 131

139 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 Up function key Down 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; break; case GLUT_KEY_UP : c+=0; d+=4; break; case GLUT_KEY_DOWN : c+=0; d+=-4; break; 132

140 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; 133

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

142 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. 135

143 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 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 136

144 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 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 137

145 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 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 138

146 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 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. 139

147 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 140

148 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. 141

149 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. 142

150 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. 143

151 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 144

152 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 145

153 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 146

154 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. 147

155 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: 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. 148

156 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 149

157 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 y){ void mouse(int button, int state, int x,int 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){ 150

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

159 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(){ 152

160 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"); 153

161 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(). 154

162 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"); 155

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

164 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, 157

165 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) { 158

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

167 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 160

168 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. 161

169 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 162

170 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 163

171 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 vertex i vertex i+1 kecuali untuk edge terakhir merupakan pasangan dari vertex n vertex 1. Gambar 8. 3 Objek 3D yang tersusun dari kumpulan poligon 164

172 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 165

173 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 166

174 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. 167

175 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 parameter. Melakukan beragam operasi 2D. 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 168

176 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 E. Primitive 3D kanan Ada beberapa bentuk primitive dari objek 3 dimensi. Promitive yaitu bentuk dasar yang dapat dengan mudah didefinisikan secara matematik. Sphere glutwiresphere(5, 20, 20); 169

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

178 Gambar 8. 4 bola segilima Teapot glutwireteapot(15); Gambar 8. 5 Poci The Torus glutwiretorus(luar, dalam, 20, 20); Gambar 8. 6 cincin 171

179 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 t x, t y, dan t z menjelaskan perpindahan jarak untuk koordinat x, y, dan z. Gambar 8. 7 memindahkan titik dengan translasi vektor T = (t x, t y, t z ) 172

180 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=(t x, t y, t z ) 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); 173

181 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. 174

182 Gambar 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 175

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

184 G. Contoh Program dalam Open GL 1. Contoh Penerapan Cube pada GLUT Cube menggunakan fungsi void glutwirecube(gldouble size); 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, 177

185 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; 178

186 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. 179

187 - Dengan interaksi keyboard y, maka objek akan bergerak pada sumbu y saja. 2. Contoh Penerapan WireSphere pada GLUT WireSphere menggunakan fungsi void glutwiresphere(gldouble radius,glint 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 180

188 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'){ 181

189 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 182

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

191 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; 184

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

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

194 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. 187

195 - Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja. 4. Contoh Penerapan Torus pada GLUT Torus menggunakan fungsi void glutwiretorus(gldouble innerradius, GLdouble outerradius,glint nsides, GLint rings); 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; 188

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

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

198 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. 191

199 - Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja. 5. Contoh Penerapan Dose pada GLUT Dode menggunakan 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: #include<stdlib.h> #include<glut.h> float w=480,h=480; float sudut=0,sx=0,sy=0,sz=0,t=-7; 192

200 void wiredode(){ glcolor3d(0,1,0); glutwiredodecahedron(); fungsi disamping adalah bentuk pendeklarasian fungsi Dode 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(); 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){ 193

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

202 Hasil glutkeyboardfunc(mykeyboard); glutmainloop(); - 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. 195

203 - Dengan interaksi keyboard z, objek akan bergerak pada sumbu z saja. 6. Contoh Penerapan TetraHedron pada GLUT TetraHedron menggunakan 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); 196

204 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; 197

205 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 198

206 - 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. 199

207 7. Contoh Penerapan OctaHedron pada GLUT OctaHedron 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: #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(); fungsi disamping adalah bentuk pendeklarasian fungsi OctaHedron 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(); 200

208 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){ 201

209 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. 202

210 - 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 203

211 Teapot menggunakan fungsi void glutwireteapot(gldouble size); 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(); 204

212 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){ 205

213 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 206

214 - 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. 207

215 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 208

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

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

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

219 Hasil glutinitwindowposition(100,100); glutinitwindowsize(w,h); glutcreatewindow("boneka Salju"); glutdisplayfunc(display); glutreshapefunc(resize); init(); gluttimerfunc(50,update,0); glutkeyboardfunc(mykeyboard); glutmainloop(); - 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. 212

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

221 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 214

222 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. 215

223 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 216

224 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 217

225 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 218

226 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 219

227 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. 220

228 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 : 221

229 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, GL_POSITION, lightpos); // mengkonfigurasi sumber cahaya glenable(gl_lighting); glenable(gl_light0); 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 : 222

230 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: 223

231 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: 224

232 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 225

233 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 dan skala glpushmatrix(); gltranslated(0.5,0.5,0.5);//cube glscaled(1.0,1.0,1.0); glutsolidcube(1.0); glpopmatrix(); void setmaterial() 226

234 { //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 227

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

236 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"); 229

237 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 230

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

239 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){ 232

240 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); zz); rumah glrotatef(sudut, xx, yy, glpushmatrix(); //tembok 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); 0.05); gltranslatef(0, 0.7,- 233

241 glcolor3f(0, 0, 1); 0); glrotatef(45, 0, 1, glutsolidoctahedron(); glpopmatrix(); glpushmatrix(); glcolor3f(1, 1, 1); 0.5); gltranslatef(-3, -0.8, glscalef(0.5, 0.8,1); glutsolidcube(9); glpopmatrix(); glpushmatrix(); //pintu glcolor3f(1, 1, 1); 0.5); gltranslatef(2, 1.3, glscalef(0.5, 0.3,1); glutsolidcube(10); glpopmatrix(); 234

242 kanan glpushmatrix(); //pagar pagar(); 0.0); gltranslatef(-9.0, 0.0, pagar(); gltranslatef(9.0, 0.0, 0.0);//pagar depan glrotatef(-90, 0, 1, 0); pagar(); 0.0); gltranslatef(-8.0, 0.0, pagar(); gltranslatef(9.0, 0.0, 0.0); //pagar kiri glrotatef(-90, 0, 1, 0); pagar(); 0.0); gltranslatef(-9.0, 0.0, pagar(); gltranslatef(9.0, 0.0, 0.0); //pagar belakang glrotatef(-90, 0, 1, 0); 235

243 pagar(); 0.0); gltranslatef(-8.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; 236

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

245 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; 238

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

247 glutkeyboardfunc(mykeyboard); glutmainloop(); Screenshoot output : Contoh program Level Experd Membuat danbo lighting sederhana dengan pencahayaan Silver Danbo Syntax #include<stdlib.h> #include<glut.h> 240

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

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

250 //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 243

251 //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(); 244

252 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 245

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

254 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 247

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

256 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; 249

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

258 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 251

259 252

260 253

261 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 254

262 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 255

263 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

264 a. b. c. 257

265 d. e. 9. Untuk menghasilkan objek seperti gambar di bawah menggunakan fungsi

266 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() 259

267 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 260

268 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 261

269 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 262

270 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 263

271 pada grafis 3D dirintis oleh Dr Edwin Catmull pada proyek Ph.D tesisnya tahun 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. 264

272 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 " 265

273 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 266

274 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 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. 267

275 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 1- dimensi. Memiliki lebar, tapi tidak memiliki ketinggian atau kedalaman. GL_TEXTURE_2D: semua gambar dalam tekstur ini 2- dimensi. Memiliki lebar dan tinggi, namun tidak punya kedalaman. GL_TEXTURE_3D: semua gambar dalam tekstur ini 3- dimensi. Memiliki lebar, tinggi, dan kedalaman. 268

276 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. 269

277 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 array adalah GL_MAX_ARRAY_TEXTURE_LAYERS. Untuk tekstur 3D, dimensi tidak boleh lebih besar dari GL_MAX_3D_TEXTURE_SIZE dalam ukuran. 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 270

278 "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. 271

279 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. 272

280 F. Texture maping (1.0, (0.0, 1.0) 0.0) (0.0, 0.0) Obyek CG Obyek CG Proses texture mapping (2) Obye k CG (0.0, 0.0) Obye k CG 273

281 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. 274

282 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; 275

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

284 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( , 1.0, ); gltexcoord2f(1.0, 0.0); glvertex3f( , -1.0, ); glend(); glflush(); 277

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

286 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 279

287 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 from 0 to 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. 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); #endif Syntax cpp 280

288 #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; 281

289 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) { char)bytes[1] << 8) return (short)(((unsigned (unsigned char)bytes[0]); int readint(ifstream &input) { 282

290 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; 283

291 array!= NULL) { array; ~auto_array() { if (!isreleased && delete[] 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; 284

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

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

294 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]); 287

295 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] = c)]; pixels[bytesperrow * y + 3 * x + (2 - input.close(); return new Image(pixels2.release(), width, height); void init(){ GLfloat LightPosition[]={-10.0f, 20.0f, 20.0f, 0.0f; glshademodel(gl_smooth); 288

296 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, 289

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

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

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

300 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 : 293

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

302 Hasil Output: Tampilan awal: Apabila ditekan tombol x 295

303 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 296

304 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 297

305 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) koordinat dan RG-xy 298

306 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 = { , ,2, -0, * 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 299

307 //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 from 0 to 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. 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); 300

308 #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 301

309 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; 302

310 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) { char)bytes[1] << 8) return (short)(((unsigned (unsigned char)bytes[0]); 303

311 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<t> &aarray) { auto_array(const array = 304

312 aarray.array; aarray.isreleased; 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[] 305

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

314 array = array_; i; T* operator+(int i) { return array + ; 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); 307

315 //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) ==

316 !"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]); 309

317 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(){ 310

318 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); GL_DIFFUSE); glblendfunc(gl_src_alpha,gl_one); glcolormaterial(gl_back, Image* image = loadbmp("gambar.bmp"); _textureid = loadtexture(image); return; void mydisplay(){ 311

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

320 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; 313

321 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 314

322 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 315

323 Penjelasan 316

324 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 syntax dengan masing masing 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 317

325 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 318

326 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 319

327 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) 320

328 ((unsigned char)bytes[1] << 8) (unsigned char)bytes[0]); short toshort(const char* bytes) { char)bytes[1] << 8) return (short)(((unsigned (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: 321

329 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; 322

330 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; 323

331 true; T* release() { isreleased = return array; void reset(t* array_ = NULL) { if (!isreleased && array!= NULL) { delete[] array; array = array_; i; T* operator+(int i) { return array + ; T &operator[](int i) { return array[i]; Image* loadbmp(const char* filename) { 324

332 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"); 325

333 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 326

334 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] = 327

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

336 glenable(gl_color_material); GL_DIFFUSE); glblendfunc(gl_src_alpha,gl_one); glcolormaterial(gl_back, 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(); 329

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

338 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){ 331

339 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) 332

340 ; glclearcolor(1,1,1,1); glutmainloop(); Tampilan 333

341 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. gltexcoord2f(1.f,1.f); dihubungkan dengan glvertex2f(2.f,-2.f); sehingga posisi cberada pada pojok kanan bawah. gltexcoord2f(0.f,1.f); dihubungkan dengan 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 334

342 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. 335

343 DAFTAR PUSTAKA.. Glut Tutorial (Keyboard). lighthouse3d.com/opengl/glut/index-php3?5. Online diakses pada tanggal 13 April Komputer Grafik. diakses tanggal 10 April 2013, Primitif Grafika. Online. itif-grafika/. Diakses pada tanggal 17 April Suplemen opengl glut turorial. (online)( en_opengl-glut_tutorial.pdf ) diakses pada tanggal 6 April D Animation. Online. Diakses pada tanggal 17 April Animasi, Sejarah, dan Perkembangannya. Online. Diakses pada tanggal 15 April Opengl Transformations glscale sltranslate. (Online). ( /questions/ /opengl-transformations-glscalegltranslate-etc). Diakses tanggal 13 April Translasi, dan Rotasi Grafik Komputer. (Online). ( 336

344 /04/translasiskala-dan-rotasi-grafik.html). Diakses tanggal 12 April Grafika Komputer3D. (Online). ( Diakses tanggal 12 April Looking for glscalef. (Online). ( ad.php/ looking-for-glscalef-examples). Diakses tanggal 13 April Azizah, marina Pemetaan Texture pada opengl. (online). ( ) diakses pada tanggal 5 April Chua Hock-Chuan D Graphics with OpenGL. Basic Theory. Deni Pengenalan OpenGL. putudeni.blogspot.com/2009/04/pengenalanopengl.html. Diakses tanggal 18 April Eko Pusber Jenis-jenis Keyboard komputer. Halidrus, Shofiya.. OpenGL. Online. Dikases tanggal 17 April 2013 Halidrus, Shofiyah Lighting. Online, diakses pada tanggal 1 April 2013 pukul WIB 337

345 Hendarto, Janoe, Drs, M Kom., Bahan Ajar Grafika Komputer. Komputer-Pemrograman-3D-www-digizoneku-com Diakses 13 April 2013 Henry Keyboard function in OpenGL. (Diakses pada tanggal 14 April 2013.Pukul WIB) 6/7+Grafik+Komp-Konsep++3D.pdf Diakses 13 April CG_BasicsTheory.html Diakses 13 April html.(diakses pada tanggal 14 April 2013.Pukul WIB) Iqbal, Rizal Jenis-jenis Animasi di Dunia. Jinsona Sejarah Mouse Komputer. Online. diakses tanggal 14 April 2013 Kaskot Kelebihan dan Kekurangan Mouse optic Logitech. Diakses tanggal 16 April 2013 Kilgrad, Mark glutspecialfunc(3glut). unc.html.online diakses pada tanggal 13 April

346 Kilgrad, Mark glutspecialfunc. glutkeyboardfunc. 3/node49.html#944. (Diakses pada tanggal 14 April 2013.Pukul WIB) Kilgrad, Mark glutspecialfunc. resources/libraries/glut/spec3/-node54.html#1044. (Diakses pada tanggal 14 April 2013.Pukul WIB) Kilgrad, Mark glutspecialfunc. /resource/libraries/glut/spec3/node54.html.online diakses pada tanggal 13 April Maliki, Irfan, S. T., Grafika Komputer. Diakses 13 April 2013 Maliki, Irfan Grafika Komputer. (Online). p-gdl-irfanmalik modulgr-r.pdf. Diakses tanggal 9 April Maliki, Irfan Grafika Komputer. Yogyakarta ; Andi Offset. Mamiuri, Ruthpita Ruth Diakses tanggal 16 Aptil 2013 Modul 4 Grafika Komputer Universitas Negeri Malang: Transformasi Objek Modul Material Tekstur Praktikum Grafika Komputer Nandhi, angga Pemetaan Texture. (online) ( n-tekstur.html ) diakses pada tanggal 6 April Noval Animasi Beserta Jenis-jenis Animasi

347 Nur, Alivi Rosida Membuat Jam Analog Menggunakan OpenGL. at-jam-analog-menggunakan-.opengl.html Official Website OpenGL glutkeyboardfunc. (accessed at April 4 th, 2013). glut/spec3/node49.html#section Official Website Zeus Communication, Multimedia & Development Keyboard Input. (accessed at April 4 th, 2013). oardinput.php Prihatmanto, Ary Setijadi EC5130 Grafika Komputer dan Pemrograman GPU. Suplemen Diktat Kuliah. OpenGL Tutorial dengan GLUT: Fixed Pipeline. (Online). /2012/12/suplemen_opengl-glut_tutorial.pdf. Diakses tanggal 9 April Priyatmono, Dody Jenis Animasi. Online. 7/jenis-animasi-2/. Diakses pada tanggal 17 April Rahmat, Abdullah Basuki Pencahayaan Pada OpenGL. com/2012/09/modulprak-komgraf.pdf diakses pada tanggal 1 April 2013 pukul WIB Saputra, Jacky Grafika Komputer Translasi Rotasi dan Skala. (Online). ( 340

348 /2012/04/grafika-komputer-translasi-rotasidan.html). Diakses tanggal 12 April Sputri, frizki BAB 1 Texture Modelling. (online) ( texture-modelling.html ) diakses pada tanggal 5 April Subedi, Bibek GLUT Tutorial Handling Keyboard Events /01/glut-tutorial-handling-keyboardevents.html. online diakses pada tanggal 13 April Swiftless Tutorials OpenGL Keyboard Interaction (Version 2.0). (accessed at April 6 th, 2013). Teknik Elektro UM: Modul 5 Praktikum Grafika Komputer Ulum, Miftahul Transformasi Objek Dalam Grafika Komputer. (Online). ( /crazyrevo/2011/12/12/transformasi-objek-dalamgrafika-komputer/). Diakses tanggal 12 April Vanduto Grafik Komputer. (online)( ) diakses pada tanggal 6 April Vicky Online, diakses pada tanggal 1 April 2013 pukul WIB Wikipedia. Texture. (Online) ( Texture) diakses pada tanggal 6 April Wikipedia.Papan ketik

349 KONTRIBUTOR BAB 1 KELOMPOK 3 dan Ika Rizki Choirunnisaa Jalu Febry Kesumaninggalih Muhammad Ridwan Nabilla Zamzamiyah BAB 2 KELOMPOK 1 dan Ahmad Rizqiyani P Ainun Fikri L Iman Budi Hutomo Selly Handik P BAB 3 KELOMPOK 19 dan Akhmad Aprilianto Alifian Ranum Herliantika Dewi Rizka Fithriyah Setia Putri BAB 4 KELOMPOK 7 dan Rafsanjaya Mahaputra Rizka Rahmania AmeIlia Sigma Akhiria Maulida Virginia Nurita BAB 5 KELOMPOK 11 dan Anik Triasih Armanda Prastyan Pratama Bahtiyar Hidayat Ria Suciati BAB 6 KELOMPOK 9 dan Ahmad Khakim Amrullah Anjar Dwi Rahmawati David Chandra Kusuma Dwi Panglipuringtias 342

350 BAB 7 KELOMPOK 15 dan Nani Masrifah Nefi Liana Salwa Ika Wulandari Shofiana Fitri BAB 8 KELOMPOK 13 dan Aulia Rahmah Evania Kurniawati Ifanatun Nadhiroh M. Damaris Widigdya BAB 9 KELOMPOK 5 dan Akhsin Nurlaily Novi Adi Triswandi Novia Ratnasari Qoimatul Adilah BAB 10 KELOMPOK 17 dan Elsa Dwi Rochmah R Indri Widyarti Sotya Renaningwibi S Sulis Setyowati 343

351 344

352 1