Anda di halaman 1dari 180

1

KATA PENGANTAR
Puji Syukur kehadirat Tuhan Yang Mahakuasa yang telah berkenanmenganugerahkan kesempatan sehingga buku Grafika Komputer Tingkat Perkuliahan untuk Mahasiswa Universitas Negeri Malang Pendidikan Teknik Informatika ini dapat diselesaikan oleh penulis. Buku ini disusun untuk memudahkan Mahasiswa dalammemahami konsep openGL yang meliputi Pengantar dan Sejarah Grafkom, Teknologi Grafkom, Pengantar dan Instalasi GLUT, Primitive Object, Transformasi Objek , Interaksi Keyboard dan Mouse, Material Warna, Lighting, Animasi, Objek 3D serta Texture. Penulisan buku inidiharapkan mahasiswa dapat mengembangkan keterampilan dankreativitas, baik secaramandiri maupun kelompok, melalui pemahaman konsepdan wacana serta pelatihanpelatihan dalam setiap babnya. Materi dalam buku ini disajikan secara tematik. Setiap tema pada bahasandapat dikembangkan siswa melalui keterampilan dan kreativitaspemrograman menggunakan openGLsehingga diharapkan dapat mendukung pengembangan setiap kompetensi dasar. Dalam hal ini mahasiswa diajak untuk berperan aktif sebagai pelaku utama dalampembelajaran.Pada kesempatan ini penulis mengucapkan terima kasih kepada semuapihak yang berkenan memberikan kritik dan saran dalam rangka penyempurnaanbuku ini di kemudian hari. Akhirnya penulis berharap dengan terbitnya bukuini dapat memberikan motivasi yang positif bagi guru dan mahasiswaUniversitas Negeri Malang padasemua program keahlian terutama bidang Informatika yang berkaitan erat dengan pemrograman. Penulis

ii DAFTAR ISI

KATA PENGANTAR ...................................................................... I BAB 1................................................................................................. 1 PENGANTAR DAN SEJARAH ..................................................... 1 GRAFKOM....................................................................................... 1 PENGANTAR GRAFIKA KOMPUTER ...................................... 1 SEJARAH PERKEMBANGAN GRAFIKA KOMPUTER.......................... 2 PERANAN DAN PENGGUNAAN GRAFIKA KOMPUTER ................... 10 BAB 2............................................................................................... 22 SEJARAH OPENGL ..................................................................... 22 SEJARAH OPENGL ........................................................................ 22 PENGENALAN OPENGL ................................................................ 23 EVOLUSI OPENGL ........................................................................ 25 BAB 3............................................................................................... 27 INSTALASI OPENGL................................................................... 27 INSTALASI GLUT PADA WINDOWS .............................................. 27 BAB 4............................................................................................... 37 TEKNOLOGI GRAFKOM ........................................................... 37 SEJARAH MONITOR ................................................................. 37 CRT .............................................................................................. 40 LCD .............................................................................................. 44 OLED ........................................................................................... 49 BAB 5............................................................................................... 51 PRIMITIF OBJEK ........................................................................ 51 FUNGSI DASAR MENGGAMBAR TITIK .......................................... 51

iii OUTPUT PRIMITIF .................................................................... 55 ALGORITMA PEMBENTUKAN GARIS .............................................. 56 ALGORITMA GARIS BRESSENHEM ................................................ 58 ALGORITMA PEMBENTUKAN LINGKARAN ................................... 61 ATRIBUT OUTPUT PRIMITIF .................................................. 64 ALGORITMA BOUNDARY-FILL ..................................................... 67 ALGORITMA FLOOD-FILL ............................................................. 68 ANTIALIASING .............................................................................. 69 SUPERSAMPLING ATAU POSTFILTERING ....................................... 70 BAB 6............................................................................................... 76 INTERAKSI KEYBOARD DAN MOUSE .................................. 76 PENGENALAN ........................................................................... 76 FUNGSI DASAR PEMBUATAN ANIMASI DENGANMENGGUNAKAN KEYBOARDFUNCTION. ................................................................... 81 CODING ...................................................................................... 83 2. TOMBOL UP............................................................................. 84 3. KUNCI BUFFER......................................................................... 85 INTERAKSI MOUSE PADA OPENGL ...................................... 91 B. Mouse .................................................................................. 92 1) JENIS MOUSE ................................................................... 93 Mouse Mekanis........................................................................ 93 Mouse Optical .......................................................................... 94 Mouse Wireless ........................................................................ 94 BAGIAN-BAGIAN MOUSE ................................................... 95 Bagian-bagian pada Mouse Ball ............................................ 95 Bagian-bagian Mouse Optical ................................................ 96 C. Pemanfaatan Mouse untuk Interaksi dengan OpenGL ............ 97 glutMotionFunc(motion); ......................................................... 98 CONTOH PROGRAM ............................................................ 99 KESIMPULAN ...................................................................... 101 Jenis-jenis mouse: .......................................................... 101 Mouse Mekanis ............................................................... 101

iv Mouse Optical ................................................................ 101 Mouse Wireless............................................................... 101 BAB 7............................................................................................. 103 ANIMASI OBJEK 2D .................................................................. 103 ANIMASI OBJEK 2D OPENGL ..................................................... 106 TRANSLASI (TRANSLATION) ......................................................... 106 ROTASI (ROTATION) .................................................................... 108 SKALASI (SCALING)..................................................................... 109 REFLEKSI .................................................................................... 110 SHEAR ......................................................................................... 112 TIMER FUNCTION........................................................................ 113 BAB 8............................................................................................. 119 OBJEK 3 DIMENSI ..................................................................... 119 DEFINISI OBJEK 3 DIMENSI .................................................. 119 FUNGSI OPENGL 3 DIMENSI ................................................. 120 SPESIFIKASI OBJEK 3 DIMENSI ........................................... 125 PRIMITIF 3D ............................................................................. 126 RENDERING ............................................................................. 127 REPRESENTASI BENDA GRAFIKA 3D ................................ 129 BAB 9............................................................................................. 132 PENCAHAYAAN......................................................................... 132 PENCAHAYAAN PADA OPENGL .................................................. 132 PENCAHAYAAN PADA OPENGL DAN DUNIA NYATA .................. 134 CAHAYA AMBIENT, DIFFUSE, DAN SPECULAR ........................... 135 TEKNIK PENCAHAYAAN ( LIGHTING ) ...................................... 136 BAB 10........................................................................................... 144 TEXTURE..................................................................................... 144 SEJARAH TEXTURE MODELLING ................................................ 144

v KONSEP TEXTURE MAPPING ...................................................... 147 REFLECTION MAPPING ............................................................... 149 ENVIRONMENT MAPPING ........................................................... 150 SPHERE MAPPING ....................................................................... 151 DUAL PARABOLOID MAPPING .................................................... 153 CUBE MAPPING........................................................................... 153 FORWARD MAPPING ................................................................... 155 INVERSE MAPPING ...................................................................... 156 THE INVERSE TRANSFORM ......................................................... 157 SOAL LATIHAN ......................................................................... 160

BAB 1 PENGANTAR DAN SEJARAH GRAFKOM


PENGANTAR GRAFIKA KOMPUTER
A. Pengenalan Grafika Komputer Grafika komputer merupakan salah satu bidang ilmu komputer yang perkembangannya terbilang sangat pesat. Penggunaan grafika komputer sangat terasa manfaatnya hampir di seluruh kegiatan, terutama yang berhubungan dengan komputer. Pada kenyataannya, sebagian besar kegiatan manusia memanfaatkan grafika komputer. Indsutri film, televisi, desain grafis dan arsitektur adalah beberapa contoh kegiatan yang banyak sekali memanfaatkan grafika komputer. Bidang ilmu murni seperti Fisika, Matematika, Kimia dan Biologi pun merasakan manfaat dari grafika komputer. Bidang-bidang tersebut memanfaatkan grafika komputer untuk visualisasi modelmodel objek yang secara kasat mata mustahil terlihat seperti; atom, sel dan bakteri. Bahkan perkembangan bidang-bidang tersebut menjadi semakin cepat, karena para ilmuwan semakin berani melakukan eksperimen tanpa takut melakukan kesalahan yang mengakibatkan kerugian besar, sehingga mereka dapat menghasilkan penemuan-penemuan baru.

2 Pada saat ini industri film dan game adalah yang betul-betul telah merasakan manfaat dari grafika komputer. Saat ini, film yang digemari bukan lagi film-film kartun, tetapi film animasi yang menggunakan teknologi 3D(tiga dimensi). Dengan grafik 3D(tiga dimensi), dapat dihasilkan suatu objek yang menyerupai bentuk aslinya. Hal yang sama terjadi pada industri game. Jika dulu gamegame yang digemari masih dalam bentuk dua dimensi (2D), dengan teknologi yang ada sekarang dapat dihasilkan suatu game yang lebih realistis karena sudah dalam bentuk tiga dimensi. Bidang-bidang yang berhubungan dengan grafika komputer sudah menjadi alternatif pilihan pekerjaan yang banyak diminati di Indonesia, seperti; desain grafis, pengolahan citra dan digital fotografi. Pada bidang ini juga, Indonesia tidak mengalami ketertinggalan yang jauh jika dibandingkan dengan bidang ilmu komputer yang lain seperti jaringan komputer dan pemrograman. Bahkan banyak ditemui orang-orang yang sudah sangat ahli pada bidang-bidang yang digelutinya.

Sejarah Perkembangan Grafika Komputer


Grafika Komputer Grafika komputer adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Bentuk sederhana dari grafika komputer adalah grafika komputer 2D yang kemudian berkembang menjadi grafika komputer 3D, pemrosesan citra (image processing), dan pengenalan pola (pattern recognition). Grafika komputer sering dikenal juga dengan istilah visualisasi data.

3 Bagian dari grafika komputer meliputi:


Geometri, mempelajari cara menggambarkan permukaan bidang Animasi, mempelajari cara menggambarkan dan memanipulasi gerakan Rendering, mempelajari algoritma untuk menampilkan efek cahaya Citra (Imaging), mempelajari cara pengambilan dan penyuntingan gambar

Sejarah Grafika Komputer Sejarah grafika dimulai sejak jaman dahulu ketika bangsa mesir, Roma dan Yunani berkomunikasi secara grafik.

Gambar 1 Sejarah Grafika Komputer

Beberapa lukisan yang terdapat pada batu nisan orang mesir dapat dikatakan sebagai lukisan teknik. Leonardo da Vinci sudah menghasilkan lukisan dengan objek 3D dengan pandangan isometrik.

Gambar 2 Lukisan-Lukisan Leonardo Da Vinci

Perkembangan grafika komputer dapat dibagi menjadi 4 (empat) fase, yaitu: Fase Pertama : tahun 50an Merupakan era grafika komputer interaktif. Pada mulanya perkembangan grafika komputer interaktif tidak terlalu cepat karena teknologi dan harga komputer yang mahal. Pada tahun 50an MIT mengembangkan komputer whirlwind dengan tabung sinar katode. Komputer ini mampu memaparkan grafik pasif yang digunakan untuk keperluan pertahanan.

Gambar 3 Komputer Whirlwind Dengan Tabung Sinar Katode

Akhir tahun 50an banyak orang menggunakan pena cahaya sebagai alat input, selain itu pada periode yang sama alat pemrograman otomatis telah berhasil dibuat. Komputer grafik interaktif mulai diteliti oleh general motor pada tahun 1959.

Gambar 4 Pena Cahaya

Gambar 5 Bagian-Bagian dalam pena Cahaya

Fase Kedua : Dekade 60an Merupakan zaman penelitian /riset grafika komputer interaktif. Saat ini grafika interaktif moderen berhasil ditemukan oleh Ivan Sutherland dengan sistem penggambaran SKETCHPAD. Beliau juga menggambarkan teknik interaktif dengan sarana keyboard dan pena cahaya. Awal tahun 60-an dimulainya model animasi dengan menampilkan simulasi efek fisik

Gambar 6 Keyboard

1961 : Edward Zajac menyajikan suatu model simulasi satelit dengan menggunakan teknologi Grafik Komputer.

7 o 1963 : ditemukan Sutherland (MIT), Sketchpad (manipulasi langsung, CAD), Alat untuk menampilkan Calligraphic (vector), Mouse oleh Douglas Englebert 1968 : ditemukan Evans & Sutherland 1969 : Journal SIGGRAPH pertama kali diterbitkan Pertengahan tahun 60an sejumlah proyek penelitian dan produk computer aided design / munufacturing (CAD / CAM) telah muncul.

o o o

Gambar 7 Computer Aided Design / Munufacturing Fase Ketiga pada dekade 70an Saat ini sektor industri, pemerintahan dan ilmuan mulai sadar akan pentingnya grafika komputer interaktif untuk memperbaiki kualitas desain produk secara cepat dan mudah.

Gambar 7 Prototipe Desain Robot

- 1970 : Pierre Beezier mengembangkan kurva Beezier


- 1971 : ditemukan Gouraud Shading, - 1972 : ditayangkannya filmWestworld, sebagai film pertama yang menggunakan animasi computer - 1974 : Ed Catmull mengembangkan z-buffer (Utah). Komputer animasi pendek, Hunger: Keyframe animation and morphing - 1976 : Jim Blinn mengembangkan texture dan bump mapping - 1977 : Film terkenal Star Wars menggunakan grafik computer - 1979 : Turner Whitted mengembangkan algoritma ray tracing,untuk pesawat Death Star

9 - Pertengahan tahun 70-an hingga 80-an: Pengembangan Quest for realism radiosity sebagai main-stream aplikasi realtime
Fase Keempat : Dekade 80an Pada masa ini grafika komputer berkembang pesat. Banyak orang berlomba untuk menemukan teori dan algoritma baru, penelitian dekade ini bertumpu pada penggabungan dan pengotomatisasian sebagai unsur desain dan pemodelan pejal (solid modeling) hal ini berguna untuk industri masa depan. o 1982 : Pengembangan teknologi grafik komputer untuk menampilkan partikel o 1984 : Grafik Komputer digunakan untuk menggantikan model fisik pada film The Last Star Fighter o 1986 : Pertama kalinya Film hasil produksi grafik komputer dijadikan sebagai nominasi dalam Academy Award: Luxo Jr. (Pixar). o 1989 : Film Tin Toy (Pixar) memenangkan Academy Award.

Pada tahun 90an teknologi model hibrid mulai diperkenalkan, teknologi ini berguna untuk penggabungan objek pejal dengan permukaan. Contohnya jika kita melukis sebuah mobil bagian badan mesin adalah suatu permukaan dan bagian mesin adalah bentuk pejal. Jika kita gabungkan dengan teknologi maka badan dan mesin membentuk sebuah mobil. Akhir tahun 90-an, ditemukannya teknologi visualisasi interaktif untuk ilmu pengetahuan dan kedokteran, artistic rendering, image based rendering, path tracing, photon maps, dan lain-lain. Tahun 2000 ditemukannya teknologi perangkat keras untuk real-time photorealistic rendering.

10

Gambar 8 Contoh teknologi model hibrid

Peranan dan Penggunaan Grafika Komputer


Grafika komputer digunakan dalam berbagai bidang seni, sains, bisnis, pendidikan dan hiburan, sebagi contoh: - Antarmuka pengguna sering setiap aplikasi pada komputer pribadi menggunakan GUI (Graphical User Interface). - Pemetaan (Cartography) Google Map, etc - Kesehatan Untuk perencanaan maupun pelaksanaan pembedahan, CT Scan, etc - Computer Aided Design (CAD) pengguna merancang objek ( mekanik, desain interior, modelling) mengunakan grafika komputer. - Sistem Multimedia. - Presentasi grafik untuk produksi slides. - Sistem paint. - Presentasi data statistik. - Pendidikan. - Hiburan. B. Manfaat Grafika Komputer Manfaat yang dihasilkan dari Grafika Komputer antara lain :

11 1. Di Bidang Pendidikan Grafik komputer pada pendidikan digunakan untuk mempresentasikan objek-objek pada siswa secara nyata, dapat melalui power point ataupun software lainnya. Dengan penggunakan bentuk objek ini diharapkan siswa lebih nyata dalam menerima semua materi yang telah diajarkan, tidak hanya teori saja tetapi sudah melihat bentuk dan simulasinya. Bentuk ini dapat berupa penggambaran bidang, ruang, grafik, gambar kerangka manusia, susunan tubuh manusia, dan sebagainya. Contohnya : Desain kerangka manusia

Gambar 1. Desain Kerangka Manusia

2. Di Bidang Hiburan Tidak memungkiri pada sekarang ini semua acara hiburan di Televisi banyak menggunakan grafik komputer. Mulai dari film kartun, iklan di TV dan sampai acara sinetron sekalipun sudah di selipi oleh grafik komputer. Grafik komputer disini berupa efek animasi yang dapat membuat film semakin menarik. Contohnya : Desain Film Kartun The Smurfs.

12

Gambar 2. Desain Film Kartun The Smurfs

3. Di Bidang Perancangan Pada bidang ini grafik komputer digunakan untuk membuat berbagai desain dan model objek yang akan dibuat. Misalnya digunakan untuk mendesain suatu arsitektur bangunan, desain kendaraan dan lainnya. Menggunakan software desain grafis seperti autocad semuanya akan berlangsung secara mudah dan lebih spesifik dalam perancangan yang akan dibuat. Memperkecil tinggkat kesalahan sehingga akan menhasilkan suatu model yang sama seperti aslinya. Contohnya : Desain Arsitektur/Teknik Sipil/Interior

Gambar 3. Desain Arsitektur dan Interior

C. Elemen-Elemen Dasar Desain Grafis 1. Elemen Geometri a. Transformasi dari suatu konsep (atau suatu benda nyata) ke suatu model geometris yang bisa ditampilkan pada suatu komputer : - Shape/bentuk

13 Posisi Orientasi (cara pandang) Surface Properties / Ciri-ciri Permukaan (warna, tekstur) Volumetric Properties / Ciri-ciri volumetric (ketebalan/pejal, penyebaran cahaya) Lights/cahaya (tingkat terang, jenis warna) Dll.

b. Pemodelan Geometris yang lebih rumit : - Jala-Jala segi banyak: suatu koleksi yang besar dari segi bersudut banyak, dihubungkan satu sama lain. - Bentuk permukaan bebas: menggunakan fungsi polynomial tingkat rendah - CSG: membangun suatu bentuk dengan menerapkan operasi boolean pada bentuk yang primitif.

2. Titik Untuk menggambar titik (point) digunakan perintah point(x,y) dimana nilai x dan y adalah koordinat pada layar. Sedangkan untuk membuat garis digunakan perintah lines(x1,y1,x2,y2). Contoh program : int d = 40; int p1 = d; int p2 = p1+d; int p3 = p2+d; int p4 = p3+d; size(200, 200); background(0); //Draw line from location (50,50) until (100,150) stroke(255);

14 line(50, 50, 100, 150); // Draw gray box stroke(255); line(p3, p3, p2, p3); line(p2, p3, p2, p2); line(p2, p2, p3, p2); line(p3, p2, p3, p3); // Draw white points stroke(255); point(p1, p1); point(p1, p3); point(p2, p4); point(p3, p1); point(p4, p2); point(p4, p4); 3. Garis Untuk mengubah warna garis, dapat digunakan perintah stroke(x) atau stroke(r,g,b). Selain itu ketebalan garis dapat kita atur dengan menggunakan perintah strokeWeight(x) dengan nilai x adalah jumlah ketebalan pixel. Jika ingin merubah tampilan ujung garis, dapat juga kita tambahkan perintah strokeCap(mode). Mode yang digunakan adalah SQUARE, ROUND dan PROJECT. Contoh program: size(200, 200); background(0); // Draw white line standart stroke(255); line(25, 5, 175, 5); // Draw red line stroke(255,0,0); line(25, 25, 175, 25); // Draw Green line with 5 points thicknes stroke(0,255,0); strokeWeight(5);

15 line(25, 50, 175, 50); //Draw Blue line with 10 thickness and square tip line stroke(0,0,255); strokeWeight(10); strokeCap(SQUARE); line(25, 75, 175, 75); 4. Lingkaran Untuk membuat objek bundar dapat menggunakan beberapa cara bentuk, yaitu ellipse dan busur. Untuk bentuk ellipse dapat digunakan perintah ellipse(x,y,width,height) dengan nilai x dan y adalah sebagai pusat ellipse Sedikit berbeda dengan penggunaan busur (arc). Pada ellipse kita dapat membuat bentuk bundar secara utuh, namun pada busur kita dapat membuat bentuk bundar hanya sebagian dalam arti kurva terbuka. Perintah yang digunakan adalah arc(x,y,width,height,start,stop), x dan y adalah posisi pusat busur, width adalah lebar dan height adalah tinggi. Penggunan start pada arc adalah posisi awal penggambaran dan stop adalah posisi akhir penggambaran busur D. Materi dalam Grafika Komputer Di dalam Grafika Komputer, terdapat materi dasar yang wajib dipelajari, antara lain. 1. Primitive Object 2. Objek 2 Dimensi 3. Transformasi Object 4. Interaksi Keyboard 5. Interaksi Mouse 6. Animasi 7. Object 3 Dimensi 8. Pencahayaan 9. Material dan Tekstur

16

E.

Mengenal library grafis OpenGL Open GL adalah suatu library grafis standart yang digunakan untuk keperluan pemrograman grafis. Selain OpenGL, library grafis yang banyak digunakan adalah DirectX. OpenGL bersifat opensource, multi-platform dan multi language. Saat ini semua bahasa pemrograman mendukung OpenGL. dan OpenGL bisa bekerja dalam lingkungan Windows, Unix, SGI, Linux, freeBSD dll. Library dasar dari openGL adalah GLUT, dengan fasilitas yang bisa dikembangkan. Untuk OS Windows,library ini terdiri dari 3 files yaitu : - Glut.h - Glut32.lib - Glut32.dll Cara Installasi GLUT Copykan file glut.h ke dalam folder c:\Program Files\Microsoft Visual Studio\VC98\Include\GL Copykan file glut32.lib di dalam folder c:\ProgramFiles\MicrosoftVisual Studio\VC98\lib Copykanfile glut32.dll ke dalam folder c:\Windows\System32

F.

