Buku grafkom

352

Transcript of Buku grafkom

Page 1: Buku grafkom
Page 2: Buku grafkom

Page i

KATA PENGANTAR

Segala puji syukur kami ucapkan atas kehadirat Tuhan

Yang Maha Esa dimana telah melimpahkan taufik serta

hidayahnya sehingga kami dapat menyelesaikan buku

Grafika Komputer Tingkat Pendidikan Perkuliahan untuk

Mahasiswa Program Studi Pendidikan Teknik Informatika.

Buku ini telah disusun untuk memberi kemudahan

bagi mahasiswa dalam mengenal dan memahami tentang

konsep OpenGL dan GLUT yang meliputi Pengantar Grafika

Komputer, OpenGL dan GLUT, Primitive Objek, Transformasi

Objek, Animasi, Interaksi Keyboard dan Mouse, Bangun 3

Dimensi, Lighting, dan Texture. Materi pada buku setiap

tema bahasan dapat dikembangkan mahasiswa melalui

keterampilan dan kreativitas dalam pemrograman

menggunakan OpenGL sehingga dapat mendukung

pengembangan dari kompetensi dasar itu sendiri.

Penulisan buku ini diharapkan mahasiswa mampu

mengembangkan kreativitasnya, baik secara mandiri maupun

kelompok melalui pemahaman mengenai konsep serta materi

yang ada pada setiap sub bahasan.

Pada kesempatan kali ini penulis mengucapkan

terima kasih kepada semua pihak yang telah memberi

bantuan sehingga buku ini dapat terselesaikan. Buku ini jauh

Page 3: Buku grafkom

Page ii

dari sempurna, maka penulis sangat mengharapkan kritik dan

saran dalam rangka penyempurnaan penyusunan buku ini di

kemudian hari. Sehingga dapat memberi manfaat bagi

mahasiswa Universitas Negeri Malang pada semua bidang

keahlian khususnya bidang Teknik Informatika .

Penulis,

Page 4: Buku grafkom

Page iii

DAFTAR ISI

KATA PENGANTAR ..................................................................... i

DAFTAR ISI ............................................................................... iii

BAB 1 ........................................................................................ 1

PENGANTAR GRAFIKA KOMPUTER........................................... 1

A. Pengertian Grafika Komputer……………………………………1

B. Sejarah Grafika Komputer…………………………………………2

C. Peranan dan Penggunaan Grafika Komputer…………….3

E. Teknologi Display Komputer Grafik………………………….15

BAB 2 ..................................................................................... .21

OPENGL dan GLUT .................................................................. 21

A. SEJARAH OPENGL…………………………………………………….21

B. PENGENALAN OPENGL…………………………………………….22

C. EVOLUSI OPENGL…………………………………………………….24

D. GLUT (GL Utility Toolkit)………………………………………….25

E. CARA KERJA OPENGL……………………………………………….26

F. SET UP PROJECT BARU…………………………………………….30

BAB 3 ...................................................................................... 34

P R I M I T I F O B J E K ........................................................... 34

A. Definisi Primitif Objek……………………………………………..34

B. Algoritma Pembentukan Objek……………………………….40

C. Contoh Program Primitif Objek………………………………46

D. Latihan……………………………………………………………………48

Page 5: Buku grafkom

Page iv

BAB 4 ...................................................................................... 50

Transformasi Objek ................................................................ 50

A. Translasi………………………………………………………………….53

B. Rotate……………………………………………………………………..56

C. Scale………………………………………………………………………..66

D. Tutorial Urutan Transformasi………………………………….69

E. Implementasi Transformasi Objek…………………………..76

BAB 5 ...................................................................................... 85

ANIMASI ................................................................................. 85

A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA……….85

B. JENIS-JENIS ANIMASI………………………………………………96

C. Konsep Animasi pada GLUT…………………………………..106

BAB 6 .................................................................................... 116

INTERAKSI KEYBOARD .......................................................... 116

A. STRUKTUR TOMBOL PADA KEYBOARD…………………..117

B. PEMETAAN (MAPPING)……………………………………….. 118

C. JENIS-JENIS KEYBOARD………………………………………….119

D. FUNGSI TOMBOL KEYBOARD KOMPUTER………………125

E. KONSEP INPUTKEYBOARD PADA GLUT-KEY BIASA DAN

SPECIAL KEY………………………………………………………….126

BAB 7 ................................................................................... 136

INTERAKSI OBJEK 2D (MOUSE FUNCTION) ........................... 136

A. SEJARAH MOUSE dan JENIS MOUSE………………………136

B. FUNGSI MOUSE……………………………………………………..148

Page 6: Buku grafkom

Page v

C. KONSEP MOUSE PADA GLUT………………………………..149

D. CONTOH PROGAM PENERAPAN MOUSE PADA

GLUT…………………………………………………………………….152

BAB 8 .................................................................................... 162

OBJEK 3D .............................................................................. 162

A. Pengertian Objek 3 Dimensi………………………………….162

B. Objek 3 Dimensi……………………………………………………163

C. Alur Proses Rendering Grafis 3D……………………………166

D. Sistem koordinat 3D……………………………………………..168

E. Primitive 3D………………………………………………………….169

F. Transformasi Objek 3 Dimensi………………………………172

G. Contoh Program dalam Open GL…………………………..177

H. Contoh Implementasi Objek 3 Dimensi dalam Open

GL…………………………………………………………………………208

BAB 9 .................................................................................... 214

LIGHTING .............................................................................. 214

A. Pendahuluan…………………………………………………………214

B. Pencahayaan pada OpenGL dan Dunia Nyata………..216

C. Cahaya Ambient, Diffuse, dan Specular…………………219

D. Implementasi Pencahayaan (lighting) pada

OpenGL………………………………………………………………..224

E. Contoh Program……………………………………………………226

BAB 10 .................................................................................. 260

TEXTURE ............................................................................... 260

Page 7: Buku grafkom

Page vi

A. Pendahuluan…………………………………………………………260

B. Konsep Texture Mapping………………………………………262

C. Teknik-teknik Realisme dalam Kompuer Grafik……..263

D. Teknik-teknik dalam Geometri………………………………267

E. Mip maps………………………………………………………………270

F. Texture maping……………………………………………………..273

G. Object Texture………………………………………………………274

H. Contoh penerapan material dan tekstur……………….275

DAFTAR PUSTAKA ................................................................. 336

KONTRIBUTOR………………………………………………………………….337

Page 8: Buku grafkom

Page 1

BAB 1

PENGANTAR GRAFIKA KOMPUTER

A. Pengertian Grafika Komputer

Menurut Suyoto (2003), grafika komputer (Computer

Graphic) dapat diartikan sebagai seperangkat alat yang terdiri

dari hardware dan software untuk membuat gambar, grafik

atau citra realistik untuk seni, game komputer, foto dan film

animasi. Sistem grafika komputer dapat dijalankan dengan

komputer pribadi (Personal Computer) atau workstation.

Grafika komputer semakin lama semakin pesat

perkembangannya sehingga definisi dari grafika komputer

dapat diartikan sebagai suatu studi tantang bagaimana

menggambar (membuta grafik) dengan menggunakan

komputer dan manipulasinya (merubah sedikit/transformasi/

animasi).

Pengertian grafik berbeda dengan image/citra, image

adalah gambar yang diperoleh dengan alat pengambil

gambar, sperti kamera, scanner, dll. Sedangkan grafik adalah

gambar yang dibuat dengan cara tertentu, yaitu cara yang ada

di grafik komputer. Grafik dan image termasuk

picture/gambar.

Page 9: Buku grafkom

Page 2

B. Sejarah Grafika Komputer

Sejarah grafika komputer telah dimulai sejak jaman

dahulu kala yaitu ketika bangsa Mesir, Roma dan Yunani

berkomunikasi secara grafik. Beberapa lukisan terdapat pada

batu nisan orang Mesir dapat dikatakan sebagai lukisan

teknik. Perkembangan grafika komputer secara sederhana

dapat dibagi menjadi empat fase, yaitu :

1. Fase Pertama (1950) era grafika komputer interaktif

­ Tidak begitu cepat karena teknologi, jumlah dan

harga komputer tidak mendukung.

­ MIT berhasil mengembangkan komputer whirlwind

dengan tabung sinar katode (Cathode Ray Tube-CRT).

­ Sudah menggunakan pena cahaya (light pen) yaitu

sebuah alat input bentuknya seperti pensil yang

digunakan untuk memilih posisi, menunjuk sesuatu

dan menggambar pada layar dengan pendeteksian

cahaya yang datang dari titik-titik pada layar CRT.

­ Telah ada alat pemrograman otomatis (Automatic

Programming Tool)

2. Fase Kedua (1960) Jaman Penelitian/Riset Grafika

Komputer Interaktif

­ Grafika interaktif modern telah ditemukan oleh Ivan

Sutherland.

Page 10: Buku grafkom

Page 3

­ Mengembangkan teknik interaktif dengan sarana

keyboard dan pena cahaya.

­ Sejumlah projek penelitian dan produk Computer

Aided Design/Manufacturing (CAD/CAM) telah

muncul.

3. Fase Ketiga (1970)

Grafika komputer interaktif telah digunakan oleh sektor

industri, pemerintah dan ilmuawan untuk memperbaiki

kualitas desain produk secara cepat dan mudah.

4. Fase Keempat (1980-1990)

­ Penelitian pada dekade ini bertumpu pada

penggabungan dan pengotomasasian pelbagai unsur

desain dan pemodelan pejal (solid modelling).

­ Teknologi hibrid mulai diperkenalkan. Teknologi ini

berguna untuk penggabungan objek pejal dengan

permukaan.

C. Peranan dan Penggunaan Grafika Komputer

Grafika komputer telah menunjukkan kemajuan yang

pesat dalam pengembangan berbagai aplikasi untuk

menghasilkan gambar. Walaupun pada awalnya aplikasi

dalam sains dan engineering memerlukan peralatan yang

mahal, perkembangan teknologi komputer memberikan

Page 11: Buku grafkom

Page 4

kemudahan penggunaan komputer sebagai alat bantu aplikasi

grafik komputer interaktif. Pada saat ini grafika komputer

digunakan secara rutin dibidang ilmu pengetahuan, teknik,

kedokteran, bisnis, industri, pemerintahan, seni, hiburan,

pendidikan, periklanan, dan lain sebagainya.

1. Desain

Dalam proses desain grafika komputer terutama

digunakan pada sistem engineering dan arsitektur. Pada

umumnya Computer Aided Design (CAD) digunakan untuk

pembuatan desain mobil, bangunan, pesawat terbang, kapal,

komputer, tekstil, dan lain-lain. Pada beberapa aplikasi

desain, objek ditampilkan dalam bentuk wireframe, dimana

diperlihatkan keseluruhan bentuk, dengan bentuk internal

dari objek tersebut. Penggunaan wireframe bermanfaat bagi

designer untuk melihat isi dari objek tersebut. Contoh

perangkat lunak yang digunakan yaitu AutoCAD, 3D Studio

Max, dan Maya.

Gambar 1.1. Contoh Penggunaan 3D dengan 3Ds Max

Page 12: Buku grafkom

Page 5

2. Grafik Presentasi

Bidang lain yang berhubungan dengan grafika

komputer adalah grafik presentasi yang dapat berupa

cetakan, slide, dan transparansi. Grafik presentasi biasanya

digunakan untuk melengkapi laporan keuangan, sains, data

ekonomi, dan lain-lain. Bentuk grafik presentasi tersebut

adalah chart, bar chart, pie chart, dan lain-lain.

Gambar 1.2. Grafik Presentasi

3. Computer Art

Metode grafika komputer digunakan dalam aplikasi

commercial art dan fine art. Seniman menggunakan

bermacam-macam perangkat lunak grafik, dan kadang

dilengkapi dengan perangkat keras khusus.

Contoh perangkat lunak yang digunakan yaitu Corel

Draw, Adobe Photoshop, Adobe Ilustrator, Macromedia, dan

sebagainya.

Page 13: Buku grafkom

Page 6

Gambar 1.3. Adobe Photoshop CS

4. Film

Pada pembuatan film layar lebar, komputer banyak

digunakan untuk menunjang proses pemodelan, visualisasi,

dan editing. Misalnya dalam proses special effect, film

animasi. “Toy Story” (1995), merupakan film pertama yang di

produksi oleh The Walt Disney Company secara penuh

menggunakan teknologi komputer dan ilmu Grafik komputer.

Sejak saat itu, mulailah studio animasi digital lain untuk

membuat film serupa. diantaranya Blue Sky Studios (Fox),

DNA Productions (Paramount Pictures and Warner Bros.),

Onation Studios (Paramount Pictures), Sony Pictures

Animation (Columbia Pictures) dan DreamWorks.

Page 14: Buku grafkom

Page 7

Gambar 1.4. Toy Story, salah satu contoh film animasi.

Kunci pembuatan film-film ini adalah sebuah aplikasi

komputer grafis yang disebut computer generated imagery

(CGI). Dengan perangkat lunak ini bisa diciptakan gambar 3D

lengkap dengan berbagai efek yang dikehendaki. Beberapa

software CGI populer antara lain Art of Illusion (bisa di-

download di sourceforce.net), Maya, Blender, dan lain-lain.

Salah satu efek CGI dalam film yang kurang dikenal,

namun penting, adalah digital grading. Dengan efek ini warna

asli hasil shooting direvisi menggunakan perangkat lunak

untuk memberikan kesan sesuai dengan skenario. Contohnya

wajah Sean Bean (pemeran Boromir) dalam “The Lord of the

Rings: the Two Tower” ketika mati dibuat lebih pucat. Jadi,

tidak dengan trik kosmetik, tetapi dengan polesan komputer.

Page 15: Buku grafkom

Page 8

5. Televisi

Grafika komputer dalam tayangan televisi juga dapat

berupa iklan, tampilan tiap acara, dan lainnya.

6. Video musik

Produksi video musik tidak terlepas dari grafika

komputer, diantaranya pembuatan promosi, cover atau

kemasan video, serta animasi yang mengiringi setiap lagu.

Proses editing video dan audio dilakukan dengan

menggunakan komputer.

7. Game

Berbagai game dapat dijalankan pada komputer PC,

video player dengan monitor TV, dan ada yang menggunakan

perangkat keras khusus. Alat input interaktif seperti mouse

dan joystick diperlukan untuk aplikasi game.

Gambar 1.5. Game “Angry Bird Seasons”

8. Pendidikan

Komputer sebagai alat bantu pendidikan (Computer

Assisted Instruction) sudah cukup dikenal. Komputer juga

Page 16: Buku grafkom

Page 9

digunakan pada aplikasi-aplikasi bukan pengajaran untuk

menunjang sistem pendidikan, seperti mengolah data,

mencatat kehadiran, dan sebagainya. Aplikasi bidang

pengajaran dengan komputer sebagai alat bantunya,

diantaranya:

- Drill and Practice (latih dan praktek)

- CAI menggantikan pengajar untuk memberikan latihan

kepada siswa

- Tutorial (penjelasan) yakni sistem komputer digunakan

untuk menyampaikan materi ajaran

- Simulasi digunakan untuk mengkaji permasalahan yang

rumit pada bidang biologi, transportasi, ekonomi, dan lain-

lain.

Gambar 1.6. Aplikasi bidang pengajaran mata pelajaran

Matematika

Aplikasi bidang bukan pengajaran dengan alat bantu

komputer, diantaranya :

Page 17: Buku grafkom

Page 10

- Computer Assisted Testing (Ujian Berbantuan Komputer):

komputer digunakan untuk sarana ujian.

- Computer Assisted Guidance (Pengarahan Berbantuan

Komputer): komputer digunakan sebagai sarana untuk

mencari informasi yang diperlukan.

- Computer Managed Instruction : komputer digunakan

untuk merencanakan pelajaran, evaluasi belajar, serta

memantau prestasi siswa.

9. Visualisasi

Ilmuwan, ahli kedokteran, analis bisnis, dan lain-lain

sering menggunakan banyak informasi suatu masalah dalam

mempelajari perilaku proses tertentu. Informasi tersebut

berisi ribuan data untuk memberikan gambaran hasil suatu

evaluasi. Data tersebut diproses sehingga mendapatkan hasil

dalam bentuk visual.

Virtual Reality adalah lingkungan virtual yang seakan-

akan begitu nyata di mana user dapat Berinteraksi dengan

objek-objek dalam suasana atau lingkungan 3 dimensi.

Perangkat keras khusus digunakan untuk memberikan efek

pemadangan 3 dimensi dan memampukan user beriteraksi

dengan objek-objek yang ada dalam lingkungan. Contoh:

aplikasi VR parachute trainer yang digunakan oleh U.S. Navy

untuk latihan terjun payung. Aplikasi ini dapat memberikan

keutungan berupa mengurangi resiko cedera selama latihan,

mengurangi biaya penerbangan, melatih perwira sebelum

melakukan terjun payung sesungguhnya.

Page 18: Buku grafkom

Page 11

Sedangkan visualisasi data adalah teknik-teknik

membuat image, diagram, atau animasi untuk

Mengkomunikasikan pesan. Visualisasi telah menjadi cara

yang efektif dalam mengkomunikasikan baik data atau ide

abstrak maupun nyata sejak permulaan manusia. Contoh:

visualisasi dari struktur protein, strutur suatu website,

visualisasi hasil data mining.

Contoh pengolahan citra dalam kehidupan sehari – hari :

1.Bidang kesehatan, digunakan untuk rontgen tubuh manusia

yang berfungsi untuk mengetahui ada atau tidaknya kelainan

di tubuh.

2.Bidang visual, bisa digunakan untuk pemotretan lewat

satelit, GPS, foto kamera dan lain-lain

10. Image Processing

Image processing (pengolahan citra) merupakan

teknik untuk memodifikasi atau menginterpretasi gambar

yang ada, seperti foto dan rangkaian gambar film. Dua macam

prinsip pengolahan citra adalah :

­ Meningkatkan kualitas gambar.

­ Memberikan persepsi dari informasi visual, seperti pada

robotik.

Untuk melakukan pengolahan citra, pertama-tama

membuat digitasi dari foto atau membuat foto menjadi file

image. Selanjutnya metode digital dapat digunakan untuk

memodifikasi gambar sehingga mendapatkan kualitas yang

baik.

Page 19: Buku grafkom

Page 12

11. Graphical User Interface (GUI)

Graphical interface (antarmuka grafik) banyak

digunakan dalam setiap aplikasi. Komponen utamanya adalah

window manager, dimana pengguna dapat mengatur

tampilan dari window. Interface juga menampilkan menu dan

icon untuk mempercepat pemilihan yang dilakukan oleh

pengguna.

D. Sistem Grafika Komputer

Graphics library/package (contoh: OpenGL) adalah

perantara aplikasi dan display hardware (Graphics System).

Application program memetakan objek aplikasi ke

tampilan/citra dengan memanggil graphics library. Hasil dari

interaksi user menghasilkan/modifikasi citra.

Penggunan user mengendalikan isi,struktur, dan

kemunculan objek serta menampilkan citra melalui suatu

komponen dasar visual feedback.

Komponen Dasar Sistem Grafik Interaktif meliputi:

- Masukan : mouse,tablet,dan stylus,peralatan

feedback,scanner,live video stream,dll.

- Proses & Penyimpanan .

- Keluaran : layar, printer berbasis kertas, perekam video,

non-linear, editor, dll.

Page 20: Buku grafkom

Page 13

Gambar Komponen Sistem Pengolah Citra Digital

Sistem Interaktif Grafik Pertama, Sketchpad, ditemukan oleh

Ivan Sutherland (1963) di MIT.

1960, William Fetter, dimulainya pembuatan model

animasi

Page 21: Buku grafkom

Page 14

1963, Ivan Shutherland (MIT), menggunakan sketcpad

(Manipulasi langsung, CAD), alat untuk menampilkan

vector.

1968, Evans & Shutherland.

1970, Pierre B’eezier, pengembangan kurva B’eezier.

1972 Ditayangkannya film Westworld, sebagai film

pertama yang menggunakan animasi komputer.

1974, Ed Catmull mengembangkan z-buffer.

1976, Jim Blinn mengembangkan texture dan bumo

mapping

1977, Film terkenal Star Wars menggunakan grafik

komputer

1979, Turner Whitted mengembangkan algoritma ray

tracing.

Pertengahan tahun 70an – 80an, pengembangan Quest

for realism radiosity.

1982, Pengembangan grafik untuk menampilkan

partikel.

1984, Digunakan untuk menggantikan model fisik pada

film The Last Star Fighter.

1986, Film hasil produksi grafik komputer di masukkan

dalam academy award, Luxo Jr. (PIXAR).

1989, Film Tin Toy (PIXAR) memenangkan Academy

Award.

Page 22: Buku grafkom

Page 15

1995, Produksi film 3D animasi panjang pertama “Toy

Story” (PIXAR & DISNEY).

Akhir tahun 90an, teknologi visualisasi interaktif untuk

ilmu pengetahuan dan kedokteran.

Tahun 2000 ditemukan perangkat keras untuk real-

time photorealistic dan rendering image.

E. Teknologi Display Komputer Grafik

Sejak terjadi pengembangan yang pesat dari tahun ke

tahun grafik komputer di gunakan sebagai teknologi yang

interaktif dalam pengembangan, maupun penggunaannya.

sampai sekrang ini komputer grafik dapat di sinkroinkan

dengan suara dalam pembelajaran multimedia. Beberapa

software yang di gunakan untuk memanipulasi grafik adalah

blender, 3D xmax, CorelDraw, Photoshop, Inkscape, Gimp, dll.

Penggunaan alat utama untuk menampilkan output pada

system grafika adalah video monitor. Operasi pada sebagian

besar video monitor berdasarkan perancanangan Cathode

Ray Tube(CRT).

Cathode Ray Tubes (CRT) mampu menampilkan

vektor dan raster dan merupakan awal mula di mana

teknologi komputer mengunakan user interface untuk

kemudahan dengan pengguna. Tidak hanya itu CRT juga

merupakan pengembangan awal dari teknologi televisi.

Untuk menggambar pada screen, komputer

membutuhkan sinkronisasi dengan pola scanning dari raster.

Page 23: Buku grafkom

Page 16

Diperlukan memori khusus untuk buffer citra dengan scan out

sinkronous ke raster yang disebut framebuffer . Warna CRT’s

lebih rumit/sulit. Menggunakan pola warna phospors di layer:

Delta electron gun arrangement

In-line electron gun arrangement

Sebuah electron gun memancarkan elektron, melalui

focusing system (sistem untuk menentukan fokus), dan

deflection system (sistem untuk mengatur pembelokan)

sehingga pancaran elektron mencapai posisi tertentu dari

lapisan fosfor pada layar. Kemudian, fosfor memancarkan

sinar kecil pada setiap posisi yang berhubungan dengan

pancaran elektron. Sinar yang dipancarkan dari fosfor

cepat hilang, maka diperlukan pengaturan supaya fosfor

tetap menyala. Hal ini dilakukan dengan cara refreshing,

yaitu menembakkan elektron berulang kali pada posisi yang

sama.

Focusing system pada CRT diperlukan untuk mengarahkan

pancaran elektron pada suatu titik tertentu dari lapisan

fosfor. Pengaturan fokus dapat dilakukan pada electric dan

magnetic field. Dengan electronic focusing, pancaran

Page 24: Buku grafkom

Page 17

elektron melewati metal electrostatic yang berfungsi

sebagai lensa untuk mengatur fokus dari pancaran

elektron ke tengah monitor.

Resolusi adalah jumlah titik per centimeter yang dapat

ditempatkan menurut arah horizontal dan vertikal.

Resolusi tergantung pada tipe fosfor, intensitas yang

ditampilkan, serta focusing dan deflection system.

Liquid Crystal Display (LCD) mampu menampilkan

gambar labih halus dengan menggunakan teknologi molekul

kristal yang teranyam dan mempolarisasi cahaya. LCD

berfungsi sebagai katup cahaya yang tergantung pada cahaya

dari luar. LCD biasanya digunakan untuk suatu system yang

kecil, seperti computer laptop dan kalkulator.

Plasma, mempunyai cara kerja yang mirip dengan lampu

neon. kapsul yang berisi gas yang di gerakkan oleh medan

listrik menghasilkan UV. UV menggerakkan phosfor dan

phosfor menghasilkan beberapa warna.

Alat utama untuk menampilkan output pada sistem

grafika adalah video monitor. Operasi sebagian besar video

Page 25: Buku grafkom

Page 18

monitor menggunakan Teknologi Cathode Ray Tube

(CRT) walaupun ada juga yang menggunakan teknologi lain.

Secara garis besar teknologi CRT dapat digambarkan sebagai

berikut :

a. Refreshing, yaitu menembakkan elektron

berulang ulang pada posisi yang sama untuk

menjaga agar fosfor tetap menyala.

b. Persistence, yaitu berapa lama suatu jenis

fosfor dapat menyala (jenis fosfor ada yang

low persistence dan ada yang high

persistence)

c. Resolution / resolusi, yaitu jumlah

maksimum titik yang dapat dihasilkan tanpa

tupang tindih (horisontal x vertikal).

d. Aspec Ratio, yaitu perbandingan jumlah titik

vertikal dan horisontal.

e. Pixel, yaitu satu titik di layar monitor.

Raster Scan Display

Jenis monitor ini paling banyak digunakan, yaitu

pancaran elektron bergerak ke seluruh layar baris per baris

dari atas ke bawah. (digunakan oleh TV).

Page 26: Buku grafkom

Page 19

Random Scan Display

Pada random scan display pancaran elektron hanya

diarahkan ke bagian layar dimana gambar akan dibuat disebut

juga Vektor Display, strock display atau calligraphic display.

Color Monitor CRT

Color CRT menampilkan gambar dengan kombinasi fosfor

yang memancarkan sinar warna yang berbeda. Dengan

menggabungkan sinar dari fosfor yang berbeda, tingkat dari

warna yang berbeda.

Terdapat 2 teknik dasar untuk mendapatkan warna, yaitu :

a. Beam Penetration

Dua lapisan fosfor (biasanya red dan green) dilapiskan

pada bagian dalam, dan warna yang dihasilkan

tergantung dari seberapa besar pancaran elektron

menembus fosfor, tetapi warna yang dihasilkan

kurang banyak dan kurang baik jika dibandingkan

dengan teknologi lain. Digunakan untuk gambar

berwarna dengan random scan monitor,

b. Shadow Mask

Shadow mask mempunyai tiga macam fosfor warna

pada titik pixel (red, green dan blue). CRT mempunyai

3 elektron gun untuk tiap warna, warna dihasilkan

dari perbedaan intensitas dari tiap-tiap elektron gun.

Color CRT dalam sistem grafika dirancang sebagai RGB

monitor. Monitor ini menggunakan metode shadow mask

dan mengambil tingkat intensitas untuk setiap electron

gun (red, green, blue) langsung dari sistem komputer

tanpa pemrosesan antara.

Page 27: Buku grafkom

Page 20

Flat Planel Display

Merupakan video display merupakan kelas video yang

mengurangi volume, berat dan penggunaan power jika

dibandingkan CRT, FPD digunakan untuk kalkulator, Video

game saku, TV kecil, Laptop dll.

Terdapat 2 jenis :

a. Emmisive Display = mengkonversikan energi listrik menjadi

sinar. Cth. Plasma Panel.

b. Nonemissive Display / Noneemitters = menggunakan efek

optik untuk mengkonversikan sinar matahari atau sinar dari

sumber lain ke dalam pola grafik. Cth. Liquid Crystal display

Page 28: Buku grafkom

Page 21

BAB 2

OPENGL dan GLUT

A. SEJARAH OPENGL Tahun 1980-an, mengembangkan perangkat lunak

yang dapat berfungsi dengan berbagai hardware grafis adalah

tantangan nyata. Pengembang perangkat lunak antarmuka

dan kebiasaan menulis driver untuk setiap perangkat keras.

Ini mahal dan mengakibatkan banyak duplikasi usaha.

Pada awal 1990-an, Silicon Graphics (SGI) adalah

seorang pemimpin dalam grafis 3D untuk workstation.

Mereka IRIS GL API dianggap keadaan seni dan menjadi

standar industri de facto, membayangi terbuka berbasis

standar PHIGS. Ini karena GL IRIS dianggap lebih mudah

digunakan, dan karena itu mendukung modus langsung

rendering. By contrast, Sebaliknya, PHIGS dianggap sulit untuk

digunakan dan ketinggalan zaman dalam hal fungsionalitas.

SGI’s pesaing (termasuk Sun Microsystems, Hewlett-

Packard dan IBM) juga dapat membawa ke pasar 3D

hardware, didukung oleh ekstensi yang dibuat pada PHIGS

standar. Hal ini pada gilirannya menyebabkan pangsa pasar

SGI untuk melemahkan karena lebih banyak hardware grafis

3D pemasok memasuki pasar. Dalam upaya untuk

mempengaruhi pasar, SGI memutuskan untuk mengubah

IrisGL API menjadi standar terbuka. SGI menganggap bahwa

IrisGL API itu sendiri tidak cocok untuk membuka karena

masalah lisensi dan paten. Juga, IrisGL memiliki fungsi-fungsi

API yang tidak relevan dengan grafis 3D. Sebagai contoh,

Page 29: Buku grafkom

Page 22

termasuk windowing, keyboard dan mouse API, sebagian

karena dikembangkan sebelum Sistem X Window dan Sun’s

NEWS sistem dikembangkan. Selain itu, SGI memiliki sejumlah

besar pelanggan perangkat lunak; dengan mengubah ke

OpenGL API mereka berencana untuk mempertahankan

pelanggan mereka terkunci ke SGI (dan IBM) hardware untuk

beberapa tahun sementara pasar dukungan untuk OpenGL

matang. Sementara itu, SGI akan terus berusaha untuk

mempertahankan pelanggan mereka terikat pada hardware

SGI dengan mengembangkan maju dan kepemilikan Iris

Inventor dan Iris Performer pemrograman API. Akibatnya, SGI

merilis standar OpenGL.

B. PENGENALAN OPENGL OpenGL adalah sebuah program aplikasi interface

yang digunakan untuk mendefinisikan komputer grafis 2D dan

3D. Program lintas-platform API ini umumnya dianggap

ketetapan standar dalam industri komputer dalam interaksi

dengan komputer grafis 2D dan juga telah menjadi alat yang

biasa untuk digunakan dengan grafis 3D. Singkatnya, Open

Graphics Library, OpenGL menghilangkan kebutuhan untuk

pemrogram untuk menulis ulang bagian grafis dari sistem

operasi setiap kali sebuah bisnis akan diupgrade ke versi baru

dari sistem. Fungsi dasar dari OpenGL adalah untuk

mengeluarkan koleksi perintah khusus atau executable ke

sistem operasi. Dengan demikian, program ini bekerja dengan

perangkat keras grafis yang ada yang berada pada hard drive

atau sumber tertentu lainnya. Setiap perintah dalam

dirancang untuk melakukan tindakan tertentu, atau memulai

efek khusus tertentu yang terkait dengan grafis.

Page 30: Buku grafkom

Page 23

OpenGL adalah suatu spefikasi grafik yang low-level

yang menyediakan fungsi untuk pembuatan grafik primitif

termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk

keperluan-keperluan pemrograman grfis.OpenGL bersifat

Open-Source, multi-platform dan multi-language serta

digunakan mendefinisikan suatu objek, baik objek 2 dimensi

maupun objek 3 dimensi. OpenGL juga merupakan suatu