Mengenal Pemograman Grafis Pemrograman grafis adalah pemrograman yang digunakan untuk menghasilkan gambar paa komputer menggunakan library yang ada. Teknik-teknik pemrograman grafis ini didasari oleh teknik- teknik menggambar dengan pemakaian geometri sebagai dasar struktur datanya. Hasil dari pemrograman grafis adalah visualisasi grafis.

17 - Struktur dasar Pemograman Grafis menggunakan bahasa C++

- Struktur Dasar Pemograman Grafis #include <GL/glut.h> Pemrograman grafis menggunakan OpenGL-GLUT membutuhkan header glut.h yang ada di folder c:\Program Files\Microsoft Visual Studio\VC98\bin\GL void userdraw(void){ //Disini tempat untuk menggambar } Fungsi user draw adalah suatu fungsi untuk membuat kode program untuk menghasilkan suatu gambar. glutInitWindowPosition(100,100); glutInitWindowSize(640,480);

18 Membuat windows dengan ukuran (640,480) dengan titik kiri atas jendela diletakkan pada posisi (100,100) di layar komputer. glutCreateWindow(Drawing by Rizky); Memberi judul pada windows dengan Drawing By Rizky glClearColor(1.0,1.0,1.0,0.0); Mendefinisikan warna dari windows yang dibuat dengan warna(1,1,1) yaitu warna putih. gluOrtho2D(-320.,320.,-240.,240); Mendefinisikan besarnya sistem koordinat dengan range sumbux adalah [-320,320]. Dan range untuk sumbuy adalah [-240,240]. Hasil dari program :

19 G. KESIMPULAN Dari materi diatas dapat kita simpulkan bahwa Grafika komputer merupakan salah satu bidang ilmu komputer yang perkembangannya terbilang sangat pesat. sebagian besar kegiatan manusia memanfaatkan grafika computer. Contohnya saja Indsutri film, televisi, desain grafis dan arsitektur. Pada saat ini industri film dan game adalah yang betul-betul telah merasakan manfaat dari grafika computer. Adapun manfaat dari grafika komputer adalah : Di Bidang Pendidikan Grafik komputer pada pendidikan digunakan untuk mempresentasikan objek-objek pada siswa secara nyata, dapat melalui power point ataupun software lainnya. Di Bidang Hiburan Tidak memungkiri pada sekarang ini semua acara hiburan di Televisi banyak menggunakan grafik komputer. Mulai dari film kartun, iklan di TV dan sampai acara sinetron sekalipun sudah di selipi oleh grafik computer Di Bidang Perancangan Pada bidang ini grafik komputer digunakan untuk membuat berbagai desain dan model objek yang akan dibuat. Open GL adalah suatu library grafis standart yang digunakan untuk keperluan pemrograman grafis Library dasar dari openGL adalah GLUT, dengan fasilitas yang bisa dikembangkan. Untuk OS Windows,library ini terdiri dari 3 files yaitu : - Glut.h - Glut32.lib - Glut32.dll

20

Grafika komputer adalah bagian dari ilmu komputer yang berkaitan dengan pembuatan dan manipulasi gambar (visual) secara digital. Bagian dari grafika komputer meliputi: Geometri, mempelajari cara menggambarkan permukaan bidang Animasi, mempelajari cara menggambarkan dan memanipulasi gerakan Rendering, mempelajari algoritma untuk menampilkan efek cahaya Citra (Imaging), mempelajari cara pengambilan dan penyuntingan gambar Perkembangan grafika komputer dapat dibagi menjadi 4 (empat) fase, yaitu: Fase Pertama : tahun 50an Merupakan era grafika komputer interaktif. Pada mulanya perkembangan grafika komputer interaktif tidak terlalu cepat karena teknologi dan harga komputer yang mahal. Pada tahun 50an MIT mengembangkan komputer whirlwind dengan tabung sinar katode. Komputer ini mampu memaparkan grafik pasif yang digunakan untuk keperluan pertahanan. Fase Kedua : Dekade 60an Merupakan zaman penelitian /riset grafika komputer interaktif. Saat ini grafika interaktif moderen berhasil ditemukan oleh Ivan Sutherland dengan sistem penggambaran SKETCHPAD. Beliau juga menggambarkan teknik interaktif dengan sarana keyboard dan pena cahaya. Awal tahun 60-an

21 dimulainya model animasi dengan menampilkan simulasi efek fisik Fase Ketiga pada dekade 70an Pada era ini sektor industri, pemerintahan dan ilmuan mulai sadar akan pentingnya grafika komputer interaktif untuk memperbaiki kualitas desain produk secara cepat dan mudah. Fase Keempat : Dekade 80an Pada masa ini grafika komputer berkembang pesat. Banyak orang berlomba untuk menemukan teori dan algoritma baru, penelitian dekade ini bertumpu pada penggabungan dan pengotomatisasian sebagai unsur desain dan pemodelan pejal (solid modeling) hal ini berguna untuk industri masa depan.

22

BAB 2 SEJARAH OPENGL


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

23

grafis 3D. Sebagai contoh, termasuk windowing, keyboard dan mouse API, sebagian karena dikembangkan sebelum Sistem X Window dan Suns NEWS sistem dikembangkan. Selain itu, SGI memiliki sejumlah besar pelanggan perangkat lunak; dengan mengubah ke OpenGL API mereka berencana untuk mempertahankan pelanggan mereka terkunci ke SGI (dan IBM) hardware untuk beberapa tahun sementara pasar dukungan untuk OpenGL matang. Sementara itu, SGI akan terus berusaha untuk mempertahankan pelanggan mereka terikat pada hardware SGI dengan mengembangkan maju dan kepemilikan Iris Inventor dan Iris Performer pemrograman API. Akibatnya, SGI merilis standar OpenGL.

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.

24

Membuat perintah dalam OpenGL dapat terjadi dalam dua cara yang berbeda. Pertama, adalah mungkin bagi programmer untuk membuat dan menyimpan daftar perintah yang dapat dieksekusi secara berulang. Ini adalah salah satu cara yang lebih rutin untuk program interface yang digunakan. Seiring dengan berkembangnya kelompok perintah yang kurang lebih permanen, maka memungkinkan untuk membuat dan menjalankan salah satu perintah dalam batas-batas waktu dari komputer grafis. Seiring dengan kemampuan interface dari sistem operasi, OpenGL juga menyediakan beberapa built-in protokol yang mungkin berguna bagi pengguna akhir. Di antaranya fitur alat seperti alpha blending, pemetaan tekstur, dan efek atmosfer. Alat ini dapat berinteraksi dengan sistem operasi yang sedang digunakan. Awalnya dikembangkan oleh Silicon Graphics, OpenGL kini dianggap standar industri. Interface program aplikasi yang aktif didukung oleh Microsoft ini, menawarkan download gratis daftar OpenGL untuk digunakan pada sistem Windows. OpenGL juga bekerja sangat baik dengan Inventor Open, sebuah pemrograman berorientasi obyek alat juga diciptakan oleh Silicon Graphics. OpenGL adalah suatu library grafis standart yang digunakan untuk keperluan-keperluan pemrograman grafis. Sebenarnya ada banyak library pemrograman grafis disini selain openGL, misalnya DirectX. OpenGL ini bersifat OpenSource, multi-platform dan multi-languange. selain itu openGL mendukung semua bahasa pemrograman dan dapat bekerja di lingkungan Windows, Unix, SGI, Linux, freeBSD, dll. OpenGl melayani dua tujuan :

25

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 yangmemerlukan mendukung implementasi penuh fitur opengl set (menggunakan software emulation jika diperlukan).

Evolusi OpenGL Pendahulu openGL adalah IRIS GL dari Silicon Grapics. Pada mulanya 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.

26

Letak openGL dalam aplikasi gambar di atas pada umumnya ketika aplikasi berjalan program tersebut memanggil banyak fungsi, beberapa yang dibuat oleh programer dan beberapa yang disediakan oleh sistem operasi bahasa pemrograman. Aplikasi windows membuat output pada layar biasanya dengan memanggil sebual API windows yang disebut Graphics Devise Interfase, yang memungkinkan sebagai penulisan teks pada sebuah windows, menggambar garis 2D sederhana dan lainnya. Implementasi dari openGL mengambil permintaan grafis dari aplikasi dan membangun sebuah gambar berwarna dari grafis 3D, kemudian memberikan gambar tersebut ke GDI untuk ditampilkan pada layar monitor.

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.S ebagai tambahan,openGL mendukung lighting, shading, texture mapping, blending, transparancy, dan banyak kemampuan efek khusus lainnya. OpenGL mempunyai banyak fungsi dan penggunaan perintah yang sangat luas, penggunaan openGL membutuhkan library tambahan yang harus di letakkan pada direktori system dari windows (OS),yaitu : OpenGL32.dll

27

Glu32.dll Glut32.dll

BAB 3 INSTALASI OPENGL


Instalasi GLUT pada Windows
1. Copykan file glut.h ke dalam folder c:\Program Files\Microsoft Visual Studio\VC98\Include\GL 2. Copykan file glut32.lib di dalam folder c:\Program Files\Microsoft Visual Studio\VC98\lib 3. Copykan file glut32.dll di dalam folder c:\Windows\System32 Perlu kawan-kawan ketahui bahwa instalasi GLUT ini dilakukan setelah instalasi Microsoft Visual C++

28

. Gambar 1. File dll di Windows System32

1. File header(gl.h, glaux.h, glu.h, dan glut.h) harus ditempatkan di folder tempat MS VC++ di instal dan harus diletakan di subfolder Include/ GL. File gl.h, glaux.h, dan glu.h akan otomatis terpasang ketika instalasi MS VC++ dilakukan.

29

Gambar 2. File header OpenGL

2. File lib (glaux.lib, glu32.lib, glut.lib, glut32.lib dan opengl32.lib) harus tersedia di subfolder Lib. File glaux.lib, glu32.lib dan opengl32.lib akan terpasang ketika instalasi MS VC++.

30

Gambar 3. File glut32 di Windows System32 Membuat Dokumen Baru. 1. Buka program Microsoft Visual C++ 2008.

Gambar 3. Membuka aplikasi Ms. Visual C++ 2008

31 2. Klik tab menu file New Project Gambar 4. Membuat File Baru

3. Lalu akan muncul tampilan seperti berikut. Lalu klik Next.

Gambar 5. Setting File

32

4. Pilih Radiobutton Console Application. Lalu pilih cekbox Empty project. Lalu klik Finish.

Gambar 6. Setting Aplikasi 5. Lalu Klik kanan pada file Latihan. Lalu klik Add New Item.

Gambar 7. Menambahkan File Cpp

33 6. Lalu klik pilihan C++ File(.cpp). Tulis nama filenya. Lalu klik Add.

Gambar 8. Memberi nama File 7. Lalu klik kanan pada menu latihan.cpp. Lalu Klik properties.

Gambar 9. Klik Properties

34

8. Lalu klik pilihan C/C++. Kemudian klik Additional Include Directories.

Gambar 9. Setting Include Directional 9. Lalu klik box titik-titik.

Gambar 10. Mencari File Include

35

10. Pilih file dalam folder Include. Klik OK.

11. Lalu klik OK.

Gambar 11. Klik OK

36 12. Lalu kita bisa menulis syntax pada layar yang sudah disediakan.

KESIMPULAN; Perkembangan teknologi komputer grafik dari masa ke masa harus juga diikuti dengan perkembangan teknologi display yang berfungsi sebagai alat keluaran dari grafik yang dibentuk agar dapat dinikmati oleh kita semua. Saat ini teknologi display yang paling populer dan paling banyak digunakan adalah LCD (Liquid Crystal Display), namun sebelum orang mengenal teknologi tersebut, ada beberapa teknologi lainya yang sempat merajai dunia teknologi display seperti CRT, saat ini juga terdapat beberapa teknologi display terbaru yang mulai bermunculan seperti LED, FED dan OLED 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.

37

BAB 4 TEKNOLOGI GRAFKOM


SEJARAH MONITOR
Paparan komputer peribadi yang terawal merupakan Monitor monokrom yang digunakan untuk pemproses kata dan sistem komputer berdasarkan teks pada dekade 1970-an. Pada tahun 1981, IBM memperkenalkan sistem paparan Penyesuai Grafik Warna (CGA). Sistem paparan ini berupaya memberikan empat warna, dan mempunyai peleraian maksimum 320 piksels datar dan 200 piksel tegak. Walaupun CGA mencukupi untuk kegunaan permainan komputer yang mudah seperti permainan solitaire dan permainan dam, ia tidak mencukupi untuk pemprosesan kata, penerbitan atas meja ataupun penggunaan grafik yang canggih. Pada tahun 1984, IBM memperkenalkan sistem paparan Penyesuai Grafik Tertingkat (EGA) yang dapat memberikan sehingga 16 warna yang berlainan dan peleraian sehingga 640 x 350. Ini memperbaiki kelihatannya berbanding paparan yang lebih awal, dan memungkinan pembacaan teks dengan mudah. Bagaimanapun, EGA tidak memberikan peleraian imej yang mencukupi untuk kegunaan-kegunaan tahap tinggi seperti reka bentuk grafik dan penerbitan atas meja. Mod ini kini sudah usang, walaupun ia kekadang masih boleh didapati di pemprosesan lama dan komputer peribadi di rumah kediaman. Pada tahun 1987, IBM memperkenalkan sistem paparan Tatasusunan Grafik Video (VGA). Kini, ini telah merupakan piawai minimum yang dapat diterima untuk komputer peribadi. Peleraian maksimum tergantung kepada bilangan warna yang dipaparkan.

38 Pengguna boleh memilih antara enam belas warna pada 640 x 480, ataupun 256 warna pada 320 x 200. Pada tahun 1990, IBM memperkenalkan sistem paparan Tatasusunan Grafik Terluas (XGA) sebagai waris untuk paparan 8514/A. Versi yang berikut, iaitu XGS-2, memberikan peleraian 800 x 600 piksel dalam warna yang benar (16 juta warna) dan peleraian 1024 x 768 dalam 65,536 warna. Kedua-dua tahap peleraian imej ini mungkin merupakan jenis yang terpopular di kalangan individu dan perniagaan kecil pada hari ini. Persatuan Piawai-Piawai Elektronik Video (VESA) telah mengasaskan antara muka pengaturcaraan piawai untuk paparan Tatasusunan Grafik Video Super (SVGA) yang digelarkan Sambungan BIOS VESA ("VESA BIOS Extension"). Lazimnya, paparan SVGA dapat mendukung palet sehingga 16 juta warna, tergantung kepada jumlah ingatan video yang tersedia dalam sesuatu komputer yang akan menghadkan bilangan warna yang dapat dipaparkan. Spesifikasi peleraian imej berbeza-beza. Pada umumnya, lebih besar skrin Monitor SVGA, lebih banyak piksel dapat dipaparkan secara datar dan tegak. Tahap perkembangan monitor computer yang digunakan saat ini sebenarnya terbagi dua fase. Fase pertama pada tahun 1855 ditandai dengan penemuan tabung sinar katoda oleh ilmuwan dari Jerman, Heinrich Geiler. Ia merupakan bapak dari monitor tabung. Lalu, 33 tahun kemudian, ahli kimia asal Austria, Friedrich Reinitzer, meletakkan dasar pengembangan teknologi LCD dengan menemukan kristal cairan. Teknologi tabung sejak awalnya memang dikembangkan untuk merealisasikan monitor. Namun, Kristal cairan masih menjadi fenomena kimiawi selama 80 tahun berikutnya. Saat itu, tampilan atau frame rate pun belum terpikirkan. Selama ini, banyak yang menganggap bahwa Karl Ferdinand Braun sebagai penemu tabung sinar katoda. Sebenarnya, ia merupakan pembuat aplikasi pertama untuk tabung, yaitu osiloskop pada tahun 1897. Perangkat inilah yang menjadi basis

39 pengembangan perangkat lain, seperti televisi atau layar radar. Pada tahun yang sama, Joseph John Thomson menemukan elektron, yang mempercepat pengembangan teknik tabung. Monitor CRT pertama (Cathode Ray Tube) dikembangkan untuk menerima siaran televisi. Milestone-nya adalah tabung televise pertama dari Wladimir Kosma Zworykin(1929), full electronic frame rate dari Manfred von Ardenne (1930), dan pengembangan tabung sinar katoda pertama yang dapat direproduksi oleh Allen B. Du Mont (1931). Pada generasi awal komputer, belum menggunakan monitor khusus seperti sekarang ini. Komputer waktu itu terhubung dengan TV keluarga sebagai layar penampil dari pengolahan data yang dilakukannya. Yang cukup menjadi masalah adalah bahwa resolusi monitor TV saat itu hanya mampu menampilkan 40 karakter secara horisontal pada layar. Monitor khusus untuk komputer dikeluarkan oleh IBM PC, yang pada awalnya memiliki resolusi 80 X 25 dengan kemampuan warna green monochrome. Monitor ini sudah mampu menampilkan hasil yang lebih terang, jelas dan lebih stabil. Pada generasi berikutnya muncul mono graphics (MGA/MDA) yang memiliki 720x350. Selanjutnya di awal tahun 1980-an muncul jenis monitor CGA dengan range resolusi dari 160x200 sampai 640x200 dan kemampuan warna antara 2 sampai 16 warna. Monitor EGA muncul dengan resolusi yang lebih bagus yaitu 640x350. Monitor jenis ini cukup stabil sampai berikutnya munculnya generasi komputer Windows. Semua jenis monitor ini menggunakan digital video - TTL signals dengan discrete number yang spesifik untuk mengatur warna dan intensitas cahaya. Antara video adapter dan monitor memiliki 2, 4, 16, atau 64 warna tergantung standard grafik yang dimiliki. Selanjutnya dengan diperkenalkannya standard monitor VGA, tampilan grafis dari sebuah Personal Computer menjadi nyata. VGA dan generasi-generasi yang berhasil sesudahnya seperti PGA,

40 XGA, atau SVGA merupakan standard analog video dengan sinyal R (Red), G (Green) dan B (Blue) dengan continuous voltage dan continuous range pada pewarnaan. Secara prinsip analog monitor memungkinkan penggunaan full color dengan intensitas yang tinggi. Generasi monitor terbaru adalah teknologi LCD yang tidak lagi menggunakan tabung elektron CRT tetapi menggunakan sejenis kristal liquid yang dapat berpendar. Teknologi ini menghasilkan monitor yang dikenal dengan nama Flat Panel Display dengan layar berbentuk pipih, dan kemampuan resolusi yang tinggi. Dengan perkembangannya yang sangat pesat, saat ini terdapat empt jenis teknologi monitor. Keempat golongan teknologi tersebut adalah CRT (Cathode Ray Tube), Liquid Crystal Display (LCD), Plasma gas dan OLED (organic Lighting Emitter Diode). Perkembangan teknologi komputer grafik dari masa ke masa harus juga diikuti dengan perkembangan teknologi display yang berfungsi sebagai alat keluaran dari grafik yang dibentuk agar dapat dinikmati oleh kita semua. Saat ini teknologi display yang paling populer dan paling banyak digunakan adalah LCD (Liquid Crystal Display), namun sebelum orang mengenal teknologi tersebut, ada beberapa teknologi lainya yang sempat merajai dunia teknologi display seperti CRT, saat ini juga terdapat beberapa teknologi display terbaru yang mulai bermunculan seperti LED, FED dan OLED

CRT
Pada tahun 1897 Karl Ferdinand Braun, seorang ilmuwan Jerman yang membuat televisi (TV) tabung (cathode ray tube/CRT). Sebuah monitor CRT mengandung jutaan kecil merah, hijau, dan biru fosfor titik-titik yang bercahaya ketika diserang oleh suatu berkas elektron yang bergerak di layar untuk membuat gambar yang jelas. Gambar di bawah menunjukkan bagaimana ini bekerja di dalam sebuah CRT.

41

Dalam tabung sinar katoda, yang "katoda" adalah filamen dipanaskan. Filamen yang dipanaskan dalam menciptakan ruang hampa di dalam sebuah gelas "tabung." The "sinar" adalah sebuah aliran elektron yang dihasilkan oleh senapan elektron yang secara alamiah tuangkan dari katoda yang dipanaskan ke dalam vakum. Elektron negatif. Anoda adalah positif, sehingga menarik elektron mengalir dari katoda. Layar ini dilapisi dengan fosfor, bahan organik yang terpancar ketika dikejutkan oleh berkas elektron. Ada tiga cara untuk menyaring berkas elektron untuk mendapatkan gambar yang benar pada layar monitor: bayangan masker, aperture grill dan slot masker. Teknologi ini juga berpengaruh ketajaman layar monitor. Mari kita lihat lebih dekat sekarang ini.... Prinsip kerja monitor konvensional, monitor CRT (Cathode Ray Tube), sama dengan prinsip kerja televisi yang berbasis CRT. Elektron ditembakkan dari belakang tabung gambar menuju bagian dalam tabung yang dilapis elemen yang terbuat dari bagian yang memiliki kemampuan untuk memendarkan cahaya. Sinar elektron tersebut melewati serangkaian magnet kuat yang membelokbelokkan sinar menuju bagian-bagian tertentu dari tabung bagian dalam.

42 Begitu sinar tersebut sampai ke bagian kaca tabung TV atau monitor, dia akan menyinari lapisan berpendar, menyebabkan tempat-tempat tertentu untuk berpendar secara temporer. Setiap tempat tertentu mewakili pixel tertentu. Dengan mengontrol tegangan dari sinar tersebut, terciptalah teknologi yang mampu mengatur pixel-pixel tersebut untuk berpendar dengan intensitas cahaya tertentu. Dari pixel-pixel tersebut, dapat dibentuklah gambar. Teorinya, untuk membentuk sebuah gambar, sinar tadi menyapu sebuah garis horizontal dari kiri ke kanan, menyebabkan pixel-pixel tadi berpendar dengan intensitas cahaya sesuai dengan tegangan yang telah diatur. Proses tersebut terjadi pada semua garis horizontal yang ada pada pixel layar, dan ketika telah sampai ujung, sinar tersebut akan mati sementara untuk mengulang proses yang sama untuk menghasilkan gambar yang berbeda. Makanya Belia dapat nonton objek yang seolah-olah bergerak di layar televisi atawa monitor. Pada masa awal-awal kelahira nteknologi televisi, para ilmuwan yang merancang televisi dan tabung gambar menemui hambatan teknis. Seperti yang Belia tahu, TV zaman baheula belumlah sekeren dan secanggih sekarang, eh maksudnya belum mampu menampilkan detail gambar seperti sekarang. Dulu, lapisan yang berpendar dalam tabung gambar kualitasnya nggak sebaik sekarang. Jadi kualitas pixel yang dihasilkan juga tidak seoptimal sekarang. Kini, seiring dengan perkembangan teknologi komputer yang membutuhkan kualitas TV dan monitor tabung yang lebih baik, untungnya kualitas lapisan berpendar dalam tabung monitor telah lebih baik. Hasilnya diperoleh tabung gambar yang mampu menghasilkan gambar dengan resolusi yang lebih tinggi. Wajar aja, soalnya