antarmuka pemrograman aplikasi (application programming

interface (API) yang tidak tergantung pada piranti dan

platform yang digunakan, sehingga OpenGL dapat berjalan

pada sistem operasi Windows, UNIX dan sistem operasi

lainnya.

OpenGL pada awalnya didesain untuk digunakan pada

bahasa pemrograman C/C++, namun dalam

perkembangannya OpenGL dapat juga digunakan dalam

bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual

Basic, Delphi, maupun Fortran. Namun OpenGL di-package

secara berbeda-beda sesuai dengan bahasa pemrograman

yang digunakan. Oleh karena itu, package OpenGL tersebut

dapat di-download pada situs http://www.opengl.org sesuai

dengan bahasa pemrograman yang akan digunakan.

OpenGl melayani dua tujuan :

Untuk menyembunyikan kompleksitas dari interfacing

dengan berbagai 3D accelerators, memamerkan oleh

programmer dengan satu, seragam API.

Untuk menyembunyikan kemampuan yang berbeda

dari hardware platform, oleh semua yang memerlukan

Page 31: Buku grafkom

Page 24

mendukung implementasi penuh fitur opengl set

(menggunakan software emulation jika diperlukan).

C. EVOLUSI OPENGL Pendahulu openGL adalah IRIS GL dari Silicon

Grapics.Padamulanya adalah library grafis 2D,yang berefolusi

menjasi API program 3D untuk workstation canggih milik

perusahaan tersebut.

OpenGL adalah hasil dari usaha SGI untuk

mengembangkan dan meningkatkan kemampuan portable

IRIS.API grafis yang baru akan menawarkan kemampuan IRIS

GL tetapi dengan standar yang lebih terbuka,dengan input

dari pembuatan hardware lain dan sistem operasi lain,dan

akn memudahkan adaptasi ke hardware platform dan sistem

operasi lain.

Untuk lebih mempopulerkan openGL SGI mengijinkan

pihak lain untuk mengembangkan standart openGL,dan

beberapa vendor menyambut hal tersebut dengan

membentuk OpenGL Architecture Review Board (ARB) Pendiri

openGL adalah SGI,Digital Equepment Corporation,IBM,Intel

dan Microsoft,pada tanggal 1 juli 1992 OpenGL versi 1.0

diperkenalkan.

Letak openGL dalam aplikasi gambar di atas pada

umumnya ketika aplikasi berjalan program tersebut

memanggil banyak fungsi,beberapa yang dibuat oleh

programer dan beberapa yang disediakan oleh sistem operasi

bahasa pemrograman.Aplikasi windows membuat output

pada layar biasanya dengan memanggil sebual API windows

Page 32: Buku grafkom

Page 25

yang disebut Graphics Devise Interfase,yang memungkinkan

sebagai penulisan teks pada sebuah windows,menggambar

garis 2D sederhana dan lainnya.Implementasi dari openGL

mengambil permintaan grafis dari aplikasi dan membangun

sebuah gambar berwarna dari grafis 3D,kemudian

memberikan gambar tersebut ke GDI untuk ditampilkan pada

layar monitor.

D. GLUT (GL Utility Toolkit) Merupakan pengembangan dari OpenGL yang

didesain untuk aplikasi dengan level kecil hingga

menengah dan menggunakan callback functions

untuk menambahkan interaksi dari user.

Untuk pemrograman OpenGL menggunakan C++,

diperlukan library tambahan yaitu :

1. glut.h yang dicopy ke drive:\Program Files\Microsoft

Visual Studio 2010\Vc\include\GL

2. glut32.lib yang dicopy ke drive:\Program

Files\Microsoft Visual Studio 2010\Vc\

3. libglut32.dll yang dicopy ke drive:\Windows\System

Klasifikasi Fungsi

Primitive : berupa geometric, imagesAttribute :

berupa color, line type, light, texture

Viewing : berupa virtual cameraControl : turn fuction

ON / OFF

Page 33: Buku grafkom

Page 26

Windowing : window, mouse, keyboard

E. CARA KERJA OPENGL OpenGL lebih mengarah pada prosedural daripada

sebuah deskriptif API grafis.Untuk mendeskripsikan scene dan

bagaimana penampilannya,sebenarnya programer lebih tau

untuk menentukan hal-hal yang dibutuhkan untuk

menghasilkan efek yang di inginkan.Langkah tersebut

termasuk memanggil banyak perintah openGL,perintah

tersebut digunakan untuk menggambarkan grafis primitif

seperti titik,garis dan poligon dalam tiga dimensi.Sebagai

tambahan,openGL mendukung lighting,shading,texture

mapping,blending,transparancy,dan banyak kemampuan efek

khusus lainnya.

OpenGL mempunyai bnayak fungsi dan penggunaan

perintah yang sangat luas, penggunaan openGL

membutuhkan library tambahan yang harus di letakkan pada

direktory system dari windows (OS),yaitu :

OpenGL32.dll

Glu32.dll

Glut32.dll

Inisialisasi awal

Inti dari tahapan ini adalah mengatur view port dan

persepektif untuk penampilan obyek ke dalam layar

monitor,viewport adalah besarnya layar monitor(image) yang

Page 34: Buku grafkom

Page 27

dipakai untuk menampilkanobyek,sedangkan persepektif

yang dimaksud adalah pengaturan sumbu z dalam

penampilan obyek 3 dimensi,sehingga user dapat melihat

obyek seolah-olah dalam bidang 3 dimensi (X-Y-Z),selain itu

penggambaran obyek yang dilakukan oleh programer juga

dapat menggunaan koordinat 3 dimensi. Selain ke dua tujuan

di atas pada tahap ini juga dilakukan koneksi awal dengan

library openGL, koneksi ini dilakukan supaya fungsi-fungsi

yang di sediakan openGL dapat digunakan. Fungsi/prosedur

yang digunakan :

LoadGlut(‘glut32.dll) - pemanggilan library openGL

InitGL – inisialisasi openGL awal yang harus dilakukan

glViewport – untuk pengaturan viewport

glMatrixMode – pengaturan viewport

gluPerspective – pengaturan persepektif

Contoh script untuk inisialisasi openGL :

Try

LoadGlut(‘glut32.dll’);

InitGL;

Exept on e :=

exeption

do

Begin

Page 35: Buku grafkom

Page 28

messageDlg{ e.message, mtError, [mbOk],};

Halt {1}; End;

End;

Script di atas merupakan script yang paling

sederhana, dalam artian minimal diperlukan untuk

menginisialisasi penggunaan openGL.Fungsi-fungsi lain

seperti yang disebut diatas seperti glViewport,

glMatrixMode, dapat di tambah kan pada script sesuai

dengan kebutuhan.

Pembuatan gambar

Didalam openGL pembuatan obyek dilakukan

dengan titik-titik 3 dimensi,dengan mode GL_QUARDS,

maka otomatis setiap 4 titik digambar menjadi sebuah

bidang segiempat,sedangkan mode GL_LINES, pada

setiap 2 titik digambar manjadi sebuah garis.Di dalam

tahap ini setiap garis atau bidang juga dapat di atur

warnanya.

Fungsi atau prosedur yang digunakan :

mode GL_QUARDS – menggambarkan segi empat

mode GL_LINES – menggambark garis

glVertex3f- penentuan titik 3 dimensi

glColor3f – penentuan warna

Page 36: Buku grafkom

Page 29

OpenGL memiliki lebih dari 200 fungsi. Fungsi tersebut

bisa dikelompokkan menjadi :

Fungsi primitif, menentukan elemen yang bisa

menghasilkan gambar di layar. Fungsi ini terdiri dari 2

jenis, yaitu primitif geometric seperti polygon (segi

banyak) yang bisa dibuat menjadi dua, tiga, atau

empat dimensi, dan primitif gambar seperti bitmaps.

Fungsi atribut, mengontrol tampilan dari primitif.

Fungsi ini menentukan warna, jenis garis, properti

material, sumber cahaya, dan tekstur.

Fungsi pandangan, menentukan properti kamera.

OpenGL menyediakan sebuah virtual kamera yang

bisa diposisikan dan diorientasikan relatif ke obyek

yang ditentukan dengan fungsi primitif. Lensa kamera

juga bisa dikendalikan sehingga bisa dihasilkan sudut

yang lebar dan pandangan telefoto (jarak jauh).

Fungsi windowing, fungsi ini mengendalikan windows

pada layar dan penggunaan dari mouse dan

keyboard.

Fungsi kontrol, menghidupkan macam-macam fitur

OpenGL. Fungsi-fungsi OpenGL dimuat didalam 2

library yang disebut dengan gl dan glu (atau GL dan

GLU). Library yang pertama, adalah fungsi utama dari

OpenGL, berisi semua fungsi OpenGL yang

Page 37: Buku grafkom

Page 30

dibutuhkan sedangkan yang kedua, openGL Utility

Llibrary (GLU) memuat fungsi yang ditulis

menggunakan fungsi dari library utama dan sangat

membantu bagi pengguna. Fungsi utama mempunyai

nama yang diawali dengan “gl” seperti “glVertex3f()”,

sedangkan fungsi didalam GLU mempunyai nama

yang diawali dengan “glu” seperti “gluOrtho2D()”.

F. SET UP PROJECT BARU 1. Buatlah project baru pada Visual Studio dengan nama

prak0.

Gambar 1.1a New Project – Template

Page 38: Buku grafkom

Page 31

Gambar 1.1b New Project – Application Setting

2. Buka windows explorer pada direktori project prak0

dan buatlah direktori baru di dalamnya dengan nama

include dan tempatkan file glut.h di dalamnya.

3. Kembali ke folder project dan copy-paste file

glut32.libdan glut32.dll ke folder project prak0.

Gambar 1.2 Penambahan file untuk grafika komputer menggunakan

GLUT

4. Lakukan konfigurasi pada properties projek prak0.

Page 39: Buku grafkom

Page 32

Gambar 1.3 Konfigurasi pada Project Properties

Gambar 1.4a menambah lokasi file include

Gambar 1.4b Pemilihan folder yang berisi glut.h

Page 40: Buku grafkom

Page 33

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

Gambar 1.5a Menambahkan item baru

Gambar 1.5b Menambahkan file c++ baru

Page 41: Buku grafkom

Page 34

BAB 3

P R I M I T I F O B J E K

A. Definisi Primitif Objek

Primitif objek merupakan salah satu subbab dari grafika

komputer yang terdiri dari titik, garis dan bangun dua

dimensi. Dalam grafika komputer penghasilan citra

menggunakan primitive grafik dasar, primitif ini memudahkan

untur merender atau menggambar pada layar monitor

sebagaimana penggunaan persamaan geometri sederhana.

Contoh primitive grafika dasar antara lain : titik, garis, kurva,

fill area dan text. Objek kompleks dapat dibuat dengan

kombinasi dari primitive ini. Misalkan, Poligaris atau yang

dapat didefinisikan sebagai urutan garis lurus yang saling

terhubung. Secara umum algoritma grafis memiliki

persamaan yaitu bagaimana menampilkan hasil. Primitive

grafis yang umum dijelaskan pada tabel berikut :

Page 42: Buku grafkom

Page 35

Input primitif grafik dan pirantinya sebagaimana banyak

piranti dan cara untuk pemaparan output grafika komputer,

demikian pula untuk piranti inputnya, yaitu :

Keyboards

Tombol

Mouse

Graphics tablets

Joysticks dan trackballs

Knobs

Space balls dan data gloves

Masing-masing input ini mempunyai cara masing-masing

untuk mengirimkan input ke komputer. Input ini

diinterpretasikan oleh aplikasi grafika komputer dan

dipresentasikan ke pengguna melalui layar monitor. Data

yang diinputkan disebut primitif input. Beberapa primitif

input diantaranya sebagai berikut :

Titik

Strings (keyboards, suara)

Pilihan (tombol, layar sentuh)

Valuators (analogue dial)

Locator (mouse)

Ambil (pemilihan sebagian citra, mouse, lightpen)

Page 43: Buku grafkom

Page 36

Fungsi dasar menggambar titik. Berikut adalah beberapa

fungsi didalam menggambar suatu titik, antara lain :

- glVertex2i(x,y)

Yaitu suatu fungsi untuk menggambar titik pada

koordinat x dan y, dengan nilai satuan berupa integer.

Contoh glVertex2i(10,10)

- glVertex2f(x,y)

Yaitu suatu fungsi untuk menggambar titik pada

koordinat x dan y, dengan nilai satuan berupa float.

Contoh glVertex2f(10.0,10.0)

- glVertex2d(x,y)

Yaitu suatu fungsi untuk menggambar titik pada

koordinat x dan y, dengan nilai satuan berupa double.

Contoh glVertex2d(10.0,10.0);

Cara pendefinisian primitive objek yang digunakan dalam

pembuatan suatu objek :

#define GL_POINTS

Primitif objek ini dipergunakan untuk menciptakan

suatu titik.

# define GL_LINES

Primitif objek ini adalah suatu primitive objek guna

menciptakan suatu garis.

# define GL_LINE_LOOP

# define GL_LINE_STRIP

Page 44: Buku grafkom

Page 37

# define GL_TRIANGLES

Triangle atau segitiga adalah tiga buah titik yang

terhubung menjadi suatu segitiga dengan blok di

tengahnya.

# define GL_TRIANGLES_STRIP

Pada triangles strip jumlah vertex yang dipergunakan

adalah 4 buah vertex

# define GL_TRIANGLE_FAN

Triangles fan adalah pembuatan suatu objek dengan

menggunakan segitiga dimana hanya menggunakan 1

titik pusat saja.

# define GL_QUADS

Quad atau segempat adalah empat buah titik yang

terhubung menjadi quat segi empat dengan blok di

tengahnya.

# define GL_QUADS_STRIP

Pada quads strip 4 buah vertex merupakan 1

kelompok.

Langkah rendering pada quads strip :

a. Nomor yang berhadap (membentuk 2 garis yang

sejajar

b. Nomor ganjil dengan nomor ganjil dipertemukan

c. Nomor genap dengan nomor genap dipertemukan

d. Garis yang tersisa akan dipertemukan

# define GL_POLYGON

Page 45: Buku grafkom

Page 38

Polygon merupakan suatu fungsi yang mirip dengan

polyline, tetapi menghasilkan kurva tertutup dengan

blok warna (fill). Rendering yang dimiliki oleh

GL_POLYGON sama dengan GL_TRIANGLE_FAN.

Catatan :

a) glLineWidth yaitu suatu fungsi yang berfungsi

untuk mengatur tebalnya garis,

b) glPointSize yaitu suatu fungsi yang berfungsi

untuk mengatur besarnya suatu objek,

c) gluOrtho2D yaitu suatu fungsi untuk mengatur

proyeksi hasil eksekusi dan mendefinisikan

besarnya sistem koordinat dengan urutan kiri-

kanan dan bawah-atas.

Untuk memberi warna pada objek, seperti titik atau

garis, dapat dilakukan dengan menggunakan fungsi

glColor3f(red,green,blue). Di mana red, green, blue berada

pada 0 sampai dengan 1, yang menunjukkan skala

pencerahan dari masing-masing skala. Berikut adalah

beberapa fungsi color :

glColor3f(0,0,0);//black

glColor3f(0,0,1);//blue

glColor3f(0,1,0);//green

glColor3f(0,1,1)//cyan

glColor3f(1,0,0)//red

glColor3f(1,0,1)//magenta

Page 46: Buku grafkom

Page 39

glColor3f(1,1,0);//yellow

glColor3f(1,1,1);//white

Contoh SegiEmpat yang menggunakan Primitive Objek :

Pada primitive object dapat digunakan untuk membuat

segi empat berikut adalah pembuatan suatu objek berupa

segiempat, pertama mengalami Proses Rendering :

SegiEmpat (posx, posy, w, h)

Maka sintaks pembuatan segiempat :

glBegin (GL_QUADS);

glVertex2i (posx, posy);

glVertex2i (posx-w, posy);

glVertex2i (posx-w, posy-h);

glVertex2i (posx,posy-h);

Page 47: Buku grafkom

Page 40

B. Algoritma Pembentukan Objek

Algoritma Pembentukan Garis

Garis dibuat dengan menentukan dua endpoint atau

posisi titik awal dan akhir dari suatu garis. Kemudian

peralatan output membuat garis sesuai posisi titik-titik

tersebut.

Untuk peralatan analog seperti plotter dan

random-scan display garis lurus dapat dihasilkan dengan

halus. Pada peralatan digital garis lurus dihasilkan

dengan menetapkan titik diskrit antara titik awal dan

akhir. Posisi titik diskrit sepanjang garis lurus data

diperhitungkan dari persamaan garis tersebut. Untuk

menentukan nilai suatu titik, dapat digunakan prosedur

dasar dimana x sebagai nilai kolom pixel dan y sebagai

nilai scan line sebagai berikut :

Page 48: Buku grafkom

Page 41

setPixel(x,y)

bila nilai x dan y sudah tersimpan pada frame buffer

untuk dapat menampilkannya pada layer menggunakan

fungsi dasar getPixel(x,y).

Algoritma DDA

Algoritma Digital Differential Analyzer (DDA)

adalah algoritma pembentukan garis berdasarkan

perhitungan dx maupun dy dengan menggunakan rumus

dy = m.dx. Garis dibuat dengan menentukan dua

endpoint yaitu titik awal dan titik akhir. Setiap koordinat

titik yang membentuk garis diperoleh dari perhitungan

kemudian dikonversikan menjadi nilai integer.

Keuntungan dari algoritma ini adalah tidak perlu

menghitung koordinat berdasarkan persamaan yang

lengkap (menggunakan metode offset). Sedangkan

kerugiannya adalah adanya akumulasi Round-off errors,

sehingga garis akan melenceng dari garis lurus, selain itu

operasi round-off juga menghabiskan waktu. Algoritma

pembentukan garis DDA adalah sebagai berikut :

void lineDDA (int x0, int y0, int xEnd,

int yEnd)

{

int dx = xEnd - x0, dy = yEnd - y0,

steps, k;

float xIncrement, yIncrement, x = x0, y

= y0;

if (fabs (dx) > fabs (dy))

steps = fabs (dx);

else

steps = fabs (dy);

xIncrement = float (dx) / float

(steps);

Page 49: Buku grafkom

Page 42

yIncrement = float (dy) / float

(steps);

setPixel (round (x), round (y));

for (k = 0; k < steps; k++) {

x += xIncrement;

y += yIncrement;

setPixel (round (x), round (y));

}

}

Algoritma Pembentukan Lingkaran

Lingkaran merupakan objek grafik yang paling

sering digunakan pada grafik sederhana. Lingkaran dapat

didefinisikan sebagai kumpulan titik yang memiliki jarak r

dari posisi pusat (xc,yc). Persamaan lingkaran dengan

titik pusat (xc,yc) dan radius r dapat dispesifikasikan

menggunakan koordinat rectangular berikut :

(x – xc)2 + (y-yc)2 = r2

Lingkaran juga dapat didefinisikan menggunakan

koordinat polar. Lingkaran yang sama dapat didefinisikan

sebagai berikut :

x = r cos _ + xc

y = r sin _ + yc

dimana 0 _ _ _ 2_

Kita dapat menggambarkan lingkaran dengan

menggunakan persamaan koordinat rectangular diatas,

akan tetapi pendekatan ini menimbulkan dua masalah

yaitu :

Page 50: Buku grafkom

Page 43

1. Persamaan tersebut mengandung perhitungan akar yang

operasinya memakan waktu.

2. Timbul gap yang cukup signifikan pada lingkaran ketika

digambarkan.

Lingkaran dapat juga digambarkan dengan

menggunakan persamaan koordinat polar, tetapi fungsi

trigonometri juga membutuhkan cost yang tidak sedikit

sehingga algoritma yang disusun tidak akan efisien.

Untuk mengatasi masalah yang timbul dari

penerapan koordinat polar maupun rectangular,

Bresenham menyusun suatu algoritma pembentukan

lingkaran yang hanya menggunakan aritmetika integer.

Secara prinsip algoritma ini sejenis denga algoritma

penggambaran garis yang disusun oleh orang yang sama.

Lingkaran merupakan objek yang simetris sehingga

karakteristik ini dapat dimanfaatkan untuk mengurangi

pekerjaan pada saat menggambar lingkaran. Lingkaran

dibagi menjadi 8 oktan (lihat gambar 3.x), misalkan kita

menyusun algoritma untuk menggambarkan lingkaran di

oktan pertama, maka koordinat untuk 7 oktan

selanjutnya dapat ditentukan pada table berikut :

Page 51: Buku grafkom

Page 44

Gambar lingkaran dengan 8 oktan :

Tahapan penggambaran lingkaran dengan

menggunakan algoritma yang dikenal dengan nama

algoritma midpoint ini adalah sebagai berikut :

Page 52: Buku grafkom

Page 45

1. Input jari-jari r dan koordinat pusat lingkaran (xc, yc),

kemudian tentukan koordinat untuk titik awal yaitu (xo,

y0) = (0, r).

2. Hitung nilai awal untuk parameter keputusan p0 = 1 – r

3. Untuk setiap xk, mulai dari k=0, lakukan langkah berikut :

jika pk<0, maka titik selanjutnya pada lingkaran dengan

pusat (0,0) adalah (xk + 1, yk) dan pk+1 = pk + 2 xk+1 + 1,

jika pk0, titik berikutnya adalah (xk+ 1, yk - 1) dan pk+1 =

pk + 2 xk+1 + 1 - 2 yk+1 dimana 2 xk+1 = 2 xk + 2, dan 2

yk+1 = 2 yk – 2

4. Tentukan titik simetri untuk 7 oktan lainnya.

5. Untuk lingkaran dengan pusat bukan di (0,0). Pindahkan

setiap posisi pixel hasil perhitungan (x, y) dengan rumus

x = x + xc , y = y + yc

6. Ulangi langkah 3 sampai 5, hentikan ketika x >= y Contoh

Penerapan algoritma midpoint untuk mengggambarkan

lingkaran. Contoh 1: lingkaran dengan persamaan X2 +

Y2 =100

Page 53: Buku grafkom

Page 46

C. Contoh Program Primitif Objek

Primitif Point (GL_POINTS)

Page 54: Buku grafkom

Page 47

Primitif (GL_LINES)

Page 55: Buku grafkom

Page 48

D. Latihan

1. Buatlah project baru pada Visual Studio dengan nama

prak1-Points. Dan tambahkan fungsi callback untuk

glutDisplayFunc(drawDot); . Beri nilai x0, x1, x2 dan

y0, y1, y2 dengan nilai integer bebas tapi tetap dalam

kanvas.

a. Eksekusi program yang telah anda buat dan

tampilkan hasilnya berupa screenshot.

b. Jelaskan Proses Rendering untuk primitive object

GL_LINES pada bangun anda berupa ilustrasi

gambar.

2. Buatlah project baru pada Visual Studio dengan nama

prak1-LineStrip. Beri nilai x0, x1, x2, x3 dan y0, y1, y2,

y3 dengan nilai integer bebas tapi tetap dalam kanvas

dan menghasilkan tampilan bangun simetris terbuka.

a. Sajikan screenshotnya.

b. Jelaskan proses rendering vertex untuk

GL_LINE_STRIP pada bangun anda berupa ilustrasi

gambar.

Page 56: Buku grafkom

Page 49

3. Buatlah project baru pada Visual Studio dengan nama

prak1-Poligon. Beri nilai x0, x1, x2, x3,x4dan y0, y1,

y2, y3,y4 dengan nilai integer bebas tapi tetap dalam

kanvas dan menghasilkan tampilan bangun simetris

tertutup.

a. Sajikan screenshotnya

b. Jelaskan proses rendering vertex untuk

GL_LINE_LOOP pada bangun anda berupa ilustrasi

gambar.

Page 57: Buku grafkom

Page 50

BAB 4

Transformasi Objek

Grafika komputer merupakan bidang yang menarik minat

banyak orang. Salah sub bagian dari grafika komputer adalah

pemodelan objek (object modelling). Dalam pemodelan objek

dua dimensi (2D), didapati berbagai objek dapat dimodelkan

menurut kondisi tertentu, objek yang dimodelkan itu perlu

dimodifikasi. Pemodifikasian objek ini dapat dilakukan dengan

melakukan berbagai operasi fungsi atau operasi transformasi

geometri. Transformasi ini dapat berupa transformasi dasar

ataupun gabungan dari berbagai transformasi geometri.

Contoh transformasi geometri adalah translasi, penskalaan,

putaran (rotasi), balikan, shearing dan gabungan.

Transformasi ini dikenal dengan transformasi affine. Pada

dasarnya, transformasi ini adalah memindahkan objek tanpa

merusak bentuk.

Tujuan transformasi adalah :

Merubah atau menyesuaikan komposisi pemandangan

Memudahkan membuat objek yang simetris

Melihat objek dari sudut pandang yang berbeda

Memindahkan satu atau beberapa objek dari satu

tempat ke tempat lain, ini biasa dipakai untuk animasi

komputer.

Secara substansi, Grafika Komputer adalah proses

transformasi dari model 3D obyek berupa informasi geometri

Page 58: Buku grafkom

Page 51

bentuk, informasi pose, warna, texture, dan pencahayaan

menjadi citra 2D (cf. Gambar 4.1).

Gambar 4.1. Grafika Komputer: Transformasi dari Model 3D

Obyek menjadi Citra

Jika dilihat secara analogi, hal di atas mirip dengan cara

kerja kamera dalam mengambil foto dalam bidang fotografi

(cf. Gambar 4). Model ini disebut model sintesis kamera.

Page 59: Buku grafkom

Page 52

Gambar 4.2. Analogi Pengambilan Gambar oleh Kamera

Untuk menghasilkan gambar dari obyek dengan skenario

tertentu kita harus melakukan beberapa proses, yaitu:

- Melakukan pengesetan kamera dalam bentuk setting

lensa kamera (Transformasi Proyeksi),

- Mengarah kamera dengan mengatur letak tripod

(Transformasi Viewing),

- Mengatur letak obyek (Transformasi Modeling), dan

Page 60: Buku grafkom

Page 53

- Mengatur skala dan layout dari foto (Transformasi

Viewport)

A. Translasi

Transformasi translasi merupakan suatu operasi yang

menyebabkan perpindahan objek 2D dari satu tempat ke

tempat yang lain. Perubahan ini berlaku dalam arah yang

sejajar dengan sumbu X dan sumbu Y.

Translasi dilakukan dengan penambahan translasi pada

suatu titik koordinat dengan translation vector, yaitu (tx,ty),

dimana tx adalah translasi menurut sumbu x dan ty adalah

translasi menurut sumbu y. Koorinat baru titik yang

ditranslasi dapat diperoleh dengan menggunakan rumus :

Translasi adalah transformasi dengan bentuk yang tetap,

memindahkan objek apa adanya. Setiap titik dari objek akan

ditranslasikan dengan besaran yang sama.Dalam operasi

translasi, setiap titik pada suatu entitas yang ditranslasi

bergerak dalam jarak yang sama. Pergerakan tersebut dapat

berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y

saja atau keduanya.

Translasi juga berlaku pada garis, objek atau gabungan

objek 2D yang lain. Untuk hal ini, setiap titik pada garis atau

objek yang ditranslasi dalam arah x dan y masing -masing

sebesar tx,ty.

Page 61: Buku grafkom

Page 54

Contoh

Untuk menggambarkan translasi suatu objek berupa

segitiga dengan koordinat A(10,10) B(30,10) dan C(10,30)

dengan tx,ty(10,20), tentukan koordinat yang barunya?

Jawab

A : x’=10+10=20

y’=10+20=30

A‟=(20,30)

B : x’=30+10=40

y’=10+20=30

B‟=(40,30)

C : x’=10+10=20

y’=30+20=50

C‟=(20,50)

Program di bawah ini akan memberikan ilustrasi

bagaimana transformasi translate diimplementasikan.

#include <stdlib.h>

#include <glut.h>

void drawQuad(){

glBegin(GL_QUADS);

glVertex2f(0.,0.);

glVertex2f(0.,50.);

glVertex2f(200.,50.);

Page 62: Buku grafkom

Page 55

glVertex2f(200.,0.);

glEnd();

}

void render(){

glClear(GL_COLOR_BUFFER_BIT);

//drawKoordinat

glColor3f(1.,1.,1.);

drawQuad();

glTranslatef(0,50,0);

glColor3f(1.,0.,0.);

drawQuad();

glFlush();

}

void main (int argc, char **argv) {

glutInit (&argc, argv);

glutInitWindowPosition(100,100);

glutInitWindowSize(480,480);

glutCreateWindow("Translasi");

gluOrtho2D(-320.0,320.0,-320.0,320.0);

Page 63: Buku grafkom

Page 56

glutDisplayFunc(render);

glutMainLoop();

}

Dengan output sebagai berikut:

Gambar 4.3 Translasi

B. Rotate

Ada beberapa hal mendasar yang perlu di pelajari dan di

pahami untuk bisa membuat dan mengkreasikan suatu

bentuk atau bidang dalam grafika komputer.

Banyak istilah2 dasar yang familiar di telinga tp sudah

tidak di temukan lagi apa maksud dan pengertiannya," Matrik

rotasi, translasi, dan seterusnya. Untuk memindah atau

merubah posisi suatu model/bentuk tidak bisa terlepas dari

yang namanya Tranformasi. Ada beberapa jenis tranformasi

yaitu: Rotasi, Translasi, Dilatasi, dan refleksi. Yang saya bahas

disini adalah rotasi dan translasi.

Rotasi artinya berputar. Ketika suatu bentuk benda

sengaja diputar maka perlu di tentukan pusat dan besar

Page 64: Buku grafkom

Page 57

sudut putar. sedangkan translasi adalah pergeseran. Benda

yang telah berpindah dari pusatnya berarti mengalami

pergeseran, yaitu apakah dia bergerak maju mundur ataupun

menuju ke atas bawah.

Rotasi berbeda dengan translasi karena perubahan posisi

pada translasi tidak mengacu pada suatu titik tertentu.

Keistimewaan dari rotasi adalah jarak antara titik pusat

dengan masing-masing bagian dari obyek yang diputar akan

selalu tetap, seberapa jauh pun obyek itu diputar.

Pada sebuah game yang menggunakan grafik vektor dan

grafik bitmap, rotasi dan translasi sangat di butuhkan.

Dengan basic4GL kita bisa menggunakan source code yang

tersedia yaitu :

glTranslatef (x, y, z) digunakan untuk merubah titik posisi

awal sumbu koordinat menuju posisi yang ditentukan sesuai

koordinat x,y, dan z.

glRotatef (angle, x, y, z) digunakan untuk memutar suatu

bidang pada sudut tertentu (angle).

Gambar 4.4 Rotasi dan Translasi

Page 65: Buku grafkom

Page 58

Untuk membangkitkan rotasi pada objek 3D kita harus

membuat aksis dari rotasi dan jumlah sudut rotasi . Tidak

seperti melakukan rotasi pada objek 2D yang semua proses

transformasi dilakukan di koordinat xy , sebuah rotasi objek

tiga dimensi bisa dilakukan di space manapun.

Dengan menggunakan notasi matrix, maka besaran R

bisa dikatakan sbb:

R = cos(0) sin(0)

sin(0) cos(0)

Gambar 4.5 Rotasi objek 3D pada Sumbu x , y , dan z

Fungsi Dasar Pembentuk Objek

Contoh:

Semisal kita ingin membuat pergerakan planet dan bulan.

Void Keterangan

Page 66: Buku grafkom

Page 59

void Rotate(void)

{

hari += 2;

if(hari > 360)

hari = hari - 360;

tahun += .1;

if(tahun > 360)

tahun = tahun - 360;

glutPostRedisplay();

}

Rotasi

pergerakan

untuk planet

dan bulan. Hari

menunjukkan

perputaran

bulan dan tahun

menunjukkan

perputaran

planet

void garisOrbit(float rad, float

inc)

{

glPushMatrix();

float y = 0.0;

glColor3f(1.0, 1.0, 1.0);

glBegin(GL_POINTS);

for(float sudut = 0; sudut

<=

360; sudut+=inc)

{

float x =

rad*sin((sudut)*phi/180);

float z =

rad*cos((sudut)*phi/180);

Garis orbit

untuk

menunjukkan

perputaran

planet yang

beraturan dan

tetap pada

tempatnya

Page 67: Buku grafkom

Page 60

glVertex3f(x, y, z);

}

glEnd();

glPopMatrix();

}

void merkurius(void)

{

glPushMatrix();

garisOrbit(5.5, 1);

glRotatef(tahun*9, 0.0, 1.0,

0.0);

glTranslatef(5.5, 0.0, 0.0);

glutSolidSphere(0.4, 10,

8);

glPopMatrix();

}

Penggambaran

planet dan

rotasinya. Untuk

pembuatan

planet hampir

sama fungsi

yang

digunakannya,

yang

membedakanny

a hanya nilai

dari setiap

komponen.

void fungsiKeyboard(void)

{

if(GetAsyncKeyState(VK_LEFT)

)

{

jarakX +=

(cos((rot+90)*phi/180))/2;

Void ini untuk

interaksi yang

dilakukan oleh

keyboard yaitu

1. Dengan

menekan

Page 68: Buku grafkom

Page 61

jarakZ += -

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

}

if(GetAsyncKeyState(VK_RIGHT

))

{

jarakX += (cos((rot-

90)*phi/180))/2;

jarakZ += -(sin((rot-

90)*phi/180))/2;

}

if(GetAsyncKeyState(VK_UP))

{

jarakX +=

(cos(rot*phi/180)*

cos(pitch*phi/180))/2;

jarakZ += -

(sin(rot*phi/180) *

cos(pitch*phi/180))/2;

jarakY +=

sin(pitch*phi/180);

}

if(GetAsyncKeyState(VK_DOWN)

)

{

tombol Up

maka

gambar akan

menjauhi

layar

2. Dengan

menekan

tombol

Down maka

gambar akan

mendekati

layar

3. Dengan

menekan

tombol Right

maka

gambar akan

bergerak ke

arah kiri

4. Dengan

menekan

tombol Left

maka

gambar akan

bergerak ke

arah kanan

Page 69: Buku grafkom

Page 62

jarakX -=

(cos(rot*phi/180)*

cos(pitch*phi/180))/2;

jarakZ -= -

(sin(rot*phi/180) *

cos(pitch*phi/180))/2;

jarakY -=

sin(pitch*phi/180);

}

xlook = jarakX +

(cos(rot*phi/180) *

cos(pitch*phi/180));

zlook = jarakZ -

(sin(rot*phi/180) *

cos(pitch*phi/180));

ylook = jarakY +

sin(pitch*phi/180);

xup = cos(rot*phi/180) *

cos((pitch+90)*phi/180);

zup = -sin(rot*phi/180) *

cos((pitch+90)*phi/180);

yup =

sin((pitch+90)*phi/180);

glutPostRedisplay();

}

Page 70: Buku grafkom

Page 63

void PassiveMouse(int x, int y)

{

if( (lastx - x) >50 ||

(lastx - x) <-50 ||

(lasty - y) >50 ||

(lasty - y) <-50 )

{

lastx = x;

lasty = y;

}

rot += ((lastx - x)/2);

lastx = x;

if(rot>360)

rot-=360;

if(rot<0)

rot+=360;

pitch += ((lasty - y))/2;

lasty = y;

if(pitch > 90)

pitch = 90.0;

if(pitch<-90)

pitch = -90.0;

Void ini untuk

interaksi yang

digunakan oleh

mouse.

Pergerakannya

sesuai dengan

ke arah mana

mouse bergerak

Page 71: Buku grafkom

Page 64

glutPostRedisplay();

}

Tampilan Objek

Ini adalah tampilan awal perputaran planet terhadap

matahari

Gambar 4.6 Perputaran planet terhadap matahari

Page 72: Buku grafkom

Page 65

Gambar 4.7 Perputaran planet terhadap matahari tampak

atas

Gambar dibawah ini adalah gambar matahari yang diberi

cahaya agar terlihat seperti matahari

Gambar 4.8 Objek diberi cahaya agar terlihat seperti

matahari

Page 73: Buku grafkom

Page 66

Gambar 4.9 Beberapa planet mengelilingi matahari

C. Scale

Skala merupakan salah satu bentuk transformasi yang

merubah ukuran dari objek yang ditentukan, baik membesar

ataupun mengecil. Perubahan ukuran tersebut didasarkan

pada sumbu x, sumbu y, maupun sumbu z, dimana jika yang

diubah hanya sumbu x, maka besarnya objek akan berubah

sesuai dengan sumbu x baru yang telah ditentukan, begitu

pula jika diubah terhadap sumbu dan zy, maka objek akan

menguikuti perubahan sesuai sumbu y maupun z baru yang

telah ditentukan.

Perubahan skala diperoleh dari mengalikan nilai

koordinat objek dengan skala tertentu sesuai dengan sumbu

masing - masing. Bentuk dari matriks skala adalah:

[

] [

] [ ]

Transformasi skala dapat dilakukan dengan cara

memanggil fungsi:

Page 74: Buku grafkom

Page 67

glScalef(Sx, Sy, Sz)

glScaled(Sx, Sy, Sz)

Dimana Sx, Sy, dan Sz merupakan parameter dari masing

– masing sumbu ( Sx merupakan parameter pada sumbu x, Sy

merupakan parameter pada sumbu y, dan Sz merupakan

parameter pada sumbu z)

Contoh penerapan dalam program dari transformasi

skala :

Source Code:

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

drawKoordinat();

glColor3f(1,1,0);

glScalef(1,2,1);

drawQuad();

glFlush();

}

Page 75: Buku grafkom

Page 68

Screen Shot Hasil:

Setelah di scale 2,1,1

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

drawKoordinat();

glColor3f(1,1,0);

glScalef(2,1,1);

drawQuad();

glFlush();

}

Page 76: Buku grafkom

Page 69

Screen shot hasil:

D. Tutorial Urutan Transformasi

Transformasi dapat dilakukan pada level vertex, level

surface, maupun level obyek bergantung dimana transformasi

diletakkan dalam program. Operasi transformasi merupakan

operasi yang tidak bersifat komutatif, artinya, urutan

transformasi juga sangat berpengaruh pada hasilnya. Gambar

4.3 memberi ilustrasi akibat urutan transformasi yang

berbeda, yaitu hasil operasi “rotasi kemudian di translasi”

berbeda dengan operasi “translasi baru dirotasi”.

Page 77: Buku grafkom

Page 70

Gambar 4.10 Pengaruh urutan transformasi

Program obyeknya sudah berupa obyek 3D berupa

kubus. Perhatikan bagaimana kubus dibentuk dari vertex dan

surface. Selain dengan mendefinisikan obyeknya sendiri,

GLUT telah menyediakan beberapa fungsi untuk menggambar