43 komputer banyak berurusan dengan text, dan itu membutuhkan detil gambar yang tinggi. Sayangnya, teknologi monitor dengan tabung CRT ini ditengarai memiliki banyak pengaruh buruk bagi kesehatan penggunanya. Sejumlah riset mengindikasikan bahwa ekspos berlebihan monitor pada mata dapat menyebabkan penurunan kualitas penglihatan. Hal ini disebabkan oleh radiasi sinar elektron pada tabung gambar monitor atau televisi tabung. a. Kelebihan Monitor CRT Harganya lebih murah dibandingkan monitor LCD Kualitas gambar yang lebih tajam dan cerah dibandingkan monitor LCD Mampu menghasilkan resolusi gambar yang lebih tinggi dibandingkan dengan monitor LCD Memiliki sudut viewable lebih baik dibandingkan monitor LCD b. Kekurangan Monitor CRT Menimbulkan efek radiasi yang bisa mengganggu kesehatan. Dimensinya menyita ruangan yang cukup besar. Apalagi bila ukurannya makin besar Menimbulkan efek kedip (flicker) yang mengganggu mata Butuh konsumsi listrik yang lebih tinggi dibandingkan LCD Sinyal gambar analog Area layarnya tidak optimum karena harus dialokaskan untuk bezel/frame Bentuknya kurang sedap dilihat dibandingkan dengan monitor LCD.

44

LCD
Teknologi LCD sebetulnya bukan barang baru. LCD pertama kali diujicoba di laboratorium perusahaan elektronik RCA di Amerika Serikat, oleh George Heilmeier pada tahun 1968. Dia mengujicoba LCD berbasis dynamic scattering mode (DSM). Setahun kemudian, perusahaan milik Heilmeier yakni Optel lantas memproduksi LCD. LCD biasa digunakan untuk men-display audio visual. LCD ini melakukan kontrol elektrik pada cahaya dengan mempolarisasi kristal cair yang ada pada sel-sel media yang mengaplikasikan LCD itu. Polarisasi tersebut dilakukan setelah ada kontak elektrik pada cairan-cairan yang ada pada sel-sel di TV. LCD sekarang ini diaplikasikan tidak hanya di TV tetapi juga di beberapa peranti misalnya, ponsel dan kamera digital. Pengaplikasian LCD itu dengan melakukan mode reflektif dan transmissive. Metode reflektif itu biasanya yang biasa ada pada arloji dan kalkulator, display LCD pada barang-barang ini tidak membutuhkan daya konsumsi energi tinggi sehingga tidak memboroskan baterai. Sementara yang menggunakan transmissive butuh daya banyak, contoh dari pengaplikasian ini adalah pada telepon seluler (ponsel). Dalam layar LCD, warna terbagi dalam tiga warna utama yakni dalam filter merah, hijau dan biru. Pendeskripsian warna berikutnya tergantung pada pembacaan alat pen-display LCD itu dengan brightnesses yang dipunyainya. Komponen warna, berikutnya akan diatur dalam cara yang berbeda tergantung jumlah pixelnya.

45 Karenanya terkadang kita dihadapkan pada resolusi pixel misalnya 640 x 480 dan sebagainya. Semakin besar resolusi pixelnya, semakin kaya warna. Pada dasarnya prinsip kerja LCD adalah dengan memancarkan sinar yang terang ke panel 3 LCD. Panel LCD inilah yang kemudian menampilkan gambar/image bergerak dan memproyeksikan gambar melalui lensa pembesar ke kaca yang dapat merefleksikan gambar tersebut di layar televisi. Sistem tiga LCD juga memiliki kemampuan mengolah gambar yang lebih baik, sehingga menghasilkan gambar yang lebih baik pula. Sinyal-sinyal gambar/image yang ditangkap LCD, dengan kaca diacroic pilahkan citra atau gambar warna merah, biru hijau (RGB). Warna yang terpisah ini kemudian disatukan kembali oleh prisma dan kemudian dipantulkan ke kaca untuk selanjutnya bisa dinikmati di layar televisi.

Untuk resolusi warna media yang lebih besar, seperti untuk monitor komputer dan televisi, sistem yang digunakan adalah active-matrix LCD. Pada bidang ini, panel LCD disamping mempolarisasikan kristal cair juga matrix dari thin film transistor (TFT). Sistem ini akan menghasilkan gambar lebih tajam dan terang. Panel LCD pada TV ini biasanya memiliki transistor defective yang bisa memberikan efek gelap dan terang pada pixel.

46

Nematic liquid crystal Jenis kristal cair yang digunakan dalam pengembangan teknologi LCD adalah tipe nematic (molekulnya memiliki pola tertentu dengan arah tertentu). Tipe yang paling sederhana adalah twisted nematic (TN) yang memiliki struktur molekul yang terpilin secara alamiah (dikembangkan pada tahun 1967). Struktur TN terpilin secara alamiah 90. Struktur TN ini dapat dilepas pilinannya (untwist) dengan menggunakan arus listrik. Pada gambar 2, kristal cair TN (D) diletakkan di antara dua elektroda (C dan E) yang dibungkus lagi (seperti sandwich) dengan dua panel gelas (B dan F) yang sisi luarnya dilumuri lapisan tipis polarizing film. Lapisan A merupakan cermin yang dapat memantulkan cahaya yang berhasil menembus lapisan-lapisan sandwich LCD. Kedua elektroda dihubungkan dengan baterai sebagai sumber arus. Panel B memiliki polarisasi yang berbeda 90 dari panel F. Begini cara kerja sandwich ajaib ini. Cahaya masuk melewati panel F sehingga terpolarisasi. Saat tidak ada arus listrik, cahaya lewat begitu saja menembus semua lapisan, mengikuti arah pilinan molekul- molekul TN (90), sampai memantul di cermin A dan keluar kembali. Akan tetapi, ketika elektroda C dan E (elektroda kecil berbentuk segi empat yang dipasang di lapisan gelas) mendapatkan arus, kristal cair D yang sangat sensitif terhadap arus listrik tidak lagi terpilin sehingga cahaya terus menuju panel B dengan polarisasi sesuai panel F. Panel B yang memiliki polarisasi yang berbeda 90 dari panel F menghalangi cahaya untuk menembus terus. Dikarenakan cahaya tidak dapat lewat, pada layar terlihat bayangan gelap berbentuk segi empat kecil yang ukurannya sama dengan elektroda E (berarti pada bagian tersebut cahaya tidak dipantulkan oleh cermin A).

47 Sifat unik yang dapat langsung bereaksi dengan adanya arus listrik ini dimanfaatkan sebagai alat ON/OFF LCD. Namun, sistem ini masih membutuhkan sumber cahaya dari luar. Komputer dan laptop biasanya dilengkapi dengan lampu fluorescent yang diletakkan di atas, samping, dan belakang sandwich LCD supaya dapat menyebarkan cahaya (backlight) sehingga merata dan menghasilkan tampilan yang seragam di seluruh bagian layar. Mudah bukan? Akan tetapi, tunggu dulu, perancangan dan pembuatan LCD tidak semudah konsepnya. Masalah pertama disebabkan oleh tidak ada satu pun senyawa TN yang sudah ditemukan yang dapat memberikan karakteristik paling ideal. Wah, ini berarti kristal cair yang digunakan harus merupakan campuran berbagai senyawa TN. Untuk mencampur senyawa-senyawa ini, diperlukan percobaan untuk menentukan formulasi terbaik, dan hal ini bukan hal mudah. Kadang-kadang dibutuhkan sampai 20 macam senyawa TN untuk mendapatkan karakteristik yang diinginkan. Bayangkan, mencampur dua macam senyawa saja sudah sangat sulit karena karakteristik masing-masing (misalnya rentang suhu) saling memengaruhi. Belum lagi penentuan titik leleh campuran yang terbentuk. Selain itu, kristal cair TN yang terpilin sebesar 90 membutuhkan beda potensial sebesar 100 persen untuk mencapai posisi untwist (posisi ON). Wow!!! Besar sekali! Dan, sangat tidak efisien! Lalu, bagaimana jalan keluarnya? Super-twisted nematic dan thin-film transistor Pada tahun 1980, Colin Waters (Inggris) memberikan solusi bagi masalah ini. Ia bersama Peter Raynes menemukan bahwa semakin besar derajat pilinan, beda potensial yang dibutuhkan semakin kecil. Pilinan yang menunjukkan beda potensial paling kecil adalah 270. Penemuan ini menjadi dasar dikembangkannya super-twisted

48 nematic (STN) yang sampai sekarang digunakan pada telepon seluler sampai layar laptop. Pada waktu yang hampir bersamaan pula, Peter Le Comber dan Walter Spear (juga dari Inggris) menemukan solusi lain dengan cara menggunakan bahan semikonduktor silikon amorf untuk membuat thin-film transistor (TFT) pada tiap pixel TN. Metode ini menghasilkan tampilan dengan kualitas tinggi, tetapi memerlukan biaya produksi yang sangat mahal dan melibatkan proses pembuatan yang rumit. Tentu saja rumit! Karena, untuk menghasilkan gambar dengan kualitas 256 subpixel, diperlukan sejumlah 256 pixel warna merah x 256 pixel biru x 256 pixel hijau. Tunggu sebentar! 256 x 256 x 256 = 16.8 juta. 16.8 juta transistor super mini harus dibuat dan dilekatkan ke lapisan TN? Rumit dan melelahkan! Tentu saja biayanya menjadi sangat mahal! Akan tetapi, seiring dengan semakin majunya teknologi, biaya pembuatan TFT sedikit demi sedikit bisa ditekan karena ada penyederhanaan proses pembuatannya. Namun, STN pun tidak mau kalah saingan! Kualitas tampilan STN semakin lama pun semakin baik sehingga keduanya terus bersaing ketat dan mendominasi pasar. Perkembangan teknologi LCD semakin pesat dalam dekade terakhir. Kepopuleran LCD terutama karena kualitas gambar yang baik, konsumsi energi yang kecil, serta kekuatan materi kristal cair yang tidak pernah mengalami degradasi. Penelitian lanjut terus dikembangkan untuk mencapai target yang sangat bervariasi, mulai dari usaha memproduksi LCD untuk ukuran layar yang semakin besar sampai kemungkinan alternatif komponen dengan bahan plastik yang lebih ringan. Sasaran utama yang paling dikejar sebagian besar produsen adalah LCD yang tidak lagi menggunakan backlight.

49 a. Kelebihan Monitor LCD Konsumsi listrik rendah Tidak menghasilkan radiasi elektromagnet yang mengganggu kesehatan Tidak menimbulkan efek kedipan (flicker free) Area layarnya optimum karena tidak termakan untuk bezel/frame Dimensinya tidak akan menyita ruangan terlalu besar dan ringan untuk dijinjing Bentuknya stylish dan enak dilihat Sinyal gambar digital b. Kekurangan Monitor LCD Harganya lebih mahal dibandingkan dengan monitor CRT Kualitas gambar yang dihasilkan belum sebaik monitor CRT Resolusi gambar yang dihasilkan lebih rendah dibandingkan monitor CRT Sudut viewable-nya terbatas. Begitu kita mengeset sudut pandang, gambar terlihat akan berubah di mata kita.

OLED
Informasi warna TV OLED diproduksi menggunakan campuran carbon-based organik, yang memancarkan [cahaya/ ringan] merah, biru dan hijau sebagai jawaban atas arus elektrik. OLED Beda paling dari LCD di (dalam) yang tidak ada backlight dan tidak (ada) menjadi bengkok kristal. Tidak ada sumber [cahaya/ ringan] tambahan yang diperlukan untuk memberi tenaga campuran warna yang organik, oleh karena itu mereka menggunakan dengan sangat lebih sedikit [kuasa/ tenaga] dan dapat dihasilkan dengan suatu profil [yang] tipis/encer. panel TV OLED datang dengan baik dua maupun tiga lapisan yang campuran yang organik ditempatkan; terletak satu lapisan [yang] tipis/encer hebat gelas/kaca. Panel didukung oleh

50 suatu [sulit/keras] plexiglass yang material juga melindungi material bagian dalam yang sensitip. Ingat CRT ( tabung sinar katode) TEVE? Pajangan OLED menggunakan suatu lapisan katode untuk memperkenalkan elktron kepada lapisan dasar [dari;ttg] molekul organik. Apakah di/tersebar ke seberang suatu flat-panel menyaring atau yang ditempatkan jantungnya suatu proyektor, semua LCD pajangan datang dari latar belakang teknologi yang sama. Suatu acuan/matriks thin-film transistor ( TFTS) voltase persediaan ke sel liquid-crystal-filled menyisipkan dua lembar;seprai gelas/kaca. Ketika dipukul dengan suatu [beban/ tugas] elektrik, kristal menguraikan [bagi/kepada] suatu derajat tingkat tepat untuk menyaring cahaya putih yang dihasilkan oleh suatu lampu di belakang layar ( untuk/karena flat-panel TEVE) atau sese]orang memproyeksikan melalui suatu LCD chip kecil ( untuk/karena TEVE proyeksi). LCD TEVE reproduksi warna melalui suatu proses pengurangan: Mereka membuat perencanaan panjang gelombang warna tertentu dari spektrum cahaya putih sampai mereka (ada)lah meninggalkan dengan warna sekedar kebenaran. Dan, adalah kuat cahaya diijinkan untuk menerobos acuan/matriks hablur cair ini yang memungkinkan LCD televisi untuk memajang gambaran chock-full colors-or gradasinya.

51

BAB 5 PRIMITIF OBJEK


Primitif objek terdiri atas : - Titik, yaitu Vertex, dimana vertex merupakan acuan dasar - Garis, yaitu Line/Edge - Bangun 2D (Face)

Fungsi Dasar Menggambar Titik


Berikut adalah beberapa fungsi didalam menggambar suatu titik: 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);

1. Primitif Objek

52 Berikut adalah primitive objek yang akan dipergunakan didalam 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. Rumus : vertex = 2N # define GL_LINE_LOOP # define GL_LINE_STRIP

Rumus pada line strip : vertex = N + 1

# define GL_TRIANGLES, Triangle atau segitiga adalah tiga buah titik yang terhubung menjadi suatu segitiga dengan blok di tengahnya. Pada penggunaan primitive objek ini kita harus menggunakan minimal 3 buah vertex guna membentuk suatu objek. Rumus : vertex = 3N

53

Keterangan : N = Jumlah Segitiga # 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 suatu segempat 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, 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 :

54 a. glLineWidth yaitu suatu fungsi yang berfungsi untuk mengatur tebalnya garis b. glPointSize yaitu suatu fungsi yang berfungsi untuk mengatur besarnya suatu objek c. gluOrtho2D yaitu suatu fungsi untuk mengatur proyeksi hasil eksekusi dan mendefinisikan besarnya sistem koordinat dengan urutan kiri-kanan dan bawah-atas

3. Color 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 : 1. glColor3f(0,0,0);//black 2. glColor3f(0,0,1);//blue 3. glColor3f(0,1,0);//green 4. glColor3f(0,1,1)//cyan 5. glColor3f(1,0,0)//red 6. glColor3f(1,0,1)//magenta 7. glColor3f(1,1,0);//yellow 8. glColor3f(1,1,1);//white

4. SegiEmpat Berikut adalah pembuatan suatu objek berupa segiempat :

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

OUTPUT PRIMITIF Gambar dapat dijelaskan dengan beberapa cara, bila menggunakan raster display, gambar ditentukan oleh satu set intensitas untuk posisi display pada display. Sedangkan dengan scene tampilan gambar dengan loading array dari pixel ke dalam buffer atau dengan mengkonversikan scan dari grafik geometri tertentu ke dalam pola pixel. Paket grafika dilengkapi dengan fungsi untuk menyatakan scene dalam bentuk struktur. Paket pemrograman grafika dilengkapi dengan fungsi untuk menyatakan scene dalam bentuk struktur dasar geometri yang disebut output primitif, dengan memasukkan output primitif tersebut sebagai struktur yang lebih kompleks.

1. Titik dan Garis Pembentukan titik dilakukan dengan mengkonversi suatu posisi titik koordinat dengan program aplikasi ke dalam suatu operasi

56 tertentu menggunakan output. Random-scan (vektor ) system menyimpan instruksi pembentukan titik pada display list dan nilai koordinat menentukan posisi pancaran electron ke arah lapisan fosfor pada layer. Garis dibuat dengan menentukan posisi titik diantara titik awal dan akhir dari suatu garis.

Algoritma pembentukan garis


Persamaan garis menurut koordinat Cartesian adalah : y = m.x+b dimana m adalah slope (kemiringan) dari garis yang dibentuk oleh dua titik yaitu (x1, y1) dan (x2, y2). Untuk penambahan x sepanjang garis yaitu dx akan mendapatkan penambahan y sebesar : y = m. X a. Algoritma garis DDA DDA adalah algoritma pembentukan garis berdasarkan perhitungan x dan y, menggunakan rumus y = m. x. 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. Langkah-langkah pembentukan menurut

algoritma DDA, yaitu : 1. Tentukan dua titik yang akan dihubungkan. 2. Tentukan salah satu titik sebagai titik awal (x0, y0) dan titik akhir (x1, y1). 3. Hitung x = x1 - x0 dan y = y1 - y0.

57 4. Tentukan step, yaitu jarak maksimum jumlah

penambahan nilai x maupun nilai y dengan cara : bila nilai |y| > |x| maka step = nilai |y|. bila tidak maka step = |x|. 5. Hitung penambahan koordinat pixel yaitu x_increment = x / step dan y_increment = y / step. 6. Koordinat y+y_increment). 7. Posisi pixel pada layer ditentukan dengan pembulatan nilai koordinasi tersebut. 8. Ulangi step 6 dan 7 untuk menentukan posisi pixel selanjutnya, sampai x = x1 dan y = y1. Contoh : Untuk menggambarkan algoritma DDA dalam pembentukan suatu garis yang menghubungkan titik (10,10) dan (17,16), pertama-tama ditentukan dx dan dy, kemudian dicari step untuk mendapatkan x_increment dan selanjutnya (x+x_incerement,

y_increment. x = x1 - x0 = 17-10 = 7 y = y1 - y0 = 16 -10 = 6 selanjutnya hitung dan bandingkan nilai absolutnya. |x| = 7 |y| = 6 karena |x| > |y|, maka step = |x| = 7, maka diperoleh : x_inc = 7/7= 1 y_inc = 6/7 = 0,86

58

Algoritma Garis Bressenhem


Prosedur untuk menggambar kembali garis dengan membulatkan nilai x atau y kebilangan integer membutuhkan waktu, serta variable x,y dan m merupakan bilangan real karena kemiringan merupakan nilai pecahan. Bressenham mengembangkan algoritma klasik yang lebih menarik,

59 karena hanya menggunakan perhitungan matematika dengan bilangan integer. Dengan demikian tidak perlu membulatkan nilai posisi setiap pixel setiap waktu. Algoritma garis Bressenhem disebut juga midpoint line algorithm adalah algoritma konversi penambahan nilai integer yang juga dapat diadaptasi untuk menggambar sebuah lingkaran. Langkahlangkah untuk membentuk garis menurut algoritma ini adalah : 1. Tentukan dua titik yang akan dihubungkan dalam pembentukan garis. 2. Tetukan salah satu titik disebelah kiri sebagai titik awal (x0, y0) dan titik lainnya sebagai titik akhir (x1, y1). 3. Hitung x, y, 2x, dan 2y 2x. 4. Hitung parameter p0 = 2y x. 5. Untuk setiap xk sepanjang jalur garis, dimulai dengan k = 0 bila pk <0 maka titik selanjutnya (xk+1, yk) dan pk+1 = pk +2y bila tidak maka titik selanjutnya adalah (xk +1, yk +1)dan pk+1 = pk +2y2x. 6. Ulangi langkah nomor 5 untuk menentukan posisi pixel selanjutnya, sampai x = x1 dan y = yk. Contoh : Untuk menggambarkan algoritma Bressenham dalam pembentukan suatu garis yang menghubungkan titik

60 (10,10) dan (17,16), pertama-tama ditentukan bahwa titik (10,10) berada disebelah kiri merupakan titik awal, sedangkan (17,16) merupakan titik akhir. Posisi yang membentuk garis dapat ditentukan dengan perhitungan sebagai berikut : x = x1 x0 dan y= y1 y0 x = 7 dan y = 6 parameter p0 = 2y x p0 = 5 increment 2y = 12 2y 2x = -2

61

Algoritma Pembentukan Lingkaran


Pada umumnya, lingkaran digunakan sebagai komponen dari suatu gambar. Prosedur untuk menampilkan lingkaran dan elips dibuat dengan persamaan dasar dari lingkaran x2+y2=r2 . Lingkaran adalah kumpulan dari titik-titik yang memiliki jarak dari titik pusat yang sama untuk semua titik. Lingkaran dibuat dengan menggambarkan seperempat lingkaran, karena bagian lain dapat dibuat sebagai bagian yang simetris. Penambahan x dapat dilakukan dari 0 ke r sebesar unit step, yaitu menambahkan y untuk setiap step. Simetris delapan titik Proses pembuatan lingkaran dapat dilakukan dengan menentukan satu titik awal. Bila titik awal pada lingkaran (x,y), maka terdapat tiga posisi lain, sehingga dapat diperoleh delapan titik. Dengan demikian, hanya diperlukan

62 untuk menghitung segmen 45o dalam menentukan lingkaran selengkapnya. Delapan titik simetris, yaitu : Kuadran I (x,y),(y,x) Kuadran II (-x,y),(-y,x) Kuadran III (-x,-y),(-y-x) Kuadran IV (x,-y),(y,-x)

Algoritma lingkaran midpoint disebut juga algoritma lingkaran Bressenham. Algoritma yang digunakan

membentuk semua titik berdasarkan titik pusat dengan penambahan semau jalur disekeliling lingkaran. Dalam hal ini hanya diperhatikan bagian 45o dari suatu lingkaran, yaitu oktan kedua dari x = 0 ke x = R/2, dan menggunakan prosedur circle point untuk menampilkan titik dari seluruh lingkaran.

<0, bila (x,y) di dalam garis lingkaran circle(x,y) =0, bila lingkaran >0, bila (x,y) di luar garis lingkaran (x,y) di garis

63 Fungsi lingkaran menggambarkan posisi midpoint antara pixel yang terdekat dengan jalur lingkaran setiap step. Fungsi lingkaran menentukan parameter pada algoritma lingkaran. Langkah-langkah pembentukan lingkaran : 1. Tentukan radius r dengan titik pusat lingkaran (xc,yc) kemudian diperoleh (xc,yc) = 0,r). 2. Hitung nilai dari parameter P0 = 5/4 - r 1-r

3. Tentukan nilai awal k = 0, untuk setiap posisi xk berlaku sebagai berikut: Bila pk<0, maka titik selanjutnya adalah (xk+1,yk) Pk+1 = pk +2 xk+1+1 Bila pk >0, maka titik selanjutnya adalah (xk+1,yk-1) Pk+1 = pk +2 xk+1+1 - 2 yk+1 Dimana 2 xk+1 = 2 xk + 2 dan 2 yk+1 = 2 yk 2 4. Tentukan titik simetris pada ketujuh oktan yang lain. 5. Gerakkan setiap posisi pixel (x,y) pada garis melingkar dari lingkaran dengan titik pusat (xc,yc) dan tentukan nilai koordinat : x= x + xc dan y = y + yc 6. Ulangi langkah ke 3 -5, sampai dengan x>=y.

Contoh : Untuk menggambarkan algoritma Bressenham dalam pembentukan suatu lingkaran dengan titik pusat (0,0) dan radius 10, perhitungan berdasarkan pada oktan dari kuadran pertama dimana x =0 sampai x =y. Penyelesaian :

64 (x0,y0) =(0,0) r = 10 (x0,y0) = (0,10) 2x0 = 0, 2y0 = 20 parameter p0 = 1-r p0 = -9

ATRIBUT OUTPUT PRIMITIF


Pada umumnya, setiap parameter yang memberi pengaruh pada output primitive ditampilkan sesuai dengan parameter atribut.

65 Beberapa parameter atribut, seperti ukuran dan warna ditentukan sebagai karakteristik dasar dari parameter. Sedangkan yang lain ditentukan untuk penampilan pada kondisi tertentu. Teks dapat dibaca dari kiri ke kanan, miring searah diagonal (slanted diagonal), atau vetical sesuai kolom. Salah satu cara untuk mengatur atribut output primitif, yaitu dengan daftar parameter fungsi yang berkaitan, contohnya fungsi menggambar garis dapat berisi parameter untuk warna, tebal, dan lainnya. 1. Atribut Garis Atribut dasar untuk garis lurus adalah type (tipe), width (tebal), dan color (warna). Dalam berapa paket aplikasi grafik, garis dapat ditampilkan dengan menggunakan pilihan pen atau brush. a. Tipe Garis Garis mempunyai beberapa linetype (tipe garis) diantaranya solid line, dashed line (garis putus), dan dotted line (garis titik-titik). Algoritma pembentukan garis dilengkapi dengan pengaturan panjang dan jarak yang menampilkan bagian solid sepanjang garis. Garis putus dibuat dengan memberikan nilai jarak dengan bagian solid yang sama. Garis titik-titik dapat ditampilkan dengan memberikan jarak yang lebih besar dari bagian solid.

b. Tebal Garis Implementasi dari tebal garis tergantung dari kemampuan alat output yang digunakan. Garis tebal pada video monitor dapat ditampilkan sebagai garis adjacent parallel (kumpulan

66 garis sejajar yang berdekatan), sedangkan pada plotter mungkin menggunakan ukuran pen yang berbeda. Pada implementasi raster, tebal garis standar diperoleh dengan menempatkan satu pixel pada tiap posisi, seperti algoritma Bressenham. Garis dengan ketebalan didapatkan dengan perkalian integer positif dari garis standar, dan menempatkan tambahan pixel pada posisi sejajar. Untuk garis dengan slope kurang dari 1, routine pembentukan garis dapat dimodifikasi untuk menampilkan ketebalan garis dengan menempatkan pada posisi vertikal setiap posisi x sepanjang garis. Untuk garis dengan slope lebih besar dari 1, ketebalan garis dapat dibuat dengan horizontal span.

c. Pilihan Pen dan Brush Pada beberapa paket aplikasi grafik, dapat ditampilkan dengan pilihan pen maupun brush. Kategori ini meliputi bentuk, ukuran, dan pola (pattern). Ketebalan yang bermacam-macam dari garis yang mempunyai bentuk pen dan brush dapat ditampilkan dengan cara mengubah ukuran dari mask.

d. Warna Garis Bila suatu sistem dilengkapi dengan pilihan warna (atau intensitas), parameter yang akan diberikan pada indeks warna termasuk dalam daftar nilai atribut dari sistem. Routine polyline membuat garis pada warna tertentu dengan

67 mengatur nilai warna pada frame buffer untuk setiap posisi pixel, menggunakan prosedur set pixel. Jumlah warna tergantung pada jumlah bit yang akan digunakan untuk menyimpan informasi warna.

2. Fill Area Primitif Fill area (pengisian area) output primitif standar pada paket aplikasi grafika pada umumnya adalah warna solid atau pola raster. Terdapat dua dasar pendekatan untuk mengisi area pada raster sistem. Menentukan overlap interval untuk scan line yang melintasi area Dengan memulai dari titik tertentu pada posisi di dalam poligon dan menggambar dengan arah menyebar ke pinggir, sampai batas poligon.

Algoritma Boundary-Fill
Metode ini bermanfaat untuk paket aplikasi grafik interaktif, dimana titik dalam dapat dengan mudah ditentukan. Prosedurnya yaitu menerima input koordinat dari suatu titik (x,y), warna isi dan warna garis batas. Dimulai dari titik (x,y) prosedur memeriksa posisi titik tetangga, yaitu apakah merupakan warna batas, bila tidak maka titik tersebut digambarkan dengan warna isi. Proses ini dilanjutkan sampai

68 semua titik pada batas diperiksa. Ada dua macam metode yaitu 4-connected dan 8-connected.

Algoritma Flood-Fill
Metode ini dimulai pada titik (x,y) dan mendefinisikan seluruh pixel pada bidang tersebut dengan warna yang sama. Bila bidang yang akan diisi warna mempunyai beberapa warna, pertama-tama yang dilakukan adalah membuat nilai pixel yang baru, sehingga semua pixel mempunyai warna yang sama.

3. Pembentukan Karakter Huruf, angka dan karakter lain dapat ditampilkan dalam berbagai ukuran (size) dan style. Jenis huruf dibagi menjadi 4 macam, yaitu serif, sanserif, agyptian dan dekoratif. Serif Huruf dalam kategori serif mempunyai kait pada ujungnya. Misalnya : times new roman, book antiqua. Sanserif Huruf dalam kategori sanserif tidak mempunyai kait pada ujungnya. Misalnya : arial, helvetica, tahoma. Agyptian Huruf dalam kategori agyptian mempunyai kait dengan bentuk segi empat yang mempunyai karakter kokoh. Dekoratif

69 Huruf dalam kategori dekoratif mempunyai bentuk indah. Misalnya : monotype corsiva Dua macam metode dapat digunakan untuk menyimpan jenis huruf dalam komputer. Metode sederhana bitmap menggunakan pola grid dengan bentuk segi empat, dan karakternya disebut dengan bitmap font. Grid dari karakter dipetakan pada posisi frame buffer, bit yang mempunyai nilai 1 berhubungan dengan tampilan pixel pada monitor. Metode lain, yaitu dengan stroke menggunakan garis lurus dan kurva, karakternya disebut dengan outlilne font. Huruf ditampilkan menurut koordinat relatif (x,y) dimana pusat dari koordinat adalah pada posisi kiri bawah dimana karakter pertama yang ditampilkan.

Antialiasing
Seperti yang telah dikatakan sebelumnya bahwa konversi rasterscan adalah pengisian harga-harga elemen suatu "matriks" (yaitu frame buffer) sedemikian rupa sehingga secara visual

"tergambarkan" primitif- rimitif grafik yang bersangkutan. Jadi pada dasarnya adalah semacam diskretisasi obyek tsb.

Selanjutnya sebagai sesuatu yang diskret, masalah yang timbul adalah distorsi informasi yang disebut aliasing. Secara visual obyek garis atau batas suatu area akan terlihat sebagai tangga (effek tangga atau "jaggies"). Peningkatan resolusi frame buffer dapat mengurangi efek ini namun tidak dapat dihilangkan sama

70 sekali karena keterbatasan teknologi (ingat faktor-faktor yang menentukan resolusi: refresh rate, dan ukuran frame buffer). Pada sistem raster dengan tingkat intensitas > 2 bisa diaplikasikan metoda antialiasing dengan memodifikasi

intensitas pixel-pixel "batas" obyek dengan latar atau obyek lainnya. Modifikasi tsb. akan memper-"halus" batas-batas tsb. sehingga mengurangi penampakan yang "jaggies" tsb. Ada tiga pendekatan: o o o Supersampling (postfiltering) Area sampling pixel phasing

Supersampling atau Postfiltering


Secara lojik metoda ini "memperhalus" ukuran pixel ke dalam subpixel-subpixel dan "menggambarkan" garis pada grid subpixel tsb. lalu harga intensitas suatu pixel ditentukan sesuai dengan berapa banyak subpixelnya dikenai "garis" tersebut. Relasi: intensitas pixel ~ jumlah subpixel pada garis. Ada dua cara penghitungan relasi tersebut : Menganggap garis adalah garis dengan ketebalan infinitesimal 0 (hanya garis lojik). Untuk subsampling 3x3 ada 4 kemungkinan tingkatan: 3 subpixel, 2 subpixel, 1 subpixel, dan tidak ada. Pemberian intensitas sesuai dengan keempat tingkat tersebut.

71

Contoh :

Menganggap garis adalah garis dengan tebal tetap yaitu 1 pixel (yaitu suatu segiempat dengan lebar 1 pixel) dan intensitas dihitung sesuai dengan jumlah subpixel yang "tertutupi" oleh segi empat ini (Perlu diambil acuan bahwa suatu subpixel "tertutupi", misalnya jika sudut kiri bawah subpixel ada di dalam segi empat).Yang paling sederhana adalah menggunakan harga rasio jumlah subpixel terhadap total subpixel pada pixel sebagai fungsi intensitas. Untuk subsampling 3x3 total subpixel adalah 9 sehingga ada 10 tingkat intensitas yang bisa diberikan. Khusus titik ujung yang berharga bilangan bulat (karena bisa untuk koordinat bilangan real) Akan diberi harga penuh

72

Alternatif penghitungan sederhana (rasio tsb.) ini adalah dengan pembobotan dengan mask diskret (Pixel Weighting Mask), dan pembobotan dengan mask kontinyu (continuous filtering).

Pixel-weighting Masks Alternatif menggunakan rasio secara langsung di atas, teknik fitering dalam pengolahan citra (bedanya: pengolahan citra pada pixel sedangkan di sini pada subpixel) dengan suatu mask (atau kernel) sesuai dengan subdivision pixel misalnya 3x3 subpixel digunakan untuk menghitung. Ada beberapa bentuk mask. Contohnya: - box mask (berefek averaging) - gaussian mask Kadang-kadang mask meliputi juga subpixel di pixel tetangganya untuk mendapatkan hasil yang lebih smooth.

Continuous Filtering

73 Smoothing mirip weighting mask di atas pada subpixelsubpixel (dari pixel ybs. dan juga dari subpixel tetangganya) namun menggunakan fungsi permukaan kontinyu: box, konus, atau gaussian. Jadi secara teoritis dilakukan konvolusi antara fungsi filter dengan fungsi citra pada tingkat subpixel. Secara praktis untuk mengurangi komputasi digunakan suatu table-lookup dari kombinasi pixel dengan pixel-pixel tetangganya.

a. Area Sampling Pada Unweighted Area Sampling suatu garis diangap sebagai segiempat dengan lebar 1 pixel seperti halnya pada supersampling cara kedua di atas. Yang dihitung adalah luas bagian pixel yang tertutup "segiempat" garis tersebut secara geometris. Penghitungan lebih akurat tetapi karena

memerlukan perhitungan yang lebih rumit maka metoda ini lebih banyak digunakan untuk anti-aliasing batas dari fillarea. Metodaini menghitung luas bagian dari pixel yang tertutup area (garis atau fill-area) dan dari rasio luas tsb. terhadap luas pixel dapat ditentukan bobot foreground terhadap background untuk mendapatkan intensitas pixel. Cara penghitungannya? Pitteway & Watkinson: untuk fillarea dengan memodifikasi midpoint algorithm untuk garis sehingga fungsi diskriminan p menentukan juga persentasi tsb. Dalam algoritma ini pada persamaan garis y = m x + b, m 1

74 digunakan fungsi keputusan: p = m (xi + 1) + b - (yi + ) Sementara bagian pixel yang tertutup area di bawah garis tersebut adalah suatu trapesium dengan ketinggian kiri y = m (xi - ) + b - (yi ) dan ketinggian kanan y = m (xi + ) + b - (yi ) serta lebar 1 (satuan pixel). Luas trapesium ini adalah = m xi + b - (yi - 0.5) = p - (1 - m)

b. Pixel Phasing Pergeseran mikro (microposition) yang dilakukan oleh deflektor elektron sebesar 1/4, 1/2 atau 3/4 diameter pixel. Kompensasi Perbedaan Intensitas Garis Secara normal garis diagonal (tanpa antialiasing) lebih tipis dari garis horisontal/vertikal karena pada garis tsb. pixel-pixel lebih spanned dari pada pixel-pixel pada garis hosrisontal/diagonal. Jadi secara visual efek ini dapat juga dikurangi dengan menaikkan intensitas garis yang mengarah diagonal sesuai dengan sudut dan mencapai maksimum pada 450 dengan faktor 2 dari garis horisontal/vertikal.

KESIMPULAN OpenGL memiliki beberapa komponen dasar untuk

merepresentasikan suatu obyek. Komponen dasar tersebut, disebut sebagai OpenGL Geometric primitives. Komponen-komponen tersebut antara lain :

75 o o o o o o o o o GL_POINTS digunakan untuk membuat titik GL_LINES digunakan untuk menciptakan garis. GL_LINESTRIP digunakan untuk membuat bangun simetris terbuka. GL_TRIANGLE digunakan untuk membuat gambar segitiga. GL_TRIANGLE FAN digunakan untuk membuat bangun bebas GL_TRIANGLESTRIP digunakan untuk membuat bangun bebas GL_QUADS segiempat GL_QUADSTRIP digunakan untuk membuat bangun bebas GL_POLYGON digunakan untuk membuat bangun bebas digunakan untuk membuat gambar

76

BAB 6 INTERAKSI KEYBOARD DAN MOUSE


PENGENALAN
Keyboard adalah salah satu hal yang penting untuk game komputer, dan menggunakan komputer secara umum. Bisakah Anda bayangkan mencoba untuk mengetik dengan mouse? Atau jumlah tombol yang akan diperlukan pada mouse untuk memungkinkan pergerakan * dan * memotret di First Person Shooter? Kabar baiknya adalah bahwa keyboard interaksi, berkat GLUT, adalah hal yang sangat mudah untuk menangani. Metode untuk menekan tombol, satu untuk ketika tombol pertama ditekan, dan satu untuk ketika tombol dilepaskan. a. Keyboard Keyboard merupakan unit input yang paling penting dalam suatu pengolahan data dengan komputer. Keyboard dapat berfungsi memasukkan huruf, angka, karakter khusus serta sebagai media bagi user (pengguna) untuk melakukan perintahperintah lainnya yang diperlukan, seperti menyimpan file dan membuka file. Penciptaan keyboard komputer berasal dari model mesin ketik yang diciptakan dan dipatentkan oleh Christopher Latham pada tahun 1868, Dan pada tahun 1887 diproduksi dan

77 dipasarkan oleh perusahan Remington. Keyboard yang

digunakanan sekarang ini adalah jenis QWERTY, pada tahun 1973, keyboard ini diresmikan sebagai keyboard standar ISO (International Standar Organization). Jumlah tombol pada keyboard ini berjumlah 104 tuts. Keyboard sekarang yang kita kenal memiliki beberapa jenis port, yaitu port serial, ps2, usb dan wireless. Contoh dari alat input jenis keyboard : 1. Point Of Sale Terminal Biasanya digunakan di supermarket. Alat ini terdiri dari keyboard, display (monitor) dan alat cetak (printer). Alat ini merupakan perkembangan dari cash register, namun dapat dihubungkan dengan computer. Alat ini dapat digunakan untuk pengendalian persediaan. Alat tambahannya antara lain : OCR tag reader serta barcode wand 2. Visual Display Terminal Merupakan alat input langsung, yang terdiri dari keyboard dan visual display (monitor) 3. Point Of Sale Terminal Biasanya digunakan di supermarket. Alat ini terdiri dari keyboard, display (monitor) dan alat cetak (printer). Alat ini merupakan perkembangan dari cash register, namun dapat dihubungkan dengan computer. Alat ini dapat digunakan untuk

78 pengendalian persediaan. Alat tambahannya antara lain : OCR tag reader serta barcode wand 4. Visual Display Terminal Merupakan alat input langsung, yang terdiri dari keyboard dan visual display (monitor) Jenis-Jenis Keyboard : 1.) QWERTY 2.) DVORAK 3.) KLOCKENBERG Keyboard yang biasanya dipakai adalah keyboard jenis QWERTY, yang bentuknya ini mirip seperti tuts pada mesin tik. Keyboard QWERTY memiliki empat bagian yaitu : 1. typewriter key 2. numeric key 3. function key 4. special function key.

1. Typewriter Key Tombol ini merupakan tombol utama dalam input. Tombol ini sama dengan tuts pada mesin tik yang terdiri atas alphabet dan tombol lainnya sebagaimana berikut : Back Space Tombol ini berfungsi untuk menghapus 1 character di kiri cursor Caps Lock

79 Bila tombol ini ditekan, maka lampu indikator caps lock akan menyala, hal ini menunjukkan bahwa huruf yang diketik akan menjadi huruf besar atau Kapital, bila lampu indicator caps lock mati, maka huruf akan menjadi kecil. Delete Tombol ini berfungsi untuk menghapus 1 karakter pada posisi Esc Tombol ini berfungsi untuk membatalkan suatu perintah dari suatu menu. End Tombol ini berfungsi untuk memindahkan cursor ke akhir baris/halaman/lembar kerja. Enter Tombol ini berfungsi untuk berpindah ke baris baru atau untuk melakukan suatu proses perintah. Home Untuk menuju ke awal baris atau ke sudut kiri atas layar. Insert Tombol ini berfungsi untuk menyisipkan character. Page Up Tombol ini berfungsi untuk meggerakan cursor 1 layar ke atas. Page Down Tombol ini berfungsi untuk Menggerakkan cursor 1 layar ke bawah. cursor

80 Tab Tombol ini berfungsi untuk memindahkan cursor 1 tabulasi ke kanan. 2. Numeric Key Tombol ini terletak di sebelah kanan keyboard. tombol ini terdiri atas angka dan arrow key. Jika lampu indikator num lock menyala maka tombol ini berfungsi sebagai angka. Jika lampu indikator num lock mati maka tombol ini berfungsi sebagai arrow key. 3. Function Key Tombol ini terletak pada baris paling atas, tombol fungsi ini ini terdiri dari F1 s/d F12. Fungsi tombol ini berbeda-beda tergantung dari program komputer yang digunakan.

4. Special Function Key Tombol ini terdiri atas tombol Ctrl, Shift, dan Alt. Tombol akan mempunyai fungsi bila ditekan secara bersamaan dengan tombol lainnya. Misalnya, untuk

memblok menekan bersamaan tombol shift dan arrow key, untuk menggerakan kursor menekan bersamaan ctrl dan arrow key.

81

Fungsi dasar pembuatan animasi denganmenggunakan KeyboardFunction.


GLUTAPI void APIENTRY glutKeyboardFunc(void (GLUTCALLBACK *func)(unsignedchar key, int x, int y));

Dalampenggunaan glutKeyboardFuncdimungkinkan untukmendeteksiinput darikeyboard.Fungsi ini