standard obyek, yaitu kubus, bola, dan poci teh.

Perhatikan apa yang terjadi bila glTranslate() dan

glRotate() di fungsi mydisplay() ditukar posisinya atau

diletakkan didalam salah satu glBegin()..glEnd()

// OpenGL

// - Complex Object

// - Notice:

// 1. There are surfaces that are not correctly

rendered in order.

// uncommented the GL_DEPTH

// 2. Flicker can be eliminated by using GL_DOUBLE

//

// Rubah rendering algoritma dengan menggunakan

data struktur

//

#include<stdio.h>

#include<stdlib.h>

#include<string.h>

#include<stdarg.h>

#include<glut.h>

Page 78: Buku grafkom

Page 71

float z_pos=-10.0f;

float rot=0.0f;

void resize(int width, int height)

{

glViewport(0, 0, width, height);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0,

(float)width/(float)height, 1.0, 300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void myTimeOut(int id)

{

// called if timer event

// ...advance the state of animation

incrementally...

rot+=10;

glutPostRedisplay(); // request redisplay

glutTimerFunc(100, myTimeOut, 0); //

request next timer event

Page 79: Buku grafkom

Page 72

}

void myKeyboard(unsigned char key,int x, int y)

{

if((key=='<')||(key==',')) z_pos-=0.1f;

if((key=='>')||(key=='.')) z_pos+=0.1f;

}

void mydisplay(void)

{

glClear(GL_COLOR_BUFFER_BIT );

//glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0.0,0.0f,z_pos);

glRotatef(rot, 0, 1, 0);

glBegin(GL_QUADS);

// Front Face, red

glColor3f(1.0,0.0,0.0);

glVertex3f(-1.0f, -1.0f, 1.0f);

glVertex3f( 1.0f, -1.0f, 1.0f);

glVertex3f( 1.0f, 1.0f, 1.0f);

glVertex3f(-1.0f, 1.0f, 1.0f);

// Back Face, green

Page 80: Buku grafkom

Page 73

glColor3f(0.0,1.0,0.0);

glVertex3f( 1.0f, -1.0f, -1.0f);

glVertex3f( 1.0f, 1.0f, -1.0f);

glVertex3f(-1.0f, 1.0f, -1.0f);

glVertex3f(-1.0f, -1.0f, -1.0f);

// Top Face, blue

glColor3f(0.0,0.0,1.0);

glVertex3f(-1.0f, 1.0f, -1.0f);

glVertex3f(-1.0f, 1.0f, 1.0f);

glVertex3f( 1.0f, 1.0f, 1.0f);

glVertex3f( 1.0f, 1.0f, -1.0f);

// Bottom Face, yellow

glColor3f(1.0,1.0,0.0);

glVertex3f(-1.0f, -1.0f, -1.0f);

glVertex3f( 1.0f, -1.0f, -1.0f);

glVertex3f( 1.0f, -1.0f, 1.0f);

glVertex3f(-1.0f, -1.0f, 1.0f);

// Right face, cyan

glColor3f(0.0,1.0,1.0);

glVertex3f( 1.0f, -1.0f, -1.0f);

glVertex3f( 1.0f, 1.0f, -1.0f);

glVertex3f( 1.0f, 1.0f, 1.0f);

Page 81: Buku grafkom

Page 74

glVertex3f( 1.0f, -1.0f, 1.0f);

// Left Face, magenta

glColor3f(1.0,0.0,1.0);

glVertex3f(-1.0f, -1.0f, -1.0f);

glVertex3f(-1.0f, -1.0f, 1.0f);

glVertex3f(-1.0f, 1.0f, 1.0f);

glVertex3f(-1.0f, 1.0f, -1.0f);

glEnd();

glFlush();

glutSwapBuffers();

}

void init()

{

glEnable(GL_DEPTH_TEST);

glClearColor( 0.0, 0.0, 0.0, 1.0 ); // A

Background Clear Color

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45,

(GLdouble)500.0/(GLdouble)500.0, 0, 100);

glMatrixMode(GL_MODELVIEW);

return;

Page 82: Buku grafkom

Page 75

}

int main(int argc, char** argv)

{

glutInit(&argc,argv);

//glutInitDisplayMode( GLUT_DOUBLE /*|

GLUT_DEPTH*/ );

glutInitDisplayMode( GLUT_DOUBLE |

GLUT_DEPTH );

glutInitWindowSize(500,500);

glutInitWindowPosition(0,0);

glutCreateWindow("simple");

// callbacks

glutDisplayFunc(mydisplay);

glutKeyboardFunc(myKeyboard);

glutTimerFunc(100, myTimeOut, 0);

glutReshapeFunc(resize);

init();

glutMainLoop();

return 0;

}

Tambahan:

Page 83: Buku grafkom

Page 76

Konsep Depth Buffer. Mode display pada program di atas

diberi tambahan mode GLUT_DEPTH dan perintah

glEnable(GL_DEPTH_TEST). Hal ini untuk memastikan bahwa

surface digambar sesuai dengan urutan penampakkan yang

logis. Teknik ini merupakan salah satu algoritma HIDDEN

SURFACE REMOVAL. Untuk melihat apa yang terjadi bila

teknik ini tidak dilakukan, hapus/commented moda

GLUT_DEPTH dan glEnable(GL_DEPTH_TEST).

E. Implementasi Transformasi Objek

#include <stdlib.h>

#include <glut.h>

void drawQuad(){

glBegin(GL_POLYGON);

glVertex2f(77.,70.);

glVertex2f(80.,146.);

glVertex2f(99.,90.);

glVertex2f(157.,90.);

glVertex2f(110.,55.);

glVertex2f(128.,1.);

glVertex2f(80.,34.);

glVertex2f(32.,1.);

Page 84: Buku grafkom

Page 77

glVertex2f(54.,55.);

glVertex2f(3.,90.);

glVertex2f(63.,90.);

glVertex2f(80.,146.);

glEnd();

glFlush();

}

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

glPushMatrix();

glTranslatef(-500,-500,0);

glColor3f(0,1,0);//green

drawQuad();

glPopMatrix();

glPushMatrix();

glRotatef(30,0,0,1);

glColor3f(0,0,1);//blue

drawQuad();

glPopMatrix();

Page 85: Buku grafkom

Page 78

glPushMatrix();

glTranslatef(-450,-350,0);

glRotatef(30,0,0,1);

glScalef(0.5,0.5,0);

glColor3f(0,1,1);//cyan

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-320,-420,0);

glRotatef(30,0,0,1);

glColor3f(1,0,0);//red

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-200,-350,0);

glScalef(0.5,0.5,0);

glColor3f(1,0,1);//magenta

drawQuad();

glPopMatrix();

Page 86: Buku grafkom

Page 79

glPushMatrix();

glTranslatef(-200,-310,0);

glRotatef(45,0,0,1);

glScalef(1.5,1.5,0);

glColor3f(0,1,0);//green

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-150,-100,0);

glColor3f(1,1,0);//yellow

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-150,0,0);

glScalef(0.3,0.3,0);

glColor3f(1,1,1);//white

drawQuad();

glPopMatrix();

glPushMatrix();

Page 87: Buku grafkom

Page 80

glTranslatef(320,320,0);

glRotatef(45,0,0,1);

glColor3f(0,1,1);//cyan

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(320,280,0);

glScalef(0.5,0.5,0);

glColor3f(1,0,0);//red

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(150,115,0);

glScalef(0.3,0.3,0);

glColor3f(1,0,1);//pink

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(450,400,0);

Page 88: Buku grafkom

Page 81

glRotatef(45,0,0,1);

glScalef(0.6,0.6,0);

glColor3f(1,0,1);//pink

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(180,400,0);

glScalef(0.3,0.3,0);

glColor3f(1,1,0);//yellow

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-100,115,0);

glScalef(0.5,0.5,0);

glColor3f(0,1,0);//green

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-50,-180,0);

Page 89: Buku grafkom

Page 82

glScalef(0.4,0.4,0);

glColor3f(1,1,1);//white

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(100,90,0);

glRotatef(45,0,0,1);

glScalef(1.2,1.2,0);

glColor3f(1,0,1);//magenta

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(-400,-200,0);

glScalef(0.4,0.4,0);

glColor3f(10,0,1);//blue

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(50,0,0);

Page 90: Buku grafkom

Page 83

glScalef(0.4,0.4,0);

glColor3f(1,0,0);//red

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(0,200,0);

glScalef(0.4,0.4,0);

glRotatef(30,0,0,1);

glColor3f(0,1,0);//green

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(150,300,0);

glRotatef(-45,0,0,1);

glColor3f(1,1,1);//white

drawQuad();

glPopMatrix();

glPushMatrix();

glTranslatef(100,300,0);

Page 91: Buku grafkom

Page 84

glScalef(0.5,0.5,0);

glColor3f(1,1,0);//yellow

drawQuad();

glPopMatrix();

glFlush();

}

void main(int argc,char **argv){

glutInit(&argc,argv);

glutInitWindowPosition(100,100);

glutInitWindowSize(480,480);

glutCreateWindow("Implementasi Transformasi");

gluOrtho2D(-640.,640.,-640.,640.);

glutDisplayFunc(renderScene);

glutMainLoop();}

Gambar 4.11 Implementasi Transformsi Obje

Page 92: Buku grafkom

Page 85

BAB 5

ANIMASI

A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA

1. Masa Prasejarah

Seperti karya-karya peradaban manusia yang lainnya,

sejarah animasi ternyata sama tuanya dengan perkembangan

peradaban manusia di bumi ini. Sejak jaman pra sejarah,

manusia purba telah berusaha untuk membuat gambar-

gambar bergerak sesuai dengan imajinasi mereka serta

dengan keterbatasan alat yang mereka gunakan pada waktu

itu.

Lukisan dinding gua altamira di Spanyol merupakan

bukti peninggalan peradaban manusia pra sejarah pada masa

Paleolithicum, berupa lukisan dinding gua tentang binatang

dan perburuan, sebagai cermin dari kondisi kehiduapan

mereka pada waktu itu. Dari sekian banyak lukisan dinding

gua, ada beberapa lukisan yang apabila dicermati, merupakan

upaya manusia purba untuk menggambarkan sebuah

garakan. Lukisan tersebut berupa lukisan binatang yang

digambarkan dengan kaki yang banyak. Hal ini sebagai bukti,

bahwa mereka telah berupaya untuk membuat kesan seolah-

olah binatang tersebut sedang berlarian.

Page 93: Buku grafkom

Page 86

2. Masa Peradaban Mesir Kuno

Perkembangan animasi tidak berhenti pada masa

prasejarah saja, namun terus berkembang bahkan hingga saat

ini. Pada masa peradaban Mesir kuno, orang-orang pada

masa tersebut telah berupaya untuk membuat sebuah

rangkaian gambar yang memiliki makna sebuah gerakan dan

bahkan mengandung unsur cerita. Peradaban Mesir telah

terbukti sebagai sebuah peradaban yang sangat maju, pada

waktu itu. Dengan huruf hieroglif meraka meninggalkan bukti

catatan peradaban maju mereka yang mengundang decak

kagum manusia hingga saat ini. Diantara ribuan peninggalan

peradaban Mesir, mereka juga meninggalkan bukti adanya

upaya manusia untuk membuat gambar yang mereka buat

seolah-olah sedang bergerak.

Pharao Ramses II di Mesir membangun sebuah kuil

untuk Dewa Isis. Tidak seperti pada kuil-kuil yang lain, dalam

kuil dewa isis tersebut terdapat beberapa tiang yang terdapat

relief fugur dewa, dalam urutan gerakan yang runut. Kuil

Page 94: Buku grafkom

Page 87

tersebut sebagai bukti adanya upaya manusia pada masa

Mesir kuno untuk membuat gambar yang seolah-olah sedang

bergerak.

3. Masa Perdaban Yunani Kuno

Pada masa yunani kuno, upaya untuk membuat

rangkaian gambar yang terkesan bergerak telah mereka

lakukan. Bukti adanya upaya tersebut dapat dilihat melalui

beragam benda-benda seni yang telah dihasilkan oleh

peradaban Yunani kuno, diantaranya adalah kendi. Kendi-

kendi yang artistic tersebut seringkali dilukis dengan figure-

figur tokoh dalam tahapan gerakan yang mengelilingi kendi.

Jika kendi diputar, maka akan memberikan efek gerakan.

Page 95: Buku grafkom

Page 88

4. Relief Candi

Selain pada peninggalan peradaban kuno diatas,

masih ada lagi bukti perkembangan animasi pada perdaban

manusia, yaitu relief candi. Dimana pada relief tersebut

rentetan panel relief mengandung unsur cerita dan seolah-

olah hidup dalam benak orang yang melihat dan menghayati

alur ceritanya.

Page 96: Buku grafkom

Page 89

5. Wayang

Wayang kulit yang dimainkan oleh dalang, dengan

efek-efek suara berupa gamelan, dan alur cerita yang sangat

kuat, mampu menyedot perhatian pemirsanya selama

berjam-jam hingga semalam suntuk, adalah bentuk animasi

pertama yang sudah dikatakan lengkap, dimana unsur-unsur

animasi adanya gambar yang bergerak, alur cerita dan efek

suara, sudah terpenuhi.

Page 97: Buku grafkom

Page 90

6. The Persistance of Vision

Perkembangan animasi selanjutnya, lebih ditekankan

pada aspek keilmuan, dan mulai merambah bidang teknologi,

meskipun dengan hasil yang sangat sederhana. Adalah

Thomas Alfa Edison (1860), selain terkenal dengan penemuan

lampu pijarnya, juga mengamukakan sebuah teory yang di

kenal dengan "The Persistance of Vision". Inti dari teori

tersebut adalah, jika kita melihat sebuah gambar, maka citra

gambar tersebut akan terekam dalam retina manusia selama

1/10 detik sebelum citra akan gambar tersebut benar-benar

menghilang.

Berbasis pada teori tersebut, mulai muncul orang-

orang yang memperdalam ilmu untuk membuat agar sebuah

gambar tampak hidup dan bergerak-gerak. Dengan teknologi

yang sangat sederhana, mereka mampu menciptakan alat

yang mampu membuat rangkaian gambar, dapat tampak

hidup dan bergerak. Tentu saja penemuan teknologi tersebut

mampu membuat kekaguman orang pada saat itu.

a. Thaumatrope (Paul Roget - 1828)

Merupakan sebuah alat yang sangat sederhana,

berupa sebuah kepingan yang memiliki dua gambar, di satu

sisi bergambar burung dan sisi lain bergambar

sangkar. Kepingan tersebut pada kedua sisinya diberi pegas

atau tali yang fungsinya untuk memutar. Jika kepingan

berputar, maka akan terlihat seekor burung yang ada didalam

sangkar. Alat ini membuktikan teori dari Thomas Alfa Edison

tentang persistance of vision.

Page 98: Buku grafkom

Page 91

b. (Joseph Plateu - 1826)

Berupa sebuah kepingan gambar, dan di sisi lain

terdapat kepingan dengan lubang-lubang di sekitarnya. Ketika

kepingan gambar terebut diputar, melalui lubang yang talah

disediakan, akan terlihat rangkaian gambar tersebut

bergerak.

Page 99: Buku grafkom

Page 92

c. Zeotrope (Pierre Desvignes - 1860)

Hampir sama dengan Thaumatrope, Zoetrope berupa

rangkaian gambar yang dimasukkan dalam sebuah tabung,

dibagian lain dari tabung diberi lubang untuk melihat gambar.

Ketika tabung digerakkan, maka gambar tersebut akan

terlihat bergerak.

Page 100: Buku grafkom

Page 93

Penemuan Film Proyektor

Penemuan film proyektor oleh Thomas Alfa Edison,

membuka peluang baru untuk menciptakan gambar yang

bergerak. Dengan menggunakan media film proyektor,

semakin mempermudah cara untuk membuat rangkaian

gambar menjadi hidup dan bergerak. Gambar dibawah ini

merupakan proyektor pertama yang di ciptakan oleh Thomas

Alfa Adison.

Page 101: Buku grafkom

Page 94

Film Animasi

Era setelah diketemukannya proyektor dan

perkembangannya, mulai bermunculan film-film animasi

pendek yang dibuat dengan teknik yang masih sangat

sederhana serta dengan keterbatasan alat yang digunakan.

Film-film pada awal perkembangan animasi adalah sebagai

berikut.

1. Humourous Phases of Funny Faces. (Stuart Blackton -

1906)

Film animasi ini, berupa gambar kartun yang di buat

dengan kapur tulis diatas papan tulis. Teknik pengambilan

gambarnya adalah dengan menggambar kemudian difoto dan

dihapus untuk diganti dengan gambar selanjutnya. Rangkaian

foto-foto tersebut kemudian digabung dan disajikan sebagai

Page 102: Buku grafkom

Page 95

film animasi. Film inilah yang menggunakan teknik "stop-

motion" yang pertama didunia.

2. Gartie The Dinosaur (Winsor McCay 1914)

Merupakan fim animasi yang sudah memasukkan unsur

cerita didalamnya.

3. Felix the Cat (Otto Massmer, 1919)

Pada film ini sudah jauh lebih menarik, karena adanya

Page 103: Buku grafkom

Page 96

unsur cerita yang megalir, serta beberapa efek yang

membuat film ini menarik.

4. Flowers and tree (Walt Disney, 1932)

Film flowers and tree, sebelumnya telah diproduksi

dalam bentuk film hitam putih, film tersebut akhirnya di

produksi ulang dengan menambahkan unsur warna.

Flowers and tree akhirnya memenangkan Academy

Award untuk kategori film pendek animasi.

B. JENIS-JENIS ANIMASI

Animasi yang dulunya mempunyai prinsip sederhana,

sekarang telah berkembang menjadi beberapa jenis yaitu ;

Animasi 2d

Page 104: Buku grafkom

Page 97

Animasi 3d

Animasi tanah liat (clay animation)

Animasi jepang (anime)

1. Animasi 2d

Animasi ini yang paling akrab dengan keseharian

kita,biasa juga disebut dengan film kartun.kartun berasal dari

cartoon yang artinya gambar yang lucu,memang kebanyakan

film kartun itu kebanyakan film yang lucu.

Contohnya banyak sekali, looney tunes,tom and jerry, scooby

doo, doraemon, lion king brother bear dan banyak lagi

2. Animasi 3d

Perkembangan teknologi adan komputer membuat

teknik pebuuatan animasi 3d semakin berkembang dan maju

pesat;. animasi 3d adalah pengembangan animasi 2d dengan

animasi 3d karakter yang di perlihatkan semakin hidup dan

nyata,mendekati wujud manusia asllinnya. Toy story adalah

film animasi 3d pertama buatan disney(pixar studio),dan

semenjak itu maka berlomba lombalah studio film dunia

memproduksi film sejenis .bermunculanlah bug's life,antz,

dinosaurs,final fantasy ,toy story 2,monster inc hingga finding

nemo yang merupakan film aniasi terbaik di dunia pada saat

itu dan masih banyak lagi lainnya. Kesemuannya itu biasa

juga di sebut dengan animasi 3d atau cgi (computer

generated imagery).

3. Animasi tanah liat (clay animation)

Animasi ini msudah lam sekali sebenarnya bahkan

sebelum era animasi 3d,bahkan boleh di bilang nenek

Page 105: Buku grafkom

Page 98

moyangnya animasi.M eski namanya clay (tanah liat) yang di

pakai bukanlah tanah liat biasa.animasi ini memakai

plasticin,bahan lentur seperti permen karet yang di temukan

pada tahun 1897.tokoh dalam clay di buat dengan memakai

rangka khusus untuk kerangka tubuhnya lallu kerangka

tersebut di tutup dengan plasticin sesuai bentuk tokoh yang

ingin di buat .bagian-bagian tubuh kerangka ini seperti

kepala,tangan kaki bisa di lepas dan bisa di pasang lagi,

setelah semuanya siap lalu di foto gerkan pergerakan ,inilah

yang deisebut teknik pembuatan animasi dengan stop otion

picture film animasi clay pertama di rilis 1908 berjudul A

Sculptor's welsh rarebit nightmare.dan yang sekarang masih

di puta di tv2 kita adlah shawn the sheep dan timmy time.

4. Anime (aniimasi jepang)

Anime jepang tak kalah dengan animasi buatan eropa

dan amerika,jepang sudah banyak memproduksi anime

bahkan anime jepang tidak semua diperuntukkan bagi anak-

anak,bahkan ada yang khusus dewasa.

Jenis - jenis animasi dalam industri hiburan:

1. Animasi Sel (Cell Animation)

Kata “cell” berasal dari kata “celluloid”, yang

merupakan material yang digunakan untuk membuat film

gambar bergerak pada saat awal. Sekarang, material film

dibuat dari asetat (acetate), bukan celluloid. Potongan

animasi dibuat pada sebuah potongan asetat atau sel

(cell). Sel animasi biasanya merupakan lembaran-

lembaran yang membentuk sebuah frame animasi

Page 106: Buku grafkom

Page 99

tunggal. Sel animasi merupakan sel yang terpisah dari

lembaran latar belakang dan sebuah sel untuk masing-

masing obyek yang bergerak secara mandiri di atas latar

belakang. Lembaran-lembaran ini memungkinkan

animator untuk memisahkan dan menggambar kembali

bagian-bagian gambar yang berubah antara frame yang

berurutan. Sebuah frame terdiri dari sel latar belakang

dan sel di atasnya. Misalnya seorang animator ingin

membuat karakter yang berjalan, pertama-tama dia

menggambar lembaran latar belakang, kemudian

membuat karakter akan berjalan pada lembaran

berikutnya, selanjutnya membuat membuat karakter

ketika kaki diangkat dan akhirnya membuat karakter kaki

dilangkahkan. Di antara lembaran-lembaran (frame-

frame) dapat disipi efek animasi agar karakter berjalan itu

mulus. Frame-frame yang digunakan untuk menyisipi

celah-celah tersebut disebut keyframe. Selain dengan

keyframe proses dan terminology animasi sel dengan

layering dan tweening dapat dibuat dengan animasi

computer.

Berikut adalah Contoh Gambar Animasi sel.

Page 107: Buku grafkom

Page 100

2. Animasi Frame (Bingkai Animasi)

Animasi bingkai adalah bentuk animasi Yang

Sederhana memucat. Diupamakan Andari mempunyai

sebuah Buku bergambar Yang Berseri di Tepi Auditan

berurutan. Bila jempol Andari membuka Buku Artikel

Baru CEPAT, Maka GAMBAR kelihatan Bergerak. PADA

Komputer multimedia, animasi Buku nihil menampilkan

sebuah GAMBAR Yang berurutan secara CEPAT. Antara

GAMBAR Satu (frame satu) Artikel Baru GAMBAR lain

(bingkai Lain) berbeda. Kalau kitd bayangkan bagaimana

Film ATB ITU diputar di Bioskop, Maka dapat kitd pahami

bagaimana Cara Koperasi Karyawan Bhakti Samudera

frame animasi secara lebih BAIK Dalam, sebuah film,

serangkaian bingkai Bergerak melalui proyektor Film

Artikel Baru kecepatan sekitar 24 frame per Detik. Kita

Bisa menangkap adanya Gerak di Layar karena setiap

bingkai mengandung Satu GAMBAR Yang tampil PADA

Layar begitu bingkai Yang bersangkutan Muncul.

Mengapa 24 frame per Detik? Karena kecepatan ITU

merupakan Ambang Batas, kurang bahasa Dari ITU Maka

Yang Akan kitd lihat di Layar adalah GAMBAR Yang Kabur.

Berikut adalah contoh gambar animasi frame

Page 108: Buku grafkom

Page 101

3. Animasi Sprite (Sprite Animasi)

Animasi sprite serupa Artikel Baru Teknik animasi

ATB, yaitu obyek Yang diletakkan Dan dianimasikan PADA

bagian Puncak Grafik Artikel Baru latar Belakang

diam. Sprite adalah setiap bagian bahasa Dari animasi

Andari Yang Bergerak secara mandiri, misalnya Burung

Bagus terbang, planert berotasi, bola memantul-mantul

atau berputar logo. Sprite beranimasi Dan Bergerak

sebagai obyek Yang mandiri. Dalam, animasi sprite,

sebuah GAMBAR Tunggal atau berurutan dapat

ditempelkan Dalam, sprite. Sprite dapat dianimasikan

Dalam, Satu klien untuk membuka posisi, seperti halnya

planet berputar atau Burung Bergerak Sepanjang Garis

lurus. Animasi sprite berbeda Artikel Baru animasi frame,

Illustrasi Urutan masing-masing frame, Andari hanya

dapat memperbaiki bahasa Dari Layar Yang mengandung

sprite. Andari tidak dapat memperbaiki bagian Dalam,

Yang ditampilkan Layar untuk masing-masing bingkai,

seperti Yang dapat Andari kerjakan PADA animasi frame.

Berikut adalah contoh gambar animasi sprite.

Page 109: Buku grafkom

Page 102

4. Animasi Path ( Path Animasi)

Animasi path adalah animasi dari objek yang

gerakannya mengikuti garis lintasan yang sudah

ditentukan. Contoh animasi jenis ini adalah animasi

kereta api yang bergerak mengikuti lintasan rel. Biasanya

dalam animasi path diberi perulangan animasi, sehingga

animasi terus berulang hingga mencapai kondisi tertentu.

Dalam Macromedia Flash, animasi jenis ini didapatkan

dengan teknik animasi path, teknik ini menggunakan layer

tersendiri yang didefinisikan sebagai lintasan gerakan

objek.

Berikut adalah contoh gambar animasi Path.

5. Animasi Spline ( Spline Animasi )

Spline adalah representasi matematis dari kurva. Bila

obyek bergerak, biasanya tidak mengikuti garis lurus,

misalnya berbentuk kurva. Program animasi computer

memungkinkan Anda untuk membuat animasi spline

dengan lintasan gerakan berbentuk kurva. Untuk

mendefinisikan animasi spline, posisi pertama Anda pada

sebuah titik pijak. Kurva itu sendiri melewati titik pijak.

Titik pijak mendefinisikan awal dan akhir titik dari bagian

Page 110: Buku grafkom

Page 103

kurva yang berbeda. Masing-masing titik pijak dapat

dikendalikan sehingga memungkinkan Anda untuk

mengubah bentuk kurva antara dua titik pijak.

Sebagian besar program animasi memungkinkan Anda

untuk membuat variasi gerakan sepanjang lintasan. Jika

sebuah lintasan gerakan mempunyai belokan tajam,

sebagai contoh sebuah obyek bergerak pelan mengikuti

belokan dan kemudian meningkatkan kecepatannya

setelah melewati belokan. Beberapa program

menyediakan pengontrol kecepatan sprite sepanjang

lintasan secara canggih.

Berikut adalah contoh gambar dari animasi Spline .

6. Animasi Vektor (Vector Animasi)

Animasi vektor serupa Artikel Baru animasi sprite.

PADA animasi sprite menggunakan bitmap untuk sprite,

animasi vektor menggunakan rumus Matematika untuk

menggambarkan sprite. Rumus inisial serupa Artikel Baru

Yang rumus menggambarkan kurva spline. Animasi vektor

menjadikan objek Bergerak Artikel Baru SIBOR

memvariasikan parameter Ujung-Pangkal, arah Dan

Panjang PADA segmen-segmen Garis Yang menentukan

objek. Macromedia adalah industri terdepan Dalam,

Page 111: Buku grafkom

Page 104

perangkat lunak animasi berbasis vektor. Perangkat lunak

flash Yang dikembangkan Macromedia menggunakan

vektor grafis untuk membuat animasi interaktif Serta

grafis untuk digunakan di web. Macromedia telah

menerbitkan format file Flash (. Swf) sebagai sebuah

standar Terbuka.Untuk INFORMASI lebih JAUH, ikuti Link

situs web Macromedia Flash, di mana ANDA Bisa

mengunjungi sebuah galeri halaman Web Yang berisi

animasi Flash Dan mendownload flash gratis selama

periode 30 Hari Percobaan terpisah.

Berikut adalah contoh dari gambar animasi Vektor.

7. Animasi Clay ( Clay Animasi )

Animasi ini sering disebut juga animasi doll (boneka).

Animasi ini dibuat menggunakan boneka-boneka tanah

liat atau material lain yang digerakkan perlahan-lahan,

kemudian setiap gerakan boneka-boneka tersebut difoto

secara beruntun, setelah proses pemotretan selesai,

rangkaian foto dijalankan dalam kecepatan tertentu

sehingga dihasilkan gerakan animasi yang unik. Contoh

penerapan animasi ini adalah pada film Chicken Run dari

Dream Work Pictures. Teknik animasi inilah yang menjadi

Page 112: Buku grafkom

Page 105

cikal bakal animasi 3 Dimensi yang pembuatannya

menggunakan alat bantu komputer.

Berikut adalah contoh dari gambar animasi clay.

8. Animasi Karakter (Character Animation)

Animasi karakter merupakan sebuah cabang khusus

animasi. Animasi karakter semacam yang Anda lihat

dalam film kartun. Animasi ni berbeda dengan animasi

lainnya, misalnya grafik bergerak animasi logo yang

melibatkan bentuk organic yang komplek dengan

penggandan yang banyak, gerakan yang herarkis. Tidak

hanya mulut, mata, muka dan tangan yang bergerak

tetapi semua gerakan pada waktu yang sama.

Meskipun untuk membuat animasi tunggal dan bitmap

mudah, tetapi untuk membuat animasi karakter yang

hidup dan meyakinkan merupakan sebuah seni yang

membutuhkan pertimbangan khusus dalam

pengerjaanya. Teknik ini juga dapat diterapkan terhadap

animasi obyek. Perankgat lunak yang dapat dipakai untuk

Page 113: Buku grafkom

Page 106

animasi karakter, antara lain Maya Unlimited. Film kartun

Toy Story dan Monster Inc dibuat dengan Maya

Unlimited.

Berikut adalah contoh dari gambar animasi karakter.

C. Konsep Animasi pada GLUT

Dalam penggunaan glutTimerFunc dimungkinkan

untuk membuat sebuah animasi yang dikontrol oleh waktu.

Fungsi dari glutPostRedisplaya dalah mengirimkan perintah

untuk mengaktifkan display secara berkala (looping).

Kemudian pada main program perlu menambahkan fungsi

untuk mengaktifkan timer function.

1. Fungsi dasarbpembuatan animasi dengan

menggunakan TimerFunction

GLUTAPI void APIENTRY glutTimerFunc(unsigned int

millis, void

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

Page 114: Buku grafkom

Page 107

Dalam penggunaan glutTimerFunc dimungkinkan untuk

membuat sebuah animasi yang dikontrol olehwaktu.

2. Inisialisasi dalam penggunaan TimerFunction

Fungsi dari glutPostRedisplay adalah mengirim kan

perintah untuk mengaktifkan display secara berkala

(looping).

Kemudian pada main program perlu menambahkan fungsi

untuk mengaktifkan timer function.

Berikut adalah contoh dari sebuah bentuk jam analog

sederhana dengan minimal empat tempat penunjuk angka

dan menggunakan 3 jarum. Jarum jam berputar sesuai

dengan timer per detik waktu nyata.

Source Code:

#include <stdlib.h>

#include <glut.h>

#include <math.h>

#define PI 3.1415926535

float sudut = 0;

int i,n;

Page 115: Buku grafkom

Page 108

void lingkaran(int radius, int jumlah_titik, int

x_tengah, int y_tengah) {

glBegin(GL_POLYGON);

for (i=0;i<=360;i++){

float sudut=i*(2*PI/jumlah_titik);

float x=x_tengah+radius*cos(sudut);

float y=y_tengah+radius*sin(sudut);

glVertex2f(x,y);

}

glEnd();

}

void panahJam(){

glBegin(GL_POLYGON);

glColor3f(0,0,0);

glVertex2i(0,200);

glVertex2i(10,180);

glVertex2i(5,180);

glVertex2i(5,0);

glVertex2i(-5,0);

glVertex2i(-5,180);

glVertex2i(-10,180);

Page 116: Buku grafkom

Page 109

glVertex2i(0,200);

glEnd();

}

void panahMenit(){

glBegin(GL_POLYGON);

glColor3f(1,1,1);

glVertex2i(0,220);

glVertex2i(10,200);

glVertex2i(5,200);

glVertex2i(5,0);

glVertex2i(-5,0);

glVertex2i(-5,200);

glVertex2i(-10,200);

glVertex2i(0,220);

glEnd();

}

void panahDetik(){

glBegin(GL_POLYGON);

glColor3f(1,0,0);

glVertex2i(0,240);

glVertex2i(10,210);

Page 117: Buku grafkom

Page 110

glVertex2i(5,210);

glVertex2i(5,0);

glVertex2i(-5,0);

glVertex2i(-5,210);

glVertex2i(-10,210);

glVertex2i(0,240);

glEnd();

}

void angka(float jarak, float x, float y) {

glPointSize(10);

glBegin(GL_POINTS);

glColor3f(0,0,0);

for(n=0;n<360;n+=30)

glVertex2f(jarak*(float)sin(n*PI/180.0)+x,ja

rak*(float)cos(n*PI/180.0)+y);

glEnd();

}

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

Page 118: Buku grafkom

Page 111

glPushMatrix();

glColor3f(0.7,0.7,0.7);

lingkaran(250,100,0,0);

angka(230.,0.,0.);

glPopMatrix();

glPushMatrix();

glRotatef(sudut,0,0,1);

panahDetik();

glPopMatrix();

glPushMatrix();

glRotatef(sudut/60,0,0,1);

panahMenit();

glPopMatrix();

glPushMatrix();

glRotatef(sudut/720,0,0,1);

panahJam();

glPopMatrix();

glColor3f(0,0,0);

Page 119: Buku grafkom

Page 112

lingkaran(20,100,0,0);

glFlush();

}

void timer(int value){

sudut-=0.6;

glutPostRedisplay();

glutTimerFunc(100,timer,0);

}