diletakkanpada fungsi maindari program, danparameternya adalah callbackfunction yang telah didefinisikan berupa fungsi dengan 3 parameter, seperti contoh di bawah ini.
void myKeyboard(unsignedchar key, int x, int y){ if(key == 'a') glTranslatef(4,0,0); //seleksi tombol yang ditekan } void mySpecialKeyboard(int key, int x, int y){ switch(key){ case GLUT_KEY_??? : ; break; } }

Agar fungsi keyboard ini dapat dideteksi terus maka fungsi untuk animasi (update) harus telah disertakan. Untuk fungsi callback yang memanggil tombol keyboard normal/biasa adalah
glutKeyboardFunc(myKeyboard); fungsi myKeyboard //hanya memanggil

sedangkan untuk mendeteksi tombol-tombol keyboard yang bersifat spesial seperti tombol F1, arah panah, Home, Enter, dsb dapat menggunakan callback function
glutSpecialFunc(mySpecialKeyboard); //hanya memanggil fungsi mySpecialKeyboard

82

untuk tombol-tombol spesialnya adalah sebagai berikut GLUT_KEY_F1 F1 function key GLUT_KEY_LEFT Left function key GLUT_KEY_F2 F2 function key GLUT_KEY_RIGHT Right function key GLUT_KEY_F3 F3 function key GLUT_KEY_UP Up function key GLUT_KEY_F4 F4 function key key GLUT_KEY_F5 F5 function key GLUT_KEY_DOWN Down function key GLUT_KEY_F6 F6 function key GLUT_KEY_PAGE_UP Page Up function key GLUT_KEY_F7 F7 function key key GLUT_KEY_F8 F8 function key GLUT_KEY_PAGE_DOWN Page Down GLUT_KEY_F9 F9 function key function key GLUT_KEY_F10 F10 function key GLUT_KEY_HOME Home function key GLUT_KEY_F11 F11 function key GLUT_KEY_END End function key GLUT_KEY_F12 F12 function key GLUT_KEY_INSERT Insert 0. script dasar untuk melakukan interaksi keyboard pada OpenGL
glutInitWindowSize(640, 480); glutInitWindowPosition(100, 100); dan glutTimerFunc(50,timer,0); glutDisplayFunc(display);

83
glutKeyboardFunc(myKeyboard); glutSpecialFunc(mySpecialKeyboard);

CODING
1. Tekan Tombol Metode untuk menekan tombol keyboard menggunakan fungsi keyPressed yang mempunyai 3 parameter. Parameter pertama untuk kunci saat ditekan, kedua dan ketiga untuk memberikan lokasi mouse saat kunci itu ditekan. kekosongan keyPressed (unsigned arang kunci, int x, int y) { }

Setelah menuliskan kode di atas, cara untuk mengaksesnya adalah sebagai berikut : glutKeyboardFunc (keyPressed); / / Katakan GLUT untuk menggunakanmetode "keyPressed" untuk penekanan tombol

namun, ada juga kode yang menandakan bahwa jika tombol keyboard tersebut ditekan akan menjalankan aksi. Jika (tombol == 'a') { / / Jika mereka 'sebuah' tombol ditekan / / Lakukan tindakan yang terkait dengan 'a' kunci }

84 2. Tombol Up Fungsi tombol register sampai ketika tombol dilepaskan. Hal ini berguna untuk pengaturan beberapa nilai ketika kunci pertama ditekan, dan ingin menjaga nilai itu sampai tombol

dilepaskan. Sekali lagi, karena hal ini ditangani oleh GLUT, kita perlu pergi dan membuat metode untuk menangani hal ini, dan hanya seperti keyPressed metode , yang satu ini akan mengambil dalam 3 parameter. Ketiga parameter yang persis sama dengan 3 dalam keyPressed metode .Tapi kita akan menyebutnya metode keyup. Jadi mari kita pergi ke depan dan membuat metode untuk ini. kekosongan keyup (unsigned arang kunci, int x, int y) { } Cara mengaksesnya : glutKeyboardUpFunc (keyup); / / Katakan GLUT untuk menggunakanmetode "keyup" sampai kunci peristiwa Untuk menggunakan keyup metode , persis sama dengan

menggunakan keyPressedmetode , sehingga kita dapat memanggil kode yang sama persis jika kita ingin. jika (tombol == 'a' ) { / / Jika mereka 'sebuah' kunci dirilis / / Lakukan tindakan yang terkait dengan 'a' kunci }

85

3. Kunci Buffer Langkah berikutnya adalah tentu saja , untuk melakukan beberapa penyangga utama, yang akan memungkinkan kita untuk menangani penekanan tombol beberapa proyek OpenGL. Perlu diketahui, variabel char adalah sama dengan byte dan dapat mengambil nilai integer dari 0 hingga 255. Hal ini karena variabel arang memiliki ukuran 2, ^ 8 atau 256. Hal ini memungkinkan kita untuk menangani hingga 256 tombol berbeda pada keyboard, atau set karakter ASCII seluruh. Jadi mari kita mulai dengan menciptakan sebuah array dari nilai Boolean yang akan memegang negara-negara kunci

kami. Benar akan ditekan, dan False akan tidak ditekan.Aku akan menyebutnya keyStates variabel karena mudah dimengerti. bool * keyStates = baru bool [256]; / / Membuat sebuah array nilai boolean panjang 256 (0-255) Untuk menetapkan posisi saat ini dalam array keyStates, pada posisi kunci saat ditekan, ke true. kekosongan keyPressed (unsigned arang kunci, int x, int y) { keyStates [key] = true ; } kekosongan keyup (unsigned arang kunci, int x, int y) { keyStates [key] = false ; }

86

4. Tombol Khusus Sementara semua di atas adalah sempurna baik untuk menggunakan penekanan tombol yang biasa, ada beberapa kunci Anda mungkin ingin menggunakan, misalnya, tombol panah, yang dapat diwakili berbeda pada beberapa sistem. Untungnya, GLUT memungkinkan kita untuk menggunakan kunci ini, asalkan kita sebut berbeda metode untuk glutKeyboardFunc. Sebaliknya, kita harus menggunakan glutSpecialFunc yang memeriksa penekanan tombol khusus. Sebagai contoh, jika kita ingin mengecek apakah panah kiri telah ditekan, kita dapat menggunakan GLUT_KEY_LEFT. Kabar terbaik adalah bahwametode yang Anda buat untuk menangani tombol khusus Anda, akan hampir identik dengan

glutKeyboardFunc metode Anda buat sebelumnya. Di bawah ini adalah contoh penggunaan tombol khusus. Pertama, membuat baru metode yang saya akan menelepon

keySpecial, yang mengambil tiga parameter, semuanya menjadi nilai integer, pertama untuk tombol ditekan, dan dua detik adalah untuk posisi x dan y mouse di saat itu metode yang disebut. Dan kemudian menyebutnya metodeutama kami dalam metode bersama dengan sisa penekanan tombol kita.

1. kekosongan keySpecial ( int kunci, int x, int y) { 2.

87 3. } 1. kekosongan keySpecialUp ( int kunci, int x, int y) { 2. 3. } 4. 1. int main ( int argc, arang ** argv) { 2. ... 3. glutReshapeFunc (membentuk kembali); / / Katakan GLUT untuk menggunakan metode "membentuk kembali" untuk membentuk kembali 4. 5. glutKeyboardFunc (keyPressed); / / Katakan GLUT untuk menggunakan metode "keyPressed" untuk penekanan tombol 6. glutKeyboardUpFunc (keyup); / / Katakan GLUT untuk menggunakan metode "keyup" untuk kejadian-kejadian kunci 7. 8. glutSpecialFunc (keySpecial); / / Katakan GLUT untuk menggunakan metode "keySpecial" untuk menekan tombol khusus 9. glutSpecialUpFunc (keySpecialUp); / / Katakan GLUT untuk menggunakan metode "keySpecialUp" untuk kejadian-kejadian kunci khusus 10. 11. glutMainLoop (); / / Masukkan loop utama GLUT itu 12. } Dan kemudian untuk fungsi untuk tombol khusus, menyatakan baru metode untuk menangani sampai acara untuk kunci khusus. Jika Anda ingin untuk buffer kunci ini, Anda dapat membuat array lain sama seperti yang kami lakukan untuk buffering kunci biasa, dan mendedikasikan array ini untuk setiap tombol khusus ditekan.

88

1. bool * keySpecialStates = baru bool [246]; / / Membuat sebuah array nilai boolean panjang 256 (0-255) Setelah Anda membuat array ini, pastikan Anda menetapkan nilainilai ke benar dan palsu, seperti yang Anda lakukan dalam metode kunci biasa, dan kemudian membuat metode lain untuk

mengendalikan apa yang terjadi ketika kita menekan tombol khusus kami, saya menelepon keySpecialOperations tambang, yang sudah memiliki kode untuk memeriksa apakah tombol panah kiri telah ditekan. 1. kekosongan keySpecialOperations ( batal ) { 2. jika (keySpecialStates [GLUT_KEY_LEFT]) { / / Jika tombol panah kiri telah ditekan 3. / / Lakukan operasi tombol panah kiri 4. } 5. }

Contoh Program : Source Code:


#include<stdlib.h> #include<glut.h> void drawQuad(int x, int y){//segi4 glBegin(GL_QUADS); glColor3f(0,1,1);//warna cyan glVertex2i(0.,0.); glVertex2i(100.,0.); glVertex2i(100.,100.); glVertex2i(0.,100.); glEnd(); glFlush();

89
} void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); drawQuad(30,10); glFlush(); } void myKeyboard(unsignedchar key, int x, int y) { if(key=='a')glTranslatef(-4,0,0); elseif (key=='d')glTranslatef(4,0,0); } void update(int value){ glutPostRedisplay(); glutTimerFunc(50,update,0); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitWindowPosition(100, 100); glutInitWindowSize(640, 480); glutCreateWindow("Ain Sayidani-Rahmi Wahyulianti"); gluOrtho2D(-320.0,320.0,-320.0,320.0); glutDisplayFunc(renderScene); glutKeyboardFunc(myKeyboard); glutTimerFunc(1000, update, 0); glutMainLoop(); }

Screenshot:

Program di atas menghasilkan sebuah kotak yang beregerak dengan meggunakan keyboard.

bisa

90 Adanya fungsi myKeyboard membuat kotak tersebut bisa bergerak ke kiri menggunakan huruf a dan bergerak ke kanan dengan menekan huruf d. Objek kotak dibuat dengan menggunakan fungsi drawQuad(). Dalam penggunaan glutKeyboardFunc dimungkinkan untuk mendeteksi input dari keyboard. Fungsi ini diletakkan pada fungsi main dari program, dan parameternya adalah callback function. Void myKeyboard() digunakan untuk mengontrol gerak objek melalui huruf-huruf yang ditekan pada keyboard.

A. KESIMPULAN Keyboard interaksi pada GLUT, adalah hal yang sangat mudah untuk menangani metode untuk menekan tombol, satu untuk ketika tombol pertama ditekan, dan satu untuk ketika tombol dilepaskan. Fungsi dasar pembuatan animasi denganmenggunakan KeyboardFunction.
GLUTAPI y)); void myKeyboard(unsignedchar key, int x, int y){ if(key == 'a') glTranslatef(4,0,0); //seleksi tombol yang ditekan } void mySpecialKeyboard(int key, int x, int y){ switch(key){ case GLUT_KEY_??? : ; break; } } void APIENTRY glutKeyboardFunc(void key, int x, int (GLUTCALLBACK *func)(unsignedchar

Macam-macam metode pada interaksi keyboard: 1. Tekan Tombol 2. Tombol Up

91 3. Kunci Buffer 4. Tombol Khusus

INTERAKSI MOUSE PADA OPENGL


A. Interaksi Manusia dengan Komputer Interaksi manusia dengan komputer adalah sebuah hubungan antara manusia dan komputer yang mempunyai karakteristik tertentu untuk mencapai suatu tujuan tertentu dengan menjalankan sebuah sistem yang bertopengkan sebuah antarmuka (interface). Yang mendasari adanya IMK adalah karena kebutuhan manusia untuk berinteraksi dengan komputer yaitu menggunakan sejumlah menu maupun teks atau juga bias menggunakan alat bantu masukan(input),yang berupa mouse ataupun keyboard.dan juga memerlukan alat bantu keluaran(output unit),yang dimana data-data tersebut dapat disimpan dalam media penyimpanan yang biasa disebut memori unit. Prinsip kerja komputer = input proses output. Kepada komputer diberikan data yang umumnya berupa deretan angka dan huruf. Kemudian diolah didalam komputer yang menjadi keluaran sesuai dengan kebutuhan dan keinginan manusia. Tanpa disadari manusia/use) telah berinteraksi atau berdialog dengan sebuah benda (layar monitor), yaitu dalam bentuk menekan

92 tombol berupa tombol angka dan huruf yang ada pada keyboard atau melakukan satu sentuhan kecil pada mouse. Yang kemudian hasil inputan ini akan berubah bentuk menjadi informasi atau data yang seperti diharapkan manusia dengan tertampilnya informasi baru tersebut pada layar monitor atau bahkan mesin pencetak (printer). Manusia pada umumnya tidak pernah tahu apa yang terjadi pada saat data dimasukkan ke dalam kotak cpu melalui keyboard. Manusia (user) selalu terfokus pada monitor/printer sebagai keluaran. Manusia jarang sekali menyadari proses interaksi dengan komputer. Manusia barumenyadari proses interaksi tersebut saat menemukan masalah dan tidak menemukan solusi pemecahannya. Biasanya manusia menyalahkan antarmuka yang kurang inovatif, kurang menarik, kurang komunikatif. Interaksi bisa dikatakan dialog antara user dengan komputer.

B. Mouse Mouse komputer adalah perangkat komputer yang berfungsi untuk menggerakkan pointer atau menunjuk perintah pada layar monitor. Pada mouse terdapat klik-kiri dan klik- kanan. Klik-kiri 1X berfungsi untuk memilih perintah, menu, atau ikon dan klik-kiri 2X berfungsi untuk membuka perintah, menu, atau ikon yang dituju. Sedangkan klik-kanan berfungsi untuk membuka perintah-perintah lain sebuah menu. Selain itu, di tengah-tengah mouse juga terdapat sebuah roda yang dikenal dengan nama Scroll Mouse yang digunakan untuk menggulir tampilan layar dengan cepat.

93 Berkaitan dengan penggunaan mouse, terdapat sejumlah istilah seperti mouse pointer, click, double click dan drag.
Mouse

pointer atau penunjuk mouse adalah tanda yang

menyatakan posisi mouse pada layar. Umumnya berbentuk tanda panah akan tetapi bisa diubah sesuai keinginan.
Klik berarti menekan salah satu tombol yang ada di mouse dalam

waktu singkat, kemudian melepaskan kembalik. Perlu diketahui bahwa jika Anda menjumpai istilah klik tanpa disertai informasi tombol yang harus diklik seperti tombol klik kanan dan klik kiri, maka yang dimaksudkan adalah mengklik tombol kiri.
Klik ganda atau double klik menyatakan tindakan mengklik dan

melepaskan kembalik tombol kiri mouse dua kali secara beruntun dalam waktu yang singkat.
Penggunaan klik dan tarik atau click and drag umumnya

bermanfaat untuk memperlancar pemakaian program aplikasi. Salah satu contoh pemanfaatannya adalah untuk memindahkan gambar dalam suatu dokumen ke lkasi lain dalam dokumen tersebut. 1) JENIS MOUSE Mouse Mekanis

94 Pada mouse jenis ini terdapat sebuah bola di bagian bawahnya untuk mendeteksi gerakan pointer. Dengan mouse ini, pergerakan pointernya lambat dan kadang tersendat-sendat.

Mouse Optical

Mouse ini merupakan pengembangan dari Mouse mekanis dimana pada jenis ini sudah tidak menggunakan bola lagi tetapi menggunakan lampu LED sebagai sensor gerakan pointer. Keunggulan mouse jenis ini jika dibandingkan dengan jenis Wheel Mouse adalah lebih tahan lama, tidak mudah kotor, pointer berjalan dengan lancar dan cepat. Mouse Wireless

Mouse jenis ini merupakan pengembangan dari Mouse optikyang sudah tidak menggunakan kabel. Kelebihan mouse ini adalah bisa digunakan dari jarak jauh karena sudah memakai teknologi infra merah, bluetooth atau sinyal radio.

95

BAGIAN-BAGIAN MOUSE Bagian-bagian pada Mouse Ball

Bagian-bagiannya sebagai berikut [sesuai dengan nomor pada gambar di atas] : 1. Tombol Klik kiri mouse 2. Klik tengah tombol 3. Tombol klik kanan mouse 4. Kabel koneksi ke PS/2 socket di komputer 5. IC (analog) mouse untuk menggerakkan mouse dan di lanjutkan ke sinyal digital untuk dikirim ke komputer 6. X-axis pendeteksi ketika mouse akan di geser ke kanan dan kiri 7. Y-axis pendeteksi ketika mouse akan di geser ke depan atau belakang

96 8. Rubbur ball, bola yang akan menerima geseran dan menghasilkan sudut x dan y yang dikirimkan pada pendeteksi axisElectrolytic capacitor 9. Resistors

Bagian-bagian Mouse Optical

Bagian-bagian dari Mouse Optical diantaranya sebagai berikut: 1. LED (obscured by wheel). 2. Pendeteksi ketika Anda menekan tombol kiri mouse. Ada saklar yang sama di sebelah kanan untuk mendeteksi tombol kanan mouse dan roda klik seluruh dipasang pada tombol lain sehingga berfungsi sebagai tombol 3. Potentiometer (variable resistor) seberapa mengukur banyak memutar bola tersebut 4. LED 5. Resistor

97 6. Mica capacitor 7. Electrolytic capacitor 8. Prism bends light from LED through 90 down onto desk 9. Scroll wheel. CHIP yang mendeteksi peneriman dari LED sehingga di terjemahkan oleh IC tersebut 10. Resistors 11. USB kabel untuk terhubung ke komputer 12. LED agar bersinar di atas meja

C. Pemanfaatan Mouse untuk Interaksi dengan OpenGL 1. Fungsi dasar pembuatan interaksi dengan menggunakan MouseFunction
GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK *func)(int button, int state, int x, int y));

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

Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk mendeteksi gerakan mouse.

2. Inisialisasi dalam penggunaan MouseFunction


void mouse(int button, int state, int x,int y){ if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN) drawDot(x,480-y); if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN) drawDot2(x,480-y);

98
if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN) drawDot3(x,480-y); } void motion(int x,int y){ }

Syntax GLUT_LEFT_BUTTON

Kegunaan untuk inisialisasi button mouse kiri.

GLUT_RIGHT_BUTTON

untuk inisialisasi button mouse kanan.

GLUT_MIDDLE_BUTTON

untuk inisialisasi button mouse tengah.

GLUT_DOWN

untuk inisialisasi ketika tombol mouse ditekan.

GLUT_UP

untuk inisialisasi ketika tombol mouse dilepaskan.

Pada fungsi main program perlu menambahkan fungsi untuk callback fungsi MouseFunction. glutMouseFunc(mouse); glutMotionFunc(motion);

99 CONTOH PROGRAM
#include<stdlib.h> #include<glut.h> #include<stdio.h> float x = 0, y = 0, z = 0; int w = 480, h = 480; void drawQuad() { glBegin(GL_QUADS); glVertex2i(0,0); glVertex2i(0,40); glVertex2i(40,40); glVertex2i(40,0); glEnd(); } void timer(int value){ glutPostRedisplay(); glutTimerFunc(50,timer,0); } void mouse(int button, int state, int xmouse, int ymouse){ if(button==GLUT_LEFT_BUTTON && state==GLUT_DOWN){ x = xmouse-(w/2); y = (h/2) - ymouse; } if(button==GLUT_MIDDLE_BUTTON && state==GLUT_DOWN){ glScalef(1.1,1.1,0); } if(button==GLUT_RIGHT_BUTTON && state==GLUT_DOWN){ glScalef(2.0,2.0,0); } if(button==GLUT_RIGHT_BUTTON && state==GLUT_UP){ glScalef(0.5,0.5,0);