void main (int argc, char **argv){

glutInit(&argc, argv);

glutInitWindowPosition(100,100);

glutInitWindowSize(300,300);

glutCreateWindow("JAM ANALOG: Prak Grafkom");

gluOrtho2D(-300.,300.,-300.,300.);

glutDisplayFunc(renderScene);

glutTimerFunc(60,timer,0);

glutMainLoop();

Page 120: Buku grafkom

Page 113

Output:

Contoh program ke-2

Membuat sebuah baling-baling yang bisa perputar secara

clockwise kemudian unclockwise yang pusatnya berada pada

pusat koordinat.

#include <stdlib.h>

#include <glut.h>

int x=0;

int zputer=0;

int zbalik=180;

void Timer(int value){

Page 121: Buku grafkom

Page 114

if(zputer <=360){

x = 1;

zputer += 1;

}

if(zputer>360){

x = -1;

zbalik -= 1;

}

if(zbalik<0){

x = 1;

zputer = 0;

zbalik = 360;

}

glutPostRedisplay();

glutTimerFunc(5,Timer,0);

}

void Draw(){

glBegin(GL_TRIANGLES);

glClear(GL_COLOR_BUFFER_BIT);

glVertex2d(0,0);

glVertex2d(-100,200);

glVertex2d(100,200);

glVertex2d(0,0);

glVertex2d(-100,-200);

glVertex2d(100,-200);

glEnd();

}

void display(){

Page 122: Buku grafkom

Page 115

glClear(GL_COLOR_BUFFER_BIT);

glPopMatrix();

glRotatef(x,0.,0.,1.);

Draw();

glPushMatrix();

glFlush();

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE

| GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(480,480);

glutCreateWindow("Praktikum Grafika

Komputer");

gluOrtho2D(-300.0,300.0,-300.0,300.0);

glutDisplayFunc(display);

glutTimerFunc(100,Timer,0);

glutMainLoop();

Output:

Page 123: Buku grafkom

Page 116

Animasi 2D menggunakan OpenGL dapat dilakukan

dengan melakukan perpindahan objek menggunakan

glTranslatef, juga dapat dilakukan dengan melakukan

perputaran atau pergerakan objek yang berporos pada

sumbu-sumbu koordinat dari sumbu pembentuk objek

tersebut menggunakan glRotatef. Kemudian waktu yang

digunakan dalam pergerakan animasi juga dapat diatur sesuai

keinginan dengan menggunakan glutTimerFunc.

BAB 6

INTERAKSI KEYBOARD

Page 124: Buku grafkom

Page 117

Keyboard adalah alat input yang berfungsi untuk

berfungsi mengetikkan huruf, angka, karakter khusus dan

memasukkan perintah atau instruksi ke dalam software atau

system operasi yang dijalankan komputer, serta sebagai

media bagi user (pengguna) untuk melakukan perintah –

perintah lainya yang diperluka, seperti menyimpan file dan

membuka file.

A. STRUKTUR TOMBOL PADA KEYBOARD

Secara umum, struktur tombol pada keyboard terbagi atas 4,

yaitu:

a. Tombol Ketik (typing keys)

Tombol ketik adalah salah satu bagian dari keyboard

yang berisi huruf dan angka serta tanda baca. Secara

umum, ada 2 jenis susunan huruf pada keyboard,

yaitu tipe QWERTY dan DVORAK. Namun, yang

terbanyak digunakan sampai saat ini adalah susunan

QWERTY.

b. Numeric Keypad

Numeric keypad merupakan bagian khusus dari

keyboard yang berisi angka dan sangat berfungsi

untuk memasukkan data berupa angka dan operasi

perhitungan. Struktur angkanya disusun menyerupai

kalkulator dan alat hitung lainnya.

c. Tombol Fungsi (Function Keys)

Tahun 1986, IBM menambahkan beberapa tombol

fungsi pada keyboard standard. Tombol ini dapat

Page 125: Buku grafkom

Page 118

dipergunakan sebagai perintah khusus yang

disertakan pada sistem operasi maupun aplikasi.

d. Tombol kontrol (Control keys)

Tombol ini menyediakan kontrol terhadap kursor dan

layar. Tombol yang termasuk dalam kategori ini

adalah 4 tombol bersimbol panah di antara tombol

ketik dan numeric keypad, home, end, insert, delete,

page up, page down, control (ctrl), alternate (alt) dan

escape (esc)

B. PEMETAAN (MAPPING)

Karena saluran cache lebih sedikit dibandingkan

dengan blok memori utama, diperlukan algoritma untuk

pemetaan blok-blok memori utama ke dalam saluran cache.

Selain itu diperlukan alat untuk menentukan blok memori

utama mana yang sedang memakai saluran cache. Pemilihan

fungsi pemetaan akan menentukan bentuk organisasi cache.

Dapat digunakan tiga jenis teknik, yaitu sebagai berikut :

a. Pemetaan Langsung (Direct Mapping)

Pemetaan ini memetakan masing-masing blok memori

utama hanya ke satu saluran cache saja. Jika suatu blok ada

di cache, maka tempatnya sudah tertentu. Keuntungan dari

direct mapping adalah sederhana dan murah. Sedangkan

Page 126: Buku grafkom

Page 119

kerugian dari direct mapping adalah suatu blok memiliki

lokasi yang tetap (Jika program mengakses 2 block yang di

map ke line yang sama secara berulang-ulang, maka cache-

miss sangat tinggi).

b. Pemetaan Asosiatif (Associative Mapping)

Pemetaan ini mengatasi kekurangan pemetaan

langsung dengan cara mengizinkan setiap blok memori utama

untuk dimuatkan ke sembarang saluran cache. Dengan

pemetaan asosiatif, terdapat fleksibilitas penggantian blok

ketika blok baru dibaca ke dalam cache. Kekurangan

pemetaan asosiatif yang utama adalah kompleksitas

rangkaian yang diperlukan untuk menguji tag seluruh saluran

cache secara paralel, sehingga pencarian data di cache

menjadi lama.

c. Pemetaan Asosiatif Set (Set Associative Mapping)

Pada pemetaan ini, cache dibagi dalam sejumlah sets.

Setiap set berisi sejumlah line. Pemetaan asosiatif set

memanfaatkan kelebihan-kelebihan pendekatan pemetaan

langsung dan pemetaan asosiatif

C. JENIS-JENIS KEYBOARD

Jenis Jenis Keyboard Komputer Secara Fisik

a. Keyboard Serial : digunakan pada komputer tipe AT

Page 127: Buku grafkom

Page 120

b. Keyboard PS/2 : digunakan pada komputer ATX

c. Keyboard Wireless : digunakan pada semua jenis

komputer dan laptop

d. Keyboard USB : Untuk menjamin transfer data lebih

cepat

Page 128: Buku grafkom

Page 121

Jenis Jenis Keyboard Komputer Secara Bentuk dan Tombol

1. Keyboard QWERTY

Keyboard yang biasanya dipakai adalah jenis Qwerty,

yang bentuknya ini mirip seperti tuts pada mesin tik.

ditemukan oleh Scholes, Glidden dan Soule pada tahun 1878,

dan fungsi keyboard QWERTY ini digunakan sebagai standar

mesin tik komersial pada tahun 1905. Keyboard QWERTY

memiliki empat bagian yaitu :

a. Typewriter key

b. Numeric key

c. Funtion key

d. Special function key

Tata Letak ini sama dengan keyboard yang biasa

digunakan yang terdiri dari 4 bagian yaitu:

Tombol fungsi (function key)

Page 129: Buku grafkom

Page 122

Tombol alphanumerik (alphanumerik key)

Tombol kontrol (control key)

Tombol numerik (numerik keypad).

Untuk menghasilkan bilangan dalam jumlah yang besar,

orang lebih suka menggunakan tombol numerik (numerik

keyped) yang tata letak tombol-tombolnya dapat dijangkau

dengan sebuah tangan. Selain itu, fungsinya untuk

mengetikkan angka apabila tombol Num Lock di aktifkan.

Apabila tombol Num Lock tidak diaktifkan, fungsinya berubah

menjadi tombol-tombol untuk menggerakkan kursor.

2. KEYBOARD ALPHABETIC

Tombol-tombol pada papan ketik dengan tata letak

alphabetik disusun persis seperti pada tata letak QWERTY

maupun Dvorak. Susunan hurufnya berurutan seperti pada

urutan alphabet.Biasanya banyak ditemui pada mainan anak-

anak, sehingga anak-anak dapat diajar mengenal hurup

alphabet. Keyboard Alphabetic, digunakan utk negara-negara

yg menggunakan alphabetic berbeda dgn alphabetic yg ada.

Misal : Arab, Cina, Rusia. Tombol-tombol disusun menurut

abjad. Tidak punya kelebihan dibanding tata letak lainnya,

karena itu tidak banyak dipakai.

Page 130: Buku grafkom

Page 123

3. KEYBOARD DVORAK

Ditemukan pada tahun 1932 dengan dirancang lebih

efisien 10-15 % dibanding keyboard QWERTY. Menggunakan

susunan papan ketik yang sama, tetapi susunan hurufnya

disusun sehingga tangan kanan dibebani oleh banyak

pekerjaan dibanding dengan tangan kiri. Dirancang agar 70

persen dari ketukan jatuh pada home row, sehingga jari-

jemari yang harus mencapai huruf-huruf yang tidak berada

pada posisi home row mempunyai kerja yang lebih ringan.

Mengurangi kelelahan karena adanya faktor ergonomik yang

ditambahkan pada tata letak ini.

4. KEYBOARD CHORD

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

Page 131: Buku grafkom

Page 124

Keyboard ini dibuat dengan maksud menyempurnakan

jenis keyboard yang sudah ada, yaitu dengan memisahkan

kedua bagian keyboard (bagian kiri dan kanan).

6. KEYBOARD MALTRON

Keyboard ini dibuat agak cekung ke dalam. Dengan

pertimbangan bahwa pada saat jari-jari diposisikan akan

mengetik, maka jari-jari itu dijamin tidak akan membentuk

satu garis lurus.

7. KEYBOARD NUMERIC

Keyboad ini bertujuan untuk memasukkan bilangan

dalam jumlah yang besar.

Page 132: Buku grafkom

Page 125

D. FUNGSI TOMBOL KEYBOARD KOMPUTER

Back Space : untuk menghapus 1 character di kiri cursor

Caps Lock : untuk membuat huruf kecil menjadi huruf

besar atau Kapital

Delete : untuk menghapus 1 karakter pada posisi cursor

Esc : untuk membatalkan suatu perintah dari suatu menu

End : untuk memindahkan cursor ke akhir baris /

halaman / lembar kerja

Enter : untuk berpindah ke baris baru atau untuk

melakukan suatu proses perintah

Home : Untuk menuju ke awal baris atau ke sudut kiri

atas layar

Insert : untuk menyisipkan character

Page Up : untuk meggerakan cursor 1 layar ke atas

Page Down : untuk Menggerakkan cursor 1 layar ke

bawah

Tab : untuk memindahkan cursor 1 tabulasi ke kanan

Numeric Key : memberikan perintah menghidupkan dan

mematikan fungsi tombol numerik

Page 133: Buku grafkom

Page 126

E. KONSEP INPUTKEYBOARD PADA GLUT-KEY

BIASA DAN SPECIAL KEY

1. KONSEP INPUT KEYBOARD (GENERAL BUTTON)

glutKeyboardFunc adalah suatu fungsi callback

untuk digunakan sebagai masukan pada suatu jendela

window. Konsepnya pada saat seorang user atau pengguna

memberikan input yaitu menekan pada tombol keyboard,

setiap tombol keyboard yang ditekan akan menghasilkan

suatu karakter ASCII yang akan menghasilkan suatu callback

keyboard yang telah didefinisikan berupa fungsi dengan 3

parameter.

Penggunaan input keyboard pada tombol-tombol biasa

atau normal key (a-z, 1-0), dapat dilakukan dengan

menggunakan callback function berupa

glutKeyboardFunc(myKeyboard) dengan

dideklarasikan terlebih dahulu suatu fungsi buatan untuk

menampung semua perintah input yang akan digunakan oleh

user. Fungsi buatan tersebut seperti contoh di bawah ini:

void myKeyboard(unsigned char key, int x,int y)

{

// masukkan perintah disini

}

Fungsi tersebut berisi suatu perintah yang akan digunakan

dalam pengoperasian program oleh user. Di dalam fungsi

tersebut terdapat 3 parameter dan di dalamnya

dideklarasikan suatu perintah yang nantinya akan digunakan.

Page 134: Buku grafkom

Page 127

void timer(int value){

glutPostRedisplay();

glutTimerFunc(100, timer, 0);

}

void myKeyboard(unsigned char key, int x, int y)

{

if(key == 'a') glTranslatef(0,5,0);

if(key == 'd') glTranslatef(0,-5,0);

}

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

glColor3f(1.,0.,0.);

Draw();

glFlush();

}

Sintaks tersebut adalah sintak dasar yang digunakan,

untuk bisa menggunakan input keyboard maka harus

diberikan callback function untuk memanggilnya.

glutDisplayFunc(renderScene);

glutKeyboardFunc(myKeyboard);

glutTimerFunc(30,timer,0);

Page 135: Buku grafkom

Page 128

Sintaks tersebut harus disertakan pada fungsi main.

Selain itu, pada keyboard juga terdapat method lain yang

bisa digunakan dalam proses input ini, yaitu: Key Press, Key

Up, dan Key Buffering.

a. Key Press

Metode ini akan memberitahukan kita pada command line

tombol apa yang sedang kita tekan. Method ini dapat

dinamakan keyPressed dan pada GLUT akan terdapat 3

parameter, satu untuk tombol yang saat itu ditekan, dan dua

untuk memberitahukan lokasi mouse ketika tombol ditekan.

void keyPressed(unsigned char key, int x, int

y){

If(key == ‘a’){ // saat tombol ‘a’ ditekan

// aksi yang diberikan saat tombol ‘a’

ditekan }}

Dan fungsi tersebut akan dipanggil pada fungsi main, namun

callback function-nya sedikit berbeda dari callback function yang

sebelumnya. glutKeyboardFunc(keyPressed); // memberitahukan

pada GLUT untuk menggunakan method "keyPressed"

untuk tombol yang ditekan

b. Key Up

Fungsi Key Up ini adalah fungsi register yang menyimpan

nilai masukan sampai ketika tombol keyboard dilepaskan. Hal

ini bisa berguna untuk pengaturan beberapa nilai ketika suatu

tombol pertama kali ditekan, dan tetap menjaga nilai tersebut

sampai tombol tersebut dilapaskan. Method sama seperti

method Key Press tadi yaitu memiliki 3 parameter yang

Page 136: Buku grafkom

Page 129

memiliki fungsi yang sama, hanya berbeda pada

penamaannya yaitu, keyUp. void keyUp(unsigned char key, int x, int y){

If(key == ‘a’){ // saat tombol ‘a’ ditekan

// aksi yang diberikan saat tombol ‘a’

ditekan

}

}

Dan fungsi tersebut akan dipanggil pada fungsi main,

namun callback function-nya sedikit berbeda dari callback

function yang sebelumnya. glutKeyboardFunc(keyUp); // memberitahukan

pada GLUT untuk menggunakan method "keyUp"

untuk tombol yang dilepas

c. Key Buffering

Method ini memungkinkan untuk penanganan terhadap

tombol yang ditekan dalam jumlah banyak dalam proyek-

proyek OpenGL. Seperti yang diketahui tipe data char sama

dengan byte dan dapat mengambila nilai integer dari 0

sampai 255. Ini dikarenakan tipe data char memiliki ukuran 28

atau 256. Hal ini memungkinkan kita untuk menangani hingga

256 tombol berbeda pada keyboard, atau seluruh set karakter

ASCII.

Pertama dimulai dengan pendeklarasian sebuah array dari

nilai Boolean yang akan menangani masing-masing method

keyboard, true untuk tombol yang ditekan, dan false saat

tombol dilepaskan. bool* keyStates = new bool[256]; // membuat

array dari nilai boolean dengan ukuran 256 (0-

255)

kemudian dilanjutkan dengan pendeklarasian masing-

masing method. void keyPressed(unsigned char key, int x, int y)

{

Page 137: Buku grafkom

Page 130

keyStates[key] = true;

}

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

keyStates[key] = false;

}

void keyOperations(void){

if(keyStates['a']){ // saat tombol ‘a’

ditekan

// aksi yang diberikan saat tombol ‘a’

ditekan

}

}

Sama seperti sebelumnya fungsi-fungsi tersebut akan

dipanggil pada fungsi main dengan callback function berikut: void display (void){

keyOperations();

glClearColor(1.0f, 0.0f, 0.0f, 1.0f); //

menjadikan background menjadi warna merah

}

2. KONSEP INPUT KEYBOARD SPECIAL KEY

GlutSpecialFunc merupakan suatu fungsi callback pada

opengl yang digunakan untuk mengaktifkan tombol-tombol

khusus pada keyboard sehingga dapat digunakan untuk

berinteraksi antara user dengan objek yang ada di dalam

display opengl. Pendeklarasiannya adalah :

void glutSpecialFunc (void (* func) (int

key, int x, int y));

Page 138: Buku grafkom

Page 131

callback keyboard khusus dipicu ketika keyboard fungsi

atau tombol special yang dideklarasikan ditekan. Parameter

callback kunci adalah GLUT_KEY_tombol khusus.. Parameter

x dan y mengindikasikan koordinat relatif jendela ketika

tombol ditekan. Ketika jendela baru dibuat, tidak ada callback

khusus awalnya terdaftar dan stroke kunci khusus di jendela

diabaikan. Melewati NULL untuk glutSpecialFunc

Menonaktifkan generasi callback khusus. Selama callback

khusus, glutGetModifiers dapat dipanggil untuk menentukan

keadaan tombol pengubah ketika keystroke menghasilkan

callback terjadi. Nilai-nilai yang tersedia GLUT_KEY_ * adalah:

GLUT_KEY_F1 F1 function key

GLUT_KEY_F2 F2 function key

GLUT_KEY_F3 F3 function key

GLUT_KEY_F4 F4 function key

GLUT_KEY_F5 F5 function key

GLUT_KEY_F6 F6 function key

GLUT_KEY_F7 F7 function key

GLUT_KEY_F8 F8 function key

GLUT_KEY_F9 F9 function key

GLUT_KEY_F10 F10 function key

GLUT_KEY_F11 F11 function key

GLUT_KEY_F12 F12 function key

Page 139: Buku grafkom

Page 132

GLUT_KEY_LEFT Left function key

GLUT_KEY_RIGHT Right function key

GLUT_KEY_UP Up function key

GLUT_KEY_DOWN Down function key

GLUT_KEY_PAGE_UP Page Up function key

GLUT_KEY_PAGE_DOWN PageDown function key

GLUT_KEY_HOME Home function key

GLUT_KEY_END End function key

GLUT_KEY_INSERT Insert function key

Tombol-tombol diatas dapat diaktifkan dengan membuat

sebuah fungsi callback yang akan dipanggil oleh

glutSpecialFunc ke dalam fungsi main program, sehingga user

dapat berinteraksi dengan objek yang ada dengan menekan

tombol-tombol special keyboard yang telah di deklarasikan ke

dalam fungsi callback tersebut. contoh pembuatan fungsi

callback untuk tombol special keyboard :

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

switch(key){

case GLUT_KEY_LEFT : c+=-4; d+=0; break;

case GLUT_KEY_RIGHT : c+=4; d+=0; break;

case GLUT_KEY_UP : c+=0; d+=4; break;

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

Page 140: Buku grafkom

Page 133

}

}

Selanjutnya fungsi tersebut akan dipanggil oleh

glutDisplayFunc ke dalam fungsi main, berikut script nya :

glutSpecialFunc(mySpecialKeyboard);

Selain fungsi callback yang mendeklarasikan tombol special

keyboard, untuk dapat berinteraksi fungsi tersebut harus

memiliki fungsi callback lain yang akan dipanggil kedalam

fungsi glutDisplayfunc dan fungsi glutTimerFunc didalam

fungsi main program tersebut. fungsi callback di dalam fungsi

glutDisplayFunk merupakan fungsi yang mendklarasikan objek

yang akan berinteraksi dengan tombol keyborad, Sedangkan

fungsi glutTimerFunc berfungsi agar tombol keyboard dapat

terus terdeteksi oleh glut. Contoh program interaksi

keyboard lengkap :

#include <stdlib.h>

#include <glut.h>

int c,d;

void triAngles(){

glBegin(GL_TRIANGLES);

glVertex2i(280,0);

glVertex2i(250,60);

glVertex2i(220,0);

glEnd();}

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

switch(key){

case GLUT_KEY_LEFT : c+=-4; d+=0; break;

case GLUT_KEY_RIGHT : c+=4; d+=0; break;

case GLUT_KEY_UP : c+=0; d+=4; break;

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

}}

Page 141: Buku grafkom

Page 134

void timer(int value){

glutPostRedisplay();

glutTimerFunc(50,timer,0);}

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

glPushMatrix();

glTranslatef(c,d,0);

triAngles();

glPopMatrix();

glFlush();

}

void main (int argc, char **argv){

glutInit(&argc, argv);

glutInitWindowPosition(100,100);

glutInitWindowSize(640,480);

glutCreateWindow("ANJAR DWI R & DWI

PANGLIPURINGTIAS");

gluOrtho2D(-320.,320.,-240.,240.);

glutTimerFunc(50,timer,0);

glutDisplayFunc(renderScene);

glutSpecialFunc(mySpecialKeyboard);

glutMainLoop();

}

Page 142: Buku grafkom

Page 135

Panah merah mengindikasikan pergerakan objek ketika

tombol arah (up, down. Left, dan right) pada keyborad

ditekan oleh user. Sesuai dengan program dimana setiap

tombol arah akan memiliki nilai variabel c dan d yang

berbeda-beda yang akan mengakibatkan gambar akan

bergeser dengan arah yang sesuai nilai variabel tersebut

ketika tombol khusus arah (up, down, left dan right) ditekan.

Page 143: Buku grafkom

Page 136

BAB 7

INTERAKSI OBJEK 2D (MOUSE FUNCTION)

Mouse merupakan peralatan masukan/ inputan

selain keyboard pada computer. Mouse adalah

alat/perangkat yang digunakan untuk mengatir perpindahan

kursor secara cepat atau digunakan untuk memberikan

perintah secara praktis dan cepat pula. Didalam mouse

terdapat bola kecil yang jika digerakkan akan menyebabkan

sinyal listrik terkirim kkomputer sesuai dengan pergerakan

mouse

Mouse merupakan salah satu perlengkapan computer

meskipun apabila tidak ada juga computer masih bisa

beroperasi, akan tetapi dengan menggunakan mouse maka

kerja kita akan menjadi lebih cepat dan menghemat waktu,

lebih cepat dan efisien. Maka ridak ada salahnya jika kita

sedikit melihat sejarah perkembangan mouse itu sendiri.

A. SEJARAH MOUSE dan JENIS MOUSE

Mouse pertama kali ditemukan oleh Douglas

Engelbart dari stanford Research Insitute pada tahun 1963.

Mouse adalah suatu alat yang terdiri dari beberapa alat

penunjuk ( pointing device ) yang dikembangkan untuk oN

Line System (NLS) milik Engelbard. Selain mouse yang

awalnyya disebut "bug", juga dikembangkan beberapa alat

deteksi gerakan tubuh lainnya yang diletakkan di kepala dan

Page 144: Buku grafkom

Page 137

dagu. Karena kenyamanan dsalam penguunaannya, mouse

dipilih dan dikembangkan.

Mouse pertama yang diciptakan berukuran besar,

dan menggunakan dua buah roda yang saling tegak lurus

utnuk mendeteksi gerakan ke sumbu Xdan sumbu Y.

Engelbart kemudian mematenkan nya pada 17 November

1970, dengan nama penunjuk posisi X-Y untuk sistem

tampilan grafis (X-Y position Indicator For A Display System).

Pada waktu itu, sebetulnya Engelbart beraksud

pengguna mouse dengan satu tangan secara terus menerus,

sementara tangan yang lainnya mengperasikan alat seperti

keyboard dengan lima tombol.

Perkembangan selanjutnya dilakukan oleh Bill English

di Xerox PARC pada awal tahun 1970, yang menggunakan

bola berputar kesegala arah, putaran tersebut dideteksi oleh

roda-roda sensor didalam mouse tersebut. Pengembangan

inilah yang melahirkan mouse tipe trackball, yaitu mouse

terbalik dimana pengguna menggerakkan bola dengan

jari.Pada tahun 1980 - 1990 Xerox mempopulerkan

penggunaan keyboard QWERTY dengan dua tangan dan

menggunakan mouse pada saat dibutukan saja.

Mouse sekarang ini mengikuti desain Ecole

Polytechnique federale de lausanne (EPFL) yang diinspirasikan

oleh profesor Jean-Daniel Nicoud. Jenis yang paling akhir

adalah mouse optic dan yang paling mudah dalam

perawatannya serta penggunaannya. Mouse jenis ini tidak

erlu dibersihkan pada bagian bolanya karena banyak nya

Page 145: Buku grafkom

Page 138

debu yang menempel. Mouse optikal pertamakali dibuat oleh

Steve Kirsch dari Mouse Systems Corporation.

Mouse jenis ini menggunakan LED (Light emitting

diode) dan photo dioda untuk mendeteksi gerakan mouse.

Mouse optikal petamakali hanya dapat digunakan pada alas

(mousepad) khusus yang berwarna metalik bergaris biru -

abu-abu. Seiring perkembangan jaman mouse sekarang ini

dapat digunakan disemua permukaan yang padat dan rata,

kecuali permukaan yang memantulkan cahaya.

Mouse saat ini bekerja dengan menggunakan sensor

optik yang menggunakan LED sebagai sumber penerangan

untuk mengambil beribu-ribu frame gambar selama mouse

bergerak. Dan jenis mutakhir dari mouse adalah yang

berteknologi laser, pertamakali diperkenalkan oleh logitech,

perusahaan mouse terkemuka yang bekerja sama dengan

Agilent Technologies pada tahun 2004, dengan nama logitech

MX 1000. Logitech mengklaim bahwa mouse laser memiliki

tingakt akurasi yang 20 kali lebih besar dari mouse optikal.

Meskipun dasar kerja dari mouse optikal dengan

mouse laser sama hanya berbeda pada laser pengganti LED.

Meskipun begitu jenis mouse ini belum banyak dipergunakan

diperkirakan harganya yang masih mahal. Dari sekian

banyaknya perkembangan dari awal sampai yang terakhir

yang tidak berubah dari mouse adalah jumlah tombolnya.

Semua mouse memiliki tombol satu sampai tiga buah. Mouse

pertama memiliki satu tombol.

Kebanyakan mouse saat ini, yang didesain oleh

microsoft Windows, memiliki dua tombol. Beberapa mouse

Page 146: Buku grafkom

Page 139

modernjuga memiliki sebuah wheel untuk memudahkan

scrolling. Sementara Ael memperkenalkan mouse satu

tombol, yang tidak berubah hingga kini. Mouse modern juga

sudah banyak yang tanpa kabel, dengan menggunakan

teknologi wireless seperti infra red, gelombang radio ataupun

bluetooth.

Mouse wireless yang populer saat ini menggunakan

gelombang radio dan ataupun bluetooth. Sedangkan mouse

yang menggunakan infrared kurang begitu populer karena

jarak jangkaunya yang terbatas, selain itu juga kurang begitu

praktis karena antara mouse dengan penerimanya tidal boleh

ada penghalang.

Berikut urutan sejarah perjalanan mouse dan jenis-jenis

mouse:

1. Mouse yang Pertama

Mouse kali pertama diperkenalkan oleh Douglas

Engelbart pada tahun 1967. Kali pertama

diperkenalkannya, mouse hanya memiliki dua alat

mekanik berbentuk roda sebagai menanda arah yang

masing-masing mengacu pada sumbu X dan sumbu Y.

Mouse ini hanya memiliki satu tombol saja pada bagian

atasnya. Dan bentuknya masih terlihat sangat primitif.

Namun biar demikian, mouse inilah yang telah menjadi

cikal-bakal mouse yang kini.

Page 147: Buku grafkom

Page 140

Untuk dapat memfungsikan mouse sebagai alat

penunjuk atau input tidak hanya dibutuhkan fisiknya saja,

melainkan juga dibutuhkan keterlibatan software dari

mouse itu sendiri.

Perkembangan software yang mengirim kemajuan

hardware dari mouse ini telah mendorong mouse ke

posisi yang sangat penting. Baik sebagai input device

pada pekerjaan sederhana seperti mengetik, sampai pada

proses design dan bermain game 3D yang supercanggih.

2. Mekanik

Page 148: Buku grafkom

Page 141

Mouse trackball yang tidak menggunakan kabel atau

wireless hanya membutuhkan tenaga 5 mA saja. Sangat

kecil, sehingga Anda tidak perlu sering ganti baterai. Hal

ini dikarenakan kerjanya tidak sepenuhnya elektrik. Ada

beberapa komponen yang bekerja mekanik, sehingga

tidak membutuhkan banyak tenaga listrik. Perawatannya

juga tidak sulit, cukup dibersihkan saja rodaroda mouse,

maka mouse dapat berjalan baik kembali.

Pengunaan bola atau yang disebut trackball ternyata

tidak selalu di bawah mouse. Saat ini, ada beberapa

mouse yang menggunaka bolanya di atas mouse sehingga

menggunakannya tidak perlu menelungkupkan telapak

tangan. Sehingga lebih mudah dan nyaman digunakan

ketimbang mouse biasa. Oleh sebab itu, harganya

umumnya lebih mahal dan tidak terlalu banyak

perusahaan IT yang memproduksinya. Beberapa di

antarannya adalah Microsoft dan Logitech.

Bola yang digunakan untuk mouse jenis ini agak

sedikit berbeda. Umumnya lebih besar dan licin. Berbeda

dengan mouse yang meletakan bolanya di bawah. Bola

tersebut cenderung kecil dengan permukaan yang tidak

licin. Hal ini dilakukan agar bola dapat berjalan dengan

baik atau tidak tergelincir pada permukaan. Oleh sebab

itu, untuk menggunakan mouse mekanik dengan bola di

bawah seseorang kerap kali harus menggunakan tatakan

khusus yang dinamakan mousepad.

Cara kerja mouse mekanik yang meletakkan

trackballnya di atas sama dengan kerja mekanik mouse

yang memiliki trackball-nya di bawah.

Page 149: Buku grafkom

Page 142

3. Optic

Yang disebut mouse optical adalah mouse yang

menggunakan sensor cahaya serta lampu LED merah di

bawahnya sebagai pencahaya. Sensor pada mouse optical

mampu menangkap gambar dengan kecepatan 1500

frame per detik sampai 7000 frame per detik. Dengan

kecepatan mencapai 45 inci per detik dengan resolusi

2000 count per inci (cpi).

Mouse ini dinyatakan memiliki nilai presisi yang lebih

baik ketimbang mouse yang menggunakan mekanik.

Pernyataan ini tidak sepenuhnya benar. Untuk kelas yang

sama, mouse optical tidaklah lebih presisi. Yang memang

memiliki nilai presisi yang tinggi harganya saat ini masih

terbilang mahal. Sedangkan, mouse optical yang umum

dijual tidak memiliki kecepatan dan nilai presisi yang lebih

baik ketimbang mouse biasa. Dan keterangan ini sering

diabaikan oleh si produsen.

Page 150: Buku grafkom

Page 143

Berbeda dengan mouse trackball yang sulit jalan

ditempat yang terlalu licin. Oleh sebab itu, mouse ini

membutuhkan sebuah landasannya sendiri yang

dinamakan mouse pad. Berbeda dengan mouse optical

yang cenderung lebih baik bekerja dipermukaan yang

mulus dan dengan warna yang cenderung gelap. Mouse

optical sulit dijalankan pada permukaan yang putih polos.

Berbeda dengan mouse mekanik yang sulit jalan di

tempat yang terlalu licin, mouse optical dapat digunakan

hampir pada seluruh jenis permukaan. Asalkan

permukaan tersebut tidak transparan atau terlalu glossy.

Mouse optic juga membutuhkan arus yang lebih

besar ketimbang mouse bola atau mekanis biasa. Lima

kali lebih besar arus yang dibutuhkan untuk menggerakan

mouse ini(25 mA). Ini artinya bila Anda menggunakan

mouse wireless optical akan lima kalilebih sering

mengganti baterai ketimbang menggunakan mouse

mekanik yang menggunakan bola.

Page 151: Buku grafkom

Page 144

Cara kerja mouse optical adalah sebagai berikut:

lampu LED menembarkan cahayanya pada permukaan

lalu, sensor cahaya yang ada pada bagian bawah mouse

akan menangkap pergeseran yang terjadi pada cahaya

tersebut. Atau dapat juga dikatakan sebagai berikut. Bila

mouse mekanik komputer mencatat pergeseran yang

dilakukan oleh mouse, sebaliknya dengan mouse optical,

komputer mencatat pergeseran yang terjadi pada

landasan mouse.

Kelebihan mouse optic:

Tidak ada celah kotoran masuk kedalam mouse artinya isi

mouse tidak akan kotor dan memperkecil kerusakan

mouse.

Tidak ada mekanisme yang bergerak, artinya mouse akan

menjadi lebih awet.

Meningkatkan sensor gerakan sehingga respon menjadi

mulus

Page 152: Buku grafkom

Page 145

Tidak membutuhkan permukaan khusus seperti mouse

pad

Kekurangan mouse optic:

Tidak dapat berjalan di atas permukaan yang memantul

seperti lantai keramik, dll.

dapat berjalan di atas permukaan yang tembus pandang

seperti kaca, gelas, dll.

Mengeluarkan cahaya merah yang menyilaukan dan jika

dipandang terus menerus mungkin bisa membahayakan

kesehatan mata

4. Mouse Laser

Perkembangan mouse optical kini sudah jauh lebih

murah ketimbang waktukali pertama diperkenalkannya.

Perlahan-lahan kehadiran mouse optical sudah dinilai

sangat umum. Kini ada satu mouse lagi yang mulai

diperkenalkan kepada masyarakat. Kerjanya hampir sama

Page 153: Buku grafkom

Page 146

dengan mouse optical hanya saja bila pada mouse optical

biasa menggunakan ampu LED, maka pada mouse laser,

bukan lagi sinar LED yang digunakan, melainkan sinar

laser.

Hal ini membuat ketajaman gambar yang ditangkap

oleh sensor menjadi lebih baik. Jika pada permukaan

glossy seperti papan whiteboard mouse optical dengan

lampu LED-nya sulit membedakan setiap tampilan

permukaan, sebaliknya dengan laser, permukaan tidak

lagi menjadi sama, melainkan berstruktur atau berpola.

Mouse ini kali pertama diperkenalkan tahun 2004

oleh Logitech yang bekerja sama dengan Agilent

Technologies dalam pengembangannya. Teknologi baru

ini diklaim mampu memiliki ketepatan 20x kali lebih baik

dari mouse optical. Hanya saja harga laser mouse sampai

saat ini masih tergolong sangat mahal. Kini, selain

Logitech, Microsoft juga ikut meluncurkan mouse

berbasiskan teknologi laser ini.

5. Single Click dan Scroll

Page 154: Buku grafkom

Page 147

Dari sejak awal diperkenalkan, fungsi mouse tidak

hanya sebagai penunjuk arah saja. Tetapi, juga sudah

berfungsi sebagai input device. Oleh sebab itu, mouse

sejak pertama kali diperkenalkan sudah memiliki sebuah

tombol.

Waktu kali pertama, memang hanya ada satu tombol

yang melengkapinya. Namun kini seiring majunya

teknologi pada mouse, tidak hanya tombol saja yang

bertambah pada mouse, ada beberapa hal lain yang kini

juga telah melengkapi mouse. Di antaranya scroll button

atau tombol scroll, efek getar, dan masih banyak lagi.

Bahkan dari segi keamanan kini juga sudah banyak mouse

yang dilengkapi dengan sidk jari.

Tombol yang ada pada mouse memiliki berbagai

macam fungsi. Untuk fungsi yang paling umum biasanya

terletak pada tombol di sebelah kiri. Sedangkan, untuk

fungsi tambahan biasanya terletak disebelah kanan. Scroll

mouse banyak dipergunakan untuk melihat sebuah

dokumen yang panjang, ke bawah. Sedangkan tombol

yang lebih banyak dari itu umumnya sangat terasa

manfaatnya bila sedang digunakan untuk bermain games.

Misalnya saja untuk mengganti senjata, untuk melihat

peta, dan sebagainya. Sedangkan pada kebutuhan sehari-

hari tombol-tombol tersebut dapat saja diatur untuk

memenuhi kebutuhan lain.

Mouse pada aplikasi permainan memiliki fungsi yang

tidak jauh berbeda dengan joystick. Kadang sama seperti

halnya joystick yang dilengkapi dengan efek getar.

Page 155: Buku grafkom

Page 148

Tidak hanya fasilitas yang beragam bentuk mouse

juga sangat beragam. Mulai dari yang sangat kecil

(setengah besar telur ayam negeri) sampai sangat besar

genggaman telapak tangan. Bahkan ada juga yang

berbentuk sangat mirip menyerupai joystick. Sebenarnya

apapun bentuk mouse harus disesuaikan dengan

kenyamanan penggunanya. Untuk presentasi banyak

sekali para pebisnis yang menggunakan trackball wireless

yang bentuknya sangat nyaman dalam genggaman seperti

layaknya sebuah remote atau joystick.

( sumber: http://ya2oke.blogspot.com/2009/04/sejarah-

mouse-komputer.html)

B. FUNGSI MOUSE

Di bawah ini adalah beberapa fungsi dari mouse:

Untuk memasukkan perintah kepada komputer dimana

cara kerja dari mouse ini adalah dengan cara menggeser

- geser mouse di permukaan papan yang datar.

Sebagai penggerak pointer untuk menunjukkan lokasi

tertentu di layar monitor.

Untuk melakukan kegiatan yang disebut dengan: klik

(memilih item), double klik (membuka file), klik tahan

dan geser / drag drop (memindahkan item) dan klik

kanan (menampilkan pilihan menu perintah.

Page 156: Buku grafkom

Page 149

Untuk menggulung (scrolling) layar dengan

menggunakan roda scroll.

Untuk mendeteksi gerakan 2 dimensi secara relatif

terhadap posisinya sekarang.

Mempermudah dan mempercepat pekerjaan. Terlebih

bagi kita yang sering melakukan aktivitas mengedit foto

atau membuat desain.

Sebagai pengontrol perbesaran tampilan objek.

Untuk mengaktifkan command button dan juga

melakukan suatu aksi tertentu pada aplikasi.

Dapat digunakan uantuk memperbesar atau juga

memperkecil tampilan worksheet.

Untukmelakukan konversi dan isntruksi ke dalam bentuk

sinyal elektronik yang dapat dimengerti oleh komputer.

Untuk perintah yang tidak menyediakan menu shortcut,

tombol kanan pada mouse berfungsi sebagai tombol

enter.

C. KONSEP MOUSE PADA GLUT

Dalam konsep mouse pada glut ada beberapa fungsi dasar

dan inisialisasi yang digunakan untuk melakukan interaksi

mouse. Adapun penjelasannya adalah sebagai berikut :

1. Fungsi dasar pembuatan interaksi dengan

menggunakan MouseFunction

Page 157: Buku grafkom

Page 150

GLUTAPI void APIENTRY glutMouseFunc(void

(GLUTCALLBACK *func)(int button, int state,

int x, int y));

Paramater func adalah fungsi yang akan ditangani

dengan event klik mouse. GLUTAPI void APIENTRY glutMotionFunc(void

*func(int x, int y));

Fungsi di atas adalah fungsi pelengkap dari

fungsi interaksi mouse untuk mendeteksi gerakan

mouse.

2. Inisialisasi dalam penggunaan MouseFunction

void mouse(int button, int state, int x,int

y){

if(button==GLUT_LEFT_BUTTON &&

state==GLUT_DOWN)

drawDot(x,480-y);

if(button==GLUT_RIGHT_BUTTON &&

state==GLUT_DOWN)

drawDot2(x,480-y);

if(button==GLUT_MIDDLE_BUTTON &&

state==GLUT_DOWN)

drawDot3(x,480-y);

}

void motion(int x,int y){

}

Page 158: Buku grafkom

Page 151

Dalam penerapan interaksi mouse pada open gl / glut,

Fungsi inisialisasinya adalah sebagai berikut :

1. GLUT_LEFT_BUTTON

Fungsi inisialisasi ini bertujuan untuk inisialisasi button

mouse kiri. Jadi apabila kita ingin mengaktifkan fungsi

penggunaan dari button mouse sebelah kiri maka bisa

menggunakan fungsi inisialisasi ini.

2. GLUT_RIGHT_BUTTON

Fungsi inisialisasi ini bertujuan untuk inisialisasi button

mouse kanan. Jadi apabila kita ingin mengaktifkan fungsi

penggunaan dari button mouse sebelah kanan maka bisa

menggunakan fungsi inisialisasi ini.

3. GLUT_MIDDLE_BUTTON

Fungsi inisialisasi ini bertujuan untuk inisialisasi button

mouse tengah. Jadi apabila kita ingin mengaktifkan fungsi

penggunaan dari button mouse tengah maka bisa

menggunakan fungsi inisialisasi ini.

4. GLUT_DOWN

Fungsi inisialisasi ini adalah untuk inisialisasi ketika

tombol mouse ditekan.

5. GLUT_UP

Fungsi inisialisasi ini adalah untuk inisialisasi ketika

tombol mouse dilepaskan.

Kemudian pada main program perlu menambahkan

fungsi untuk callback fungsi MouseFunction.

glutMouseFunc(mouse);

glutMotionFunc(motion);

Page 159: Buku grafkom

Page 152

3. Sistim Koordinat interaksi mouse pada glut

Sistim koordinat interaksi mouse pada glut adalah sebagai

berikut.

Misalnya ditentukan iinisialisasi awal adalah :

int w = 480, h=480;

float x=0, y=0, z=0;

maka :

a. Titik 0,0 berada pada pojok kiri atas, koordinatnya akan

berubah apabila terjadi pergeseran mouse.

b. Titik 480,0 berada pada pojok kanan atas.

c. Titik 0, 480 berada pada pojok kiri bawah

d. Titik 480,480 berada pada pojok kanan bawah

D. CONTOH PROGAM PENERAPAN MOUSE PADA

GLUT

1. Konsep KLIK terhadap sebuah objek

Skript code

#include <stdlib.h>

#include <glut.h>

#include <stdio.h>

void Triangles(){

Page 160: Buku grafkom

Page 153

glBegin(GL_TRIANGLES);

glVertex2i(0,0);

glVertex2i(100,-30);

glVertex2i(100,30);

glEnd();

}

void mouseku(int button, int state, int x, int y){

if(button==GLUT_LEFT_BUTTON){

printf("tombol KIRI (%d,%d)\n",x,y);

}else if(button==GLUT_MIDDLE_BUTTON){

printf("tombol TENGAH (%d,%d)\n",x,y);

}else{

printf("tombol KANAN (%d,%d)\n",x,y);

}

if(state==GLUT_DOWN){

printf("tombol DITEKAN\n");

}else{

printf("tombol DILEPAS\n");

}

}

void display(){

glClear(GL_COLOR_BUFFER_BIT);

glRotatef(10,0.,0.,1.);

Triangles();

glFlush();

}

void Timer(int value){

glutPostRedisplay();

glutTimerFunc(30,Timer,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |

GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(320,320);

glutCreateWindow("coba");

Page 161: Buku grafkom

Page 154

glutDisplayFunc(display);

gluOrtho2D(-320.0,320.0,-320.0,320.0);

glutTimerFunc(10,Timer,0);

glutMouseFunc(mouseku);

glutMainLoop();

}

Screenshot hasil

Analisis:

Apabila klik kiri pada mouse ditekan, maka program akan

mengeksekusi blok perintah yang ada pada kondisi pertama,

window command akan menampilkan tulisan “tombol Kiri

(x,y)” dimana x dan y adalah posisi pointer pada koordinat

mouse pointer di kanvas. Begitu juga dengan kondisi tombol

yang lain.

Sementara operasi klik tombol mouse dapat dideteksi

melalui identifikasi tombol pada fungsi mouse(int button, int

state, int x, int y). Pada fungsi tersebut diberi kondisi apabila

sebuah tombol tertentu di tekan, maka akan dilakukan

perintah yang ada di dalam kondisi tersebut. Callback

function untuk fungsi klik mouse adalah glutMouseFunc().

Page 162: Buku grafkom

Page 155

2. Interaksi Drag

Skrip soal

#include <stdlib.h>

#include <glut.h>

#include <stdio.h>

void Triangles(){

glBegin(GL_TRIANGLES);

glVertex2i(0,0);

glVertex2i(100,-30);

glVertex2i(100,30);

glEnd();

}

void mouseku(int button, int state, int x, int y){

if(button==GLUT_LEFT_BUTTON){

printf("tombol KIRI (%d,%d)\n",x,y);

}else if(button==GLUT_MIDDLE_BUTTON){

printf("tombol TENGAH

(%d,%d)\n",x,y);

}else{

printf("tombol KANAN (%d,%d)\n",x,y);

}

if(state==GLUT_DOWN){

printf("tombol DITEKAN\n");

}else{

printf("tombol DILEPAS\n");

Page 163: Buku grafkom

Page 156

}

}

void motionku(int x, int y){

printf("posisi printer mouse

(%d,%d)\n",x,y);

}

void display(){

glClear(GL_COLOR_BUFFER_BIT);

glRotatef(89,0.,0.,1.);

Triangles();

glFlush();

}

void Timer(int value){

glutPostRedisplay();

glutTimerFunc(10,Timer,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE

| GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(320,320);

glutCreateWindow("GLUT");

glutDisplayFunc(display);

gluOrtho2D(-320.0,320.0,-320.0,320.0);

Page 164: Buku grafkom

Page 157

glutTimerFunc(10,Timer,0);

glutMouseFunc(mouseku);

glutMotionFunc(motionku);

glutMainLoop();

}

Sceen shot

Analisa :

command window dapat menampilkan tulisan “posisi pointer

mouse (??,??)”? Saat mouse di tekan kemudian dilakukan

drag atau ditekan sambil digeser.Ditampilkan ketika

dilakukan drag atau ditekan sambil digeser.sehingga Move

event (ketika mouse digerakkan dengan tombol mouse

tertekan), passive move (ketika mouse digerakkan tanpa

menekan tombol), mouse event (ketika tombol mouse

ditekan atau dilepaskan). Ketika kita pertama kali menekan

tombol mouse, kita mengerjakan sebuah blok perintah

(event), tapi mempertahankan tombol mouse tertekan tidak

menjalankan blok perintah apapun. Event berikutnya setelah

tombol ditekan adalah: drag atau dilepaskan. Ketika event

mouse telah dilakukan, mouse akan kembali ke posisinya,

Page 165: Buku grafkom

Page 158

sesuai posisi logika (tidak sebenarnya) di layar. Tetapi untuk

feedback, muncul tulisan “posisi (x,y)” pada layar.

3. Buatlah program untuk deteksi DOUBLE CLICK, ketika

DOUBLE CLICK object yang dipilih skalanya menjadi 1.5,

sedangkan untuk DOUBLE CLICK berikutnya

Sript :

#include "stdlib.h"

#include "stdio.h"

#include <conio.h>

#include "glut.h"

float x=1,y=1,z=0;

int w=480, h=480, flag=0,flg;

void drawQuad() {

glBegin(GL_POLYGON);

glColor3f(0,0,1);

glVertex2f(-20.,-20.);

glVertex2f(20.,-20.);

glVertex2f(20.,20.);

glVertex2f(-20.,20.);

glEnd();

}

void mouse(int button, int state, int xmouse, int

ymouse){

if(flg==0)

{

if (state==GLUT_DOWN)

{

if(button==GLUT_LEFT_BUTTON)

{

Page 166: Buku grafkom

Page 159

flag++;

if(flag==2)

{

flg=3;

x=3;

y=3;

printf("%d", flg);

}

}

}

}

if (flg==3)

{

if (state==GLUT_DOWN)

{

if(button==GLUT_LEFT_BUTTON)

{

flag--;

if(flag==0)

{

x=1;

y=1;

flg=0;

}

}

}

}

}

void renderScene(void){

glClear(GL_COLOR_BUFFER_BIT);

glClearColor(1,1,1,1);

glPushMatrix();

glScalef(x,y,z);

drawQuad();

glPopMatrix();

Page 167: Buku grafkom

Page 160

glFlush();

}

void timer(int value){

glutPostRedisplay();

glutTimerFunc(50,timer,0);

}

void main (int argc, char **argv){

glutInit(&argc, argv);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Interaksi Mouse");

gluOrtho2D(-w/2,w/2,-h/2,h/2);

glutDisplayFunc(renderScene);

glutMouseFunc(mouse);

glutTimerFunc(1,timer,0);

glutMainLoop();

}

Screenshot

Analisa:

Jika dilakukan klik dobel, maka akan masuk ke kondisi

pertama dimana variabel flg==0, program akan memberi nilai

pada variabel global x, dan y, masing-masing 3 yang nantinya

Page 168: Buku grafkom

Page 161

akan digunakan untuk parameter fungsi scale, sehingga objek

akan memiliki ukuran 3x lebih besar. Jika dilakukan klik lagi,

maka akan masuk ke kondisi kedua yaitu dimana variabel

flg==3, program akan memberi nilai pada variabel global x,

dan y, masing-masing 3 yang nantinya akan digunakan untuk

parameter fungsi scale, sehingga ukuran objek akan kembali

seperti semula.

Page 169: Buku grafkom

Page 162

BAB 8

OBJEK 3D

A. Pengertian Objek 3 Dimensi

Grafik komputer 3 dimensi biasa disebut 3D atau

adalah bentuk dari benda yang memiliki panjang, lebar,

dan tinggi. Grafik 3 Dimensi merupakan teknik

penggambaran yg berpatokan pada titik koordinat

sumbu x(datar), sumbu y(tegak), dan sumbu z(miring).

Representasi dari data geometrik 3 dimensi

sebagai hasil dari pemrosesan dan pemberian efek

cahaya terhadap grafika komputer 2D. Tiga Dimensi,

biasanya digunakan dalam penanganan grafis. 3D secara

umum merujuk pada kemampuan dari sebuah video card

(link). Saat ini video card menggunakan variasi dari

instruksi-instruksi yang ditanamkan dalam video card itu

sendiri (bukan berasal dari software) untuk mencapai

hasil grafik yang lebih realistis dalam memainkan game

komputer.

Grafik 3D merupakan perkembangan dari grafik

2D. Didalam grafika komputer, 3D merupakan bentuk

grafik yang menggunakan representasi data geometri

tiga dimensi.

Perbedaan paling utama dari objek 2 dimensi dan

objek 3 dimensi yaitu kedalamannya. Yaitu suatu jarak

antara pengamat dengan suatu objek yang dilihat (point

of view). Jadi, jika objek 2 dimensi hanya menggunakan 2

ukuran (panjang dan lebar), maka 3 dimensi

Page 170: Buku grafkom

Page 163

menggunakan 3 ukuran meliputi panjang, lebar,

kedalaman yang disimbolkan dengan sumbu x, y, z.

Suatu objek rangka 3D apabila disinari dari arah

tertentu akan membentuk bayangan pada permukaan

gambar. Proses pembuatan grafik komputer 3D dapat

dibagi ke dalam tiga fase, yaitu 3D modeling yang

mendeskripsikan bentuk dari sebuah objek, layout dan

animation yang mendeskripsikan gerakan dan tata letak

sebuah objek, dan 3D rendering yang memproduksi

image dari objek tersebut.

Di dalam dunia game, 3D secara umum merujuk

pada kemampuan dari sebuah video card (link). Saat ini

video card menggunakan variasi dari instruksi-instruksi

yang ditanamkan dalam video card itu sendiri (bukan

berasal dari software) untuk mencapai hasil grafik yang

lebih realistis dalam memainkan game komputer.

B. Objek 3 Dimensi

Benda tiga dimensi tersusun dari sekumpulan

surface. Surface yaitu permukaan kulit.

Gambar 8. 1 contoh permukaan 3 dimensi

Page 171: Buku grafkom

Page 164

Surface dapat dibuat dari rangkaian Polygon.

Polygon adalah bentuk yang disusun dari serangkaian

garis yang terhubung satu dengan yang lain dan

berbentuk kurva tertutup sehingga membentuk sebuah

objek gambar. Titik sudut dari Polygon disebut vertex

sedangkan garis penyusun Polygon disebut edge.

Gambar 8. 2 Polygon

Polygon digambar dengan menggambar masing-

masing edge dengan setiap edge merupakan pasangan

dari vertexi – vertexi+1 kecuali untuk edge terakhir

merupakan pasangan dari vertexn – vertex1.

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

Page 172: Buku grafkom

Page 165

Bentuk polygon yang paling tepat digunakan untuk

membuat permukaan benda tiga dimensi adalah polygon

segitiga (triangle). Hal ini disebabkan polygon segitiga

akan selalu berada dalam keadaan planar (datar) se-

mentara polygon dengan vertex lebih dari 3 dapat

berada dalam kondisi non-planar karena salah satu

vertex tidak berada di lokasi yang sejajar. Satu hal yang

harus diperhatikan pada saat menggunakan polygon

segitiga adalah winding. Winding adalah urutan dan arah

vertex-vertex penyusun polygon. Winding menganggap

bahwa arah vertex berlawanan jarum jam sebagai

tampak depan sedangkan arah vertex searah jarum jam

dianggap sebagai bagian belakang benda.

Gambar 8. 4 Arah vertex : (a) berlawanan jarum jam; (b)

searah jarum jam

Pada gambar 8.6.a polygon menggunakan winding

berlawanan jarum jam karena didefinisikan sebagai

urutan vertex v3-v4-v5 sedangkan pada gambar 8.6.b

menggunakan winding searah jarum jam karena urutan

vertex yang digunakan v3-v5-v4.

Pada setiap permukaan dari poligon yang

membentuk objek akan memuncukan garis Normal, yaitu

Page 173: Buku grafkom

Page 166

vektor tegak lurus pada permukaan. Fungsinya untuk

bayangan benda tersebut.

Gambar 8. 5 garis normal polygon

C. Alur Proses Rendering Grafis 3D

Pada grafika komputer, rendering adalah proses

pembuatan/ produksi image/gambar pada layar dari

pendeskripsian suatu model.

Proses rendering grafis 3D mendeskripsikan objek

3D dari vertex-vertex pada objek primitive(seperti

segitiga, titik, garis, dan segiempat), dan menghasilkan

warna-warna pada pixel pada layar.

Gambar 8. 6 Alur proses Rendering grafis 3D

Page 174: Buku grafkom

Page 167

1. Modelling Trasnformations :

Menempatkan model pada sistem koordinat yang

disebut world space. Semua objek, sumber cahaya,

dan sudut pandang pengamat berada pada world

space.

2. Trival Rejection :

Rejection (penolakan) dilakukan terhadap bagian-

bagian yeng tidak perlu sebagai upaya optimalisasi.

3. Illumination :

Cahaya menyebabkan suatu objek dapat terlihat.

Warna objek ditentukan dari properti material objek

itu sendiri dan sumber cahaya pada tampilan

tersebut. Algoritma Illuminasi tergantung pada

pemodelan bayangan (shading model) dan

pemodenl permukaan (surface model).

4. Viewing transformation :

Transformasi pengamatan adalah bentuk lain dari

koordinat sistem. Memetakan titik-titik yang ada

pada world space ke ruang pengamatan. Posisi

pengamat ditransformasikan ke asalnya. Arah

pengamatan diorientasikan sepanjang axis.

Mendefinisikan pengamtan volume

5. Clipping :

Proses clipping dulakukan pada penggambaran

volume 3D yang biasa disebut viewing frustum.

Page 175: Buku grafkom

Page 168

Pada tahap ini dilakukan eliminasi total pada objek

(dan bagian objek) yang tidak visible bagi citra.

6. Projection :

Objek selanjutnya diproyeksikan ke dalam 2D.

Transformasikan dari ruang pengamatan ke layar

7. Rasterization :

Konversi tiap objek primitive ke suah set fragment.

Sebuah fragment diperlakukan seperti pixel pada

ruang 3 dimensi, selaras dengan grid pixel, dengan

atribut seperti posisi, warna, dan tekstur yang

normal.

8. Display :

Melakukan interpolasi parameter. Melakukan

beragam operasi 2D.

D. Sistem koordinat 3D

Secara umum, sistem koordinat tiga dimensi

dibedakan menjadi dua, yaitu sistem koordinat tangan

kiri dan sistem koordinat tangan kanan. Sistem koordinat

tangan kanan dapat digambarkan dengan tiga buah jari

pada tangan kanan yang menghadap pengamat yaitu jari

tengah sebagai sumbu z positif, jari telunjuk sebagai

sumbu y dan ibu jari sebagai sumbu x. Sedangkan sistem

koordinat tangan kiri dapat digambarkan dengan tiga

buah jari pada tangan kiri dengan punggung tangan

menghadap pengamat dengan jari tengah sebagai sumbu

z negatif, jari telunjuk sebagai sumbu y dan ibu jari

sebagai sumbu x.

Sistem koordinat tangan kanan banyak digunakan

pada penggambaran geometri. Sebaliknya sistem

Page 176: Buku grafkom

Page 169

koordinat tangan kiri banyak digunakan pada

peggambaran pada grafika komputer Sistem koordinat

tangan kiri digunakan agar objek 3 dimensi memiliki nilai

z positif (jarak jauh dekat benda lebih terlihat).

Setiap titik dalam sistem koordinat tiga dimensi

dapat ditentukan posisinya dengan meentukan seberapa

jauh, tingggi dan lebar dari objek aslinya yang dtentukan

berdasarkan koordinat-koordinat pada sumbu x, y, dan z.

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

kanan

E. Primitive 3D

Ada beberapa bentuk primitive dari objek 3 dimensi.

Promitive yaitu bentuk dasar yang dapat dengan mudah

didefinisikan secara matematik.

Sphere

glutWireSphere(5, 20, 20);

Page 177: Buku grafkom

Page 170

Gambar 8. 1 sphere (bola)

Cube

glutWireCube(25);

Gambar 8. 2 Cube (kubus)

Cone

glutWireCone(alas, tinggi, 20, 20);

Gambar 8. 3 cone (kerucut)

Dodecahedron

glutWireDodecahedron();

Page 178: Buku grafkom

Page 171

Gambar 8. 4 bola segilima

Teapot

glutWireTeapot(15);

Gambar 8. 5 Poci The

Torus

glutWireTorus(luar, dalam, 20, 20);

Gambar 8. 6 cincin

Page 179: Buku grafkom

Page 172

Setiap primitive 3D memiliki parameter nilai yang

mengekspresikan letak dan bentuk primitive objek

tersebut.

F. Transformasi Objek 3 Dimensi

Metode transformasi objek tiga dimensi sangat

berbeda dengan objek dua dimensi karena terdapat

sumbu z yang ditambahkan sebagai salah satu acuan

untuk memperoleh posisi koordinat baru.

a. Translasi (Perpindahan)

Dalam tranformasi objek tiga dimensi, translasi

adalah pemindahan suatu titik dari titik P=(x,y,z) ke

posisi P=(x’,y’,z’) (Hearn, 1994) dengan

menggunakan operasi matriks :

Parameter tx, ty, dan tz menjelaskan perpindahan

jarak untuk koordinat x, y, dan z.

Gambar 8. 7 memindahkan titik dengan translasi

vektor T = (tx, ty, tz)

Page 180: Buku grafkom

Page 173

Sebuah bangun tiga dimensi yang ditranslasikan

dengan vektor tertentu, dilakukan dengan

memindahkan titik-titik sesuai dengan vektor

tersebut.

Gambar 8. 8 memindahkan balok dengan translasi

vektor T=(tx, ty, tz)

gltranslatef(x,y,z: GLfloat);

Gambar 8. 9 posisi bola sebelum dan setelah

translasi

Kode program dalam OpenGL dari program di

atas adalah glbegin(gl_quads);

glcolor3f(1,1,1);

glvertex3f(-2,0,-2);

glvertex3f(-2,0,2);

glvertex3f(2,0,2);

Page 181: Buku grafkom

Page 174

glvertex3f(2,0,-2);

glend();

quadratic:=glunewquadric();

glusphere(quadratic,0.5,32,32);

gltranslatef(1,0,1);

glusphere(quadratic,0.5,32,32);

glFlush();

Dari kode diatas diketahui bahwa posisi bola

sebelum ditranslasikan berada pada koorinat (0,0,0).

Kemudian posisinya ditranslasikan sepanjang sumbu

x sebesar 1 satuan dan sepanjang sumbu z sebesar 1

satuan. Dengan adanya proses pentranslasian

tersebut, maka pusat koordinat yang baru berada

pada koordinat (1,0,1).

b. Rotasi

Untuk merotasikan sebuah objek diperlukan

sumbu rotasi (poros untuk merotasikan objek)

(Donald Hearn, 1994). Sintaks untuk merotasikan

objek pada OpenGL adalah glRotate(sudut, x, y, z).

Parameter pertama adalah nilai perputaran

sudut. Parameter kedua , ketiga, dan keempat

bernilai 1 apabila sumbunya dijadikan sumbu putar.

Contoh perotasian objek ditunjukkan pada gambar di

bawah ini.

Page 182: Buku grafkom

Page 175

Gambar 8. 10 Tabung sebelum dan setelah di

rotasi

Kode program : quadratic:=glunewquadric();

glucylinder(quadratic,0.25,0.25,1,32,32);

gltranslatef(1,0,1);

glrotatef(-90,1,0,0);

glucylinder(quadratic,0.25,0.25,1,32,32);

Pada contoh diatas, diketahui bahwa posisi awal

tabung sejajar dengan sumbu z. Namun, setelah

dirotasi sebesar - putar x, posisi

tabung sejajar dengan sumbu y. Itu menunjukkan

bahwa perotasian objek dengan sudut putar positif

akan berputar berlawanan dengan arah jarum jam,

begitu pula sebaliknya, jika sudut putar bernilai

negatif, maka objek akan berputar searah dengan

jarum jam.

c. Skalasi

Transformasi skala adalah perubahan ukuran

suatu objek (Sutopo, 2002). Sintaks untuk untuk

Page 183: Buku grafkom

Page 176

melakukan proses penskalaan dalam OpenGL adalah

glScalef(x,y,z:glFloat)

Parameter pertama, kedua, dan ketiga masing-

masing menunjukkan nilai skala dari ukuran objek.

Apabila parameter tersebut bernilai 1, maka berarti

ukuran objek tersebut tetap. Contoh penskalaan

ditunjukkan oleh gambar di bawah ini

Gambar 8. 11 segitiga sebelum dan sesudah diskalasi

Kode program : gltranslatef(-1.5,0,0);

glBegin(GL_TRIANGLES);

glColor3f(1,0,0);glVertex3f(-1,0,0);

glColor3f(0,1,0);glVertex3f(0,1,0);

glColor3f(0,0,1);glVertex3f(1,0,0);

glEnd;

gltranslatef(2.5,0,0);

glscalef(1.5,0.5,1);

glBegin(GL_TRIANGLES);

glColor3f(1,0,0);glVertex3f(-1,0,0);

glColor3f(0,1,0);glVertex3f(0,1,0);

glColor3f(0,0,1);glVertex3f(1,0,0);

glEnd;

glFlush();

Page 184: Buku grafkom

Page 177

G. Contoh Program dalam Open GL

1. Contoh Penerapan “Cube” pada GLUT

Cube menggunakan fungsi void

glutWireCube(GLdouble size); untuk menentukan

ukuran panjang sisi.

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut=0,sx=0,sy=0,sz=0;

void cube(){

glColor3d(0,0,1);

glutWireCube(10); fungsi disamping adalah

bentuk pendeklarasian fungsi “Cube”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,-40);

glRotatef(sudut,sx,sy,sz);

cube();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

Page 185: Buku grafkom

Page 178

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='x'){

sx=1;

sy=0;

sz=0;

sudut+=10;

}

else if(key=='y'){

sx=0;

sy=1;

sz=0;

sudut+=10;

}

else if(key=='z'){

sx=0;

sy=0;

sz=1;

}

}

Page 186: Buku grafkom

Page 179

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

- Dengan interaksi keyboard “x”, maka objek

akan bergerak pada sumbu x saja.

Page 187: Buku grafkom

Page 180

- Dengan interaksi keyboard “y”, maka objek

akan bergerak pada sumbu y saja.

2. Contoh Penerapan “WireSphere” pada GLUT

WireSphere menggunakan fungsi void

glutWireSphere(GLdouble radius,GLint

slices, GLint stacks); untuk membuat bola

berpusat pada asal pemodelan sistem koordinat.

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut=0,sx=0,sy=0,sz=0,z=-320;

void sphere (){

glColor3d(1,1,1);

glutWireSphere(100,150,150); fungsi

Page 188: Buku grafkom

Page 181

disamping adalah bentuk pendeklarasian fungsi “Sphere”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,z);

glRotatef(sudut,sx,sy,sz);

sphere();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='y'){

Page 189: Buku grafkom

Page 182

sy=1;

sudut+=10;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

Page 190: Buku grafkom

Page 183

- Dengan interaksi keyoboard “y”, objek akan

bergerak pada sumbu y saja.

Page 191: Buku grafkom

Page 184

3. Contoh Penerapan “WireCone” pada GLUT

a. WireCone menggunakan fungsi void

glutWireCone(GLdouble base, GLdouble height,GLint

slices, GLint stacks); untuk membuat ukuran benda

ditentukan dari dasar jari-jari alasnya.

Contoh syntax:

#include<stdlib.h>

#include<glut.h>

float w=480,h=480;

Page 192: Buku grafkom

Page 185

float sudut=0,sx=0,sy=0,sz=0,zz=-70;

int t=20;

void WireCone(){

glColor3d(0,1,1);

glutWireCone(10,t,50,50); fungsi disamping

adalah bentuk pendeklarasian fungsi “Cone”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,zz);

glRotatef(sudut,sx,sy,sz);

WireCone();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

Page 193: Buku grafkom

Page 186

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='x'){

sx=1;

sy=0;

sz=0;

sudut+=10;

}

else if(key=='y'){

sx=0;

sy=1;

sz=0;

sudut+=10;

}

else if(key=='z'){

sx=0;

sy=0;

sz=1;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

Page 194: Buku grafkom

Page 187

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

- Dengan interaksi keyoboard “x”, objek akan

bergerak pada sumbu x saja.

- Dengan interaksi keyboard “y”, objek akan

bergerak pada sumbu y saja.

Page 195: Buku grafkom

Page 188

- Dengan interaksi keyboard “z”, objek akan

bergerak pada sumbu z saja.

4. Contoh Penerapan “Torus” pada GLUT

Torus menggunakan fungsi void

glutWireTorus(GLdouble innerRadius, GLdouble

outerRadius,GLint nsides, GLint rings); untuk

merender 12 sisi yang berpusat pada asal,dan dengan

radius sama dengan kuadrat dari 3.

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float

sudut=0,sx=0,sy=0,sz=0,dalam=20,luar=50,sides=50,ri

ngs=50;

Page 196: Buku grafkom

Page 189

void torus(){

glColor3d(0,1,1);

glutWireTorus(dalam,luar,sides,rings);

fungsi disamping adalah bentuk pendeklarasian fungsi “Torus”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,-200);

glRotatef(sudut,sx,sy,sz);

torus();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

Page 197: Buku grafkom

Page 190

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='x'){

sx=1;

sy=0;

sz=0;

sudut+=10;

}

else if(key=='y'){

sx=0;

sy=1;

sz=0;

sudut+=10;

}

else if(key=='z'){

sx=0;

sy=0;

sz=1;

sudut+=10;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

Page 198: Buku grafkom

Page 191

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

- Dengan interaksi keyoboard “x”, objek akan

bergerak pada sumbu x saja.

- Dengan interaksi keyboard “y”, objek akan

bergerak pada sumbu y saja.

Page 199: Buku grafkom

Page 192

- Dengan interaksi keyboard “z”, objek akan

bergerak pada sumbu z saja.

5. Contoh Penerapan “Dose” pada GLUT

Dode menggunakan fungsi void

glutWireDodecahedron(void); untuk merenders

padat atau wireframe 12-sisi biasa padat. Berpusat di

sekitar asal dan dengan radius sama dengan akar

kuadrat dari 3

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut=0,sx=0,sy=0,sz=0,t=-7;

Page 200: Buku grafkom

Page 193

void wireDode(){

glColor3d(0,1,0);

glutWireDodecahedron(); fungsi disamping

adalah bentuk pendeklarasian fungsi “Dode”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,t);

glRotatef(sudut,sx,sy,sz);

wireDode();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

glMatrixMode(GL_MODELVIEW);

}

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

Page 201: Buku grafkom

Page 194

if(key=='x'){

sx=1;

sy=0;

sz=0;

sudut+=10;

}

else if(key=='y'){

sx=0;

sy=1;

sz=0;

sudut+=10;

}

else if(key=='z'){

sx=0;

sy=0;

sz=1;

sudut+=10;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

Page 202: Buku grafkom

Page 195

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

- Dengan interaksi keyoboard “x”, objek akan

bergerak pada sumbu x saja.

- Dengan interaksi keyboard “y”, objek akan

bergerak pada sumbu y saja.

Page 203: Buku grafkom

Page 196

- Dengan interaksi keyboard “z”, objek akan

bergerak pada sumbu z saja.

6. Contoh Penerapan “TetraHedron” pada GLUT

TetraHedron menggunakan fungsi

glutWiredTetrahedronvoid (void); untuk

merenders padat atau wireframe 4-sisi biasa

padat. Berpusat di sekitar asal dan dengan radius

sama dengan akar kuadrat dari 3.

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut=0,sx=0,sy=0,sz=0,t=-5;

void WireTetrahedron(){

glColor3d(1,0,1);

glutWireTetrahedron(); fungsi disamping

adalah bentuk pendeklarasian fungsi “TetraHedron”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,t);

Page 204: Buku grafkom

Page 197

glRotatef(sudut,sx,sy,sz);

WireTetrahedron();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='x'){

sx=1;

sy=0;

sz=0;

sudut+=10;

}

else if(key=='y'){

sx=0;

sy=1;

Page 205: Buku grafkom

Page 198

sz=0;

sudut+=10;

}

else if(key=='z'){

sx=0;

sy=0;

sz=1;

sudut+=10;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

Page 206: Buku grafkom

Page 199

- Tanpa interaksi keyboard

- Dengan interaksi keyoboard “x”, objek akan

bergerak pada sumbu x saja.

- Dengan interaksi keyboard “y”, objek akan

bergerak pada sumbu y saja.

- Dengan interaksi keyboard “z”, objek akan

bergerak pada sumbu z saja.

Page 207: Buku grafkom

Page 200

7. Contoh Penerapan “OctaHedron” pada GLUT

OctaHedron menggunakan fungsi void

glutWireOctahedron(void); merenders padat

atau wireframe 8-sisi biasa padat. Berpusat di sekitar

asal dan dengan radius sebesar 1.0.

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut=0,sx=0,sy=0,sz=0,t=-5;

void WireOctahedron(){

glColor3d(1,0,1);

glutWireOctahedron(); fungsi disamping

adalah bentuk pendeklarasian fungsi “OctaHedron”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,t);

glRotatef(sudut,sx,sy,sz);

WireOctahedron();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

Page 208: Buku grafkom

Page 201

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='x'){

sx=1;

sy=0;

sz=0;

sudut+=10;

}

else if(key=='y'){

sx=0;

sy=1;

sz=0;

sudut+=10;

}

else if(key=='z'){

sx=0;

sy=0;

sz=1;

sudut+=10;

}

}

void update(int value){

Page 209: Buku grafkom

Page 202

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

- Dengan interaksi keyoboard “x”, objek akan

bergerak pada sumbu x saja.

Page 210: Buku grafkom

Page 203

- Dengan interaksi keyboard “y”, objek akan

bergerak pada sumbu y saja.

- Dengan interaksi keyboard “z”, objek akan

bergerak pada sumbu z saja.

8. Contoh Penerapan “Teapot” pada GLUT

Page 211: Buku grafkom

Page 204

Teapot menggunakan fungsi void

glutWireTeapot(GLdouble size); Untuk

merender dengan membuat membuat poci teh

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut=0,sx=0,sy=0,sz=0,t=-100, tepot=10;

void teapot(){

glColor3d(1,1,1);

glutWireTeapot(tepot); fungsi disamping

adalah bentuk pendeklarasian fungsi “Teapot”

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,t);

glRotatef(sudut,sx,sy,sz);

teapot();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

Page 212: Buku grafkom

Page 205

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,

1.,300.);

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='x'){

sx=1;

sy=0;

sz=0;

sudut+=10;

}

else if(key=='y'){

sx=0;

sy=1;

sz=0;

sudut+=10;

}

else if(key=='z'){

sx=0;

sy=0;

sz=1;

sudut+=10;

}

}

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