100
} } void motionku(int x, int y) { printf("posisi pointer mouse (%d,%d)\n", x,y); } void renderScene(void){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glTranslatef(x,y,z); drawQuad(); glPopMatrix(); glFlush(); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(w,h); glutCreateWindow("indra&rachmat"); //glClearColor(1,1,1,0); gluOrtho2D(-100, 100, -100, 100); glutDisplayFunc(renderScene); glutTimerFunc(50, timer, 0); glutMouseFunc(mouse); glutMotionFunc(motionku); glutMainLoop(); }

Output

101

KESIMPULAN Interaksi manusia dengan komputer adalah sebuah hubungan antara manusia dan komputer yang mempunyai karakteristik tertentu untuk mencapai suatu tujuan tertentu dengan menjalankan sebuah sistem yang bertopengkan sebuah antarmuka (interface). Mouse komputer adalah perangkat komputer yang berfungsi untuk menggerakkan pointer atau menunjuk perintah pada layar monitor. Jenis-jenis mouse: Mouse Mekanis Mouse Optical Mouse Wireless

102 Paramater func adalah fungsi yang akan ditangani dengan event klik mouse. Berikut syntaxnya:
GLUTAPI void APIENTRY glutMouseFunc(void (GLUTCALLBACK *func)(int button, int state, int x, int y)); GLUTAPI void APIENTRY glutMotionFunc(void *func(int x, int y));

Fungsi di atas adalah fungsi pelengkap dari fungsi interaksi mouse untuk mendeteksi gerakan mouse.

103

BAB 7 ANIMASI OBJEK 2D


Animasi berasal dari kata dalam bahasa inggris yaitu animate yang artinya menghidupkan, memberi jiwa dan mengerakan benda mati. Animasi merupakan proses membuat objek yang asalnya suatu benda mati, kemudian secara berurutan disusun dalam posisi yang berbeda seolah menjadi hidup. Ditemukannya prinsip dasar animasi adalah dari karakter mata manusia yaitu : persistance of vision (pola penglihatan yang teratur). Paul Roget, Joseph Plateau dan Pierre Desvigenes, melalui peralatan optik yang mereka ciptakan, berhasil membuktikan bahwa mata manusia cenderung menangkap urutan gambar-gambar pada tenggang waktu tertentu sebagai sebuah pola.Animasi secara umum bisa didefinisikan sebagai suatu sequence gambar yang ditampilkan pada tenggang waktu (timeline) tertentu sehingga tercipta sebuah ilusi gambar bergerak. Pengertian animasi pada dasarnya adalah menggerakkan objek agar tampak lebih dinamis. Ada 4 jenis animasi menurut Hofstetter (2001, p26): 1. Frame Animation : Suatu animasi yang dibuat dengan mengubah objek pada setiap frame. Objek-objek tersebut nantinya akan tampak pada lokasi-lokasi yang berbeda pada layar.

104 2. Vector Animation : Suatu animasi yang dibuat dengan mengubah bentuk suatu objek. 3. Computational Animation : Suatu animasi yang dibuat dengan memindahkan objek berdasarkan koordinat x dan y. Koordinat x untuk posisi horizontal dan posisi y untuk posisi vertical. 4. Morphing : Peralihan satu bentuk objek ke bentuk objek lainnya dengan memanipulasi lebih dari satu frame sehingga nantinya akan dihasilkan keseluruhan gerakan yang sangat lembut untuk menampilan perubahan satu sampai perubahan bentuk lainnya.

Animasi pada awalnya bisa dikatakan sangat sederhana, namun sekarang telah berkembang dan dibedakan menjadi 3 teknologi , yaitu: 1. Animasi dua dimensi (2D), Sering disebut film kartun. Kartun sendiri berasal dari kata cartoon, artinya gambar yang lucu. Memang film kartun ini kebanyakan film yang lucu misalnya :

Looney Tunes Scooby Doo Doraemon Legenda Raja Matahari, The Lion King Brother Bear

105

2. Animasi tiga dimensi (3D), Finding Nemo, inilah contoh film animasi yang disebut animasi 3D atau computer generated image (CGI). CGI menghasilkan film animasi yang gambarnya benar-benar hidup dan tiga dimensi, tak sekedar datar. Salah satu studio CGI yang terbesar adalah Pixar yang berlokasi di Emeryville, California. Selain Finding Nemo, Pixar juga memproduksi Monsters.Inc, Toy Story, Toy Story 2, dan A Bugs Life. Toy Story ini merupakan film animasi panjang pertama yang menggunakan 100 persen animasi computer.

3. Animasi clay, Film animasi clay pertama diliris bulan Februari 1908 berjudul A Sculptors Welsh Rarebit Nightmare. Kalau masih susah membayangkan seperti apa animasi clay ini, tonton saja film Bob the Builder di TV, Wallace and Gromit, atau Chiken Run.Tokoh-tokoh dalam animasi clay dibuat dengan memakai rangka khusus untuk kerangka tubuhnya. Lalu, kerangka ini ditutup dengan plasticine sesuai bentuk tokoh yang ingin dibuat. Bagian-bagian tubuh kerangka ini, seperti kepala, tangan, kaki, bisa dilepas dan dipasang lagi.

106

Animasi Objek 2D OpenGL


Dalam animasi objek OpenGL, dikenal istilah transformasi. Transformasi merupakan suatu metode untuk mengubah lokasi suatu titik pembentukobjek, sehingga objek tersebut mengalami perubahan. Perubahan objek dengan mengubahkoordinat dan ukuran suatu objek disebut dengan transformasi geometri. Dalam Transformasi dasar yang akan dibahas meliputi translasi, skala, dan rotasi. Pada grafika komputer, sistem koordinat suatu objek dapat di transformasi. Transformasi ini memungkinkan terjadinya

perpindahan posisi suatu objek tanpa harus membuat model objek yang baru. Jenis-jenis transformasi yang sering digunakan pada grafika komputer dibagi menjadi 3 macam, yaitu translasi, rotasi, dan skalasi.

Translasi (Translation)
Translasi merupakan bentuk transformasi yang memindahkan posisi suatu objek, baik pada sumbu x, sumbu y, atau sumbu z. Fungsi yang digunakan untuk melakukan translasi adalah: glTranslatef(Tx, Ty, Tz) glTranslated(Tx, Ty, Tz) Tx digunakan untuk menentukan arah dan seberapa jauh suatu benda akan dipindahkan berdasarkan sumbu x. Parameter Ty digunakan untuk menentukan arah dan seberapa jauh suatu benda akan dipindahkan berdasarkan sumbu y. Sedangkan parameter Tz digunakan untuk menentukan arah dan seberapa

107 jauh suatu benda akan dipindahkan berdasarkan sumbu z (berlaku pada model 3D).

Contoh: Diketahui titik-titik pembentuk objek segitiga yaiu A(10,10), B(30,10), C(10,30) dengan transformasi vector (10,20) lakukan trnslasi terhadap objek segitiga tersebut: Titik A yA = yA + ty = 10 + 20 = 30 xA = xA + tx = 10 + 10 = 20 A(20,30) Titik B yB = yB + ty = 10 + 10 = 20 xB = xB + tx = 30 + 10 = 40 B(40,20) Titik C yC = yC + ty = 30 + 20 = 50 xC = xC + tx = 10 + 10 = 20

108

Rotasi (Rotation)
Rotasi merupakan bentuk transformasi yang digunakan untuk memutar posisi suatu benda. Fungsi yang digunakan untuk melakukan rotasi ialah: glRotatef(, Rx, Ry, Rz) glRotated(, Rx, Ry, Rz) Parameter yang dibutuhkan pada fungsi tersebut ada 4 macam, yaitu parameter untuk besar sudut putaran, parameter Rx untuk putaran berdasarkan sumbu x, parameter Ry untuk putaran berdasarkan sumbu y, dan parameter Rz untuk putaran berdasarkan sumbu z. Jika parameter bernilai postif, maka objek akan diputar berlawanan arah jarum jam. Sedangkan jika parameter bernilai negatif, maka objek akan diputar searah jarum jam. Contoh : Diketahui objek segitiga dengan titik A(10,10), B(30,10), C(10,30) di skala denganscaling factor (3,2). Titik A yA = yA * ty = 10 * 2 = 20 xA = xA * tx = 10 * 3 = 30 A(30,20) Titik B yB = yB * ty = 10 * 2 = 20 xB = xB * tx = 30 * 3 = 90

109 B(90,20) Titik C yC = yC * ty = 30 * 2 = 60 xC = xC * tx = 10 * 3 = 30 C(30,60)

Skalasi (Scaling)
Skalasi merupakan bentuk transformasi yang dapat mengubah ukuran(besar-kecil) suatu objek. Fungsi yang digunakan untuk melakukan skalasi ialah: glScalef(Sx, Sy, Sz) glScaled(Sx, Sy, Sz) Perubahan ukuran suatu objek diperoleh dengan mengalikan semua titik atau atau vertex pada objek dengan faktor skala pada masing-masing sumbu (parameter Sx untuk sumbu x, Sy untuk sumbu y, dan Sz untuk sumbu z).

Contoh: Diketahui titik-titik pembentuk objek segitiga yaiu A(10,10), B(30,10), C(10,30) dengan sudut rotasi 300 terhadap titik pusat koordinat cartesian (10,10). Titik A XA = Xp + (XA Xp)Cos 300 (YA- YP)Sin 300 = 10 + (10 -10) * 0.9 (10-10) * 0.5 = 10

110 YA = YP + (XA XP)Sin 300 + (YA YP)Cos 300 = 10 + (10 10) * 0.5 + (10 10) * 0.9 = 10 A(10,10) Titik B XB = Xp + (XA Xp)Cos 300 (YA- YP)Sin 300 = 10 + (30 -10) * 0.9 (10-10) * 0.5 = 28 YB = YP + (XA XP)Sin 300 + (YA YP)Cos 300 = 10 + (30 10) * 0.5 + (10 10) * 0.9 = 20 B(28,20) Titik C XC = Xp + (XA Xp)Cos 300 (YA- YP)Sin 300 = 10 + (10 -10) * 0.9 (30-10) * 0.5 =0 YC = YP + (XA XP)Sin 300 + (YA YP)Cos 300 = 10 + (10 10) * 0.5 + (30 10) * 0.9 = 28 C(0,28)

Refleksi
Refleksi adalah transformasi yang membuat mirror (pencerminan) dari image suatu objek. Image mirror untuk refleksi 2D dibuat relatif terhadap sumbu dari refleksi dengan

111 memutar 180o terhadap refleksi. Sumbu refleksi dapat dipilih pada bidang x,y. Refleksi terhadap garis y=0, yaitu sumbu x dinyatakan dengan matriks. 1 0 0 ] 0 1 0 Transformasi membuat nilai x sama tetapi membalikan nilai y [ berlawanan dengan posisi koordinat. Langkah: Objek diangkat Putar 180o terhadap sumbu x dalam 3D Letakkan pada bidang x,y dengan posisi berlawanan Refleksi terhadap sumbu y membalikan koordinat dengan nilai y tetap. [ 1 0 0 1 0 ] 0

Refleksi terhadap sumbu x dan y sekaligus dilakukan dengan refleksi pada sumbu x terlebih dahulu, hasilnya kemudia direfleksi terhadap sumbu y. Transformasi ini dinyatakan dengan: [ 1 0 0 ] 0 1 0

Refleksi ini sama dengan rotasi 180o pada bidang xy dengan koordinat menggunakan titik pusat koordinat sebagai pivot point. Refleksi suatu objek terhadap garis y=x dinyatakan dengan bentuk matriks 0 1 0 ] 1 0 0 Matriks dapat diturunkan dengan menggabungkan suatu sekuen [ rotasi dari sumbu koordinat merefleksi matriks. Pertama-tama

112 dilakukan rotasi searah jarum jam dengan sudut 45o yang memutar garis y=x terhadap sumbu x. Kemudian objek direfleksi terhadap sumbu y, setelah itu objek dan garis y=x dirotasi kembali ke arah posisi semula berlawanan arah dengan jarum jam dengan sudut rotasi 90o. Untuk mendapatkan refleksi terhadap garis y=-x dapat dilakukan dengan tahap: Rotasi 45o searah jarum jam Refleksi terhadap axis y Rotasi 90o berlawanan arah dengan jarum jam

Dinyatakan dengan bentuk matriks 0 1 0 ] 1 0 0 Refleksi terhadap garis y=mx+b pada bidang xy merupakan [ kombinasi transformasi translasi rotasi refleksi . Lakukan translasi mencapai titik perpotongan koordinat Rotasi ke salah satu sumbu Refleksi objek menurut sumbu tersebut

Shear
Shear adalah bentuk transformasi yang membuat distorsi dari bentuk suatu objek, seperti menggeser sisi tertentu. Terdapat dua macam shear yaitu shear terhadap sumbu x dan shear terhadap sumbu y. Shear terhadap sumbu x

113 [ 1 0 1 0 ] 0 y=y

Dengan koordinat transformasi x= x + shx.y

parameter shx dinyatakan dengan sembarang bilangan. Posisi kemudian digeser menurut arah horizontal. Shear terhadap sumbu y [ 1 0 1 0 ] 0

Dengan koordinat transformasi x=x y= shy.x+y parameter shy dinyatakan dengan sembaran bilangan. Posisi koordinat kemudian menurut arah vertikal.

Timer Function
Contoh Program 1. Berikut merupakan contoh program yang menggunakan fungsi drawQuad, serta transformasi terhadap sumbu ynegatif.
#include<stdlib.h> #include<glut.h> int y = 0; void drawQuad(){ glBegin(GL_QUADS); glColor3d(0,0.6,0.9); glVertex2f(-50,50); glColor3d(0.5,0.7,0.3); glVertex2f(-50,-50); glColor3d(0.9,0.2,0.6); glVertex2f(50,-50); glColor3d(0.5,0.8,0.8); glVertex2f(50,50);

114
glEnd(); } void timer(int value){ if (y<200) { y-= 10; } glutPostRedisplay(); glutTimerFunc(200,timer,0); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glColor3d(0,0,1); glTranslatef(0,y,0); drawQuad(); glPopMatrix(); glFlush(); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("Timer Translasi Y"); glClearColor(0.2,0.2,0.2,0); gluOrtho2D(-320,320,-320,320); glutDisplayFunc(renderScene); glutTimerFunc(100,timer,0); glutMainLoop(); }

Output:

115

116

if (y<200) { y-= 10; }

2. Program baling-baling yang dapat berputar unclockwise dengan pusatnyaberada pada pusat koordinat.
#include<stdlib.h> #include<glut.h> int rotasi, x, y, z = 0; void segitiga(){ glBegin(GL_TRIANGLES); glColor3d(0,0.6,0.9); glVertex2f(0,0); glColor3d(0.5,0.7,0.3); glVertex2f(100,150); glColor3d(0.9,0.2,0.6); glVertex2f(-100,150); glEnd(); } void timer(int value){ if(rotasi==0){ x=15;//perubahan sudut

117
} rotasi-=x; glutPostRedisplay(); glutTimerFunc(100,timer,0); } void renderScene(){ glClear(GL_COLOR_BUFFER_BIT); glPushMatrix(); glRotatef(-rotasi,0,0,1);//unclockwise segitiga(); glPopMatrix(); glPushMatrix(); glRotatef(180,1,0,0);//rotasi segitiga glRotatef(rotasi,0,0,1);//clockwise segitiga(); glPopMatrix(); glFlush(); } void main(int argc, char **argv){ glutInit(&argc, argv); glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE | GLUT_RGBA); glutInitWindowPosition(100,100); glutInitWindowSize(480,480); glutCreateWindow("Baling-Baling unClockwise"); glClearColor(0.2,0.2,0.2,0); gluOrtho2D(-320,320,-320,320); glutDisplayFunc(renderScene); glutTimerFunc(50,timer,0); glutMainLoop(); }

Output:

118

119

BAB 8 OBJEK 3 DIMENSI


DEFINISI OBJEK 3 DIMENSI
Obyek 3-D adalah sekumpulan titik-titik 3-D (x,y,z) yang membentuk luasan-luasan (face) yang digabungkan menjadi satu kesatuan. Face adalah gabungan titik-titik yang membentuk luasan tertentu atau sering dinamakan dengan sisi.

120

Sistem koordinat 3 dimensi Contoh pernyataan objek 3 dimensi adalah pada Limas segiempat Titik-titik yang membentuk objek : Titik 0 (0,150,0) Titik 1 (100,0,0) Titik 2 (0,0,100) Titik 3 (-100,0,0) Titik 4 (0,0,-100)

FUNGSI OPENGL 3 DIMENSI


a) Membersihkan Windows Pada komputer, memory untuk menampilkan gambar biasanya diisi dengan gambar yang berasal dari perintah gambar paling akhir, jadi perlu dibersihkan dengan warna latar belakang sebelum digambar lagi. Contoh berikut ini perintah yang digunakan untuk membersihkan layar latar belakang dengan warna hitam dan buffer apa yang akan dibersihkan. Dalam hal ini, buffer warna yang akan dibersihkan karena buffer warna merupakan tempat gambar disimpan.
glClearColor 0, 0, 0, 0 glClear GL_COLOR_BUFFER_BIT Or GL_DEPTH_BUFFER_BIT

121

b) Spesifikasi Warna Pada OpenGL mendeskripsikan objek dengan warna objek adalah proses yang berjalan sendiri-sendiri. Sebelum warna diubah maka semua objek yang digambar sesudah perintah tersebut akan menggunakan warna terakhir yang terdapat pada coloring scheme. Untuk warna digunakan perintah glColor3f. Contoh berikut menunjukkan urutan langkah dalam proses spesifikasi warna sebelum objek digambar. Warna yang ditampilkan adalah warna merah.
glColor3f 1, 0, 0

c) Memaksa Proses Menggambar Sampai Selesai Kebanyakan sistem grafik modern sudah menggunakan sistem graphics pipeline. Dimana CPU utama memberikan issue perintah menggambar dan hardware lain yang melakukan transformasi,clipping, shading, texturing dan lain-lain. Pada arsitektur yang demikian, proses tidak dilakukan pada satu computer karena setiap komputer mempunyai tugas sendiri. CPU utama tidak harus menunggu proses pada masing-masing komputer tadi selesai, tapi bisa dengan memberikan issue perintah gambar yang berikutnya. Untuk inilah OpenGL menyediakan perintah glFlush yang memaksa client untuk segera mengirim paket network walaupun belum penuh. Program sebaiknya ditulis menggunakan perintah ini karena glFlush tidak memaksa proses gambar untuk selesai tetapi memaksa proses gambar untuk segera dieksekusi, sehingga dijamin semua perintah gambar yang sebelumnya akan segera dieksekusi dalam suatu waktu tertentu.

122 glFlush

d) Menggambar di Bidang Tiga Dimensi Untuk menggambar grafik jenis apapun pada komputer biasanya dimulai dengan pixel. Pixel adalah elemen terkecil dari layar monitor yang mempunyai atribut warna dan posisi. Sedangkan untuk membentuk garis, poligon, objek dan lain-lain dapat dilakukan melalui urutan pixel yang berbeda. Menggambar dengan menggunakan OpenGL mempunyai perbedaan dengan bahasa lain, yaitu tidak perlu memikirkan koordinat layar secara fisik tetapi hanya perlu menspesifikasikan posisi koordinat dengan volume penglihatan. OpenGL memikirkan sendiri bagaimana caranya menggambar titik, garis, dan lainnya yang berada dalam ruang tiga dimensi ke gambar dua dimensi pada layar komputer. Area gambar yang dibatasi ini adalah ruang koordinat kartesian yang mempunyai range dari -100 hingga 100 untuk sumbu x, y dan z. Secara sederhana bidang ini dapat dianggap sebagai bidang gambar untuk perintah-perintah OpenGL. Untuk menggambar titik digunakan suatu perintah OpenGL yaitu : glVertex. Fungsi ini dapat mempunyai 2 sampai 4 parameter dari berbagai macam tipe data. Sebagai contoh perintah glVertex di bawah ini akan menspesifikasikan sebuah titik pada posisi 4 sumbu x, 4 sumbu y dan 0 untuk sumbu z. glVertex3f 4, 4, 0. Setelah diketahui cara untuk menspesifikasikan sebuah titik di ruang pada OpenGL. Selanjutnya yang harus ditambahkan adalah informasi tambahan mengenai titik tersebut, apakah titik tersebut akhir dari sebuah garis, atau merupakan sebuah titik sudut dari sebuah poligon atau lainnya, karena definisi

123 geometrik dari sebuah vertex sebenarnya bukanlah hanya sebuah titik pada layar tetapi lebih merupakan sebuah titik dimana terjadi interseksi antara dua buah garis atau kurva. Primitif adalah interpretasi sejumlah set atau deretan titik pada sebuah bentuk yang digambar pada layar. Pada OpenGL terdapat sepuluh macam primitif dari mulai menggambar sebuah titik hingga poligon. Untuk itu digunakan perintah glBegin sebagai cara memberitahu OpenGL untuk memulai menginterpretasi sederetan titik sebagai salah satu bentuk primitif. Dan untuk mengakhiri deretan titik ini digunakan perintah glEnd. Sebagai Contoh sebagai berikut : glBegin bmPolygon // spesifikasikan titik sebagai primitif glVertex3f 4, 4, 0 // spesifikasikan posisi titik glEnd // mengakhiri perintah menggambar titik

A. Fungsi untuk keperluan Transformasi


1) Fungsi Translasi (Translation) Translasi merupakan bentuk transformasi yang memindahkan posisi suatu objek, baik pada sumbu x, sumbu y, atau sumbu z. Fungsi yang digunakan untuk melakukan translasi adalah:

glTranslatef Tx, Ty, Tz


Parameter Tx digunakan untuk menentukan arah dan seberapa jauh suatu benda akan dipindahkan berdasarkan sumbu x. Parameter Ty digunakan untuk menentukan arah dan seberapa jauh suatu benda akan dipindahkan

124 berdasarkan sumbu y. Sedangkan parameter Tz digunakan untuk menentukan arah dan seberapa jauh suatu benda akan dipindahkan berdasarkan sumbu z. Contohnya :

glTranslatef 2, 2, 2

2) Fungsi Rotasi (Rotation) Rotasi merupakan bentuk transformasi yang digunakan untuk memutar posisi suatu benda. Fungsi yang digunakan untuk melakukan rotasi ialah:

glRotatef(, Rx, Ry, Rz)


Parameter yang dibutuhkan pada fungsi tersebut ada 4 macam, yaitu parameter untuk besar sudut putaran, parameter Rx untuk putaran berdasarkan sumbu x, parameter Ry untuk putaran berdasarkan sumbu y, dan parameter Rz untuk putaran berdasarkan sumbu z. Jika parameter bernilai positif, maka objek akan diputar berlawanan arah jarum jam. Sedangkan jika parameter bernilai negatif, maka objek akan diputar searah jarum jam. Contohnya :

glRotatef -30, 2, 2, 1
3) Fungsi Skala (Scalling)

125 Skalasi merupakan bentuk transformasi yang dapat mengubah ukuran (besar-kecil) suatu objek. Fungsi yang digunakan untuk melakukan skalasi ialah :

glScalef(Sx, Sy, Sz)


Perubahan ukuran suatu objek diperoleh dengan mengalikan semua titik atau atau vertex pada objek dengan faktor skala pada masing-masing sumbu (parameter Sx untuk sumbu x, Sy untuk sumbu y, dan Sz untuk sumbu z). Contohnya :

glScalef(2, 2, 2)

SPESIFIKASI OBJEK 3 DIMENSI


Pada sistem koordinat 3D harus diperhatikan orientasi dari sumbu x,y dan z. Grafika 3D mengenal 2 buah sistem koordinat, yaitu: Right-handed coordinat system (Sistem Koordinat Tangan Kanan) Left-handed coordinat system (Sistem Koordinat Tangan Kiri)

+y

+y +z +x

+x +z Right-handed Left-handed

126 Posisi sebuah titik dalam grafika 3D diekspresikan dengan (x,y,z). Beberapa titik yang berdekatan akan membentuk sebuah garus. Seperti pada grafika 2D, sebuah garis dibentuk dengan mendeskripsikan dua buah titik, yaitu (x1,y1,z1) dan (x2,y2,z2) yang menjadu ujung dari sebuah garis. Sebuah garis dalam grafika 3D dapat diekspresikan dengan sepasang persamaan, yaitu:

y y1 y 2 y1 x x1 x 2 x1 z z1 z 2 z1 x x1 x 2 x1
Pada grafika 3D, terdapat sebuah geometri yang sangat penting, yaitu bidang datar (plane). Sebuah bidang datar pada grafika 3D dispesifikasikan dengan sebuah persamaan, yaitu :

Ax + By + Cz + D = 0
Dengan adanya geometri 3D untuk mengekspresikan sebuah titik, garis dan bidang datar, maka sebuah objek 3D dapat didekripsikan dengan geometri tersebut. Sebuah objek dalam grafika 3D dapat dibangun dengan menggunakan primitif 3D.

PRIMITIF 3D
Primitif adalah beberapa bentuk dasar yang dapat dengan mudah didefinisikan secara matematik. Pada grafika 3D terdapat primitif yang paling umum : Bola (sphere) Kubus(cube) Silinder (cylinder) Kericut (cone)