Page 213: Buku grafkom

Page 206

switch(key){

case GLUT_KEY_UP:

tepot+=1;

break;

case GLUT_KEY_DOWN:

tepot-=1;

break;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Objek 3D");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

Page 214: Buku grafkom

Page 207

- Dengan interaksi keyoboard “x”, objek akan

bergerak pada sumbu x saja.

- Dengan interaksi keyboard “y”, objek akan

bergerak pada sumbu y saja.

- Dengan interaksi keyboard “z”, objek akan

bergerak pada sumbu z saja.

Page 215: Buku grafkom

Page 208

H. Contoh Implementasi Objek 3 Dimensi dalam

Open GL

Penerapan/implementasi obyek 3 dimensi OpenGL,

adalah dengan mengkombinasikan beberapa obyek

dasar dari obyek 3D, seperti Wirecube, Wiresphere, dll.

Berikut merupakan contoh pengimplementasian dari

obyek 3 dimensi OpenGL:

Membuat boneka salju.

Contoh syntax: #include<stdlib.h>

#include<glut.h>

float w=480,h=480;

float sudut=0,rx=0,ry=0,rz=0,p=-50;

void satu(){ //bagian kepala

glColor3d(1,1,1);

glutSolidSphere(7,200,200); //berfungsi untuk

membuat bentuk bola

}

void dua(){ //bagian badan

glColor3d(1,1,1);

glutSolidSphere(9,250,250); //berfungsi untuk

membuat bentuk bola bagian badan

}

void tiga(){ //topi segitiga

glColor3d(1,1,0);

glRotatef(-90,1,0,0); //ditotasikan dari bentuk

topi pada umumnya menjadi bentuk segi3

glutSolidCone(5,10,150,150); //berfungsi untuk

membuat bentuk segitiga

Page 216: Buku grafkom

Page 209

}

void empat(){ //mata

glColor3d(0,0,0);

glutSolidSphere(1.1,100,100);

}

void lima(){ //hidung

glColor3d(0,1,0);

glutSolidCone(1.1,5,50,50);

}

void manusiaSalju3D(){

satu();

glPushMatrix();

glTranslatef(0,-15,0);

dua();

glPopMatrix();

glPushMatrix();

glTranslatef(0,5,0);

tiga();

glPopMatrix();

glPushMatrix();

glTranslatef(-2,1,6);

empat();

glPopMatrix();

glPushMatrix();

glTranslatef(2,1,6);

empat();

glPopMatrix();

Page 217: Buku grafkom

Page 210

glPushMatrix();

glTranslatef(0,-0.5,6);

lima();

glPopMatrix();

}

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,p);

glRotatef(sudut,rx,ry,rz);

manusiaSalju3D();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float) h1,

1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdouble)h,1.,3

00.);

Page 218: Buku grafkom

Page 211

glMatrixMode(GL_MODELVIEW);

}

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

if(key=='x'){

rx=1;

ry=0;

rz=0;

sudut+=10;

}

else if(key=='y'){

rx=0;

ry=1;

rz=0;

sudut+=10;

}

else if(key=='z'){

rx=0;

ry=0;

rz=1;

sudut+=10;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |

GLUT_RGBA);

Page 219: Buku grafkom

Page 212

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Boneka Salju");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Hasil

- Tanpa interaksi keyboard

- Dengan interaksi keyoboard “x”, objek akan bergerak

pada sumbu x saja.

- Dengan interaksi keyboard “y”, objek akan bergerak

pada sumbu y saja.

Page 220: Buku grafkom

Page 213

- Dengan interaksi keyboard “z”, objek akan bergerak

pada sumbu z saja.

Page 221: Buku grafkom

Page 214

BAB 9

LIGHTING

A. Pendahuluan Visualisasi tentu saja tidak akan terjadi bila

tidak ada cahaya. Pencahayaan merupakan esensi dari

visualisasi dan merupakan topik yang sangat

kompleks. Hingga tahap ini lingkungan diberi

pencahayaan default atau standar dengan cahaya

lingkungan (ambient) yang sama pada setiap titik.

Kondisi default atau standar dapat dicapai kapan saja

dengan mematikan status Lighting menjadi disabled

dengan glDisable(GL_LIGHT0).

OpenGL akan melakukan komputasi warna

setiap pixel di display akhir, ditampilkan adegan itu

dilakukan di frame buffer. Bagian dari komputasi ini

tergantung pada pencahayaan yang digunakan dalam

adegan dan hal tersebut berkenaan dengan

bagaimana suatu benda dalam adegan yang

memantulkan atau menyerap cahaya. Sebagai contoh

saja misalnya sebuah lautan memiliki warna yang

berbeda pada cerah maupun pada saat hari mendung.

Adanya sinar matahari atau awan menentukan apakah

laut termelihat sebagai pirus terang atau abu-abu

keruh kehijauan. Pada kenyataannya, sebagian besar

objek bahkan yang tidak terlihat tiga dimensi sampai

mereka diterangi cahaya. Pada gambar 2

menunjukkan dua versi dari adegan yang persis sama

Page 222: Buku grafkom

Page 215

yaitu sebuah bola, dimana satu dengan pencahayaan dan

satu tanpa pencahayaan.

Gambar 1.1 Sebuah spere dengan diterangi cahaya dan

tidak diterangi

Seperti ditunjukkan pada Gambar 1.1, wilayah

gelap tampak tidak berbeda dari bulatan dua dimensi .

hal Ini menunjukkan betapa pentingnya interaksi antara

obyek dan cahaya adalah dalam menciptakan adegan tiga

dimensi. Agar obyek yang telah dibuat terlihat lebih

nyata, diperlukan tambahan efek pencahayaan pada

obyek yang telah kita buat. Pencahayaan adalah

proses pemberian cahaya pada suatu obyek, dikenal

dengan istilah lighting atau iluminasi. Pada OpenGL

terdapat sebuah perbedaan penting antara warna dan

pencahayaan yang perlu pahami. Ketika menggunakan

pencahayaan atau tekstur pemetaan dengan efek

pencahayaan dihidupkan, warna dari vertex adalah efek

kumulatif dari warna bahan dan cahaya yang bersinar di

puncak. Ketika pencahayaan dimatikan, maka warna dari

vertex adalah efek pengaturan warna dan warna yang

berbeda dengan bahan warna.

Page 223: Buku grafkom

Page 216

Gambar 1.2 Contoh ambient, diffuse, dan specular pada

pantulan cahaya

Dengan menggunakan OpenGL, dapat

memanipulasi pencahayaan dan obyek dalam sebuah

adegan untuk menciptakan berbagai macam efek.

Dalam pokok bahasan pada bab pencahayaan akan

dimulai dengan sebuah pencahayaan yang penting

pada permukaan tersembunyi penghapusan. Kemudian

menjelaskan bagaimana untuk mengontrol pencahayaan

dalam suatu adegan, membahas model konseptual

OpenGL pencahayaan, dan menggambarkan secara rinci

cara mengatur pencahayaan dengan banyak parameter

untuk mendapatkan efek tertentu. Pada akhir bab,

perhitungan matematis yang menentukan bagaimana

warna mempengaruhi pencahayaan disajikan

B. Pencahayaan pada OpenGL dan Dunia Nyata Ketika melihat permukaan fisik, persepsi warna

pada mata tergantung pada distribusi energi foton yang

datang dan memicu sel-sel kerucut mata. Foton

berasal dari sumber cahaya atau kombinasi dari

sumber, yang sebagian diserap dan sebagian yang

Page 224: Buku grafkom

Page 217

dipantulkan oleh permukaan. Selain itu, permukaan

yang berbeda memiliki sifat yang sangat berbeda ada,

misalnya yang mengkilap dengan sempurna akan

memantulkan cahaya dalam arah tertentu, sementara

yang lain menyebarkan cahaya sama-sama masuk di

segala penjuru. Pencahayaan pada OpenGL hanya dengan

cahaya pendekatan dan cahaya lampu seolah-olah dapat

dipecah menjadi komponen merah, hijau, dan biru.

Dengan demikian, warna sumber cahaya dicirikan oleh

jumlah warna yang memancarkan cahaya merah, hijau,

dan biru, dan materi permukaan ditandai dengan

persentase komponen warna merah, hijau, dan biru yang

masuk dan tercermin dalam berbagai arah. Persamaan

pencahayaan pada OpenGL hanya sebuah pendekatan,

tetapi satu yang bekerja cukup baik dan dapat dihitung

relatif cepat. Jika menginginkan yang lebih akurat atau

model pencahayaan hanya berbeda, harus melakukan

perhitungan sendiri dalam perangkat lunak. Dengan

perangkat lunak tersebut dapat menjadi sangat kompleks,

seperti beberapa jam membaca buku teks optik pun harus

meyakinkan.

Model pencahayaan dalam OpenGL, cahaya

dalam sebuah adegan berasal dari beberapa sumber

cahaya yang dapat secara individual diaktifkan dan

dinonaktifkan. Beberapa cahaya datang dari arah atau

posisi tertentu, dan beberapa cahaya umumnya

tersebar karena adanya suatu peristiwa. Sebagai

contoh, ketika menghidupkan bola lampu dalam

ruangan, sebagian besar berasal dari cahaya bola

lampu, tetapi beberapa cahaya datang setelah ada

pantulan dari dinding satu, dua, tiga, atau lebih. Cahaya

Page 225: Buku grafkom

Page 218

yang memantul ini disebut ambient dan dapat

diasumsikan begitu cahaya tersebar tidak ada cara

untuk mengetahui arah semula, tetapi hal ini akan

menghilang jika suatu sumber cahaya dimatikan.

Akhirnya, mungkin ada cahaya ambient umum dalam

adegan yang tidak berasal dari sumber tertentu, 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 dapat

memancarkan cahaya sendiri seperti lampu pada

sebuah mobil atau mungkin menyebarkan beberapa

cahaya yang masuk ke segala penjuru, dan mungkin

juga memantulkan sebagian dari cahaya masuk dalam

arah preferensial seperti cermin atau permukaan

mengilap. Model pencahayaan yang OpenGL

mempertimbangkan pencahayaan yang dibagi menjadi

empat komponen independen: memancarkan (emissi),

ambient, diffuse, dan specular. Semua empat komponen

dihitung secara independen dan kemudian ditambahkan

secara bersama-sama.

Dalam pencahayaan, ada dua hal yang menentukan

tampilan suatu obyek, yaitu:

1. Sumber cahaya dan pengaruh lingkungan terhadap

cahaya

Lokasi sumber cahaya

Page 226: Buku grafkom

Page 219

Arah pencahayaan dari sumber cahaya (omni,

spot)

Komponen pengaruh lingkungan terhadap

cahaya (ambient, diffuse, specular)

2. Material dari obyek, yang memodelkan bagaimana

material bereaksi terhadap sumber cahaya, yaitu:

Material reflektan terhadap komponen cahaya

ambient

Material reflektan terhadap komponen cahaya

diffuse

Material reflektan terhadap komponen cahaya

specular

Material sebagai sumber cahaya (emitance)

C. Cahaya Ambient, Diffuse, dan Specular Pencahayaan ambient adalah cahaya yang sudah

berserakan begitu banyak disebabkan oleh lingkungan

dan arahnya tidak mungkin ditentukan atau tampaknya

datang dari segala penjuru. Backlighting pada sebuah

ruangan memiliki komponen ambient besar, karena

sebagian besar cahaya yang mencapai mata yang

memantul dari banyak permukaan. Sebuah lampu sorot

kecil di luar rumah memiliki komponen ambient,

sebagian besar cahaya dalam arah yang sama, dan karena

diluar, sangat sedikit cahaya mencapai mata setelah

memantul dari benda-benda lain. Ketika cahaya ambient

Page 227: Buku grafkom

Page 220

menyerang permukaan, maka akan tersebar merata di

segala penjuru.

Komponen cahaya diffuse adalah komponen

yang berasal dari satu arah, jadi akan terang kalau hal

tersebut terjadi tepat diatas sebuah permukaan

dibandingkan jika hampir tidak terjadi di atas

permukaan. Setelah mengenai permukaan, akan

tersebar merata di segala penjuru, sehingga tampak

sama-sama terang, tak peduli di mana mata berada.

Setiap cahaya yang datang dari posisi atau arah

tertentu mungkin memiliki komponen diffuse.

Gambar 1.3 Cahaya Diffuse

Cahaya specular datang dari arah tertentu, dan

cenderung terpental pada permukaan dalam arah yang

diinginkan. sinar laser berkualitas tinggi memantul

pada cermin dan menghasilkan hampir 100 persen

refleksi specular. Logam atau plastik mengkilap memiliki

komponen specular tinggi, dan kapur atau karpet telah

hampir tidak ada. Specularity dapat juga dianggap sebagai

shininess.

Page 228: Buku grafkom

Page 221

Gambar 1.4 Cahaya Specular

Meskipun sumber cahaya memberikan satu

distribusi frekuensi, komponen ambient, diffuse, dan

specular mungkin berbeda. Sebagai contoh, jika

memiliki cahaya putih di sebuah ruangan dengan dinding

merah, cahaya yang tersebar cenderung menjadi warna

merah, meskipun cahaya secara langsung objek putih

yang mencolok. OpenGL memungkinkan untuk

mengatur nilai merah, hijau, dan biru untuk setiap

komponen cahaya secara bebas.

Gambaran pada lighting :

Page 229: Buku grafkom

Page 222

Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat

juga pencahayaan Emmisive, yaitu sebuah objek

memancarkan cahayanya sendiri.

Contoh pada program :

init lighting();

void init lighting()

{

GLfloat lightPos [] = {100.0, 100.0, 200.0,

1.0}; //variabel posisi

GLfloat shin[] = {100.0};

GLShade Model (GL_SMOOTH) ;

GLlightfv(GL_LIGHT0, GL_POSITION, lightpos);

// mengkonfigurasi sumber cahaya

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

Untuk diffuse dan ambient dipergunakan atau diperuntukkan

pada light sedangkan spekular dan emmisive diperuntukan

pada material.

Contoh sintaks :

GLfloat light_diffuse[]= {…};

GLfloat light_specular[]={…}; //mengatur

cahaya kilau pada objek

GLfloat shine[] = {100.0}; // mengatur

definisi kekilauan

GLfloat lightspec[] = {…};

Berikut adalah sintaks fungsi init pada light :

Page 230: Buku grafkom

Page 223

Fungsi di atas adalah fungsi inisialisasi untuk pencahayaan

dimana efek pencahayaan bersifat menyeluruh dan

menyebabkan semua obyek memiliki warna serupa. Agar

warna tiap obyek 3d berbeda dengan efek pencahayaan

yang aktif maka fungsi dasarnya pada inisialisasi adalah :

Fungsi di atas dapat diaktifkan setelah

glEnable(GL_COLOR_MATERIAL). Parameter face adalah

variabel untuk menentukan bagaimana material warna

obyek 3D ditampilkan, pilihannya antara lain GL_FRONT

atau GL_BACK. Sedangkan parameter mode adalah variabel

untuk memilih material warna jenis apa yang diaktifkan

pilihannya antara terdapat di halaman selanjutnya:

Page 231: Buku grafkom

Page 224

D. Implementasi Pencahayaan (lighting) pada

OpenGL

Object 3D (Solid)

Bentuk Solid

Fungsi Solid merupakan implementasi dari object 3D

yang berpusat pada asal pemodelan sistem koordinat. Utara

dan kutub selatan bola berada di Z positif dan negatif sumbu-

masing-masing dan meridian utama persimpangan sumbu X

positif.

Berikut adalah list untuk bangun 3D:

Page 232: Buku grafkom

Page 225

a. Kubus Solid

void glutSolidCube(GLdouble size);

b. Fungsi glutSolidSphere membuat bola berpusat pada

asal pemodelan sistem koordinat. Utara dan kutub

selatan bola berada di Z positif dan negatif sumbu-

masing-masing dan meridian utama persimpangan

sumbu X positif.

void glutSolidSphere(GLdouble

radius,GLint slices, GLint stacks);

c. Kerucut Solid.

void glutSolidCone(GLdouble base,

GLdouble height,GLint slices, GLint

stacks);

d. Torus Solid.

void glutSolidTorus(GLdouble innerRadius,

GLdouble outerRadius, GLint nsides, GLint

rings);

e. Dodecahedron Solid

void glutSolidDodecahedron(void);

f. Tetra Hedron solid.

glutSolidTetrahedron void (void);

g. Oktahedron solid.

void glutSolidOctahedron(void);

h. Icosahedron solid.

void glutSolidIcosahedron(void);

i. Poci teh solid

Page 233: Buku grafkom

Page 226

void glutSolidTeapot(GLdouble size);

E. Contoh Program

Contoh program Level medium

Membuat kubus sederhana dengan pencahayaan

Script

#include <Windows.h>

#include <iostream>

#include <glut.h>

#include <math.h>

void cube()

{

//menggambar kubus dan transformasi

tarnslasi ke titik 0.5 0.5 0.5 dan skala 1

1 1

glPushMatrix();

glTranslated(0.5,0.5,0.5);//cube

glScaled(1.0,1.0,1.0);

glutSolidCube(1.0);

glPopMatrix();

}

void setMaterial()

Page 234: Buku grafkom

Page 227

{

//set properties of surfaces material

GLfloat mat_ambient[] =

{0.7f,0.7f,0.7f,1.0f}; // ada 4 jenis

material yang dipakai, dengan kombinasi

warna tertentu

GLfloat mat_diffuse[] =

{0.6f,0.6f,0.6f,1.0f};

GLfloat mat_specular[] =

{1.0f,1.0f,1.0f,1.0f};

GLfloat mat_shininess[] = {50.0f};

glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambien

t);

glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffus

e);

glMaterialfv(GL_FRONT,GL_SPECULAR,mat_specu

lar);

glMaterialfv(GL_FRONT,GL_SHININESS,mat_shin

iness);

}

void setLighting()

{

//set light sources

GLfloat lightIntensity[] =

{0.7f,0.7f,0.7f,1.0f};//mensetting

pencahayaan

Page 235: Buku grafkom

Page 228

GLfloat light_position[] =

{2.0f,6.0f,3.0f,0.0f};

glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntensi

ty);

glLightfv(GL_LIGHT0,GL_POSITION,light_posit

ion);

}

void setViewport()

{

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

double winHt = 1.0;//half height of the

window

glOrtho(-winHt*64/48,winHt*64/48,-

winHt,winHt,0.1,100.0);

}

void setCamera()

{

//set the camera

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

gluLookAt(3.3,3.3,3.0,0,0.25,0,0.0,1.0,0.0)

;

}

Page 236: Buku grafkom

Page 229

void displayObject()

{

setMaterial();

setLighting();

setViewport();

setCamera();

//startDrawing

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER

_BIT);

cube();//memanggil fungsi menggambar kubus

glFlush();//mengirim smua objek untuk

dirender

}

void main(int argc, char **argv)

{

glutInit(&argc,argv);

glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB|GL

UT_DEPTH);

glutInitWindowSize(640,480);

glutInitWindowPosition(100,100);

glutCreateWindow("simple 3d scene");

Page 237: Buku grafkom

Page 230

glutDisplayFunc(displayObject);//fungsi

dari display object yang menggabungkan

kubus lighting material dan kamera

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

glShadeModel(GL_SMOOTH);

glEnable(GL_DEPTH_TEST);

glEnable(GL_NORMALIZE);

glClearColor(1.0f,1.0f,1.0f,0.0f);

glViewport(0,0,640,480);

glutMainLoop();

}

Output

Page 238: Buku grafkom

Page 231

Contoh program Level Hard

Membuat rumah sederhana dengan

pencahayaan

#include<stdlib.h>

#include<glut.h>

float w=700, h=600;

float tr=-50;

float xl=-10, yl=10;

int sudut=0, xx=0, yy=0, zz=0;

void pagar(){

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

glPushMatrix();

glTranslatef(1.5, -2.4, 9);

glScalef(0.2, 1.1, 0.2);

glutSolidCube(3);

glPopMatrix();

glPushMatrix();

Page 239: Buku grafkom

Page 232

glTranslatef(3.5, -2.4, 9);

glScalef(0.2, 1.1, 0.2);

glutSolidCube(3);

glPopMatrix();

glPushMatrix();

glTranslatef(5.5, -2.4, 9);

glScalef(0.2, 1.1, 0.2);

glutSolidCube(3);

glPopMatrix();

glPushMatrix();

glTranslatef(7.5, -2.4, 9);

glScalef(0.2, 1.1, 0.2);

glutSolidCube(3);

glPopMatrix();

}

void motionku(int xmouse, int ymouse){

xl = (xmouse-(w/2))/30;

yl = ((h/2)-ymouse)/30;

}

void renderScene(void){

Page 240: Buku grafkom

Page 233

GLfloat LightPosition[] = {xl, yl,

30.0f, 1.0f};

glLightfv(GL_LIGHT0, GL_POSITION,

LightPosition);

glClear(GL_COLOR_BUFFER_BIT|GL_DEP

TH_BUFFER_BIT);

glLoadIdentity();

glEnable(GL_COLOR_MATERIAL);

glTranslatef(0, 0, tr);

glRotatef(sudut, xx, yy,

zz);

glPushMatrix(); //tembok

rumah

glColor3f(1, 0, 1);

glScalef(1.5,1,1);

glutSolidCube(9);

glPopMatrix();

glPushMatrix(); //genteng

dengan 8 sudut yang nanti akan ditutup

oleh dinding

glScalef(10,6,8);

glTranslatef(0, 0.7,-

0.05);

Page 241: Buku grafkom

Page 234

glColor3f(0, 0, 1);

glRotatef(45, 0, 1,

0);

glutSolidOctahedron();

glPopMatrix();

glPushMatrix();

glColor3f(1, 1, 1);

glTranslatef(-3, -0.8,

0.5);

glScalef(0.5, 0.8,1);

glutSolidCube(9);

glPopMatrix();

glPushMatrix(); //pintu

glColor3f(1, 1, 1);

glTranslatef(2, 1.3,

0.5);

glScalef(0.5, 0.3,1);

glutSolidCube(10);

glPopMatrix();

Page 242: Buku grafkom

Page 235

glPushMatrix(); //pagar

kanan

pagar();

glTranslatef(-9.0, 0.0,

0.0);

pagar();

glTranslatef(9.0, 0.0,

0.0);//pagar depan

glRotatef(-90, 0, 1, 0);

pagar();

glTranslatef(-8.0, 0.0,

0.0);

pagar();

glTranslatef(9.0, 0.0, 0.0);

//pagar kiri

glRotatef(-90, 0, 1, 0);

pagar();

glTranslatef(-9.0, 0.0,

0.0);

pagar();

glTranslatef(9.0, 0.0, 0.0);

//pagar belakang

glRotatef(-90, 0, 1, 0);

Page 243: Buku grafkom

Page 236

pagar();

glTranslatef(-8.0, 0.0,

0.0);

pagar();

glPopMatrix();

glDisable(GL_COLOR_MATERIAL);

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0, w1, h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float)

w1/(float) h1, 1.0, 300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

GLfloat LightPosition[]={10.0f, 0.0f,

0.0f, 0.0f};

GLfloat LightAmbient[]={25.0f,

0.0f, 0.0f, 1.0f};

Page 244: Buku grafkom

Page 237

GLfloat LightDiffuse[]={0.0f,

0.0f, -30.0f, 1.0f};

GLfloat LightSpecular[]={0.0f,

0.0f, 0.0f, 1.0f};

GLfloat Shine[]={80};

glShadeModel(GL_SMOOTH);

glClearColor(0.0f, 0.0f, 0.0f,

0.5f);

glClearDepth(1.0f);

glEnable(GL_DEPTH_TEST);

glHint(GL_PERSPECTIVE_CORRECTION_H

INT, GL_NICEST);

glMaterialfv(GL_FRONT, GL_AMBIENT,

LightAmbient);

glMaterialfv(GL_FRONT, GL_DIFFUSE,

LightDiffuse);

glMaterialfv(GL_FRONT,

GL_SPECULAR, LightSpecular);

glLightfv(GL_LIGHT0, GL_POSITION,

LightPosition);

Page 245: Buku grafkom

Page 238

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

return;

}

void myKeyboard(unsigned char key, int

x, int y){

if(key == 'a'){

sudut +=5;

xx=1;

yy=0;

zz=0;

} else if(key == 'b'){

sudut +=5;

xx=0;

yy=1;

zz=0;

} else if(key == 'c'){

sudut +=5;

xx=0;

yy=0;

zz=1;

Page 246: Buku grafkom

Page 239

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50, update, 0);

}

int main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Lighting");

glutReshapeFunc(resize);

glutDisplayFunc(renderScene);

init();

gluOrtho2D(-w/2, w/2, -h/2, h/2);

glutTimerFunc(50, update, 0);

glutMotionFunc(motionku);

Page 247: Buku grafkom

Page 240

glutKeyboardFunc(myKeyboard);

glutMainLoop();

}

Screenshoot output :

Contoh program Level Experd

Membuat danbo lighting sederhana dengan

pencahayaan

Silver Danbo

Syntax

#include<stdlib.h>

#include<glut.h>

Page 248: Buku grafkom

Page 241

float w=480, h=480;

float sudut=0, p=-50, t=0, u=0, v=0;

void drawCub(){

//badan-badan

glPushMatrix();

glColor3f(1,0,0);

glutSolidCube(4);

glPopMatrix();

glPushMatrix();

glColor3f(1,1,0);

glTranslatef(0,-4,0);

glutSolidCube(4);

glPopMatrix();

//akhir badan

//celana

glPushMatrix();

glColor3f(1,0,0);

glTranslatef(0,-6,0);

glutSolidCube(4.5);

Page 249: Buku grafkom

Page 242

glPopMatrix();

//akhir celana

//tangan kanan

glPushMatrix();

glRotatef(45,0,0,1);

glTranslatef(-2,0,0);

glPushMatrix();

glColor3f(0,0,1);

glTranslatef(4,-1,0);

//glRotatef(45,0,0,1);

glutSolidCube(3);

glPopMatrix();

glPushMatrix();

glColor3f(0,0,1);

glTranslatef(4,-4,0);

//glRotatef(45,0,0,1);

glutSolidCube(3);

glPopMatrix();

glPopMatrix();

Page 250: Buku grafkom

Page 243

//akhir tangan kanan

//tangan kiri

glPushMatrix();

glRotatef(-45,0,0,1);

glTranslatef(2,0,0);

glPushMatrix();

glColor3f(1,1,1);

glTranslatef(-4,-1,0);

//glRotatef(45,0,0,1);

glutSolidCube(3);

glPopMatrix();

glPushMatrix();

glColor3f(1,1,1);

glTranslatef(-4,-4,0);

//glRotatef(45,0,0,1);

glutSolidCube(3);

glPopMatrix();

glPopMatrix();

//akhir tangan kiri

Page 251: Buku grafkom

Page 244

//kaki-kaki kiri

glPushMatrix();

glColor3f(0.8,0.8,0);

glTranslatef(-1.2,-9,0);

glutSolidCube(2);

glPopMatrix();

glPushMatrix();

glColor3f(1,0.8,1);

glTranslatef(-1.2,-8,0);

glutSolidCube(2);

glPopMatrix();

//akhir kaki kiri

//kaki-kaki kiri

glPushMatrix();

glColor3f(0,0.8,0);

glTranslatef(1.2,-9,0);

glutSolidCube(2);

glPopMatrix();

Page 252: Buku grafkom

Page 245

glPushMatrix();

glColor3f(1,0.8,0);

glTranslatef(1.2,-8,0);

glutSolidCube(2);

glPopMatrix();

//akhir kaki kiri

//kepala

glPushMatrix();

glTranslatef(0,6,0);

glColor3f(1,0,1);

glutSolidCube(8);

glPopMatrix();

//akhir kepala

}

void setMaterial()

{

//set properties of surfaces material

GLfloat mat_ambient[] =

{1.7f,1.7f,1.7f,1.0f}; // ada 4 jenis

Page 253: Buku grafkom

Page 246

material yang dipakai, dengan kombinasi

warna tertentu

GLfloat mat_diffuse[] =

{0.6f,0.6f,0.6f,1.0f};

GLfloat mat_specular[] =

{1.0f,1.0f,1.0f,1.0f};

GLfloat mat_shininess[] = {50.0f};

glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambie

nt);

glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffu

se);

glMaterialfv(GL_FRONT,GL_SPECULAR,mat_spec

ular);

glMaterialfv(GL_FRONT,GL_SHININESS,mat_shi

niness);

}

void setLighting()

{

//set light sources

GLfloat lightIntensity[] =

{0.7f,0.7f,0.7f,1.0f};//mensetting

pencahayaan

GLfloat light_position[] =

{2.0f,6.0f,3.0f,0.0f};

glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntens

ity);

Page 254: Buku grafkom

Page 247

glLightfv(GL_LIGHT0,GL_POSITION,light_posi

tion);

}

void setViewport()

{

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

double winHt = 1.0;//half height of the

window

glOrtho(-winHt*64/48,winHt*64/48,-

winHt,winHt,0.1,100.0);

}

void displayObject()

{

setMaterial();

setLighting();

setViewport();

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFE

R_BIT);

drawCub();//memanggil fungsi menggambar

kubus

glFlush();//mengirim smua objek untuk

dirender

}

Page 255: Buku grafkom

Page 248

void display(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glLoadIdentity();

glTranslatef(0,0,p);

glRotatef(sudut,t,u,v);

//glColor3f(0,0,1);

drawCub();

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float) w1/(float)

h1, 1.0,300.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void init(){

glClearColor(0.0,0.0,0.0,1.0);

glEnable(GL_DEPTH_TEST);

Page 256: Buku grafkom

Page 249

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.,(GLdouble)w/(GLdoubl

e)h,1.,300.);

glMatrixMode(GL_MODELVIEW);

}

void myKeyboard(unsigned char key, int x,

int y){

if(key=='a'){

p +=5;

}

else if (key=='s'){

p-=5;

}

else if(key=='x'){

sudut+=10;

t=1;

u=0;

v=0;

}

else if (key=='y'){

sudut+=10;

Page 257: Buku grafkom

Page 250

t=0;

u=1;

v=0;

}

else if (key=='z'){

sudut+=10;

t=0;

u=0;

v=1;

}

}

void update(int value){

glutPostRedisplay();

glutTimerFunc(50,update,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_SINGLE|GLUT_RG

B|GLUT_DEPTH);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

Page 258: Buku grafkom

Page 251

glutInitWindowSize(w,h);

glutCreateWindow(" Lighting ");

glutDisplayFunc(display);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,update,0);

glutKeyboardFunc(myKeyboard);

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

glShadeModel(GL_SMOOTH);

glEnable(GL_DEPTH_TEST);

glEnable(GL_NORMALIZE);

glClearColor(1.0f,1.0f,1.0f,0.0f);

glViewport(0,0,640,480);

glutMainLoop();

}

Output

Page 259: Buku grafkom

Page 252

Page 260: Buku grafkom

Page 253

Page 261: Buku grafkom

Page 254

F. Evaluasi

1. Fungsi yang merupakan implementasi dari object

3D yang berpusat pada asal pemodelan sistem

koordinat adalah...

a. Fungsi Solid

b. Fungsi Hardness

c. Fungsi Roughness

d. Fungsi Torus

e. Fungsi Unbreakablle

2. Pencahayaan yang sifatnya menyinari seluruh

ruangan adalah jenis pencahayaan...

a. LED

b. Laser Beam

Page 262: Buku grafkom

Page 255

c. Ambient Lightning

d. Spot Light

e. Light Resistor

3. Dalam proses rendering, lightning dipengaruhi oleh

faktor-faktor sebagai berikut, kecuali...

a. Jarak objek dengan sumber cahaya

b. Posisi Objek

c. bentuk permukaan objek

d. Letak Objek dan jarak objek dengan sumber cahaya

e. Besar objek

4. Sebelum menggunakan fungsi material atau

pencahayaan, harus melakukan pemanggilan fungsi,

yakni...

a. glMaterialState(ON)

b. glFunction3Dmode(ON)

c. gl3Dstate(ON)

d. glEnable(GL_COLOR_MATERIAL)

e. glEnable(CL_COLOR_TURN_ON)

5. Yang bukan merupakan nama parameter dari

fungsi 3D adalah...

a. GL_AMBIENT

Page 263: Buku grafkom

Page 256

b. GL_COLORIZE

c. GL_SPOT

d. GL_DIFUSE

e. GL_EMISSION

6. Fungsi yang digunakan untuk membuat kerucut

solid adalah...

a. glutSolidCone()

b. glutSolidCone()

c. glutSolidTorus()

d. glutTriangle()

e. glutSolidOctahedral()

7. Fungsi yang digunakan untuk membuat bola solid

adalah...

a. glutSolidCone()

b. glutSolidCone()

c. glutSolidTorus()

d. glutSolidSphere()

e. glutSolidOctahedral()

8. Manakah yang merupakan hasil dari pencahayaan

menggunakan ambient...

Page 264: Buku grafkom

Page 257

a.

b.

c.

Page 265: Buku grafkom

Page 258

d.

e.

9. Untuk menghasilkan objek seperti gambar di bawah

menggunakan fungsi...

Page 266: Buku grafkom