127 Cincin (torus) Primitif-primitif ini biasanya diambil dari bentuk-bentuk dasar benda yang sangat umum. Sehingga pemodelan bendabenda pada grafika 3D dapat dimodelkan dengan menggunakan primitif-primitif tersebut. Setiap primitif 3D memiliki parameter, yaitu : Nilai yang mengekspresikan letak Bentuk primitif tersebut Misal : Kubus dapat diekspresikan dengan 1 buah titik (x,y,z) dan sebuah nilai yang mengekspresikan panjang rusuk primitif tersebut. Titik (x,y,z) menentukan salah satu titik sudut dari kubus, sekaligus berfungsi untuk menentukan letak primitif tersebut dalam world. Primitif dalam grafika 3D memiliki parameter yang berbeda satu dengan yang lain. Sehingga setiap objek dalam grafika 3D harus didefinisikan dari primitif apa dia diturunkan dan bagiaman cara melakukan rendering pada objek tersebut.

RENDERING
Rendering yaitu Proses untuk menghasilkan sebuah citra 2D dari data 3D.Proses ini bertujuan untuk untuk memberikan visualisasi pada user mengenai data 3D tersebut melalui monitor atau pencetak yang hanya dapat menampilkan data 2D.Metode rendering yang paling sederhana dalam grafika 3D : 1. Wireframe rendering Objek 3D dideskripsikan sebagai objek tanpa permukaan. Pada wireframe rendering, sebuah objek dibentuk hanya terlihat garis-garis yang menggambarkan sisi-sisi edges dari sebuah objek. Metode ini dapat dilakukan oleh sebuah komputer dengan sangat cepat, hanya kelemahannya adalah tidak

128 adanya permukaan, sehingga sebuah objek terlihat tranparent. Sehingga sering terjadi kesalahpahaman antara sisi depan dan sisi belakang dari sebuah objek. 2. Hidden Line Rendering Metode ini menggunakan fakta bahwa dalam sebuah objek, terdapat permukaan yang tidak terlihat atau permukaan yang tertutup oleh permukaan lainnya. Dengan metode ini, sebuah objek masih direpresentasikan dengan garis-garis yang mewakili sisi dari objek, tapi beberapa garis tidak terlihat karena adanya permukaan yang menghalanginya. Metode ini lebih lambat dari daro wireframe rendering, tapi masih dikatakan relatif cepat. Kelemahan metode ini adalah tidak terlihatnya karakteristik permukaan dari objek tersebut, seperti warna, kilauan (shininess), tekstur, pencahayaan, dll. Shaded Rendering Pada metode ini, komputer diharuskan untuk melakukan berbagai perhitungan baik pencahayaan, karakteristik permukaan, shadowcasting, dll. Metode ini menghasilkan citra yang sangat realistik, tetapi kelemahannya adalah lama waktu rendering yang dibutuhkan.
Geometr i

3.

Kamer a

Cahaya

Karakteristi k Permukaan

Algoritma Rendering

Citra Rendering

129 Secara umum, proses untuk menghasilkan rendering dua dimensi dari objek-objek 3D melibatkan 5 komponen utama : Geometri Kamera Cahaya Karakteristik Permukaan Algoritma Rendering

REPRESENTASI BENDA GRAFIKA 3D


Istilah-istilah : Vertex titik pada dunia 3D. Setiap vertex mempunyai nilai x,y,z. Nilai-nilai ini menentukan posisi vertex pada dunia 3D. Face polygon. Poligon ini adalah suatu permukaan yang nantinya akan di-render. Bentuk dari poligon ditentukan dari posisi vertex-vertexnya. Vertex-vertex ini menentukan titik sudut dari poligon tersebut. Setiap poligon memiliki vektor normal yang tegak lurus terhadap permukaan itu. Bila arah vektor normal menuju ke pengamat, maka permukaan tersebut dapat dilihat oleh pengamat, tapi jika arah verktor normal menjauhi pengamat maka permukaan tersebut tidak akan tampak. Mesh sekumpulan face/poligon yang digabung menjadi satu kesatuan membentuk suatu objek baru. Pada dasarnya objek-objek yang kompleks terdiri dari poligon-poligon yang sederhana. Umumnya poligon yang menjadi dasar pembentukan bagi objek-objek lain adalah segitiga. Segitiga dipilih karena segitiga selalu konvex. Poligon konvex dapat dirender lebih cepat daripada poligon konkaf. Suatu poligon dikatakan konvex bila suatu garis yang dibuat antara dua titik sudutnya tidak berada diluar poligon tersebut.

130 Dalam grafika komputer, sebuah benda secara umum direpresentasikan dalam bentuk permukaan segibanyak atau poligon. Sebuah benda 3D sederhana, mis. kubus terdiri dari enam permukaan datar berbentuk poligon segi empat beraturan. Masing-masing poligon permukaan kubus terdiri dari empat titik sudut, dimana titik sudut ini merupakan sebuah titik pada dunia 3D. Sehingga data sebuah benda berbentuk kubus pada grafika komputer diwakili oleh beberapa titik yang saling berhubungan membentuk sebuah garis, dimana garis-garis tersebut membentuk sebuah permukaan dan permukaan-permukaan tersebut membentuk sebuah benda 3D. Relasi antar titik, antar garis dan antar permukaan dapat dinyakan dengan sebuah tabel, seperti :

V5 V2 E1 V1 E2 V3 S1 E3 E6 E4 S2 E5 V4

Tabel Titik V1 : x1,y1,z1 V2 : x2,y2,z2 V3 : x3,y3,z3 V4 : x4,y4,z4 V5 : x5,y5,z5

Tabel Sisi E1 : V1,V2 E2 : V1,V3 E3 : V2,V3 E4 : V2,V5 E5 : V4,V5 E6 : V3,V4

Tabel Permukaan S1 : E1,E2,E3 S2 : E3,E4,E5,E6

Dari tabel-tabel tersebut, didapatkan data-data mengenai objek yang akan diolah dalam grafika komputer.

131

132

BAB 9 PENCAHAYAAN
Pencahayaan pada OpenGL
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. Gambar dibawah ini menunjukkan dua versi dari adegan yang persis sama yaitu sebuah bola, dimana satu dengan pencahayaan dan satu tanpa pencahayaan.

Gambar sebuah spere dengan diterangi cahaya dan tidak

133 Seperti gambar diatas, 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 objek yang telah dibuat terlihat lebih nyata, diperlukan tambahan efek pencahayaan pada objek yang telah kita buat. Pencahayaan adalah proses pemberian cahaya pada suatu objek, 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.

Gambar contoh ambient, diffuse, dan specular pada pantulan cahaya Dengan menggunakan OpenGL, dapat memanipulasi pencahayaan dan objek 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

134 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

Pencahayaan pada OpenGL dan Dunia nyata


Ketika melihat permukaan fisik, persepsi warna pada mata tergantung pada distribusi energi foton yang datang dan memicu selsel kerucut mata. Foton berasal dari sumber cahaya atau kombinasi dari sumber, yang sebagian diserap dan sebagian yang 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

135 lampu, tetapi beberapa cahaya datang setelah ada pantulan dari dinding satu, dua, tiga, atau lebih. Cahaya yang memantul ini disebut ambientdan 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, seolah-olah 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 bisa 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.

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

136 mata setelah memantul dari benda-benda lain. Ketika cahaya ambient 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. 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 mengilap memiliki komponen specular tinggi, dan kapur atau karpet telah hampir tidak ada. Specularity dapat juga dianggap sebagai shininess. 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.

Teknik Pencahayaan ( Lighting )


Setiap objek dapat terlihat karena ada cahaya. Cahaya yang dapat dari berbagai arah biasanya dapat diketahui asalnya dari sinar dan bayangan yang ditimbulkan. Karena pengaruh cahaya sangat besar terhadap hasil nyata maka faktor pencahayaan harus diperhitungkan. Tetapi mengingat bahwa grafika komputer adalah model matematika dari kehidupan nyata ma ka pencahayaan juga harus diubah menjadi model matematika. Mode l matematika itu harus memenuhi persyaratan sebagai berikut :

137

1. Menghasilkan efek seperti cahaya sungguhan 2. Dapat dihitung dengan cepat Model pencahayaan tiga dimensi menyangkut yang realistik menyangkut dua elemen penting yang sangat berkaitan erat dengan shading model, yaitu : 1. Keakuratan dalam menggambarkan objek. 2. Teknik pencahayaan yang baik. Teknikpencahayaanpadagrafikakomputerseringmengacupadahuku m hukumfisikayangberhubungandenganintensitaspermukaan. Untukm enyederhanakanperhitunganempirisyang didasarkan padakalkulasiphotometricyangdisederhanakan.Contoh ratiosity algori madimana perhitunganintensitascahayadenganmempertimbangkanjar ak permukaan ob jekdengansumbercahayadidalamsebuahscene. Suatuobjekbercahaya sedangkanobjek itu bukansumbercahay a, artinyacahayayangterlihatpadapermukaanobjektersebutadalahcaha yapantulan.Totalcahaya yangdipantulkanadalahpenambahandikontribusi sumbercahayadanpantulan cahaya daripermukaanobjeklaindalamscen e.Artinyasuatupermukaanobjektidaksamadengansecaralangsungdisor otakandiberipenerangan olehsumber cahaya,akantetapiterlihatjikaobjekyangletaknyaberdekatandapatpener angan. Suatuobjekyangpunyapermukaankasarmakacahaya yang dipantulkancenderung akan menyebar ke segalaarah, cahaya yangmenyebarinidisebutdiffusereflection.Apabilasumbercahayamenc

138 iptakancahayayangterangakansebuahtitikterangdisebutspecular.Efekd aricahayateranginilebihditekankanpadapermukaanyangberkilauandari padapermukaanyangtumpul. Besar sudut yang dihasilkan specular reflection terhadap vek tor normal. permukaan sama dengan sudut dimana cahaya masuk terhadap vektor normal. permukaan tapi arahnya berlawanan.Teknik pencahayaan dia ntaranya: Cahaya Tersebar Suatuobjekyangmempunyaipermukaanyangkasarmakacahay ayangdipantulkancenderungakanmenyebarkesegalaarah,cahayayang menyebarinidisebutcahayatersebar.Beberapacahayamenembuspermu kaandandiradiasikembalisecaraseragamkedalamsemuaarah.Penghitun gancahayatersebarmenggunakanm,vdans. 1. Sebagaimana cahaya tersebar disebarkan secara seragam dalam semua arah, lokasi mata, v, tidakpenting kecuali kalau v.m < 0 jika diinginkan intensitas cahaya I = 0 2. Hubungan antara kecerahan permukaan dan orientasinya cahaya didasarkan pada cos(). Metode Shading Bayangan (shading) adalah bidang yang terbentuk akibat hila ngnya sebuah sinar oleh objek yang tidak bisa ditembus oleh sinar ter sebut. Metode permukaan tersembunyi dapat digunakan untuk menempuh area dimana bayangan berada yang dihasilkan dari pencahayaan. Padasaatditentukan letak sebuahbayanganenganpencahayaandariarahmanasaja,makabayangan dapatsajaterlihatmengikutibentuksuatupola permukaan objek lain. Metodeyangdigunakanuntukmembentuksuatubayanganantaralain:

139 Metode Flat Shading Flatshadingadalahmetodeyangmudahdancepatuntukmembuat bayangandenganpermukaanpoligon.Padametodeinisebuah intensitas tunggal dihitung untuk masing masingpoligon,semuatitikpadapermukaanpoligondipaparkandengann ilaiintensitasyangsama. Karakteristik flat shading diantaranya : 1. Pemberian tone yang sama untuk setiap poligon 2. Penghitungan jumlah cahaya mulai dari titik tunggal pada permukaan . 3. Penggunaan satu normal untuk seluruhnya. Secara umum flat shading dapat menghasilkan bayangan yang akurat dengan ketent uan sebagi berikut : 1. Objek berbentuk polihendra, yaitu jaring yang mempunyai ruang terh ingga dan tertutup. 2. Semua sumber cahaya jauh dari permukaan objek. 3. Posisi penglihatan yang cukup jauh dari permukaan. Metode Guround Shading Metode ini merender sebuah permukaan poligon dengan inte rpolasi linier yaitu nilai intensitas yang mengenai setiap permukaan berbeda. Warna yang dipantulkan dihitung tiap vertex (garis) kemudian secara halusd iinterpolasikan.

140 Karakteristik bayangan yang dihasilkan : 1. 2. 3. Bayangan yang dihasilkan halus (tampak nyata) Penggunaanlevelabu abuyangberbeda disepanjangpoligon diinterpolasikan di antara titik.

Cara untuk menghasilkan bayangan dengan menggunakan metode ini adalah : 1. 2. 3. Tentukan satuan vektor normal rata-rata pada setiap titik ujung poligon. Pakaikan model iluminasi untuk setiap titik untuk menghitung i ntensitas titik. Interpolasikan secara linier intensitas titik pada permukaan polig on.

MODEL PENCAHAYAAN Salah satu tujuan dari grafik komputer adalah menghasilkan tampilan yang senyata mungkin. Untuk mewujudkan keinginan tersbut harus memperhatikan efek pencahayaan. Komputer grafik sebenarnya adalah model matematik dari kehidupan nyata maka pencahayaan harus dapat diubah menjadi model matematika. Model matematik tersebu harus memenuhi persyaratan sebagai berikut: 1. Menghasilkan efek seperti cahaya sesunguhnya. 2. Dapat dihitung dengan cepat. Pencahayan Global dan Lokal Ada berbagai model matematika yang di usulkan, namun kita dapat mengelompokkan sebagai berikut: 1. Model pencahayaan global. 2. Model pencahayaan lokal.

141

Model Pencahayaan Global Model pencahayaan global merupakan model matematika yang memperhitngkanpengaruh interaksi cahaya terhadap berbagai objek, seperti(Pantulan, Serapan cahaya,Bayangan). Model pencahayaan global dapat dikelompokkan sebagai berikut: 1. Ray-tracing Ray-tracing cahaya menyebar ke berbagai arah, kemudian menghitung kuat cahayapada saat cahaya mengenai mata. 2. Radiocity Radiocity mengasumsikan sembarang permukaan benda yang tidak berwarna hitamdiasumsikan menjadi sumber cahaya. Cahaya yang dikeluarkan oleh benda tersebutdipengaruhi oleh cahaya yang berasal dari sumber cahaya dan pantulan dari bendalain. Model Pencahayaan Lokal Model pencahayaan lokal tidak memperhitungkan pengaruh cahaya yang dihasilkanoleh benda lain disekitarnya. Model pencahayaan lokal hanya membutuhkan: 1. Sifat materi penyusun benda. 2. Sumber cahaya. 3. Geomerti permukaan benda. 4. Posisi mata.

142

Sifat Materi Penyusun Benda Sifat materi penyusun benda menentukan bagimana cahaya bereaksi terhadap materipenyusun benda. Secara umum cahaya yang mengenai permukaan suatu benda akandipantulkan oleh permukaan benda tersebut. Model Sumber Cahaya Sumber cahaya dapat dikelompokkan menjadi dua macam, yaitu: 1. Cahaya lingkungan (Ambient Light). 2. Cahaya Titik (Point Light)

1. Cahaya Lingkungan (Ambient Light) Didalam dunia nyata semua benda memantulkan cahaya meskipun sedikit, cahayalingkungan digunakan untuk memodelkan cahaya yang berasal dari berbagai sumbertersebut. Cahaya ambient tidak mempunyai arah dan lokasi. 2. Cahaya Titik (Point Light) Sumber cahaya ini mempunyi lokasi dan arah, dengan demikian jarak antara sumbercahaya terhadap benda akan berpengaruh terhadap kuat cahaya yang diterima olehbenda. Model cahaya ini dibedakan menjadi 2 bagian, yaitu: a. Directional

143 Directional mempunyai krakteristik energi dari sumber tersebut menyebar kesemua arah dengan kekuatan yang sama. Contoh sumber cahaya ini adalahcahaya mathari.

Gambar 13.16. Sumber cahaya directional b. Positional Sumber cahaya ini mempunyai sifat dimana energi dari sumber cahaya tersebutakan melemah sebanding dengan jarak dan sudut terhadap sumber cahaya.Melemahnya kuat cahaya karena pengaruh jarak disebut attenuation.Apabila cahaya yang keluar dari sumber cahaya potensial dibatasi sudutpenyebarannya maka akan memperoleh efek lampu sorot.

Gambar Sudut penyebaran 1800

Gambar Sudut penyebaran <1800

144

BAB 10 TEXTURE
Sejarah Texture Modelling
Pemetaan Tekstur Menurut Alan Watt (Komputer Grafis 3D, bagian 7.3), Pemetaan Tekstur adalah salah satu perkembangan pertama menuju membuat gambar tiga dimensi benda yang lebih menarik dan ternyata lebih kompleks. Texture mappingadalahsebuah metode

untukmenambahkandetail, tekstur permukaan(abitmapatauraster image), atauwarna ke

dihasilkancomputergrafis atau model 3D. Penerapannya pada grafis 3D dirintis oleh Dr Edwin Catmull di gelar Ph.D. tesis 1974. Secara umum, pemetaan tekstur adalah proses melukis sebuah gambar ke permukaan dalam sebuah model. Karena gambar yang telah diberikan texture itu bisa sangat kompleks tetapi biaya texture mapping gambar

145 kompleks persis sama dengan texture mapping gambar sederhana. Penggunaan tekstur-pemetaan memungkinkan bentuk yang cukup sederhana untuk diberikan penampilan yang sangat realistis. Misalnya, dinding planar dapat memiliki tekstur batu dan dipetakan ke model untuk gambar yang sangat meyakinkan dari tiga-dimensi dinding batu (Contohnya, game check out 3D permainan komputer yang sangat baik dalam penggunaan texture mapping). Pada model memungkinkan Anda memberikan tekstur peta gambar favorit Anda pada permukaan yang Anda pilih dan kemudian memungkinkan Anda melihat hasil dari perspektif yang berbeda. Perhatikan bahwa gambar resolusi yang lebih tinggi akan menghasilkan hasil yang lebih baik bila dilihat dari jarak kecil (karena daerah permukaan yang dilihat tidak berubah, gambar resolusi tinggi menyediakan lebih banyak data untuk pemeteaan pada model tersebut). Untuk melihat contoh ini penurunan kualitas, cobalah berjalan ke dinding dalam permainan favorit 3D Anda dan mengamati cara dinding menampilkan texturenya untuk mendapatkan efek realistis nyata (dengan asumsi tidak memiliki kartu video/VGA yang memiliki texture mapping pada hardware).

146

Multitexturing adalah penggunaan lebih dari satu tekstur pada suatu waktu pada poligon. Sebagai contoh, sebuah peta cahaya tekstur dapat digunakan untuk

menyalakan permukaan sebagai alternatif pencahayaan recalculating bahwa ini setiap kali permukaan lain benjolan tekstur untuk

diterjemahkan. Teknik pemetaan, yang

multitexture sebuah

memungkinkan

mengontrol langsung menghadap arah permukaan untuk tujuan dari perhitungan pencahayaan, tetapi dapat

memberikan penampilan yang sangat baik dari permukaan yang kompleks, seperti kulit pohon atau beton kasar, yang mengambil pada pencahayaan detail di samping yang biasa mewarnai rinci. Bump pemetaan telah menjadi populer dalam beberapa video game sebagai hardware grafis telah menjadi cukup kuat untuk mengakomodasi hal itu.

147 Cara yangdihasilkanpixels pada layar yang dihitung dari texels(teksturpiksel) diatur olehtekstur

penyaringan.Metode tercepat adalah dengan menggunakan interpolasi tetangga terdekat-, tapi bilinear interpolasi atau trilinier interpolasi antaramipmaps adalah dua alternatif yang umum digunakan mengurangialiasingataujaggies.Dalam hal tekstur berada di luar koordinat tekstur, itu baik

dijepit atau dibungkus.

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 tekstur yang diinginkan. Dalam pemberian tekstur, perlu diperhatikan dasarnya seperti :

148

Menentukan tekstur :

1. Membaca atau membangkitkan tekstur 2. Menandai tekstur 3. Mengenablekan tekstur


Menandai koordinat tekstur pada vertek Menentukan parameter tekstur

Di bidang komputer grafik, Environment Mapping merupakan teknik untuk mensimulasikan sebuah obyek agar dapat merefleksikan lingkungan sekitarnya. Teknik ini pertama kali diajukan oleh Blinn dan Newell pada tahun 1976. Cube Mapping Mapping sebagai bagian dari metode

Environment

merepresentasikan

lingkungan

sekitarnya dengan cara menempelkan enam buah gambar yang berbeda di keenam sisi obyek. Hal ini membuat obyek seolah memiliki enam sisi pantul, yaitu depan, belakang, kanan, kiri, atas, dan bawah. OpenGL sebagai kumpulan library, fungsi, dan prosedur untuk bidang komputer grafik telah mendukung Cube Mapping sebagai salah satu teknik Texture Mapping. Kemampuan OpenGL dalam mendukung Cube Mapping membuat dunia komputer grafik memiliki

149 fitur tambahan untuk dapat lebih menghasilkan sesuatu yang lebih realistis. Keunggulan OpenGL yang platform-

independent memungkinkan kita untuk membuat grafik yang dapat dijalankan di semua sistem operasi dengan hanya sedikit penyesuaian.

Reflection Mapping
Reflection Mapping adalah teknik yang dapat membuat gambar/obyek menjadi terlihat semakin nyata dengan cara merefleksikan lingkungan sekitar di permukaan obyek. Dua metode Reflection Mapping yang dikenal adalah Chrome Mapping dan Environment Mapping. Pada metode Chrome Mapping, refleksi/pantulan lingkungan sekitar obyek

direpresentasikan dengan gambar yang dikaburkan (blurred) seperti halnya melihat pantulan pada benda-benda logam. Metode ini memberikan kesan mengkilap pada obyek. Metode lainnya, yaitu metode lingkungannya. Environment Tidak seperti Mapping metode

merepresentasikan lingkungan sekitarnya dengan benar-benar mencerminkan

Chrome Mapping yang hanya membuat obyek sekedar mengkilap, Environment Mapping memberikan kesan seolaholah obyek tersebut merupakan cermin dari lingkungan sekitarnya.

150