Page 259

a. GL_COLOR_INDEXE

b. GL_AMBIENT

c. GL_DIFUSSE

d. GL_SPECULAR

e. GL_WHITE

10. Pada fungsi glut kita dapat menciptakan objek berupa

teko teh dengan menggunakan...

a. glutTeaPot()

b. GlutSolidTeaPot()

c. GLUT_SOLID_TEA_POT()

d. glutSolidPot()

e. glutSolidTeaPot()

Page 267: Buku grafkom

Page 260

BAB 10

TEXTURE

A. Pendahuluan

Objek 3D pada open GL merupakan objek yang lebih

hidup dibandingkan objek 2D. Namun permukaan objek 3D

yang polos membuat 3D cenderung kurang menarik dan kaku.

Untuk membuat objek yang lebih hidup pada OpenGL

diperlukan suatu texture mapping. Mapping ialah sebuah

bentuk kegiatan untuk melakukan pewarnaan atau

memetakan permukaan geometri pada objek 3D. Sedangkan

Maps adalah bentuk gambar atau warna yang digunakan

untuk melapisi objek 3D pada saat dilakukan mapping.

Dengan kata lain pemetaan texture merupakan pemberian

sebuah gambar pada permukaan objek sehingga objek akan

tampak realistis. Texture mapping memungkinkan untuk

menaruh gambar pada geometric primitive tersebut dan

sekaligus mengikuti transformasi yang diterapkan kepada

objek. Contohnya apabila sebuah objek kubus tanpa gambar

diberi texture bebatuan pada permukaannya, maka objek

tersebut akan tampak memiliki tekstur kasar seperti batu.

Texture pada permukaan objek dapat dilihat dari berbagai

Page 268: Buku grafkom

Page 261

perspective yang berbeda. Beberapa contoh texture pada

objek sebagai berikut:

Texture 1 dimensi

Texture 2 dimensi

Texture 3 dimensi

Filter pembesaran texture berpengaruh pada

bagaimana OpenGL melakukan proses rasterisasi texture saat

texture ditampilkan pada jumlah pixel yang lebih besar atau

lebih kecil dari ukuran sebenarnya. Pada Nearest Filtered

Page 269: Buku grafkom

Page 262

Texture, texture yang ditampilkan merupakan hasil pemilihan

nilai pixel pada posisi terdekat. Sedangkan dengan Linear

Interpolation Texture (LPT), texture yang ditampilkan

merupakan hasil interpolasi linear antara pixel-pixel

disekitarnya. Pada Mipmapped Texture(MPT), interpolasi

linear dilakukan pada awal secara offline sehingga dihasilkan

banyak texture dengan ukuran dari yang kecil hingga yang

besar.LPT dan MPT akan menghasilkan kira-kira hasil yang

sama dengan LPT akan sedikit lebih lambat dari MPT

walaupun memori yang digunakan jauh lebih kecil.

Namun terkadang efek texture yang diinginkan dapat

diperoleh dengan mencampur lebih dari satu texture. Proses

pencampuran lebih dari satu texture disebut dengan istilah

blending. Salah satu efek blending yang paling sederhana

adalah dengan memblending texture dengan warna. Fungsi

yang digunakan pada proses blending adalah

glEnable(GL_BLEND).

Implementasi texture pada objek grafika computer terdapat

pada, animasi seperti toy story maupun game animasi.

B. Konsep Texture Mapping

Texture mapping merupakan teknik pemetaan sebuah

tekstur pada pola gambar wireframe, dimana wireframe yang

telah dibuat akan ditampilkan memiliki kulit luar seperti

Page 270: Buku grafkom

Page 263

tekstur yang diinginkan. Beberapa hal yang perlu diperhatikan

dalam pemberian tekstur, diantaranya:

Menentukan tekstur

1. Membaca atau membangkitkan tekstur

2. Menandai tekstur

3. Mengenablekan tekstur

Menandai koordinat tekstur pada vertek

Menentukan parameter tekstur

C. Teknik-teknik Realisme dalam Kompuer Grafik

1. . Tekstur-Maps

Maps berwujud gambar tekstur 2D yang dituangkan ke

permukaan geometri/objek untuk membuat penampilan

objek tersebut tampak halus untuk detail permukaannya.

Pada pengembangan grafik realisme tingkat tinggi diperlukan

lebih banyak lapisan tekstur, agar hasil mapping mendekati

kesempurnaan. Sebuah tekstur maps yang diterapkan

(dipetakan) biasanya dipakai untuk permukaan bentuk objek

polygon, proses ini mirip dengan menerapkan texture pada

kertas berpola kotak putih yang polos.Kegiatan texture

mapping untuk texture maps dapat didefinisikan sebagai

sebuah metode untuk menambahkan detail tekstur

permukaan (bitmap atau raster image), atau warna yang

dihasilkan komputer grafis atau model 3D. Penerapannya

Page 271: Buku grafkom

Page 264

pada grafis 3D dirintis oleh Dr Edwin Catmull pada proyek

Ph.D tesisnya tahun 1974.

2. Environment-Maps

Environtment-Maps ialah maps yang memiliki pewarnaan

dengan banyak gambar (tekstur) yang merekam refleksi

global dan pencahayaan pada objek. Gambar-gambar ini

difungsikan sebagai resampled selama proses rendering,

dengan tujuan untuk mengekstrak, dan melihat informasi

spesifik yang kemudian diterapkan sebagai tekstur objek pada

permukaan geometri. Maps ini sering disebut reflection yang

berarti tekstur pencahayaan dari benda-benda luar di sekitar

objek, maps jenis ini sangat cocok untuk benda-benda yang

memiliki tingkat refleksi yang sangat tinggi, seperti kaca, dan

lain sebagainya.Environmet mapping pada maps ini memiliki

definisi yaitu metode yang efisien untuk simulasi kompleks

permukaan bercermin melalui suatu gambar tekstur. Tekstur

yang digunakan bekerja untuk menyimpan gambar dari

lingkungan sekitar objek yang diberikan. Ada beberapa cara

untuk menyimpan tekstur lingkungan sekitar objek, salah satu

metode yang paling umum adalah metode Spherical

Environment Mapping, di mana dalam metode ini suatu

tekstur yang berisi citra lingkungan sekitar akan direfleksikan

sebagai bola cermin, dan kemudian dimasukkan sebagai

tekstur objek yang diberi maps.

Page 272: Buku grafkom

Page 265

3. Bump-Maps

Bump maps adalah maps yang memfokuskan permukaan

tekstur pada objek, dengan menggunakan maps ini,

permukaan geometri/objek akan terlihat berbeda dan unik,

tidak seperti objek-objek yang memiliki permukaan normal

pada umumnya. Rumus pekerjaan dari maps ini akan

menerapkan bidang untuk intensitas dalam maps yang

menunjukkan tingkat rendah tingginya suatu permukaan

objek, fungsi maps ini akan mengacaukan permukaan objek

yang normal, sehingga menimbulkan kesan unik ketika

hasilnya sudah di-render.Untuk kegiatannya, bump mapping

adalah sebuah teknik grafis komputer di mana pada setiap

pixel untuk permukaan normal objek, akan diberikan efek

tidak halus dan diterapkan sebelum melakukan perhitungan

iluminasi. Hasilnya, objek yang diberi maps akan lebih kaya,

serta lebih rinci untuk representasi permukaan objek dan

lebih mirip pada permukaan alam.

4. Normal-Maps

Maps ini serupa dengan bump-maps, perbedaannya

adalah fungsionalitas yang ada pada normal maps, maps ini

secara alami akan menghasilkan bentuk permukaan yang

tidak halus tanpa menggunakan lebih banyak penambahan

atau pengurangan poligon pada objek.Dalam dunia grafik

komputer 3D, normal mapping pada maps ini bisa disebut "

Page 273: Buku grafkom

Page 266

Dot3 bump mapping ", definisinya adalah sebuah teknik yang

digunakan untuk ”berpura-pura” menambahkan efek tidak

halus pada permukaan objek. Kenapa disebut ”berpura-pura”

? Hal ini disebabkan karena mapping ini bekerja dengan

menambahkan rincian tidak halus pada permukaan objek

tanpa menggunakan poligon. Normal mapping biasanya

diakurasi sebagai sebuah gambar RGB yang berhubungan

dengan koordinat X, Y, dan Z dari permukaan normal suatu

objek. Penggunaan umum teknik ini adalah untuk lebih

meningkatkan tampilan dan detail dari model poligon rendah

dengan menghasilkan peta normal dari model poligon yang

tinggi.

5. Shadow-Maps

Shadow maps yaitu maps yang menghasilkan suatu

bayangan tekstur pada objek dengan menangkap siluet objek

tersebut dari sumber cahaya yang terlihat. Maps ini sangat

sering dipakai oleh pengembang grafik 3D, karena efek yang

dihasilkan seolah-olah menunjukkan objek tersebut sangat

realistis, dan disebabkan adanya bayangan dari sumber

cahaya yang ada.Fungsi kerjanya yang berkonsep shadow

mapping adalah proses di mana bayang-bayang ditambahkan

ke grafik komputer 3D. Konsep ini diperkenalkan oleh Lance

Williams pada tahun 1978, dalam sebuah makalah yang

berjudul "Casting curved shadows on curved surfaces". Sejak

Page 274: Buku grafkom

Page 267

saat itu, teknik ini telah digunakan baik dalam pra-render

adegan, dipakai secara realtime, atau bahkan diterapkan ke

banyak konsol dan PC high-end game.

D. Teknik-teknik dalam Geometri

1. Texture- Mapping.

Sebuah metode untuk menambahkan detail, tekstur

permukaan (bitmap atau raster image), atau warna

yang dihasilkan komputer grafis atau model 3D.

Penerapannya pada grafis 3D dirintis oleh Dr Edwin

Catmull di gelar Ph.D. tesis 1974.

2. Poligonization.

Dengan merubah bentuk asli objek, namun, ini

membutuhkan resource hardware yang besar.

3. Splines.

Merupakan teknik yang menggunakan representasi

permukaan matematis (polynomial), tanpa

menggunakan polygon sama sekali.

4. Implicit surface (Blobbies).

Teknik ini didasarkan pada fungsi x,y, dan z.

5. Subdivision Surfaces.

Membagi objek menjadi segitiga yang bertumpuk.

6. Degradasi tingkat detail.

Page 275: Buku grafkom

Page 268

Mengganti poligon pada objek yang berada pada

posisi yang jauh, menghemat waktu render.

7. Mesh decimation.

Mengurangi poligon pada suatu objek untuk

menghemat waktu rendering.

Tekstur merupakan sebuah wadah dari sebuah gambar

atau lebih. Namun, tekstur tidak menyimpan gambar begitu

saja, gambar tekstur memiliki konfigurasi tertentu. Ada tiga

karakteristik untuk mendefinisikan tekstur, karakteristik

tersebut adalah: jenis tekstur, ukuran tekstur, dan format

gambar yang digunakan tekstur. Jenis tekstur mendefinisikan

susunan gambar dalam tekstur, ukuran mendefinisikan

ukuran gambar dalam tekstur, dan format gambar

mendefinisikan format gambar yang digunakan dalam

tekstur.

Berikut ini adalah macam-macam tekstur:

GL_TEXTURE_1D: semua gambar dalam tekstur ini 1-

dimensi. Memiliki lebar, tapi tidak memiliki ketinggian

atau kedalaman.

GL_TEXTURE_2D: semua gambar dalam tekstur ini 2-

dimensi. Memiliki lebar dan tinggi, namun tidak

punya kedalaman.

GL_TEXTURE_3D: semua gambar dalam tekstur ini 3-

dimensi. Memiliki lebar, tinggi, dan kedalaman.

Page 276: Buku grafkom

Page 269

GL_TEXTURE_RECTANGLE: Gambar dalam tekstur ini

(hanya satu gambar pada mipmapping) 2-dimensi.

Koordinat tekstur yang digunakan untuk tekstur ini

tidak dinormalisasi.

GL_TEXTURE_BUFFER: Gambar dalam tekstur ini

(Hanya satu gambar ada mipmapping) 1-dimensi.

Penyimpanan data berasal dari Buffer Object.

GL_TEXTURE_CUBE_MAP: terdapat 6 set gambar 2D

berbeda, dengan ukuran yang sama. Berbentuk

seperti 6 sisi kubus.

GL_TEXTURE_1D_ARRAY: Gambar dalam tekstur ini

semua 1-dimensi. Namun, berisi beberapa set gambar

1-dimensi, semua dalam satu tekstur. Panjang array

bagian dari ukuran tekstur itu.

GL_TEXTURE_2D_ARRAY: Gambar dalam tekstur ini

semua adalah 2-dimensi. Namun, mengandung

beberapa set gambar 2 dimensi, semua dalam satu

tekstur. Panjang array bagian dari ukuran tekstur itu.

GL_TEXTURE_CUBE_MAP_ARRAY: Gambar dalam

tekstur ini merupakan pemetaan kubus. Berisi

beberapa set peta kubus yang kesemuanya berada

dalam sebuah tekstur. Panjang Array * 6 (jumlah sisi

kubus) merupakan bagian dari ukuran tekstur.

Page 277: Buku grafkom

Page 270

GL_TEXTURE_2D_MULTISAMPLE: Gambar dalam

tekstur ini (hanya satu gambar ada mipmapping)

adalah 2-dimensi. Setiap pixel dalam gambar ini berisi

beberapa sampel bukan hanya satu nilai.

GL_TEXTURE_2D_MULTISAMPLE_ARRAY:

Menggabungkan 2D array dan jenis multisample 2D.

Tidak ada mipmapping.

Ukuran tekstur memiliki batas dalam implementasinya di

open GL. Untuk tekstur 1D dan 2D (dan setiap jenis tekstur

yang menggunakan dimensi yang sama, seperti cubemaps)

ukuran maksimalnya adalah GL_MAX_TEXTURE_SIZE. Untuk

tekstur array, panjang maksimum array adalah

GL_MAX_ARRAY_TEXTURE_LAYERS. Untuk tekstur 3D,

dimensi tidak boleh lebih besar dari

GL_MAX_3D_TEXTURE_SIZE dalam ukuran.

Dalam batas-batas ini, ukuran tekstur dapat bernilai

berapapun. Disarankan bagaimanapun, Anda harus tetap

mangacu pada pangkat dua untuk ukuran tekstur, kecuali

Anda memiliki kebutuhan yang signifikan untuk menggunakan

ukuran tertentu.

E. Mip maps

Ketika tekstur secara langsung diterapkan ke

permukaan, berapa banyak piksel tekstur yang (biasa disebut

Page 278: Buku grafkom

Page 271

"texels") digunakan tergantung pada sudut di mana

permukaan akan dirender. Sebuah tekstur dipetakan ke

gambar pesawat yang hampir di tepi kamera hanya akan

menggunakan sebagian kecil dari pixel tekstur. Demikian pula,

melihat langsung ke bawah pada tekstur dari jauh akan

menunjukkan texels lebih sedikit daripada melihat dari dekat.

Masalahnya adalah dengan animasi. Ketika Anda perlahan-

lahan melakukan zoom out pada tekstur, Anda akan mulai

melihat bentuk asing muncul. Ini disebabkan oleh

pengambilan sampel yang lebih sedikit dari semua texels,

pilihan texel mana yang yang akan dijadikan sample berubah

berdasarkan frame yang berbeda pada animasi. Bahkan

dengan linear filtering (lihat di bawah), bentuk akan muncul

seperti kamera di-zoom out.

Untuk mengatasi masalah ini, kita dapat

menggunakan mip maps.metode ini adalah menyusut versi

gambar berukuran penuh. Setiap mipmap adalah setengah

ukuran dari sebelumnya dalam rangkaian, menggunakan

dimensi terbesar gambar. Jadi 2D tekstur 64x16 dapat

memiliki 6 mip-map: 32x8, 16x4, 8x2, 4x1, 2x1, dan 1x1.

OpenGL tidak mengharuskan rantai mipmap selesai, Anda

dapat menentukan apa yang rentang mipmaps dalam tekstur

yang tersedia.

Page 279: Buku grafkom

Page 272

Beberapa jenis tekstur memiliki beberapa set independen

mipmaps. Setiap sisi cubemap memiliki pemetaan mipmaps

sendiri, seperti halnya setiap entri dalam tekstur array.

Namun, tekstur secara keseluruhan hanya memiliki satu

pengaturan yang mipmaps tertentu. Jadi jika tekstur sudah

diatur sedemikian rupa sehingga hanya bagian top 4 levels

mipmaps, Anda harus memiliki rangkaian bagian mipmaps

tersebut dalam sebuah tekstur.

Ketika melakukan sampel tekstur, implementasi

secara otomatis akan memilih mipmap yang digunakan untuk

sudut pandang, ukuran tekstur, dan berbagai faktor lainnya.

Bila menggunakan ukuran tekstur yang tidak pangkat dua,

setengah ukuran mipmaps lebih rendah dibulatkan ke bawah.

Jadi tekstur 63x63 memiliki tingkat terendah berikutnya:

31x31. Dan seterusnya.

Tingkat dasar rantai mipmap adalah yang terbesar.

Hal ini juga salah satu yang mendefinisikan ukuran penuh

tekstur. Nomor OpenGL ini tingkat mipmap sebagai 0, tingkat

mipmap terbesar berikutnya adalah 1, dan seterusnya.

Tingkat dasar tekstur tidak harus di-load. Selama Anda

menentukan rentang mipmaps dengan benar, Anda dapat

meninggalkan setiap tingkat mipmap yang Anda inginkan.

Page 280: Buku grafkom

Page 273

F. Texture maping

Proses texture mapping (2)

(0.0, 0.0)

(1.0, 0.0) Obyek

CG

Obyek CG

(0.0, 0.5) Obyek CG

Obyek CG

(0.0, 0.0)

(0.0, 1.0)

Page 281: Buku grafkom

Page 274

G. Object Texture

Diagram konten objek tekstur

Tekstur dalam OpenGL adalah objek OpenGL, dan

mengikuti konvensi standar tersebut. Tekstur memiliki

standar glGenTextures, glBindTexture.Target parameter

lBindTexture sesuai dengan jenis tekstur itu. Jadi, ketika Anda

menggunakan nama tekstur baru yang dihasilkan, rangkaian

pertama akan menentukan jenis tekstur. Anda tidak dapat

memasukkan objek pada target dengan tipe yang berbeda.

Jadi, jika Anda membuat tekstur sebagai GL_TEXTURE_1D,

maka Anda harus terus menggunakan tipe itu.

Seperti jenis objek lain di OpenGL, kita dapat

menggunakan target dengan tipe yang berbeda. Sehingga

Anda dapat memiliki GL_TEXTURE_1D dan

GL_TEXTURE_2D_ARRAY.

Page 282: Buku grafkom

Page 275

H. Contoh penerapan material dan tekstur

1. Membuat papan catur dengan 2 warna yaitu hitam dan

putih

Syntax:

#include<gl.h>

#include<glu.h>

#include<aux.h>

#define checkImageWidth 50

#define checkImageHeight 50

GLubyte

checkImage[checkImageWidth][checkImageHeig

ht][3];

void makeCheckImage(void)

{

int i, j, r, c;

for (i = 0; i < checkImageWidth; i++) {

for (j = 0; j < checkImageHeight; j++) {

c =

((((i&0x8)==0)^((j&0x8))==0))*255;

checkImage[i][j][0] = (GLubyte) c;

checkImage[i][j][1] = (GLubyte) c;

checkImage[i][j][2] = (GLubyte) c;

}

}

Page 283: Buku grafkom

Page 276

}

void myinit(void)

{

glClearColor (0.0, 0.0, 0.0, 0.0);

glEnable(GL_DEPTH_TEST);

glDepthFunc(GL_LEQUAL);

makeCheckImage();

glPixelStorei(GL_UNPACK_ALIGNMENT, 1);

glTexImage2D(GL_TEXTURE_2D, 0, 3,

checkImageWidth,

checkImageHeight, 0, GL_RGB,

GL_UNSIGNED_BYTE,

&checkImage[0][0][0]);

glTexParameterf(GL_TEXTURE_2D,

GL_TEXTURE_WRAP_S, GL_CLAMP);

glTexParameterf(GL_TEXTURE_2D,

GL_TEXTURE_WRAP_T, GL_CLAMP);

glTexParameterf(GL_TEXTURE_2D,

GL_TEXTURE_MAG_FILTER,

GL_NEAREST);

glTexParameterf(GL_TEXTURE_2D,

GL_TEXTURE_MIN_FILTER,

GL_NEAREST);

glTexEnvf(GL_TEXTURE_ENV,

GL_TEXTURE_ENV_MODE, GL_DECAL);

glEnable(GL_TEXTURE_2D);

Page 284: Buku grafkom

Page 277

glShadeModel(GL_FLAT);

}

void display(void)

{

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glBegin(GL_QUADS);

glTexCoord2f(0.0, 0.0); glVertex3f(-2.0, -

1.0, 0.0);

glTexCoord2f(0.0, 1.0); glVertex3f(-2.0,

1.0, 0.0);

glTexCoord2f(1.0, 1.0); glVertex3f(0.0,

1.0, 0.0);

glTexCoord2f(1.0, 0.0); glVertex3f(0.0, -

1.0, 0.0);

glTexCoord2f(0.0, 0.0); glVertex3f(1.0, -

1.0, 0.0);

glTexCoord2f(0.0, 1.0); glVertex3f(1.0,

1.0, 0.0);

glTexCoord2f(1.0, 1.0);

glVertex3f(2.41421, 1.0, -1.41421);

glTexCoord2f(1.0, 0.0);

glVertex3f(2.41421, -1.0,-1.41421);

glEnd();

glFlush();

}

Page 285: Buku grafkom

Page 278

void myReshape(GLsizei w, GLsizei h)