Environment Mapping
Di bidang komputer grafik, Environment Mapping merupakan teknik untuk mensimulasikan sebuah obyek agar dapat merefleksikan lingkungan sekitarnya. Teknik ini pertama kali diajukan oleh Blinn dan Newell pada tahun 1976. Pada bentuk yang paling sederhana, teknik ini biasanya memakai obyek yang permukaannya terlihat seperti krom. Konsep dari teknik ini ialah menggunakan beberapa gambar yang diambil dari lingkungan sekitarnya ataupun gambar rekaan untuk dijadikan lingkungan yang akan direfleksikan oleh obyek. Ada beberapa teknik Environment Mapping, antara lain Sphere Mapping, Dual Paraboloid Mapping, dan Cube Mapping. Adapun yang akan dijelaskan lebih lanjut ialah teknik Cube Mapping

151

Sphere Mapping
Sphere Mapping merupakan salah satu tipe dari Environment Mapping, di mana irradiance image ekuivalen dengan apa yang mungkin terlihat pada sphere (bola) saat dilihat dengan proyeksi ortografik. Konsep tersebut

diilustrasikan pada gambar di bawah ini.

152

Walaupun Sphere Mapping terasa meyakinkan, teknik ini belum sempurna benar. ldealnya, jika obyek yang akan direfleksikan berada dekat dengan obyek yang akan

merefleksikan, refleksi yang didapat akan terlihat berbeda ketika dilihat dari titik yang berbeda pula. Tetapi, hal itu tidak akan terjadi jika menggunakan Sphere Mapping. Hasil dari Sphere Mapping hanya akan benar jika semua obyek yang akan direfleksikan berada jauh dari obyek yang merefleksikan. Sehingga teknik ini membutuhkan gambar yang berbeda untuk setiap sudut pandang yang berbeda. Sebagai akibat dari tidak tertutupnya semua permukaan obyek dengan gambar tekstur, teknik inijuga kadang menimbulkan lubang pada pinggiran obyek. Berikut gambar

153 hasil Sphere Mapping dimana terlihat adanya lubang yang terbentuk.

Dual Paraboloid Mapping


Dual Paraboloid Mapping dapat mengatasi keterbatasan yang ada pada Sphere Mapping, tetapi teknik ini lebih rumit sebab membutuhkan 2 unit tekstur atau 2 tahap rendering. Keuntungan dari Dual Paraboloid Mapping yaitu : o o o o Dapat meng-capture lingkungan secara utuh. Berbasis linear. Cocok untuk hardware yang memiliki dual-texture, contohnya RIVATNT. View independent.

Cube Mapping
Cube Mapping sebagai bagian dari metode Environment Mapping merepresentasikan lingkungan sekitarnya dengan caraomenempelkan enam buah gambar -yang UerUeaa di

154 keenam sisi obyek. Hal ini membuat obyek seolah memiliki enam sisi pantul3, yaitu depan, belakang, kanan, kiri, atas, dan bawah. Cube Mapping muncul sebagai pengganti dua metode mapping sebelumnya. Hal-hal yang menjadi kelemahan dua metode terdahulu seperti ketergantungan sudut pandang (viei dependency), keterbatasan cangkupan tekstur (warping & distortion), dan kerumitan penerapan menjadi alasan

beralihnya teknik mapping ke Cube Mapping. Dengan mentransformasikan tekstur ke dalam enam sisi kubus, Cube Mapping lebih menawarkan kemudahan implementasi karena pantulan pada permukaan obyek cukup dikonsentrasikan di keenam sisi obyek. Tidak seperti Dual Paraboloid Mapping, teknik Cube Mapping hanya membutuhkan satu unit tekstur4 dan satu tahap rendering. Selain itu, teknik Cube Mapping tlAal mengurangi resolusi gambar (teknik Sphere Mapping dan Dual Paraboloid Mapping dapat mengurangi resolusi gambar sampai 78% dari resolusi semula). Secara konsep, Cube Mapping memang lebih fo fhe point dibandingkan dengan dua teknik lainnya. Namun, proses texturing pada Cube Mapping membutuhkan kemampuan yang lebih agar dapat mengakses enam gambar secara bersamaan.

155

Forward Mapping

Dispesifikasikan dengan fungsi linier parametrik:

Object-to-image

space

mapping

dilakukan

dengan

transformasi: viewing projection

156 Kekurangan: ukuran texture patch seringkali tidak sesuai dengan batas pixel, sehingga harus ada perhitungan untuk pemotongan.

Inverse Mapping

o Pada prakteknya, inverse mapping lebih sering digunakan. o Metoda: Interpolasi bilinear dan Memanfaatkan permukaan antara Inverse Mapping dengan Interpolasi Bilinear o Dapat dibayangkan sebagai transformasi dari 2D screen space (x,y) ke 2D texture space (u,v). o perasi image warping, dimodelkan dengan:

157

The Inverse Transform

Hubungan antara titik sudut poligon dengan koordinat pada texture map dispesifikasikan pada fase pemodelan. Dengan empat titik sudut quadrilateral, bisa didapat 9 koefisien (a,b,c,d,e,f,g,h,i) -> Gaussian elimination. Interpolasi Bilinear pada Screen Space : o o o Tiap koordinat vertex punya koordinat texture Yang diinterpolasikan: (u,v,q) (u,v) tidak berubah secara linear thd (x,y) (u,v) = (u/q,v/q) (u,v,q).

158

Inverse Mapping dengan Penggunaan Permukaan Antara : o Bisa digunakan jika belum ada hubungan antara koordinat vertex dan texture. Digunakan untuk menentukan hubungan tsb o Two-part mapping: Texture dipetakan ke permukaan antara (biasanya non-planar) kemudian dipetakan ke objek (3D-to-3D mapping)

o S mapping: T(u,v) T(xi,yi,zi) o O mapping: T(xi,yi,zi) -> O(xw,yw,zw) o Popularity: 1%

KESIMPULAN Tekstur adalah tampilan permukaan (corak) dari suatu benda yang dapat dinilai dengan cara dilihat atau diraba. Pada prakteknya, tekstur sering dikategorikan sebagai corak dari suatu permukaan benda, misalnya permukaan karpet, baju, kulit kayu, dan lain sebagainya. Tekstur merupakan karakteristik intrinsik dari suatu citra yang terkait dengan tingkat kekasaran (roughness), granularitas (granulation), dan keteraturan (regularity) susunan struktural piksel. Aspek tekstural dari sebuah citra dapat dimanfaatkan sebagai dasar dari segmentasi, klasifikasi, maupun interpretasi citra. Tekstur dapat

159 didefinisikan sebagai fungsi dari variasi spasial intensitas piksel (nilai keabuan) dalam citra. Berdasarkan strukturnya, tekstur dapat diklasifikasikan dalam dua golongan : a.Makrostruktur Tekstur makrostruktur memiliki perulangan pola lokal secara periodik pada suatu daerah citra, biasanya terdapat pada pola-pola buatan manusia dan cenderung mudah untuk direpresentasikan secara matematis. b.Mikrostruktur Pada tekstur mikrostruktur, pola-pola lokal dan perulangan tidak terjadi begitu jelas, sehingga tidak mudah untuk memberikan definisi tekstur yang komprehensif. Texture mapping adalah sebuah metode untuk menambahkan detail, tekstur permukaan (a bitmap atau raster image), atau warna ke dihasilkan computer grafis atau model 3D.Multitexturing adalah penggunaan lebih dari satu tekstur pada suatu waktu pada poligon. Environment Mapping merupakan teknik untuk mensimulasikan sebuah obyek agar dapat merefleksikan lingkungan sekitarnya. . Cube Mapping sebagai bagian dari metode Environment Mapping merepresentasikan lingkungan sekitarnya dengan cara menempelkan enam buah gambar yang berbeda di keenam sisi obyek. Hal ini membuat obyek seolah memiliki enam sisi pantul, yaitu depan, belakang, kanan, kiri, atas, dan bawah Reflection Mapping adalah teknik yang dapat membuat gambar/obyek menjadi terlihat semakin nyata dengan cara merefleksikan lingkungan sekitar di permukaan obyek.Environment Mapping memberikan kesan seolah-olah obyek tersebut merupakan cermin dari lingkungan sekitarnyaSphere Mapping merupakan salah satu tipe dari Environment Mapping, di mana irradiance image ekuivalen dengan apa yang mungkin terlihat pada sphere (bola) saat dilihat dengan proyeksi ortografik

160

SOAL LATIHAN
SOAL LATIHAN PENGANTAR SEJARAH GRAFKOM Jawablah pertanyaan ini dengan benar ! 1. Apakah yang dimaksud dengan Grafika Komputer? 2. Cari 2 manfaat dari Grafika Komputer selain yang dijelaskan di atas ! 3. Apakah Grafika Komputer ada segi negatifnya? Jika ada sebutkan minimal 2 ! 4. Apakah Grafika Komputer sangat penting bagi diri anda untuk masa depan? Jelaskan ! 5. Buatlah program sederhana seperti contoh struktur dasar pemograman grafis ! 6. Apakah defiinisi dari grafika computer itu? 7. Meliputi bagian apa sajakah grafika computer itu? Berikan penjelasan! 8. Dibagi dalam berapa fasekah perkembangan grafika computer? Sebutkan dan beri penjelasan! 9. Bagaimanakah perkembangan grafika computer menurut masing-masing fase? Apakah peralatan paling menonjol yang digunakan pada masing-masing fase? 10. Bagaimanakah peranan grafika computer dalam kehidupan sekarang? SOAL LATIHAN SEJARAH OPEN GL DAN MONITOR 1. Sebutkan Teknologi Display yang pernah ada di dunia! 2. Sebutkan Kelebihan dan Kekurangan dari teknologi Display LCD!

161 3. Apa jenis kristal cair yang digunakan dalam pengembangan teknologi LCD? 4. Dalam perkembangannya Teknologi display memiliki step by step yang telah di lalui, jelaskan teknologi display yang pertama kali di temukan! 5. Apa yang dimaksud dengan TV OLED?

6. Apakah pengertian dari OpenGL? 7. Sebutkan library tambahan OpenGL yang harus di letakkan pada direktori system dari windows (OS)! 8. Jelaskan dengan singkat proses instalasi GLUT pada Windows!
SOAL LATIHAN PRIMITIVE OBJECT 1. Sebutkan dan jelaskan masing-masing fungsi yang ada dalam primitive object! 2. Bagaimanakah syntax untuk menggambarkan sebuah huruf e dengan lengkung yang baik! 3. Lengkapilah syntax berikut agar menjadi sebuah kubus!

4. Dalam primitive object terdapat beberapa aturan pewarnaan. Gambarkan 3 buah bidang segitiga dengan menggunakan warnawarna yang berbeda!

162 5. Bagaimanakah langkah-langkah pembentukan lingkaran? Buatlah programnya!

SOAL LATIHAN ANIMASI OBJEK 2D Soal Latihan 1. Berikanlah penjelasan mengenai fungsi dibawah ini:
glutTimerFunc(int millis,*function, int value);

2. Fungsi dariglutPostRedisplayadalah. . . 3. Perhatikan gambar di bawah ini:

Sintaks program agar objek tersebut bergerak ke arah sumbu x positif sambil terus berrotasi searah jarum jam terhadap sumbu y adalah. . . 4. Buatlah suatu program yang menampilkan sebuah persegi yang bergerak terhadap sumbu y positif!

163

5. Parameter Tx pada fungsi glTranslatef(Tx, Ty, Tz)menyatakan...

164 SOAL LATIHAN INTERAKSI KEYBOARD DAN MOUSE 1. Sebutkan dan jelaskan alat input yang terdapat pada keyboard! 2. Tuliskan 3 syntax yang digunakan untuk memanggil fungsi keyboard pada openGL ! 3. Jelaskan mengenai kunci buffer pada openGL! 4. Jelaskan fungsi dasar pembuatan animasi dengan menggunakan KeyboardFunction! 5. Jelaskan perbedaan void myKeyboard dan void mySpecialKeyboard! 6. 1. Sebutkan pengertian dari interaksi manusia dengan komputer? 7. 2. apa perbedaan antara mouse optical dan mouse wireless? 8. 3. sebutkan bagian-bagian dari mouse? 9. 4. sebutkan kegunaan dari fungsi dibawah ini: a. GLUT_LEFT_BUTTON b. GLUT_RIGHT_BUTTON c. GLUT_MIDDLE_BUTTON d. GLUT_DOWN e. GLUT_UP 10. 5. Buatlah sebuah program dengan menggunakan ke lima fungsi diatas?

SOAL LATIHAN OBJEK 3 DIMENSI 1. Jelaskan apa yang dimaksud dengan Objek 3D ! 2. Sebutkan dan jelaskan fungsi fungsi yang menandakan Objek 3D! 3. Jelaskan kegunaan dari fungsi dibawah ini

165

4. Jelaskan maksud dari Fungsi rotasi yang digunakan pada Objek 3D beserta parameternya ! 5. Sebutkan dan jelaskan mengenai sistem koordinat yang berlaku pada objek 3D ! SOAL LATIHAN PENCAHAYAAN 1. Sebut dan jelaskan mengenai Model-model pencahayaan yang anda ketahui! 2. Jelaskan metode-metode pada teknik pencahayaan! 3. Apa yang anda ketahui tentang Ambient, Diffuse, dan Specular! 4. Jelaskan mengnai Ray-Tracing dan Radiocity! 5. Sebutkan karakteristik flat shading!

glColor3f 1, 0, 0

SOAL LATIHAN TEXTURE 1. Definisi dari apakah metode untuk menambahkan detail, tekstur permukaan (a bitmap atau raster image), atau warna ke dihasilkan computer grafis atau model 3D ? 2. Apa yang perlu diperhatikan dalam pemberian tekstur? 3. Jelaskan metode Mapping yang dalam penerapannya menggunakan metoda Interpolasi 4. Bagaimana cara membuat gambar terlihat seperti dalam dunia nyata? 5. Apakah Keuntungan dari dual parabololid mapping?

166

DAFTAR PUSTAKA
Iva. 2011. Pengantar Grafika Komputer. (Online). http://blog.uinmalang.ac.id/ivageje/2011/05/17/pengantar-grafikakomputer/, diakses tanggal 8 April 2013. Novendi, Arif. 2011. Manfaat Grafik Komputer. (Online).http://arifnovendi.blogspot.com/2011/01/manfaat-grafikkomputer.html, diakses tanggal 8 April 2013 Nurmalia, Yekti. 2011. Pengantar grafika komputer.(Online).http://blog.um.ac.id/yektinurmalia/2011/12/08/ pengantargrafika-komputer/diakses tanggal 8 April 2013. http://www.pccomputernotes.com/monitors/monitors2.htm(diakses pada tanggal 5 April 2013).

http://www.oledbuyingguide.com/oled-tv-articles/oled-tv-vslcd-tv.html(diakses pada tanggal 5 April 2013) http://id.answers.yahoo.com/question/index?qid=20081205235 131AAqIAsZ(diakses pada tanggal 5 April 2013) http://elan-listonugroho.blogspot.com/2007/09/proyektordigital.html(diakses pada tanggal 5 April 2013) http://computer.howstuffworks.com/monitor7.htm(diakses pada tanggal 5 April 2013) http://firmankaka.blogspot.com/2007/09/sejarahmonitor.html(diakses pada tanggal 5 April 2013)

167

http://archive.kaskus.us/thread/2439955(diakses pada tanggal 5 April 2013) http://andhikaprayogo.web.ugm.ac.id/?page=berita&pagekode =1&bid=4(diakses pada tanggal 5 April 2013) http://digilib.icttemanggung.org/download.php?sess=0&parent =169&expand=0&order=name&curview=0&binary=1&id=384 (diakses pada tanggal 5 April 2013) http://en.wikipedia.org/wiki/Organic_LED(diakses pada tanggal 5 April 2013)
http://rezapancawan.wordpress.com/2010/10/19/perkembanganteknologi-display/ (diakses pada tanggal 5 April 2013). Styawan Ediv.2012. Opengl Primitives Drawing 2D Object http://madein-ediv.blogspot.com/2012/04/opengl-primitivesdrawing-2d-object.html Muhammad Hanafi, S.Kom. 2012. Pemrograman Dasardengan Opengl. http://www.sinau-komputer.com/2011/12/pemrogramandasar-dengan-opengl.html Diniyah, Nasihatud. 2011. Sejarah Perkembangan Grafika Komputer. [online]. http://blog.um.ac.id/nhdhini/2011/12/13/sejarahperkembangan-grafika-komputer/ . [diakses tanggal 9 April 2013]. Suryantara , I Gusti Ngurah. ____ . Grafika Komputer. [pdf]. http://xa.yimg.com/kq/groups/23340420/221960515/nam e/Pertemuan1.pdf . [diakses tanggal 9 April 2013].

168

Ulysses , Jonh Fredrik . 2012. Sejarah Grafika Komputer danPrimitif Grafik. [pdf]. http://lenterajiwaku.files.wordpress.com/2012/09/gfminggu2.pdf . [diakses tanggal 9 April 2013]. Anonim. 2008. Animasi: dalam teori. (Online), (http://agesvisual.wordpress.com/2008/01/18/animasi-dalamteori),diakses 2 April 2013. Modul 5 Praktikum Grafika Komputer. 2013. Jurusan Teknik Elektro Universitas Negeri Malang. Laporan Tugas Grafika Komputer 9 Meterial dan Texture. Universitas Negeri Malang. Satria, Denny dan kawan-kawan. EFEK PEMETAAN TEKSTUR PROSEDURAL PADA MARBLE PROJECT DENGAN FUNGSI PERLIN NOISE.Universitas Gunadarma. Suhardiman, Deddy dan kawan-kawan. PEMBUATAN SIMULASI PERGERAKAN OBJEK 3D (TIGA DIMENSI) MENGGUNAKAN OpenGL. UNSRAT. Ulysses, John Fredrik. Power Point. RENDERING. STIMIK PALANGKARAYA. 2012. Palangkaraya. [DON96] Donald H and M. Pauline Baker, Computer GraphicsPrinciple and Practice in C, 2nd Edition, Addison Wesley, 1996 [SAM03] Samuel R.Buss, 3-D Computer Graphics A MathematicalIntroduction with OpenGL, Cambridge University Press, 2003

169

[GON02] Rafael C. Gonzales and Richard E. Woods, Digital ImageProcessing, 2nd Edition, Prentice Hall, 2002 Adi.2010.OpenGL.InteraksiKeyboard. http://bahankuliah-it.blogspot.com/2011/07/opengl-keyboardinteraksi-versi-20.html[online]diakses Senin, 8 April 2013. Modul 6 Praktikum Grafika Komputer.2013.Interaksi dengan Keyboard.Universitas Negeri Malang.

ARTIKEL TIK. __. Mengetahui Fungsi Mouse, (Online), http://www.artikeltik.com/mengetahui-fungsi-mouse.html, diakses 7 April 2013.

LiDia. 2011. Interaksi Manusia dengan Komputer, (Online), http://dya08webmaster.blog.com/2011/02/27/interaksi-manusia-dankomputer/, diakses 30 Maret 2013.

SanTekno. 2012. Bagian-bagian dari Mouse Komputer, (Online), http://santekno.blogspot.com/2012/10/bagian-bagian-dari-mousekomputer.htmldiakses 30 Maret 2013.

Komputer. 2012. Mouse Komputer, Macam Mouse dan Jenis Mouse, (Online),http://komputer.singkatpadat.com/mouse-komputer-macammouse-jenis-mouse.htmldiakses 30 Maret 2013.

170

171

LAMPIRAN
KELOMPOK GRAFIKA KOMPUTER S1 PTI OFFERING C 2011 KELOMPOK 1 110533430554 DIMAS ABDURRAHMAN S. 110533430567 VICKA YUNAIDA A. H. KELOMPOK 2 110533430565 UMI KULSUM 110533430564 CAHYA WAHYUNING I. KELOMPOK 3 110533430579 JUNIZAR FANNY RIKI ASRI 110533430556 ARIES JODI S. KELOMPOK 4 110533430569 ADITYA BAGAS FEBRIAN 110533430551 DESSY DWI PUSPITASARI KELOMPOK 5 110533430568 RACHMAT SANTOSO 110533430578 INDRA NUR MAULANA TP KELOMPOK 6 110533430570 AIN SAYIDANI 110533430572 RAHMI WAHYULIANTI KELOMPOK 7 110533430559 DEWINTA NILAN SARI 110533430566 MUHAMMAD ANDIKA PRASTOMO

172

KELOMPOK 8 110533430560 MUHAMMAD AGUNG PRAYOGO MOCHAMMAD ZAINUL AZKIYA' 110533430571 ZINAN KELOMPOK 9 110533430573 FRIHANDIKA PERMANA 110533430562 BERDINA AMELIA W KELOMPOK 10 110533430574 CAROLIN WINDIASRI 110533430563 NOVI TRISMAN HADI KELOMPOK 11 110533430550 RIZKY SYABANA 110533430580 IRFAN RAMADHANI KELOMPOK 12 110533430584 PIO ARFIANOVA F. I. 110533430547 KHATIMATUN HUSNA KELOMPOK 13 110533430553 SEVISANA GIAN P. 110533430548 NUR LAILI HIDAYATI KELOMPOK 14 110533430582 MAHANI ROSYIDA 110533430576 MUHAMMAD FAROUQ A. KELOMPOK 15

173 110533430575 ELIYANA FRISCA M. 110533430583 DHINAR MAHARDIKA ARDIANSYAH KELOMPOK 16 110533430546 FEBRIAN INDRA CAHYA 110533430557 MUHAMMAD FIKRI RAMADHAN KELOMPOK 17 110533430577 AXEL P.W.

KELOMPOK 1 + KELOMPOK 2 ==> Obyek 3D, Material warna KELOMPOK 3 + KELOMPOK 4 ==> Primitive obyek dan Transformasi Obyek KELOMPOK 5 + KELOMPOK 6 ==> Interaksi mouse dan Interaksi keyboard KELOMPOK 7 + KELOMPOK 8 ==> Pencahayaan KELOMPOK 9 + KELOMPOK 10 ==> Teknologi Grafkom, Pengantar dan Instalasi GLUT KELOMPOK 11 + KELOMPOK 12 ==> Pengantar Grafkom, Sejarah Grafkom KELOMPOK 13 + KELOMPOK 14 ==> Animasi KELOMPOK 15, KELOMPOK 16, KELOMPOK 17 ==> Texture

174