{

glViewport(0, 0, w, h);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(60.0,

1.0*(GLfloat)w/(GLfloat)h, 1.0, 30.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glTranslatef(0.0, 0.0, -3.6);

}

int main(int argc, char** argv)

{

auxInitDisplayMode (AUX_SINGLE | AUX_RGBA

| AUX_DEPTH);

auxInitPosition (0, 0, 500, 500);

auxInitWindow (argv[0]);

myinit();

auxReshapeFunc (myReshape);

auxMainLoop(display);

}

Page 286: Buku grafkom

Page 279

Hasil Output:

2. Contoh program yang menampilkan sebuah kubus

dengan texture tiap sisinya menampilkan texture

nama yang berbeda.

Gambar awal berukuran 320x320

Syntax header (imageloader.h)

#ifndef IMAGE_LOADER_H_INCLUDED

#define IMAGE_LOADER_H_INCLUDED

//Represents an image

Page 287: Buku grafkom

Page 280

class Image {

public:

Image(char* ps, int w, int

h);

~Image();

/* An array of the form (R1,

G1, B1, R2, G2, B2, ...) indicating the

* color of each pixel in

image. Color components range from 0 to

255.

* The array starts the

bottom-left pixel, then moves right to

the end

* of the row, then moves up

to the next column, and so on. This is

the

* format in which OpenGL

likes images.

*/

char* pixels;

int width;

int height;

};

//Reads a bitmap image from file.

Image* loadBMP(const char* filename);

#endif

Syntax cpp

Page 288: Buku grafkom

Page 281

#include <assert.h>

#include <fstream>

#include <stdlib.h>

#include <glut.h>

#include "imageloader.h"

int w=480, h=480; //lebar, tinggi

int s=0, p=-10; // sudut, sumbu z

int rx=0, ry=0, rz=0; //sumbu simetri

GLuint _textureId;

GLuint loadTexture(Image* image){

GLuint textureId;

glGenTextures(1, &textureId);

//allocate texture name

glBindTexture(GL_TEXTURE_2D,

textureId); //select our current texture

glTexImage2D(GL_TEXTURE_2D, //select

GL_TEXTURE_2D

0, //0 for default 2D texture

GL_RGB, //RGB format for image

image->width, image->height,

0, //border image must be 0

GL_RGB, //format image for the

stored pixels

GL_UNSIGNED_BYTE, //pixels

stored as unsigned numbers

image->pixels);

return textureId;

Page 289: Buku grafkom

Page 282

}

using namespace std;

Image::Image(char* ps, int w, int h) :

pixels(ps), width(w), height(h) {}

Image::~Image() {

delete[] pixels;

}

namespace {

int toInt(const char* bytes) {

return (int)(((unsigned

char)bytes[3] << 24) |

((unsigned

char)bytes[2] << 16) |

((unsigned

char)bytes[1] << 8) |

(unsigned

char)bytes[0]);

}

short toShort(const char* bytes) {

return (short)(((unsigned

char)bytes[1] << 8) |

(unsigned char)bytes[0]);

}

int readInt(ifstream &input) {

Page 290: Buku grafkom

Page 283

char buffer[4];

input.read(buffer, 4);

return toInt(buffer);

}

short readShort(ifstream &input) {

char buffer[2];

input.read(buffer, 2);

return toShort(buffer);

}

template<class T>

class auto_array {

private:

T* array;

mutable bool isReleased;

public:

explicit auto_array(T*

array_ = NULL) :

array(array_),

isReleased(false) {

}

auto_array(const

auto_array<T> &aarray) {

array =

aarray.array;

isReleased =

aarray.isReleased;

aarray.isReleased

= true;

Page 291: Buku grafkom

Page 284

}

~auto_array() {

if (!isReleased &&

array != NULL) {

delete[]

array;

}

}

T* get() const {

return array;

}

T &operator*() const {

return *array;

}

void operator=(const

auto_array<T> &aarray) {

if (!isReleased &&

array != NULL) {

delete[]

array;

}

array =

aarray.array;

isReleased =

aarray.isReleased;

aarray.isReleased

= true;

Page 292: Buku grafkom

Page 285

}

T* operator->() const {

return array;

}

T* release() {

isReleased = true;

return array;

}

void reset(T* array_ =

NULL) {

if (!isReleased &&

array != NULL) {

delete[]

array;

}

array = array_;

}

T* operator+(int i) {

return array + i;

}

T &operator[](int i) {

return array[i];

}

};

}

Page 293: Buku grafkom

Page 286

Image* loadBMP(const char* filename) {

ifstream input;

input.open(filename,

ifstream::binary);

assert(!input.fail() || !"Could not

find file");

char buffer[2];

input.read(buffer, 2);

assert(buffer[0] == 'B' && buffer[1]

== 'M' || !"Not a bitmap file");

input.ignore(8);

int dataOffset = readInt(input);

//Read the header

int headerSize = readInt(input);

int width;

int height;

switch(headerSize) {

case 40:

//V3

width = readInt(input);

height = readInt(input);

input.ignore(2);

assert(readShort(input)

== 24 || !"Image is not 24 bits per pixel");

assert(readShort(input)

== 0 || !"Image is compressed");

break;

case 12:

//OS/2 V1

width = readInt(input);

Page 294: Buku grafkom

Page 287

height = readInt(input);

input.ignore(2);

assert(readShort(input)

== 24 || !"Image is not 24 bits per pixel");

break;

case 64:

//OS/2 V2

assert(!"Can't load OS/2

V2 bitmaps");

break;

case 108:

//Windows V4

assert(!"Can't load

Windows V4 bitmaps");

break;

case 124:

//Windows V5

assert(!"Can't load

Windows V5 bitmaps");

break;

default:

assert(!"Unknown bitmap

format");

}

//Read the data

int bytesPerRow = ((width * 3 + 3) /

4) * 4 - (width * 3 % 4);

int size = bytesPerRow * height;

auto_array<char> pixels(new

char[size]);

Page 295: Buku grafkom

Page 288

input.seekg(dataOffset,

ios_base::beg);

input.read(pixels.get(), size);

//Get the data into the right format

auto_array<char> pixels2(new

char[width * height * 3]);

for(int y = 0; y < height; y++) {

for(int x = 0; x < width; x++)

{

for(int c = 0; c < 3;

c++) {

pixels2[3 * (width

* y + x) + c] =

pixels[bytesPerRow * y + 3 * x + (2 -

c)];

}

}

}

input.close();

return new Image(pixels2.release(),

width, height);

}

void init(){

GLfloat LightPosition[]={-10.0f,

20.0f, 20.0f, 0.0f};

glShadeModel(GL_SMOOTH);

Page 296: Buku grafkom

Page 289

glClearColor(0.0f,0.0f,0.0f,0.5f);

glClearDepth(1.0f);

glEnable(GL_DEPTH_TEST);

glHint(GL_PERSPECTIVE_CORRECTION_HINT,

GL_NICEST);

glLightfv(GL_LIGHT0, GL_POSITION,

LightPosition);

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

glEnable(GL_COLOR_MATERIAL);

glBlendFunc(GL_SRC_ALPHA,GL_ONE);

glColorMaterial(GL_BACK, GL_DIFFUSE);

Image* image = loadBMP("gambar.bmp");

_textureId = loadTexture(image);

return;

}

void mydisplay(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glEnable(GL_TEXTURE_2D);

glBindTexture(GL_TEXTURE_2D,

_textureId);

glTexParameteri(GL_TEXTURE_2D,

Page 297: Buku grafkom

Page 290

GL_TEXTURE_MIN_FILTER, GL_NEAREST);

glTranslatef(0,0,p);

glRotatef(s,rx,ry,rz);

glPushMatrix();

glRotatef(180,0,1,0);

glBegin(GL_QUADS);

glTexCoord2f(0.0f, 0.0f);

glVertex2f(-2.0f, -2.0f);

glTexCoord2f(0.5f, 0.0f);

glVertex2f(2.0f, -2.0f);

glTexCoord2f(0.5f, 1.0f);

glVertex2f(2.0f, 2.0f);

glTexCoord2f(0.0f, 1.0f);

glVertex2f(-2.0f, 2.0f);

glEnd();

glPopMatrix();

glPushMatrix();

glTranslatef(2,0,2);

glRotatef(90,0,1,0);

glBegin(GL_QUADS);

glTexCoord2f(0.5f, 0.0f);

glVertex2f(-2.0f, -2.0f);

glTexCoord2f(1.0f, 0.0f);

glVertex2f(2.0f, -2.0f);

glTexCoord2f(1.0f, 1.0f);

glVertex2f(2.0f, 2.0f);

glTexCoord2f(0.5f, 1.0f);

glVertex2f(-2.0f, 2.0f);

glEnd();

glTranslatef(-2,0,-2);

Page 298: Buku grafkom

Page 291

glRotatef(-90,0,1,0);

glBegin(GL_QUADS);

glTexCoord2f(0.0f, 0.0f);

glVertex2f(-2.0f, -2.0f);

glTexCoord2f(0.5f, 0.0f);

glVertex2f(2.0f, -2.0f);

glTexCoord2f(0.5f, 1.0f);

glVertex2f(2.0f, 2.0f);

glTexCoord2f(0.0f, 1.0f);

glVertex2f(-2.0f, 2.0f);

glEnd();

glTranslatef(-2,0,-2);

glRotatef(-90,0,1,0);

glBegin(GL_QUADS);

glTexCoord2f(0.5f, 0.0f);

glVertex2f(-2.0f, -2.0f);

glTexCoord2f(1.0f, 0.0f);

glVertex2f(2.0f, -2.0f);

glTexCoord2f(1.0f, 1.0f);

glVertex2f(2.0f, 2.0f);

glTexCoord2f(0.5f, 1.0f);

glVertex2f(-2.0f, 2.0f);

glEnd();

glPopMatrix();

glPushMatrix();

glTranslatef(0,2,2);

glRotatef(-90,1,0,0);

glBegin(GL_QUADS);

glTexCoord2f(0.0f, 0.0f);

glVertex2f(-2.0f, -2.0f);

glTexCoord2f(1.0f, 0.0f);

Page 299: Buku grafkom

Page 292

glVertex2f(2.0f, -2.0f);

glTexCoord2f(1.0f, 1.0f);

glVertex2f(2.0f, 2.0f);

glTexCoord2f(0.0f, 1.0f);

glVertex2f(-2.0f, 2.0f);

glEnd();

glPopMatrix();

glPushMatrix();

glTranslatef(0,-2,2);

glRotatef(90,1,0,0);

glBegin(GL_QUADS);

glTexCoord2f(0.0f, 0.0f);

glVertex2f(-2.0f, -2.0f);

glTexCoord2f(1.0f, 0.0f);

glVertex2f(2.0f, -2.0f);

glTexCoord2f(1.0f, 1.0f);

glVertex2f(2.0f, 2.0f);

glTexCoord2f(0.0f, 1.0f);

glVertex2f(-2.0f, 2.0f);

glEnd();

glPopMatrix();

glDisable(GL_TEXTURE);

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(45.0, (float)

w1/(float) h1, 1.0,300.0);

Page 300: Buku grafkom

Page 293

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void myKeyboard(unsigned char key, int x, int

y)

{

if (key == 'y'){

rx=0;

ry=1;

rz=0;

s +=5;

}

else if (key == 'x'){

rx=1;

ry=0;

rz=0;

s +=5;

}

else if (key == 'z'){

rx=0;

ry=0;

rz=1;

s +=5;

}

}

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

{

switch(key){

case GLUT_KEY_UP :

Page 301: Buku grafkom

Page 294

p += 5;

break;

case GLUT_KEY_DOWN :

p -= 5;

break;

}

}

void timer(int value){

glutPostRedisplay();

glutTimerFunc(50,timer,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("kubus");

glutDisplayFunc(mydisplay);

glutReshapeFunc(resize);

init();

glutTimerFunc(50,timer,0);

glutKeyboardFunc(myKeyboard);

glutSpecialFunc(mySpecialKeyboard);

glClearColor(1,1,1,1);

glutMainLoop();

}

Page 302: Buku grafkom

Page 295

Hasil Output:

Tampilan awal:

Apabila ditekan tombol x

Page 303: Buku grafkom

Page 296

Apabila ditekan tombol y

Apabila ditekan tombol z

Penjelasan Program:

Fungsi mydisplay pada kode program tersebut digunakan

untuk menggambar kubus yang di buat dan akan digeser pada

kode translatefnya. Sourcecode tersebut menampilkan

gambar dan tekstur dengan 6 sisi sehingga membentuk

Page 304: Buku grafkom

Page 297

kubus. glVertex2f berfungsi untuk menentukan ukuran

kotak/box bidang tekstur. Dan gambar tersebut menampilkan

nama Anggota kelompok pada sisi kubus.

3. Contoh Shadow mapping

Cara pembuatannya yaitu:

1. Render seluruh adegan dari sudut sumber cahaya dan

meletakkannya di z-penyangga (peta kedalaman)

2. Render seluruh adegan lagi tapi dari sudut pandang

3. Untuk setiap pixel dalam sudut pandang render

(Langkah 1), jika tidak terlihat dari sumber cahaya

render (Langkah 2) itu adalah baik dalam bayangan

itu menyala

4. Contoh Pemetaan normal

Page 305: Buku grafkom

Page 298

Untuk pemetaan normal, maka yang akan digunakan

dalam perhitungan dot product untuk perhitungan

pencahayaan diffuse, kita dapat melihat bahwa {0, 0,

-1} akan dipetakan ke {128, 128, 255} nilai,

memberikan semacam langit biru warna terlihat

dalam peta normal (biru (z) koordinat adalah

perspektif (kedalaman) koordinat dan RG-xy

Page 306: Buku grafkom

Page 299

koordinat datar di layar). {0.3, 0.4, -0,866} akan

dipetakan ke ({0.3, 0.4, -0,866} / 2 + {0,5, 0,5, 0,5}) *

255 = {0.15 +0.5, +0.5 0,2, -0,433 +0.5} * 255 = {0,65,

0,7, 0,067} * 255 = {166, 179, 17} nilai (0,3 ^ 2 ^ 2 +

0,4 (-0,866) ^ 2 = 1).

1. Implementasi Mapping texture

Dalam menerapkan mapping texture dperlukan

header “imageloader.h” untuk me-load gambar dari

computer. Format gambar yang dapat digunakan

untuk texture mapping adalah dengan extension

.bmp.

Dalam membuat program terlebih dahulu membuat

header imageloader sebagai Inisialisasi yang

menghubungkan antara source code untuk texture

mapping dengan program utama dengan langkah

berikut ini :

a. Membuat Project baru pada Visual C++

b. Klik kanan pada header file add new Item

pilih header file dan beri nama imageloader

ok

c. Pada sheet code isikan kode seperti dibawah ini

Code Program :

#ifndef IMAGE_LOADER_H_INCLUDED

#define IMAGE_LOADER_H_INCLUDED

Page 307: Buku grafkom

Page 300

//Represents an image

class Image {

public:

Image(char* ps, int w,

int h);

~Image();

/* An array of the

form (R1, G1, B1, R2, G2, B2,

...) indicating the

* color of each pixel

in image. Color components range

from 0 to 255.

* The array starts

the bottom-left pixel, then moves

right to the end

* of the row, then

moves up to the next column, and

so on. This is the

* format in which

OpenGL likes images.

*/

char* pixels;

int width;

int height;

};

//Reads a bitmap image from file.

Image* loadBMP(const char*

filename);

Page 308: Buku grafkom

Page 301

#endif

Kemudian setelah membuat header file untuk me-

load gambar , kita dapat membuat program dengan

menerapkan mapping texture.Obyek yang akan

dipakai dalam texture mapping adalah gambar.bmp

Program berikut adalah contoh dari penerapan

texture mapping pada program

Code Program

#include <assert.h>

#include <fstream>

#include <stdlib.h>

#include <glut.h>

#include "imageloader.h"

int w=480, h=480; //lebar, tinggi

Page 309: Buku grafkom

Page 302

int s=0, p=-10; // sudut, sumbu z

int rx=0, ry=0, rz=0; //sumbu simetri

GLuint _textureId;

GLuint loadTexture(Image* image){

GLuint textureId;

glGenTextures(1, &textureId);

//allocate texture name

glBindTexture(GL_TEXTURE_2D,

textureId); //select our current texture

glTexImage2D(GL_TEXTURE_2D,

//select GL_TEXTURE_2D

0, //0 for default 2D

texture

GL_RGB, //RGB format for

image

image->width, image->height,

0, //border image must be 0

GL_RGB, //format image for

the stored pixels

GL_UNSIGNED_BYTE, //pixels

stored as unsigned numbers

image->pixels);

return textureId;

}

Page 310: Buku grafkom

Page 303

using namespace std;

Image::Image(char* ps, int w, int h) :

pixels(ps), width(w), height(h) {}

Image::~Image() {

delete[] pixels;

}

namespace {

int toInt(const char* bytes) {

return (int)(((unsigned

char)bytes[3] << 24) |

((unsigned char)bytes[2] << 16) |

((unsigned char)bytes[1] << 8) |

(unsigned

char)bytes[0]);

}

short toShort(const char* bytes) {

return (short)(((unsigned

char)bytes[1] << 8) |

(unsigned char)bytes[0]);

}

Page 311: Buku grafkom

Page 304

int readInt(ifstream &input) {

char buffer[4];

input.read(buffer, 4);

return toInt(buffer);

}

short readShort(ifstream &input) {

char buffer[2];

input.read(buffer, 2);

return toShort(buffer);

}

template<class T>

class auto_array {

private:

T* array;

mutable bool

isReleased;

public:

explicit auto_array(T*

array_ = NULL) :

array(array_),

isReleased(false) {

}

auto_array(const

auto_array<T> &aarray) {

array =

Page 312: Buku grafkom

Page 305

aarray.array;

isReleased =

aarray.isReleased;

aarray.isReleased = true;

}

~auto_array() {

if (!isReleased

&& array != NULL) {

delete[]

array;

}

}

T* get() const {

return array;

}

T &operator*() const {

return *array;

}

void operator=(const

auto_array<T> &aarray) {

if (!isReleased

&& array != NULL) {

delete[]

Page 313: Buku grafkom

Page 306

array;

}

array =

aarray.array;

isReleased =

aarray.isReleased;

aarray.isReleased = true;

}

T* operator->() const

{

return array;

}

T* release() {

isReleased =

true;

return array;

}

void reset(T* array_ =

NULL) {

if (!isReleased

&& array != NULL) {

delete[]

array;

}

Page 314: Buku grafkom

Page 307

array = array_;

}

T* operator+(int i) {

return array +

i;

}

T &operator[](int i) {

return array[i];

}

};

}

Image* loadBMP(const char* filename) {

ifstream input;

input.open(filename,

ifstream::binary);

assert(!input.fail() || !"Could

not find file");

char buffer[2];

input.read(buffer, 2);

assert(buffer[0] == 'B' &&

buffer[1] == 'M' || !"Not a bitmap

file");

input.ignore(8);

int dataOffset = readInt(input);

Page 315: Buku grafkom

Page 308

//Read the header

int headerSize = readInt(input);

int width;

int height;

switch(headerSize) {

case 40:

//V3

width =

readInt(input);

height =

readInt(input);

input.ignore(2);

assert(readShort(input) == 24 ||

!"Image is not 24 bits per pixel");

assert(readShort(input) == 0 ||

!"Image is compressed");

break;

case 12:

//OS/2 V1

width =

readInt(input);

height =

readInt(input);

input.ignore(2);

assert(readShort(input) == 24 ||

Page 316: Buku grafkom

Page 309

!"Image is not 24 bits per pixel");

break;

case 64:

//OS/2 V2

assert(!"Can't load

OS/2 V2 bitmaps");

break;

case 108:

//Windows V4

assert(!"Can't load

Windows V4 bitmaps");

break;

case 124:

//Windows V5

assert(!"Can't load

Windows V5 bitmaps");

break;

default:

assert(!"Unknown

bitmap format");

}

//Read the data

int bytesPerRow = ((width * 3 + 3)

/ 4) * 4 - (width * 3 % 4);

int size = bytesPerRow * height;

auto_array<char> pixels(new

char[size]);

Page 317: Buku grafkom

Page 310

input.seekg(dataOffset,

ios_base::beg);

input.read(pixels.get(), size);

//Get the data into the right

format

auto_array<char> pixels2(new

char[width * height * 3]);

for(int y = 0; y < height; y++) {

for(int x = 0; x < width;

x++) {

for(int c = 0; c < 3;

c++) {

pixels2[3 *

(width * y + x) + c] =

pixels[bytesPerRow * y + 3 * x +

(2 - c)];

}

}

}

input.close();

return new

Image(pixels2.release(), width, height);

}

void init(){

Page 318: Buku grafkom

Page 311

GLfloat LightPosition[]={-10.0f,

20.0f, 20.0f, 0.0f};

glShadeModel(GL_SMOOTH);

glClearColor(0.0f,0.0f,0.0f,0.5f);

glClearDepth(1.0f);

glEnable(GL_DEPTH_TEST);

glHint(GL_PERSPECTIVE_CORRECTION_H

INT, GL_NICEST);

glLightfv(GL_LIGHT0, GL_POSITION,

LightPosition);

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

glEnable(GL_COLOR_MATERIAL);

glBlendFunc(GL_SRC_ALPHA,GL_ONE);

glColorMaterial(GL_BACK,

GL_DIFFUSE);

Image* image =

loadBMP("gambar.bmp");

_textureId = loadTexture(image);

return;

}

void mydisplay(){

Page 319: Buku grafkom

Page 312

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glEnable(GL_TEXTURE_2D);

glBindTexture(GL_TEXTURE_2D,

_textureId);

glTexParameteri(GL_TEXTURE_2D,

GL_TEXTURE_MIN_FILTER, GL_NEAREST);

glTranslatef(0,0,p);

glRotatef(s,rx,ry,rz);

glPopMatrix();

glPushMatrix();

glBegin(GL_QUADS);

glTexCoord2f(0.0f, 0.0f);

glVertex2f(-2.0f, -2.0f);

glTexCoord2f(1.0f, 0.0f);

glVertex2f(2.0f, -2.0f);

glTexCoord2f(1.0f, 1.0f);

glVertex2f(2.0f, 2.0f);

glTexCoord2f(0.0f, 1.0f);

glVertex2f(-2.0f,

2.0f);

glEnd();

glPopMatrix();

glDisable(GL_TEXTURE);

Page 320: Buku grafkom

Page 313

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(70.0, (float)

w1/(float) h1, 1.0,100.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

}

void myKeyboard(unsigned char key, int

x, int y)

{

if (key == 'y'){

rx=0;

ry=1;

rz=0;

s +=5;

}

else if (key == 'x'){

rx=1;

ry=0;

rz=0;

s +=5;

}

Page 321: Buku grafkom

Page 314

else if (key == 'z'){

rx=0;

ry=0;

rz=1;

s +=5;

}

}

void mySpecialKeyboard(int key, int x,

int y) {

switch(key){

case GLUT_KEY_UP :

p += 5;

break;

case GLUT_KEY_DOWN :

p -= 5;

break;

}

}

void timer(int value){

glutPostRedisplay();

glutTimerFunc(100,timer,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

Page 322: Buku grafkom

Page 315

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Modul 10 - Nomor

2-3-4");

glutDisplayFunc(mydisplay);

glutReshapeFunc(resize);

init();

glutTimerFunc(100,timer,0);

glutKeyboardFunc(myKeyboard);

glutSpecialFunc(mySpecialKeyboard)

;

glClearColor(1,1,1,1);

glutMainLoop();

}

Tampilan

Page 323: Buku grafkom

Page 316

Penjelasan

Page 324: Buku grafkom

Page 317

Pada program terdapat implemetasi mapping texture dimana

terdapat header dan syntak untuk me-load gambar

Pada mapping texture terdapat inisialisasi

texture yang nantinya akan digunakan untuk

meload gambar dan pada fungsi load texture

terdapat syntax dengan masing masing

fungsinya.

Untuk membuat suatu obyek yang dapat dikenai

suatu fungsi tekstur, maka hal yang perlu

dilakukan adalah dengan mendeklarasikan fungsi

glEnable(GL_TEXTURE_2D);. Karena koordinat

Page 325: Buku grafkom

Page 318

pada gambar dan pada obyek window aplikasi

tidak sama, maka perlu dihubungkan koordinat

gambar dengan obyek. Titik (0,0) pada gambar

berada di pojok kiri bawah, sedangkan pada

obyek windows aplikasi titik (0,0) berada di

tengah-tengah windows, sehingga

glTexCoord2f(0.f,0.f); untuk posisi koordinat

(0,0) obyek dihubungkan dengan glVertex2f(-

2.f,-2.f); (pojok kiri bawah). glTexCoord2f(1.f,0.f);

dihubungkan dengan glVertex2f(2.f,-2.f); (pojok

kanan bawah). glTexCoord2f(1.f,1.f);

dihubungkan dengan glVertex2f(2.f,2.f); (pojok

kanan atas). Dan glTexCoord2f(0.f,1.f);

dihubungkan dengan glVertex2f(-2.f,2.f); (pojok

kiri atas).

Apabila program tersebut dijalankan, gambar

yang telah di-import tadi akan menampilkan

hasilnya. Apabila ditekan huruf x, maka program

akan berputar searah sumbu x, ditekan huruf y,

maka program akan berputar searah sumbu y,

dan apabila ditekan huruf z, maka program akan

berputar searah sumbu z, setelah itu apabila

PgUp ditekan maka gambar(objek)tersebut akan

bertambah besar, sedangkan apabila PgDn

Page 326: Buku grafkom

Page 319

ditekan maka obyek tersebut akan bertambah

kecil.

2. Membuat tampilan texture mapping dengan

glTexCoord2f

Code Program

#include <assert.h>

#include <fstream>

#include <stdlib.h>

#include <glut.h>

#include "imageloader.h"

int w=480, h=480; //lebar, tinggi

int s=0, p=-10; // sudut, sumbu z

int rx=0, ry=0, rz=0; //sumbu simetri

GLuint _textureId;

GLuint loadTexture(Image* image){

GLuint textureId;

glGenTextures(1, &textureId);

//allocate texture name

glBindTexture(GL_TEXTURE_2D,

textureId); //select our current texture

glTexImage2D(GL_TEXTURE_2D,

//select GL_TEXTURE_2D

0, //0 for default 2D

texture

Page 327: Buku grafkom

Page 320

GL_RGB, //RGB format for

image

image->width, image->height,

0, //border image must be 0

GL_RGB, //format image for

the stored pixels

GL_UNSIGNED_BYTE, //pixels

stored as unsigned numbers

image->pixels);

return textureId;

}

using namespace std;

Image::Image(char* ps, int w, int h) :

pixels(ps), width(w), height(h) {}

Image::~Image() {

delete[] pixels;

}

namespace {

int toInt(const char* bytes) {

return (int)(((unsigned

char)bytes[3] << 24) |

((unsigned char)bytes[2] << 16) |

Page 328: Buku grafkom

Page 321

((unsigned char)bytes[1] << 8) |

(unsigned

char)bytes[0]);

}

short toShort(const char* bytes) {

return (short)(((unsigned

char)bytes[1] << 8) |

(unsigned char)bytes[0]);

}

int readInt(ifstream &input) {

char buffer[4];

input.read(buffer, 4);

return toInt(buffer);

}

short readShort(ifstream &input) {

char buffer[2];

input.read(buffer, 2);

return toShort(buffer);

}

template<class T>

class auto_array {

private:

Page 329: Buku grafkom

Page 322

T* array;

mutable bool

isReleased;

public:

explicit auto_array(T*

array_ = NULL) :

array(array_),

isReleased(false) {

}

auto_array(const

auto_array<T> &aarray) {

array =

aarray.array;

isReleased =

aarray.isReleased;

aarray.isReleased = true;

}

~auto_array() {

if (!isReleased

&& array != NULL) {

delete[]

array;

}

}

Page 330: Buku grafkom

Page 323

T* get() const {

return array;

}

T &operator*() const {

return *array;

}

void operator=(const

auto_array<T> &aarray) {

if (!isReleased

&& array != NULL) {

delete[]

array;

}

array =

aarray.array;

isReleased =

aarray.isReleased;

aarray.isReleased = true;

}

T* operator->() const

{

return array;

}

Page 331: Buku grafkom

Page 324

T* release() {

isReleased =

true;

return array;

}

void reset(T* array_ =

NULL) {

if (!isReleased

&& array != NULL) {

delete[]

array;

}

array = array_;

}

T* operator+(int i) {

return array +

i;

}

T &operator[](int i) {

return array[i];

}

};

}

Image* loadBMP(const char* filename) {

Page 332: Buku grafkom

Page 325

ifstream input;

input.open(filename,

ifstream::binary);

assert(!input.fail() || !"Could

not find file");

char buffer[2];

input.read(buffer, 2);

assert(buffer[0] == 'B' &&

buffer[1] == 'M' || !"Not a bitmap

file");

input.ignore(8);

int dataOffset = readInt(input);

//Read the header

int headerSize = readInt(input);

int width;

int height;

switch(headerSize) {

case 40:

//V3

width =

readInt(input);

height =

readInt(input);

input.ignore(2);

assert(readShort(input) == 24 ||

!"Image is not 24 bits per pixel");

Page 333: Buku grafkom

Page 326

assert(readShort(input) == 0 ||

!"Image is compressed");

break;

case 12:

//OS/2 V1

width =

readInt(input);

height =

readInt(input);

input.ignore(2);

assert(readShort(input) == 24 ||

!"Image is not 24 bits per pixel");

break;

case 64:

//OS/2 V2

assert(!"Can't load

OS/2 V2 bitmaps");

break;

case 108:

//Windows V4

assert(!"Can't load

Windows V4 bitmaps");

break;

case 124:

//Windows V5

assert(!"Can't load

Page 334: Buku grafkom

Page 327

Windows V5 bitmaps");

break;

default:

assert(!"Unknown

bitmap format");

}

//Read the data

int bytesPerRow = ((width * 3 + 3)

/ 4) * 4 - (width * 3 % 4);

int size = bytesPerRow * height;

auto_array<char> pixels(new

char[size]);

input.seekg(dataOffset,

ios_base::beg);

input.read(pixels.get(), size);

//Get the data into the right

format

auto_array<char> pixels2(new

char[width * height * 3]);

for(int y = 0; y < height; y++) {

for(int x = 0; x < width;

x++) {

for(int c = 0; c < 3;

c++) {

pixels2[3 *

(width * y + x) + c] =

Page 335: Buku grafkom

Page 328

pixels[bytesPerRow * y + 3 * x +

(2 - c)];

}

}

}

input.close();

return new

Image(pixels2.release(), width, height);

}

void init(){

GLfloat LightPosition[]={-10.0f,

20.0f, 20.0f, 0.0f};

glShadeModel(GL_SMOOTH);

glClearColor(0.0f,0.0f,0.0f,0.5f);

glClearDepth(1.0f);

glEnable(GL_DEPTH_TEST);

glHint(GL_PERSPECTIVE_CORRECTION_H

INT, GL_NICEST);

glLightfv(GL_LIGHT0, GL_POSITION,

LightPosition);

glEnable(GL_LIGHTING);

glEnable(GL_LIGHT0);

Page 336: Buku grafkom

Page 329

glEnable(GL_COLOR_MATERIAL);

glBlendFunc(GL_SRC_ALPHA,GL_ONE);

glColorMaterial(GL_BACK,

GL_DIFFUSE);

Image* image =

loadBMP("gambar.bmp");

_textureId = loadTexture(image);

return;

}

void mydisplay(){

glClear(GL_COLOR_BUFFER_BIT |

GL_DEPTH_BUFFER_BIT);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glEnable(GL_TEXTURE_2D);

glBindTexture(GL_TEXTURE_2D,

_textureId);

glTexParameteri(GL_TEXTURE_2D,

GL_TEXTURE_MIN_FILTER, GL_NEAREST);

glTranslatef(0,0,p);

glRotatef(s,rx,ry,rz);

glPopMatrix();

glPushMatrix();

Page 337: Buku grafkom

Page 330

glBegin(GL_QUADS);

glTexCoord2f(0.0f, 0.0f);

glVertex2f(-2.0f, -

2.0f);

glTexCoord2f(1.0f, 1.0f);

glVertex2f(2.0f, -

2.0f);

glTexCoord2f(0.0f, 1.0f);

glVertex2f(2.0f,

2.0f);

glTexCoord2f(0.0f, 0.0f);

glVertex2f(-2.0f,

2.0f);

glEnd();

glPopMatrix();

glDisable(GL_TEXTURE);

glutSwapBuffers();

}

void resize(int w1, int h1){

glViewport(0,0,w1,h1);

glMatrixMode(GL_PROJECTION);

glLoadIdentity();

gluPerspective(50.0, (float)

w1/(float) h1, 1.0,100.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

Page 338: Buku grafkom

Page 331

}

void myKeyboard(unsigned char key, int

x, int y)

{

if (key == 'y'){

rx=0;

ry=1;

rz=0;

s +=10;

}

else if (key == 'x'){

rx=1;

ry=0;

rz=0;

s +=10;

}

else if (key == 'z'){

rx=0;

ry=0;

rz=1;

s +=10;

}

}

void mySpecialKeyboard(int key, int x,

int y) {

switch(key){

Page 339: Buku grafkom

Page 332

case GLUT_KEY_UP :

p += 10;

break;

case GLUT_KEY_DOWN :

p -= 10;

break;

}

}

void timer(int value){

glutPostRedisplay();

glutTimerFunc(100,timer,0);

}

void main(int argc, char **argv){

glutInit(&argc, argv);

glutInitDisplayMode(GLUT_DOUBLE |

GLUT_DEPTH | GLUT_RGBA);

glutInitWindowPosition(100,100);

glutInitWindowSize(w,h);

glutCreateWindow("Modul 10 -

LAtihan 5");

glutDisplayFunc(mydisplay);

glutReshapeFunc(resize);

init();

glutTimerFunc(100,timer,0);

glutKeyboardFunc(myKeyboard);

glutSpecialFunc(mySpecialKeyboard)

Page 340: Buku grafkom

Page 333

;

glClearColor(1,1,1,1);

glutMainLoop();

}

Tampilan

Page 341: Buku grafkom

Page 334

Penjelasan

Pada saat pertama kali program

dijalankan hasil output yang ditampilkan adalah

posisi tekstur pada gambar akan berurutan

sesuai dengan pendeklarasian pada program.

Jadi, untuk program di atas, posisi gambar akan

terbalik karena urutan pendeklarasian pada

gambar (tekstur) bukan dimulai dari titik (0,0).

glTexCoord2f(1.f,0.f); dihubungkan dengan

glVertex2f(-2.f,-2.f); sehingga posisi b gambar

akan berada pada pojok kiri bawah, yang mana

seharusnya posisi a yang berada di pojok kiri

bawah. glTexCoord2f(1.f,1.f); dihubungkan

dengan glVertex2f(2.f,-2.f); sehingga posisi

cberada pada pojok kanan bawah.

glTexCoord2f(0.f,1.f); dihubungkan dengan

glVertex2f(2.f,2.f); sehingga posisi d menempati

posisi c semula, pada pojok kanan atas. Dan

glTexCoord2f(0.f,0.f); dihubungkan dengan

glVertex2f(-2.f,2.f); sehingga posisi a berada

pada pojok kiri atas. Apabila program tersebut

dijalankan, gambar yang telah di-import tadi

akan menampilkan hasilnya. Apabila ditekan

huruf x, maka program akan berputar searah

Page 342: Buku grafkom

Page 335

sumbu x, ditekan huruf y, maka program akan

berputar searah sumbu y, dan apabila ditekan

huruf z, maka program akan berputar searah

sumbu z, setelah itu apabila PgUp ditekan maka

gambar(objek)tersebut akan bertambah besar,

sedangkan apabila PgDn ditekan maka obyek

tersebut akan bertambah kecil.

Efek texture diatas di dapat dari manipulasi fungsi

vertex pada glTexCoord.

Page 343: Buku grafkom

Page 336

DAFTAR PUSTAKA

. . Glut Tutorial (Keyboard). http://www.-

lighthouse3d.com/opengl/glut/index-php3?5. Online

diakses pada tanggal 13 April 2013

___. 2011. Komputer Grafik.

http://dotsal.wordpress.com/2011/09/25/komputer-

grafik/ diakses tanggal 10 April 2013

_____, 2008. Primitif Grafika. Online.

http://materiquliah.wordpress.com/2008/11/15/prim

itif-grafika/. Diakses pada tanggal 17 April 2013.

_____. 2012. Suplemen openGL glut turorial. (online)(

http://ferygeps.files.wordpress.com/2012/12/suplem

en_opengl-glut_tutorial.pdf ) diakses pada tanggal 6

April 2013.

______. _____. 3D Animation. Online.

http://kelompokkami.wordpress.com/3d-animation/.

Diakses pada tanggal 17 April 2013.

______. 2012. Animasi, Sejarah, dan Perkembangannya.

Online.

http://jagadgrafis.blogspot.com/2012/07/animasi-

sejarah-dan-perkembangannya.html. Diakses pada

tanggal 15 April 2013.

________. 2011. Opengl Transformations glscale sltranslate.

(Online). (http://stackoverflow.com

/questions/5360597/opengl-transformations-glscale-

gltranslate-etc). Diakses tanggal 13 April 2013.

________. 2012. Translasi, dan Rotasi Grafik Komputer.

(Online). (http://kripiksukun.blogspot.com/2012

Page 344: Buku grafkom

Page 337

/04/translasiskala-dan-rotasi-grafik.html). Diakses

tanggal 12 April 2013.

_________. 2013. Grafika Komputer3D. (Online).

(http://id.wikipedia.org/wiki/Grafika_komputer_3D).

Diakses tanggal 12 April 2013.

__________. 2003. Looking for glscalef. (Online).

(http://www.opengl.org/discussion_boards/showthre

ad.php/135130-looking-for-glScalef-examples).

Diakses tanggal 13 April 2013.

Azizah, marina. 2011. Pemetaan Texture pada openGL.

(online).

(http://blog.um.ac.id/marina/2011/12/13/pemetaan-

texture-pada-opengl.com ) diakses pada tanggal 5

April 2013.

Chua Hock-Chuan. 2012. 3D Graphics with OpenGL. Basic

Theory.

Deni.2009. Pengenalan OpenGL.

putudeni.blogspot.com/2009/04/pengenalan-

opengl.html. Diakses tanggal 18 April 2013 .

Eko Pusber. 2012. Jenis-jenis Keyboard komputer.

http://pusber.-com/2012/12/jenis-jenis-keyboard-

komputer/

Halidrus, Shofiya. _____. OpenGL. Online.

http://blog.um.ac.id/shofiyahalidrus/teknik-

informatika/grafika-komputer/open-gl/. Dikases

tanggal 17 April 2013

Halidrus, Shofiyah. 2012. Lighting. Online,

http://blog.um.ac.id/shofiyahalidrus/teknik-

informatika/grafika-komputer/lighting/ diakses pada

tanggal 1 April 2013 pukul 20.15 WIB

Page 345: Buku grafkom

Page 338

Hendarto, Janoe, Drs, M Kom., 2006. Bahan Ajar Grafika

Komputer.

http://www.scribd.com/doc/74599978/Grafika-

Komputer-Pemrograman-3D-www-digizoneku-com

Diakses 13 April 2013

Henry.2010. Keyboard function in OpenGL.

http://henry2005.-jimdo.com/2010/02/14/keyboard-

function-in-opengl/. (Diakses pada tanggal 14 April

2013.Pukul 16.18 WIB)

http://amutiara.staff.gunadarma.ac.id/Downloads/files/2793

6/7+Grafik+Komp-Konsep++3D.pdf Diakses 13 April

2013

http://www.ntu.edu.sg/home/ehchua/programming/opengl/

CG_BasicsTheory.html Diakses 13 April 2013

http://www.transiskom.com/2010/08/pengertian-dan-jenis-

keyboard. html .(Diakses pada tanggal 14 April

2013.Pukul 16.20 WIB)

Iqbal, Rizal. 2012. “Jenis-jenis Animasi di Dunia”.

http://tolastoles.blogspot.com/2012/11/jenis-jenis-

animasi-di-dunia.html

Jinsona. 2009.Sejarah Mouse Komputer. Online.

http://ya2oke.blogspot.com/2009/04/sejarah-mouse-

komputer.html. diakses tanggal 14 April 2013

Kaskot. 2011. Kelebihan dan Kekurangan Mouse optic

Logitech.

http://www.kasurkotor.com/2011/03/kelebihan-dan-

kekurangan-mouse-optic-logitech-m100/. Diakses

tanggal 16 April 2013

Kilgrad, Mark. 1996. glutSpecialFunc(3Glut). http://www-

etud.iro.umontreal.ca/~clavetsi/api/glut/glutSpecialF

unc.html.online diakses pada tanggal 13 April 2013.

Page 346: Buku grafkom

Page 339

Kilgrad, Mark. 1996. glutSpecialFunc. glutKeyboardFunc.

http://www.opengl.org/resources/libraries/glut/spec

3/node49.html#944. (Diakses pada tanggal 14 April

2013.Pukul 16.15 WIB)

Kilgrad, Mark. 1996. glutSpecialFunc.

http://www.opengl.org/-

resources/libraries/glut/spec3/-node54.html#1044.

(Diakses pada tanggal 14 April 2013.Pukul 16.16 WIB)

Kilgrad, Mark. 1996. glutSpecialFunc. http://www.opengl.org-

/resource/libraries/glut/spec3/node54.html.online

diakses pada tanggal 13 April 2013.

Maliki, Irfan, S. T., Grafika Komputer.

http://elib.unikom.ac.id/download.php?id=108172

Diakses 13 April 2013

Maliki, Irfan. 2010. Grafika Komputer. (Online).

http://elib.unikom.ac.id/files/disk1/470/jbptunikomp

p-gdl-irfanmalik-23471-1-modulgr-r.pdf. Diakses

tanggal 9 April 2013.

Maliki, Irfan.2010. Grafika Komputer. Yogyakarta ; Andi

Offset.

Mamiuri, Ruthpita Ruth. 2009. http://ruthpita.blogspot.com/.

Diakses tanggal 16 Aptil 2013

Modul 4 Grafika Komputer Universitas Negeri Malang:

Transformasi Objek. 2013.

Modul Material Tekstur Praktikum Grafika Komputer

Nandhi, angga. 2010. Pemetaan Texture. (online)

(http://angganandhi.blogspot.com/2010/10/pemetaa

n-tekstur.html ) diakses pada tanggal 6 April 2013.

Noval. 2013. “Animasi Beserta Jenis-jenis Animasi”.

http://novalismylove.blogspot.com/2013/04/animasi-

dan-jenis-jenis-nya.html

Page 347: Buku grafkom

Page 340

Nur, Alivi Rosida. 2011. “Membuat Jam Analog Menggunakan

OpenGL”.

http://aliphoemarley.blogspot.com/2011/10/membu

at-jam-analog-menggunakan-.opengl.html

Official Website OpenGL. 1996. glutKeyboardFunc. (accessed

at April 4th, 2013).

http://www.opengl.org/resources/libraries/-

glut/spec3/node49.html#SECTION000840000000000

00000

Official Website Zeus Communication, Multimedia &

Development. 2005. Keyboard Input. (accessed at

April 4th, 2013).

http://www.zeuscmd.com/tutorials/opengles/04Keyb

oardInput.php

Prihatmanto, Ary Setijadi. 2007. EC5130 – Grafika Komputer

dan Pemrograman GPU. Suplemen Diktat Kuliah.

OpenGL Tutorial dengan GLUT: Fixed Pipeline.

(Online). http://ferygeps.files.wordpress.com

/2012/12/suplemen_opengl-glut_tutorial.pdf. Diakses

tanggal 9 April 2013.

Priyatmono, Dody. 2011. Jenis Animasi. Online.

http://dodyandanimation.wordpress.com/2011/03/2

7/jenis-animasi-2/. Diakses pada tanggal 17 April

2013.

Rahmat, Abdullah Basuki. 2012. Pencahayaan Pada OpenGL.

http://tony911.files.wordpress. com/2012/09/modul-

prak-komgraf.pdf diakses pada tanggal 1 April 2013

pukul 20.02 WIB

Saputra, Jacky. 2012. Grafika Komputer Translasi Rotasi dan

Skala. (Online). (http://jackyrsaputra.blogspot.com

Page 348: Buku grafkom

Page 341

/2012/04/grafika-komputer-translasi-rotasi-

dan.html). Diakses tanggal 12 April 2013.

Sputri, frizki. 2013. BAB 1 Texture Modelling. (online)

(http://frizkisputri.blogspot.com/2013/02/bab-1-

texture-modelling.html ) diakses pada tanggal 5 April

2013.

Subedi, Bibek. 2012. GLUT Tutorial – Handling Keyboard

Events.http://programmingtechnique.blogspot.com/

2012/01/glut-tutorial-handling-keyboard-

events.html. online diakses pada tanggal 13 April

2013.

Swiftless Tutorials. 2010. OpenGL Keyboard Interaction

(Version 2.0). (accessed at April 6th, 2013).

http://www.swiftless.com/tutorials/opengl/keyboard

.html

Teknik Elektro UM: Modul 5 Praktikum Grafika Komputer

Ulum, Miftahul. 2011. Transformasi Objek Dalam Grafika

Komputer. (Online). (http://blog.um.ac.id

/crazyrevo/2011/12/12/transformasi-objek-dalam-

grafika-komputer/). Diakses tanggal 12 April 2013.

Vanduto. 2010. Grafik Komputer. (online)(

http://vandutto.blogspot.com/2010/10/grafik-

komputer.html ) diakses pada tanggal 6 April 2013.

Vicky. 2008. Online,

http://vicknite.wordpress.com/category/open-gl/

diakses pada tanggal 1 April 2013 pukul 20.30 WIB

Wikipedia. Texture. (Online) (http://www.opengl.org/wiki/

Texture) diakses pada tanggal 6 April 2013.

Wikipedia.Papan ketik.

http://id.wikipedia.org/wiki/Papan_ketik

Page 349: Buku grafkom

Page 342

KONTRIBUTOR BAB 1 KELOMPOK 3 dan 4

110533406975 Ika Rizki Choirunnisaa

110533406968 Jalu Febry Kesumaninggalih

110533406990 Muhammad Ridwan

110533406977 Nabilla Zamzamiyah

BAB 2 KELOMPOK 1 dan 2

110533406994 Ahmad Rizqiyani P

110533406993 Ainun Fikri L

110533406989 Iman Budi Hutomo

110533406969 Selly Handik P

BAB 3 KELOMPOK 19 dan 20

110533406995 Akhmad Aprilianto

110533406973 Alifian Ranum Herliantika

110533406986 Dewi Rizka Fithriyah

110533406992 Setia Putri

BAB 4 KELOMPOK 7 dan 8

110533406976 Rafsanjaya Mahaputra

110533430504 Rizka Rahmania AmeIlia

110533406974 Sigma Akhiria Maulida

110533406964 Virginia Nurita

BAB 5 KELOMPOK 11 dan 12

110533406996 Anik Triasih

110533406961 Armanda Prastyan Pratama

110533406991 Bahtiyar Hidayat

110533406963 Ria Suciati

BAB 6 KELOMPOK 9 dan 10

110533406962 Ahmad Khakim Amrullah

110533406968 Anjar Dwi Rahmawati

110533406983 David Chandra Kusuma

110533406984 Dwi Panglipuringtias

Page 350: Buku grafkom

Page 343

BAB 7 KELOMPOK 15 dan 16

110533406988 Nani Masrifah

110533406981 Nefi Liana

110533406997 Salwa Ika Wulandari

110533406987 Shofiana Fitri

BAB 8 KELOMPOK 13 dan 14

110533406967 Aulia Rahmah

110533406960 Evania Kurniawati

110533406972 Ifanatun Nadhiroh

110533406979 M. Damaris Widigdya

BAB 9 KELOMPOK 5 dan 6

110533406985 Akhsin Nurlaily

110533406978 Novi Adi Triswandi

110533406970 Novia Ratnasari

110533406982 Qoimatul Adilah

BAB 10 KELOMPOK 17 dan 18

110533406959 Elsa Dwi Rochmah R

110533406971 Indri Widyarti

110533406965 Sotya Renaningwibi S

110533406980 Sulis Setyowati

Page 351: Buku grafkom

Page 344

Page 352: Buku grafkom

Page 1