Buku Grafkom

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 i
dari sempurna, maka penulis sangat mengharapkan kritik dan
saran dalam rangka penyempurnaan penyusunan buku ini di
kemudian hari. Sehingga dapat memberi manfaat bagi
mahasiswa Universitas Negeri Malang pada semua bidang
keahlian khususnya bidang Teknik Informatika .
Penulis,
Page ii
DAFTAR ISI
KATA PENGANTAR ..................................................................... i

DAFTAR ISI ............................................................................... iii
BAB 1 ........................................................................................ 1
PENGANTAR GRAFIKA KOMPUTER........................................... 1
A. Pengertian Grafika Komputer1
B. Sejarah Grafika Komputer2
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 Objek46
D. Latihan48
Page
iii
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 ANIMASI96
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 KOMPUTER125
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 MOUSE136
B. FUNGSI MOUSE..148
Page
iv
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 Dimensi163
C. Alur Proses Rendering Grafis 3D166
D. Sistem koordinat 3D..168
E. Primitive 3D.169
F. Transformasi Objek 3 Dimensi172
G. Contoh Program dalam Open GL..177
H. Contoh Implementasi Objek 3 Dimensi dalam Open
GL208
BAB 9 .................................................................................... 214
LIGHTING .............................................................................. 214
A. Pendahuluan214
B. Pencahayaan pada OpenGL dan Dunia Nyata..216
C. Cahaya Ambient, Diffuse, dan Specular219
D. Implementasi Pencahayaan (lighting) pada
OpenGL..224
E. Contoh Program226
BAB 10 .................................................................................. 260
TEXTURE ............................................................................... 260
Page v
A. Pendahuluan260
B. Konsep Texture Mapping262
C. Teknik-teknik Realisme dalam Kompuer Grafik..263
D. Teknik-teknik dalam Geometri267
E. Mip maps270
F. Texture maping..273
G. Object Texture274
H. Contoh penerapan material dan tekstur.275
DAFTAR PUSTAKA ................................................................. 336
KONTRIBUTOR.337
Page
vi
BAB 1
PENGANTAR GRAFIKA KOMPUTER
A. Pengertian Grafika Komputer

Menurut Suyoto (2003), grafika komputer (Computer
Graphic) dapat diartikan sebagai seperangkat alat yang terdiri
dari hardware dan software untuk membuat gambar, grafik
atau citra realistik untuk seni, game komputer, foto dan film
animasi. Sistem grafika komputer dapat dijalankan dengan
komputer pribadi (Personal Computer) atau workstation.
Grafika komputer semakin lama semakin pesat
perkembangannya sehingga definisi dari grafika komputer
dapat diartikan sebagai suatu studi tantang bagaimana
menggambar (membuta grafik) dengan menggunakan
komputer dan manipulasinya (merubah sedikit/transformasi/
animasi).
Pengertian grafik berbeda dengan image/citra, image
adalah gambar yang diperoleh dengan alat pengambil
gambar, sperti kamera, scanner, dll. Sedangkan grafik adalah
gambar yang dibuat dengan cara tertentu, yaitu cara yang ada
di grafik komputer. Grafik dan image termasuk
picture/gambar.
Page 1
B. Sejarah Grafika Komputer
Sejarah grafika komputer telah dimulai sejak jaman
dahulu kala yaitu ketika bangsa Mesir, Roma dan Yunani
berkomunikasi secara grafik. Beberapa lukisan terdapat pada
batu nisan orang Mesir dapat dikatakan sebagai lukisan
teknik. Perkembangan grafika komputer secara sederhana
dapat dibagi menjadi empat fase, yaitu :
1. Fase Pertama (1950) era grafika komputer interaktif
- Tidak begitu cepat karena teknologi, jumlah dan
harga komputer tidak mendukung.
- MIT berhasil mengembangkan komputer whirlwind
dengan tabung sinar katode (Cathode Ray Tube-CRT).
- Sudah menggunakan pena cahaya (light pen) yaitu
sebuah alat input bentuknya seperti pensil yang
digunakan untuk memilih posisi, menunjuk sesuatu
dan menggambar pada layar dengan pendeteksian
cahaya yang datang dari titik-titik pada layar CRT.
- Telah ada alat pemrograman otomatis (Automatic
Programming Tool)
2. Fase Kedua (1960) Jaman Penelitian/Riset Grafika
Komputer Interaktif
- Grafika interaktif modern telah ditemukan oleh Ivan
Sutherland.
Page 2
- Mengembangkan teknik interaktif dengan sarana
keyboard dan pena cahaya.
- Sejumlah projek penelitian dan produk Computer
Aided 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 3
kemudahan penggunaan komputer sebagai alat bantu aplikasi
grafik komputer interaktif. Pada saat ini grafika komputer
digunakan secara rutin dibidang ilmu pengetahuan, teknik,
kedokteran, bisnis, industri, pemerintahan, seni, hiburan,
pendidikan, periklanan, dan lain sebagainya.
1. Desain
Dalam proses desain grafika komputer terutama
digunakan pada sistem engineering dan arsitektur. Pada
umumnya Computer Aided Design (CAD) digunakan untuk
pembuatan desain mobil, bangunan, pesawat terbang, kapal,
komputer, tekstil, dan lain-lain. Pada beberapa aplikasi
desain, objek ditampilkan dalam bentuk wireframe, dimana
diperlihatkan keseluruhan bentuk, dengan bentuk internal
dari objek tersebut. Penggunaan wireframe bermanfaat bagi
designer untuk melihat isi dari objek tersebut. Contoh
perangkat lunak yang digunakan yaitu AutoCAD, 3D Studio
Max, dan Maya.
Gambar 1.1. Contoh Penggunaan 3D dengan 3Ds Max
Page 4
2. Grafik Presentasi
Bidang lain yang berhubungan dengan grafika
komputer adalah grafik presentasi yang dapat berupa
cetakan, slide, dan transparansi. Grafik presentasi biasanya
digunakan untuk melengkapi laporan keuangan, sains, data
ekonomi, dan lain-lain. Bentuk grafik presentasi tersebut
adalah chart, bar chart, pie chart, dan lain-lain.
Gambar 1.2. Grafik Presentasi
3. Computer Art
Metode grafika komputer digunakan dalam aplikasi
commercial art dan fine art. Seniman menggunakan
bermacam-macam perangkat lunak grafik, dan kadang
dilengkapi dengan perangkat keras khusus.
Contoh perangkat lunak yang digunakan yaitu Corel

Draw, Adobe Photoshop, Adobe Ilustrator, Macromedia, dan
sebagainya.
Page 5
Gambar 1.3. Adobe Photoshop CS
4. Film
Pada pembuatan film layar lebar, komputer banyak
digunakan untuk menunjang proses pemodelan, visualisasi,
dan editing. Misalnya dalam proses special effect, film
animasi. Toy Story (1995), merupakan film pertama yang di
produksi oleh The Walt Disney Company secara penuh
menggunakan teknologi komputer dan ilmu Grafik komputer.
Sejak saat itu, mulailah studio animasi digital lain untuk
membuat film serupa. diantaranya Blue Sky Studios (Fox),
DNA Productions (Paramount Pictures and Warner Bros.),
Onation Studios (Paramount Pictures), Sony Pictures
Animation (Columbia Pictures) dan DreamWorks.
Page 6
Gambar 1.4. Toy Story, salah satu contoh film animasi.
Kunci pembuatan film-film ini adalah sebuah aplikasi
komputer grafis yang disebut computer generated imagery
(CGI). Dengan perangkat lunak ini bisa diciptakan gambar 3D
lengkap dengan berbagai efek yang dikehendaki. Beberapa
software CGI populer antara lain Art of Illusion (bisa 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 7
5. Televisi
Grafika komputer dalam tayangan televisi juga dapat
berupa iklan, tampilan tiap acara, dan lainnya.
6. Video musik
Produksi video musik tidak terlepas dari grafika
komputer, diantaranya pembuatan promosi, cover atau
kemasan video, serta animasi yang mengiringi setiap lagu.
Proses editing video dan audio dilakukan dengan
menggunakan komputer.
7. Game
Berbagai game dapat dijalankan pada komputer PC,
video player dengan monitor TV, dan ada yang menggunakan
perangkat keras khusus. Alat input interaktif seperti mouse
dan joystick diperlukan untuk aplikasi game.
Gambar 1.5. Game Angry Bird Seasons

8. Pendidikan
Komputer sebagai alat bantu pendidikan (Computer
Assisted Instruction) sudah cukup dikenal. Komputer juga
Page 8
digunakan pada aplikasi-aplikasi bukan pengajaran untuk
menunjang sistem pendidikan, seperti mengolah data,
mencatat kehadiran, dan sebagainya. Aplikasi bidang
pengajaran dengan komputer sebagai alat bantunya,
diantaranya:
- Drill and Practice (latih dan praktek)

- CAI menggantikan pengajar untuk memberikan latihan
kepada siswa
- Tutorial (penjelasan) yakni sistem komputer digunakan
untuk menyampaikan materi ajaran
- Simulasi digunakan untuk mengkaji permasalahan yang
rumit pada bidang biologi, transportasi, ekonomi, dan lain-
lain.
Gambar 1.6. Aplikasi bidang pengajaran mata pelajaran

Matematika
Aplikasi bidang bukan pengajaran dengan alat bantu
komputer, diantaranya :
Page 9
- Computer Assisted Testing (Ujian Berbantuan Komputer):
komputer digunakan untuk sarana ujian.
- Computer Assisted Guidance (Pengarahan Berbantuan
Komputer): komputer digunakan sebagai sarana untuk
mencari informasi yang diperlukan.
- Computer Managed Instruction : komputer digunakan
untuk merencanakan pelajaran, evaluasi belajar, serta
memantau prestasi siswa.
9. Visualisasi
Ilmuwan, ahli kedokteran, analis bisnis, dan lain-lain
sering menggunakan banyak informasi suatu masalah dalam
mempelajari perilaku proses tertentu. Informasi tersebut
berisi ribuan data untuk memberikan gambaran hasil suatu
evaluasi. Data tersebut diproses sehingga mendapatkan hasil
dalam bentuk visual.
Virtual Reality adalah lingkungan virtual yang 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
10
Sedangkan visualisasi data adalah teknik-teknik
membuat image, diagram, atau animasi untuk
Mengkomunikasikan pesan. Visualisasi telah menjadi cara
yang efektif dalam mengkomunikasikan baik data atau ide
abstrak maupun nyata sejak permulaan manusia. Contoh:
visualisasi dari struktur protein, strutur suatu website,
visualisasi hasil data mining.
Contoh pengolahan citra dalam kehidupan sehari hari :
1.Bidang kesehatan, digunakan untuk rontgen tubuh manusia
yang berfungsi untuk mengetahui ada atau tidaknya kelainan
di tubuh.
2.Bidang visual, bisa digunakan untuk pemotretan lewat
satelit, GPS, foto kamera dan lain-lain
10. Image Processing

Image processing (pengolahan citra) merupakan
teknik untuk memodifikasi atau menginterpretasi gambar
yang ada, seperti foto dan rangkaian gambar film. Dua macam
prinsip pengolahan citra adalah :
- Meningkatkan kualitas gambar.
- Memberikan persepsi dari informasi visual, seperti pada
robotik.
Untuk melakukan pengolahan citra, pertama-tama
membuat digitasi dari foto atau membuat foto menjadi file
image. Selanjutnya metode digital dapat digunakan untuk
memodifikasi gambar sehingga mendapatkan kualitas yang
baik.
Page
11
11. Graphical User Interface (GUI)
Graphical interface (antarmuka grafik) banyak
digunakan dalam setiap aplikasi. Komponen utamanya adalah
window manager, dimana pengguna dapat mengatur
tampilan dari window. Interface juga menampilkan menu dan
icon untuk mempercepat pemilihan yang dilakukan oleh
pengguna.
D. Sistem Grafika Komputer

Graphics library/package (contoh: OpenGL) adalah
perantara aplikasi dan display hardware (Graphics System).
Application program memetakan objek aplikasi ke
tampilan/citra dengan memanggil graphics library. Hasil dari
interaksi user menghasilkan/modifikasi citra.
Penggunan user mengendalikan isi,struktur, dan

kemunculan objek serta menampilkan citra melalui suatu
komponen dasar visual feedback.
Komponen Dasar Sistem Grafik Interaktif meliputi:
- Masukan : mouse,tablet,dan stylus,peralatan

feedback,scanner,live video stream,dll.
- Proses & Penyimpanan .
- Keluaran : layar, printer berbasis kertas, perekam video,

non-linear, editor, dll.
Page
12
Gambar Komponen Sistem Pengolah Citra Digital
Sistem Interaktif Grafik Pertama, Sketchpad, ditemukan oleh

Ivan Sutherland (1963) di MIT.
1960, William Fetter, dimulainya pembuatan model

animasi
Page
13
1963, Ivan Shutherland (MIT), menggunakan sketcpad
(Manipulasi langsung, CAD), alat untuk menampilkan
vector.
1968, Evans & Shutherland.
1970, Pierre Beezier, pengembangan kurva Beezier.
1972 Ditayangkannya film Westworld, sebagai film
pertama yang menggunakan animasi komputer.
1974, Ed Catmull mengembangkan z-buffer.
1976, Jim Blinn mengembangkan texture dan bumo
mapping
1977, Film terkenal Star Wars menggunakan grafik
komputer
1979, Turner Whitted mengembangkan algoritma ray
tracing.
Pertengahan tahun 70an 80an, pengembangan Quest
for realism radiosity.
1982, Pengembangan grafik untuk menampilkan
partikel.
1984, Digunakan untuk menggantikan model fisik pada
film The Last Star Fighter.
1986, Film hasil produksi grafik komputer di masukkan
dalam academy award, Luxo Jr. (PIXAR).
1989, Film Tin Toy (PIXAR) memenangkan Academy
Award.
Page
14
1995, Produksi film 3D animasi panjang pertama Toy
Story (PIXAR & DISNEY).
Akhir tahun 90an, teknologi visualisasi interaktif untuk
ilmu pengetahuan dan kedokteran.
Tahun 2000 ditemukan perangkat keras untuk 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
15
Diperlukan memori khusus untuk buffer citra dengan scan out
sinkronous ke raster yang disebut framebuffer . Warna CRTs
lebih rumit/sulit. Menggunakan pola warna phospors di layer:
Delta electron gun arrangement

In-line electron gun arrangement
Sebuah electron gun memancarkan elektron, melalui

focusing system (sistem untuk menentukan fokus), dan
deflection system (sistem untuk mengatur pembelokan)
sehingga pancaran elektron mencapai posisi tertentu dari

lapisan fosfor pada layar. Kemudian, fosfor memancarkan
sinar kecil pada setiap posisi yang berhubungan dengan
pancaran elektron. Sinar yang dipancarkan dari fosfor
cepat hilang, maka diperlukan pengaturan supaya fosfor
tetap menyala. Hal ini dilakukan dengan cara refreshing,
yaitu menembakkan elektron berulang kali pada posisi yang
sama.
Focusing system pada CRT diperlukan untuk mengarahkan

pancaran elektron pada suatu titik tertentu dari lapisan
fosfor. Pengaturan fokus dapat dilakukan pada electric dan
magnetic field. Dengan electronic focusing, pancaran
Page
16
elektron melewati metal electrostatic yang berfungsi
sebagai lensa untuk mengatur fokus dari pancaran
elektron ke tengah monitor.
Resolusi adalah jumlah titik per centimeter yang dapat

ditempatkan menurut arah horizontal dan vertikal.
Resolusi tergantung pada tipe fosfor, intensitas yang
ditampilkan, serta focusing dan deflection system.
Liquid Crystal Display (LCD) mampu menampilkan

gambar labih halus dengan menggunakan teknologi molekul
kristal yang teranyam dan mempolarisasi cahaya. LCD
berfungsi sebagai katup cahaya yang tergantung pada cahaya
dari luar. LCD biasanya digunakan untuk suatu system yang
kecil, seperti computer laptop dan kalkulator.
Plasma, mempunyai cara kerja yang mirip dengan lampu

neon. kapsul yang berisi gas yang di gerakkan oleh medan
listrik menghasilkan UV. UV menggerakkan phosfor dan
phosfor menghasilkan beberapa warna.
Alat utama untuk menampilkan output pada sistem

grafika adalah video monitor. Operasi sebagian besar video
Page
17
monitor menggunakan Teknologi Cathode Ray Tube
(CRT) walaupun ada juga yang menggunakan teknologi lain.
Secara garis besar teknologi CRT dapat digambarkan sebagai
berikut :
a. Refreshing, yaitu menembakkan elektron

berulang ulang pada posisi yang sama untuk
menjaga agar fosfor tetap menyala.
b. Persistence, yaitu berapa lama suatu jenis
fosfor dapat menyala (jenis fosfor ada yang
low persistence dan ada yang high
persistence)
c. Resolution / resolusi, yaitu jumlah
maksimum titik yang dapat dihasilkan tanpa
tupang tindih (horisontal x vertikal).
d. Aspec Ratio, yaitu perbandingan jumlah titik
vertikal dan horisontal.
e. Pixel, yaitu satu titik di layar monitor.
Raster Scan Display

Jenis monitor ini paling banyak digunakan, yaitu
pancaran elektron bergerak ke seluruh layar baris per baris
dari atas ke bawah. (digunakan oleh TV).
Page
18
Random Scan Display
Pada random scan display pancaran elektron hanya
diarahkan ke bagian layar dimana gambar akan dibuat disebut
juga Vektor Display, strock display atau calligraphic display.
Color Monitor CRT

Color CRT menampilkan gambar dengan kombinasi fosfor
yang memancarkan sinar warna yang berbeda. Dengan
menggabungkan sinar dari fosfor yang berbeda, tingkat dari
warna yang berbeda.
Terdapat 2 teknik dasar untuk mendapatkan warna, yaitu :
a. Beam Penetration
Dua lapisan fosfor (biasanya red dan green) dilapiskan
pada bagian dalam, dan warna yang dihasilkan
tergantung dari seberapa besar pancaran elektron
menembus fosfor, tetapi warna yang dihasilkan
kurang banyak dan kurang baik jika dibandingkan
dengan teknologi lain. Digunakan untuk gambar
berwarna dengan random scan monitor,
b. Shadow Mask
Shadow mask mempunyai tiga macam fosfor warna
pada titik pixel (red, green dan blue). CRT mempunyai
3 elektron gun untuk tiap warna, warna dihasilkan
dari perbedaan intensitas dari tiap-tiap elektron gun.
Color CRT dalam sistem grafika dirancang sebagai RGB

monitor. Monitor ini menggunakan metode shadow mask
dan mengambil tingkat intensitas untuk setiap electron
gun (red, green, blue) langsung dari sistem komputer
tanpa pemrosesan antara.
Page
19
Flat Planel Display
Merupakan video display merupakan kelas video yang

mengurangi volume, berat dan penggunaan power jika
dibandingkan CRT, FPD digunakan untuk kalkulator, Video
game saku, TV kecil, Laptop dll.
Terdapat 2 jenis :
a. Emmisive Display = mengkonversikan energi listrik menjadi
sinar. Cth. Plasma Panel.
b. Nonemissive Display / Noneemitters = menggunakan efek
optik untuk mengkonversikan sinar matahari atau sinar dari
sumber lain ke dalam pola grafik. Cth. Liquid Crystal display
Page
20
BAB 2
OPENGL dan GLUT
A. SEJARAH OPENGL
Tahun 1980-an, mengembangkan perangkat lunak
yang dapat berfungsi dengan berbagai hardware grafis adalah
tantangan nyata. Pengembang perangkat lunak antarmuka
dan kebiasaan menulis driver untuk setiap perangkat keras.
Ini mahal dan mengakibatkan banyak duplikasi usaha.
Pada awal 1990-an, Silicon Graphics (SGI) adalah

seorang pemimpin dalam grafis 3D untuk workstation.
Mereka IRIS GL API dianggap keadaan seni dan menjadi
standar industri de facto, membayangi terbuka berbasis
standar PHIGS. Ini karena GL IRIS dianggap lebih mudah
digunakan, dan karena itu mendukung modus langsung
rendering. By contrast, Sebaliknya, PHIGS dianggap sulit untuk
digunakan dan ketinggalan zaman dalam hal fungsionalitas.
SGIs pesaing (termasuk Sun Microsystems, 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
21
termasuk windowing, keyboard dan mouse API, sebagian
karena dikembangkan sebelum Sistem X Window dan Suns
NEWS sistem dikembangkan. Selain itu, SGI memiliki sejumlah
besar pelanggan perangkat lunak; dengan mengubah ke
OpenGL API mereka berencana untuk mempertahankan
pelanggan mereka terkunci ke SGI (dan IBM) hardware untuk
beberapa tahun sementara pasar dukungan untuk OpenGL
matang. Sementara itu, SGI akan terus berusaha untuk
mempertahankan pelanggan mereka terikat pada hardware
SGI dengan mengembangkan maju dan kepemilikan Iris
Inventor dan Iris Performer pemrograman API. Akibatnya, SGI
merilis standar OpenGL.
B. PENGENALAN OPENGL
OpenGL adalah sebuah program aplikasi interface
yang digunakan untuk mendefinisikan komputer grafis 2D dan
3D. Program lintas-platform API ini umumnya dianggap
ketetapan standar dalam industri komputer dalam interaksi
dengan komputer grafis 2D dan juga telah menjadi alat yang
biasa untuk digunakan dengan grafis 3D. Singkatnya, Open
Graphics Library, OpenGL menghilangkan kebutuhan untuk
pemrogram untuk menulis ulang bagian grafis dari sistem
operasi setiap kali sebuah bisnis akan diupgrade ke versi baru
dari sistem. Fungsi dasar dari OpenGL adalah untuk
mengeluarkan koleksi perintah khusus atau executable ke
sistem operasi. Dengan demikian, program ini bekerja dengan
perangkat keras grafis yang ada yang berada pada hard drive
atau sumber tertentu lainnya. Setiap perintah dalam
dirancang untuk melakukan tindakan tertentu, atau memulai
efek khusus tertentu yang terkait dengan grafis.
Page
22
OpenGL adalah suatu spefikasi grafik yang low-level
yang menyediakan fungsi untuk pembuatan grafik primitif
termasuk titik, garis, dan lingkaran. OpenGL digunakan untuk
keperluan-keperluan pemrograman grfis.OpenGL bersifat
Open-Source, multi-platform dan multi-language serta
digunakan mendefinisikan suatu objek, baik objek 2 dimensi
maupun objek 3 dimensi. OpenGL juga merupakan suatu
antarmuka pemrograman aplikasi (application programming
interface (API) yang tidak tergantung pada piranti dan
platform yang digunakan, sehingga OpenGL dapat berjalan
pada sistem operasi Windows, UNIX dan sistem operasi
lainnya.
OpenGL pada awalnya didesain untuk digunakan pada

bahasa pemrograman C/C++, namun dalam
perkembangannya OpenGL dapat juga digunakan dalam
bahasa pemrograman yang lain seperti Java, Tcl, Ada, Visual
Basic, Delphi, maupun Fortran. Namun OpenGL di-package
secara berbeda-beda sesuai dengan bahasa pemrograman
yang digunakan. Oleh karena itu, package OpenGL tersebut
dapat di-download pada situs http://www.opengl.org sesuai
dengan bahasa pemrograman yang akan digunakan.
OpenGl melayani dua tujuan :
Untuk menyembunyikan kompleksitas dari interfacing

dengan berbagai 3D accelerators, memamerkan oleh
programmer dengan satu, seragam API.
Untuk menyembunyikan kemampuan yang berbeda
dari hardware platform, oleh semua yang memerlukan
Page
23
mendukung implementasi penuh fitur opengl set
(menggunakan software emulation jika diperlukan).
C. EVOLUSI OPENGL
Pendahulu openGL adalah IRIS GL dari Silicon
Grapics.Padamulanya adalah library grafis 2D,yang berefolusi
menjasi API program 3D untuk workstation canggih milik
perusahaan tersebut.
OpenGL adalah hasil dari usaha SGI untuk

mengembangkan dan meningkatkan kemampuan portable
IRIS.API grafis yang baru akan menawarkan kemampuan IRIS
GL tetapi dengan standar yang lebih terbuka,dengan input
dari pembuatan hardware lain dan sistem operasi lain,dan
akn memudahkan adaptasi ke hardware platform dan sistem
operasi lain.
Untuk lebih mempopulerkan openGL SGI mengijinkan

pihak lain untuk mengembangkan standart openGL,dan
beberapa vendor menyambut hal tersebut dengan
membentuk OpenGL Architecture Review Board (ARB) Pendiri
openGL adalah SGI,Digital Equepment Corporation,IBM,Intel
dan Microsoft,pada tanggal 1 juli 1992 OpenGL versi 1.0
diperkenalkan.
Letak openGL dalam aplikasi gambar di atas pada

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

Merupakan pengembangan dari OpenGL yang
didesain untuk aplikasi dengan level kecil hingga
menengah dan menggunakan callback functions
untuk menambahkan interaksi dari user.
Untuk pemrograman OpenGL menggunakan C++,
diperlukan library tambahan yaitu :
1. glut.h yang dicopy ke drive:\Program Files\Microsoft
Visual Studio 2010\Vc\include\GL
2. glut32.lib yang dicopy ke drive:\Program
Files\Microsoft Visual Studio 2010\Vc\
3. libglut32.dll yang dicopy ke drive:\Windows\System
Klasifikasi Fungsi
Primitive : berupa geometric, imagesAttribute :

berupa color, line type, light, texture
Viewing : berupa virtual cameraControl : turn fuction
ON / OFF
Page
25
Windowing : window, mouse, keyboard
E. CARA KERJA OPENGL

OpenGL lebih mengarah pada prosedural daripada
sebuah deskriptif API grafis.Untuk mendeskripsikan scene dan
bagaimana penampilannya,sebenarnya programer lebih tau
untuk menentukan hal-hal yang dibutuhkan untuk
menghasilkan efek yang di inginkan.Langkah tersebut
termasuk memanggil banyak perintah openGL,perintah
tersebut digunakan untuk menggambarkan grafis primitif
seperti titik,garis dan poligon dalam tiga dimensi.Sebagai
tambahan,openGL mendukung lighting,shading,texture
mapping,blending,transparancy,dan banyak kemampuan efek
khusus lainnya.
OpenGL mempunyai bnayak fungsi dan penggunaan

perintah yang sangat luas, penggunaan openGL
membutuhkan library tambahan yang harus di letakkan pada
direktory system dari windows (OS),yaitu :
OpenGL32.dll
Glu32.dll
Glut32.dll
Inisialisasi awal
Inti dari tahapan ini adalah mengatur view port dan
persepektif untuk penampilan obyek ke dalam layar
monitor,viewport adalah besarnya layar monitor(image) yang
Page
26
dipakai untuk menampilkanobyek,sedangkan persepektif
yang dimaksud adalah pengaturan sumbu z dalam
penampilan obyek 3 dimensi,sehingga user dapat melihat
obyek seolah-olah dalam bidang 3 dimensi (X-Y-Z),selain itu
penggambaran obyek yang dilakukan oleh programer juga
dapat menggunaan koordinat 3 dimensi. Selain ke dua tujuan
di atas pada tahap ini juga dilakukan koneksi awal dengan
library openGL, koneksi ini dilakukan supaya fungsi-fungsi
yang di sediakan openGL dapat digunakan. Fungsi/prosedur
yang digunakan :
LoadGlut(glut32.dll) - pemanggilan library openGL
InitGL inisialisasi openGL awal yang harus dilakukan
glViewport untuk pengaturan viewport
glMatrixMode pengaturan viewport
gluPerspective pengaturan persepektif
Contoh script untuk inisialisasi openGL :

Try
LoadGlut(glut32.dll);
InitGL;
Exept on e :=
exeption
do
Begin
Page
27
messageDlg{ e.message, mtError, [mbOk],};
Halt {1}; End;
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
28
OpenGL memiliki lebih dari 200 fungsi. Fungsi tersebut
bisa dikelompokkan menjadi :
Fungsi primitif, menentukan elemen yang bisa

menghasilkan gambar di layar. Fungsi ini terdiri dari 2
jenis, yaitu primitif geometric seperti polygon (segi
banyak) yang bisa dibuat menjadi dua, tiga, atau
empat dimensi, dan primitif gambar seperti bitmaps.
Fungsi atribut, mengontrol tampilan dari primitif.
Fungsi ini menentukan warna, jenis garis, properti
material, sumber cahaya, dan tekstur.
Fungsi pandangan, menentukan properti kamera.
OpenGL menyediakan sebuah virtual kamera yang
bisa diposisikan dan diorientasikan relatif ke obyek
yang ditentukan dengan fungsi primitif. Lensa kamera
juga bisa dikendalikan sehingga bisa dihasilkan sudut
yang lebar dan pandangan telefoto (jarak jauh).
Fungsi windowing, fungsi ini mengendalikan windows
pada layar dan penggunaan dari mouse dan
keyboard.
Fungsi kontrol, menghidupkan macam-macam fitur
OpenGL. Fungsi-fungsi OpenGL dimuat didalam 2
library yang disebut dengan gl dan glu (atau GL dan
GLU). Library yang pertama, adalah fungsi utama dari
OpenGL, berisi semua fungsi OpenGL yang
Page
29
dibutuhkan sedangkan yang kedua, openGL Utility
Llibrary (GLU) memuat fungsi yang ditulis
menggunakan fungsi dari library utama dan sangat
membantu bagi pengguna. Fungsi utama mempunyai
nama yang diawali dengan gl seperti glVertex3f(),
sedangkan fungsi didalam GLU mempunyai nama
yang diawali dengan glu seperti gluOrtho2D().
F. SET UP PROJECT BARU

1. Buatlah project baru pada Visual Studio dengan nama
prak0.
Gambar 1.1a New Project Template
Page
30
Gambar 1.1b New Project Application Setting
2. Buka windows explorer pada direktori project prak0

dan buatlah direktori baru di dalamnya dengan nama
include dan tempatkan file glut.h di dalamnya.
3. Kembali ke folder project dan copy-paste file

glut32.libdan glut32.dll ke folder project prak0.
Gambar 1.2 Penambahan file untuk grafika komputer menggunakan

GLUT
4. Lakukan konfigurasi pada properties projek prak0.
Page
31
Gambar 1.3 Konfigurasi pada Project Properties
Gambar 1.4a menambah lokasi file include
Gambar 1.4b Pemilihan folder yang berisi glut.h
Page
32
5. Menciptakan file baru dengan nama cg-0.cpp.
Gambar 1.5a Menambahkan item baru
Gambar 1.5b Menambahkan file c++ baru
Page
33
BAB 3
PRIMITIF OBJEK
A. Definisi Primitif Objek

Primitif objek merupakan salah satu subbab dari grafika
komputer yang terdiri dari titik, garis dan bangun dua
dimensi. Dalam grafika komputer penghasilan citra
menggunakan primitive grafik dasar, primitif ini memudahkan
untur merender atau menggambar pada layar monitor
sebagaimana penggunaan persamaan geometri sederhana.
Contoh primitive grafika dasar antara lain : titik, garis, kurva,
fill area dan text. Objek kompleks dapat dibuat dengan
kombinasi dari primitive ini. Misalkan, Poligaris atau yang
dapat didefinisikan sebagai urutan garis lurus yang saling
terhubung. Secara umum algoritma grafis memiliki
persamaan yaitu bagaimana menampilkan hasil. Primitive
grafis yang umum dijelaskan pada tabel berikut :
Page
34
Input primitif grafik dan pirantinya sebagaimana banyak
piranti dan cara untuk pemaparan output grafika komputer,
demikian pula untuk piranti inputnya, yaitu :
Keyboards
Tombol
Mouse
Graphics tablets
Joysticks dan trackballs
Knobs
Space balls dan data gloves
Masing-masing input ini mempunyai cara masing-masing

untuk mengirimkan input ke komputer. Input ini
diinterpretasikan oleh aplikasi grafika komputer dan
dipresentasikan ke pengguna melalui layar monitor. Data
yang diinputkan disebut primitif input. Beberapa primitif
input diantaranya sebagai berikut :
Titik
Strings (keyboards, suara)
Pilihan (tombol, layar sentuh)
Valuators (analogue dial)
Locator (mouse)
Ambil (pemilihan sebagian citra, mouse, lightpen)
Page
35
Fungsi dasar menggambar titik. Berikut adalah beberapa
fungsi didalam menggambar suatu titik, antara lain :
- glVertex2i(x,y)
Yaitu suatu fungsi untuk menggambar titik pada
koordinat x dan y, dengan nilai satuan berupa integer.
Contoh glVertex2i(10,10)
- glVertex2f(x,y)
koordinat x dan y, dengan nilai satuan berupa float.
Contoh glVertex2f(10.0,10.0)
- glVertex2d(x,y)
koordinat x dan y, dengan nilai satuan berupa double.
Contoh glVertex2d(10.0,10.0);
Cara pendefinisian primitive objek yang digunakan dalam

pembuatan suatu objek :
#define GL_POINTS
Primitif objek ini dipergunakan untuk menciptakan
suatu titik.
# define GL_LINES
Primitif objek ini adalah suatu primitive objek guna
menciptakan suatu garis.
# define GL_LINE_LOOP
# define GL_LINE_STRIP
Page
36
# define GL_TRIANGLES
Triangle atau segitiga adalah tiga buah titik yang
terhubung menjadi suatu segitiga dengan blok di
tengahnya.
# define GL_TRIANGLES_STRIP
Pada triangles strip jumlah vertex yang dipergunakan
adalah 4 buah vertex
# define GL_TRIANGLE_FAN
Triangles fan adalah pembuatan suatu objek dengan
menggunakan segitiga dimana hanya menggunakan 1
titik pusat saja.
# define GL_QUADS
Quad atau segempat adalah empat buah titik yang
terhubung menjadi quat segi empat dengan blok di
tengahnya.
# define GL_QUADS_STRIP
Pada quads strip 4 buah vertex merupakan 1
kelompok.
Langkah rendering pada quads strip :
a. Nomor yang berhadap (membentuk 2 garis yang

sejajar
b. Nomor ganjil dengan nomor ganjil dipertemukan
c. Nomor genap dengan nomor genap dipertemukan
d. Garis yang tersisa akan dipertemukan
# define GL_POLYGON
Page
37
Polygon merupakan suatu fungsi yang mirip dengan
polyline, tetapi menghasilkan kurva tertutup dengan
blok warna (fill). Rendering yang dimiliki oleh
GL_POLYGON sama dengan GL_TRIANGLE_FAN.
Catatan :
a) glLineWidth yaitu suatu fungsi yang berfungsi

untuk mengatur tebalnya garis,
b) glPointSize yaitu suatu fungsi yang berfungsi
untuk mengatur besarnya suatu objek,
c) gluOrtho2D yaitu suatu fungsi untuk mengatur
proyeksi hasil eksekusi dan mendefinisikan
besarnya sistem koordinat dengan urutan 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
38
glColor3f(1,1,0);//yellow
glColor3f(1,1,1);//white
Contoh SegiEmpat yang menggunakan Primitive Objek :
Pada primitive object dapat digunakan untuk membuat

segi empat berikut adalah pembuatan suatu objek berupa
segiempat, pertama mengalami Proses Rendering :
SegiEmpat (posx, posy, w, h)
Maka sintaks pembuatan segiempat :
glBegin (GL_QUADS);
glVertex2i (posx, posy);
glVertex2i (posx-w, posy);
glVertex2i (posx-w, posy-h);
glVertex2i (posx,posy-h);
Page
39
B. Algoritma Pembentukan Objek
Algoritma Pembentukan Garis
Garis dibuat dengan menentukan dua endpoint atau
posisi titik awal dan akhir dari suatu garis. Kemudian
peralatan output membuat garis sesuai posisi titik-titik
tersebut.
Untuk peralatan analog seperti plotter dan

random-scan display garis lurus dapat dihasilkan dengan
halus. Pada peralatan digital garis lurus dihasilkan
dengan menetapkan titik diskrit antara titik awal dan
akhir. Posisi titik diskrit sepanjang garis lurus data
diperhitungkan dari persamaan garis tersebut. Untuk
menentukan nilai suatu titik, dapat digunakan prosedur
dasar dimana x sebagai nilai kolom pixel dan y sebagai
nilai scan line sebagai berikut :
Page
40
setPixel(x,y)
bila nilai x dan y sudah tersimpan pada frame buffer

untuk dapat menampilkannya pada layer menggunakan
fungsi dasar getPixel(x,y).
Algoritma DDA
Algoritma Digital Differential Analyzer (DDA)
adalah algoritma pembentukan garis berdasarkan
perhitungan dx maupun dy dengan menggunakan rumus
dy = m.dx. Garis dibuat dengan menentukan dua
endpoint yaitu titik awal dan titik akhir. Setiap koordinat
titik yang membentuk garis diperoleh dari perhitungan
kemudian dikonversikan menjadi nilai integer.
Keuntungan dari algoritma ini adalah tidak perlu

menghitung koordinat berdasarkan persamaan yang
lengkap (menggunakan metode offset). Sedangkan
kerugiannya adalah adanya akumulasi Round-off errors,
sehingga garis akan melenceng dari garis lurus, selain itu
operasi round-off juga menghabiskan waktu. Algoritma
pembentukan garis DDA adalah sebagai berikut :
void lineDDA (int x0, int y0, int 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
41
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
42
1. Persamaan tersebut mengandung perhitungan akar yang
operasinya memakan waktu.
2. Timbul gap yang cukup signifikan pada lingkaran ketika
digambarkan.
Lingkaran dapat juga digambarkan dengan
menggunakan persamaan koordinat polar, tetapi fungsi
trigonometri juga membutuhkan cost yang tidak sedikit
sehingga algoritma yang disusun tidak akan efisien.
Untuk mengatasi masalah yang timbul dari

penerapan koordinat polar maupun rectangular,
Bresenham menyusun suatu algoritma pembentukan
lingkaran yang hanya menggunakan aritmetika integer.
Secara prinsip algoritma ini sejenis denga algoritma
penggambaran garis yang disusun oleh orang yang sama.
Lingkaran merupakan objek yang simetris sehingga
karakteristik ini dapat dimanfaatkan untuk mengurangi
pekerjaan pada saat menggambar lingkaran. Lingkaran
dibagi menjadi 8 oktan (lihat gambar 3.x), misalkan kita
menyusun algoritma untuk menggambarkan lingkaran di
oktan pertama, maka koordinat untuk 7 oktan
selanjutnya dapat ditentukan pada table berikut :
Page
43
Gambar lingkaran dengan 8 oktan :
Tahapan penggambaran lingkaran dengan

menggunakan algoritma yang dikenal dengan nama
algoritma midpoint ini adalah sebagai berikut :
Page
44
1. Input jari-jari r dan koordinat pusat lingkaran (xc, yc),
kemudian tentukan koordinat untuk titik awal yaitu (xo,
y0) = (0, r).
2. 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
45
C. Contoh Program Primitif Objek
Primitif Point (GL_POINTS)
Page
46
Primitif (GL_LINES)
Page
47
D. Latihan
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.

prak1-LineStrip. Beri nilai x0, x1, x2, x3 dan y0, y1, y2,
y3 dengan nilai integer bebas tapi tetap dalam kanvas
dan menghasilkan tampilan bangun simetris terbuka.
a. Sajikan screenshotnya.
b. Jelaskan proses rendering vertex untuk
GL_LINE_STRIP pada bangun anda berupa ilustrasi
gambar.
Page
48
prak1-Poligon. Beri nilai x0, x1, x2, x3,x4dan y0, y1,
y2, y3,y4 dengan nilai integer bebas tapi tetap dalam
kanvas dan menghasilkan tampilan bangun simetris
tertutup.
a. Sajikan screenshotnya
b. Jelaskan proses rendering vertex untuk
GL_LINE_LOOP pada bangun anda berupa ilustrasi
gambar.
Page
49
BAB 4
Transformasi Objek
Grafika komputer merupakan bidang yang menarik minat

banyak orang. Salah sub bagian dari grafika komputer adalah
pemodelan objek (object modelling). Dalam pemodelan objek
dua dimensi (2D), didapati berbagai objek dapat dimodelkan
menurut kondisi tertentu, objek yang dimodelkan itu perlu
dimodifikasi. Pemodifikasian objek ini dapat dilakukan dengan
melakukan berbagai operasi fungsi atau operasi transformasi
geometri. Transformasi ini dapat berupa transformasi dasar
ataupun gabungan dari berbagai transformasi geometri.
Contoh transformasi geometri adalah translasi, penskalaan,
putaran (rotasi), balikan, shearing dan gabungan.
Transformasi ini dikenal dengan transformasi affine. Pada
dasarnya, transformasi ini adalah memindahkan objek tanpa
merusak bentuk.
Tujuan transformasi adalah :
Merubah atau menyesuaikan komposisi pemandangan

Memudahkan membuat objek yang simetris
Melihat objek dari sudut pandang yang berbeda
Memindahkan satu atau beberapa objek dari satu
tempat ke tempat lain, ini biasa dipakai untuk animasi
komputer.
Secara substansi, Grafika Komputer adalah proses
transformasi dari model 3D obyek berupa informasi geometri
Page
50
bentuk, informasi pose, warna, texture, dan pencahayaan
menjadi citra 2D (cf. Gambar 4.1).
Gambar 4.1. Grafika Komputer: Transformasi dari Model 3D

Obyek menjadi Citra
Jika dilihat secara analogi, hal di atas mirip dengan cara

kerja kamera dalam mengambil foto dalam bidang fotografi
(cf. Gambar 4). Model ini disebut model sintesis kamera.
Page
51
Gambar 4.2. Analogi Pengambilan Gambar oleh Kamera
Untuk menghasilkan gambar dari obyek dengan skenario

tertentu kita harus melakukan beberapa proses, yaitu:
- Melakukan pengesetan kamera dalam bentuk setting

lensa kamera (Transformasi Proyeksi),
- Mengarah kamera dengan mengatur letak tripod
(Transformasi Viewing),
- Mengatur letak obyek (Transformasi Modeling), dan
Page
52
- Mengatur skala dan layout dari foto (Transformasi
Viewport)
A. Translasi
Transformasi translasi merupakan suatu operasi yang
menyebabkan perpindahan objek 2D dari satu tempat ke
tempat yang lain. Perubahan ini berlaku dalam arah yang
sejajar dengan sumbu X dan sumbu Y.
Translasi dilakukan dengan penambahan translasi pada

suatu titik koordinat dengan translation vector, yaitu (tx,ty),
dimana tx adalah translasi menurut sumbu x dan ty adalah
translasi menurut sumbu y. Koorinat baru titik yang
ditranslasi dapat diperoleh dengan menggunakan rumus :
Translasi adalah transformasi dengan bentuk yang tetap,

memindahkan objek apa adanya. Setiap titik dari objek akan
ditranslasikan dengan besaran yang sama.Dalam operasi
translasi, setiap titik pada suatu entitas yang ditranslasi
bergerak dalam jarak yang sama. Pergerakan tersebut dapat
berlaku dalam arah sumbu X saja, atau dalam arah sumbu Y
saja atau keduanya.
Translasi juga berlaku pada garis, objek atau gabungan

objek 2D yang lain. Untuk hal ini, setiap titik pada garis atau
objek yang ditranslasi dalam arah x dan y masing -masing
sebesar tx,ty.
Page
53
Contoh
Untuk menggambarkan translasi suatu objek berupa

segitiga dengan koordinat A(10,10) B(30,10) dan C(10,30)
dengan tx,ty(10,20), tentukan koordinat yang barunya?
Jawab
A : x=10+10=20
y=10+20=30
A=(20,30)
B : x=30+10=40
y=10+20=30
B=(40,30)
C : x=10+10=20
y=30+20=50
C=(20,50)
Program di bawah ini akan memberikan ilustrasi

bagaimana transformasi translate diimplementasikan.
#include <stdlib.h>
#include <glut.h>
void drawQuad(){
glBegin(GL_QUADS);
glVertex2f(0.,0.);
glVertex2f(0.,50.);
glVertex2f(200.,50.);
Page
54
glEnd();
void render(){
glClear(GL_COLOR_BUFFER_BIT);
//drawKoordinat
glColor3f(1.,1.,1.);
drawQuad();
glTranslatef(0,50,0);
drawQuad();
glFlush();
void main (int argc, char **argv) {
glutInit (&argc, argv);
glutInitWindowPosition(100,100);
glutInitWindowSize(480,480);
glutCreateWindow("Translasi");
gluOrtho2D(-320.0,320.0,-320.0,320.0);
Page
55
glutDisplayFunc(render);
glutMainLoop();
Dengan output sebagai berikut:
Gambar 4.3 Translasi
B. Rotate
Ada beberapa hal mendasar yang perlu di pelajari dan di
pahami untuk bisa membuat dan mengkreasikan suatu
bentuk atau bidang dalam grafika komputer.
Banyak istilah2 dasar yang familiar di telinga tp sudah

tidak di temukan lagi apa maksud dan pengertiannya," Matrik
rotasi, translasi, dan seterusnya. Untuk memindah atau
merubah posisi suatu model/bentuk tidak bisa terlepas dari
yang namanya Tranformasi. Ada beberapa jenis tranformasi
yaitu: Rotasi, Translasi, Dilatasi, dan refleksi. Yang saya bahas
disini adalah rotasi dan translasi.
Rotasi artinya berputar. Ketika suatu bentuk benda

sengaja diputar maka perlu di tentukan pusat dan besar
Page
56
sudut putar. sedangkan translasi adalah pergeseran. Benda
yang telah berpindah dari pusatnya berarti mengalami
pergeseran, yaitu apakah dia bergerak maju mundur ataupun
menuju ke atas bawah.
Rotasi berbeda dengan translasi karena perubahan posisi

pada translasi tidak mengacu pada suatu titik tertentu.
Keistimewaan dari rotasi adalah jarak antara titik pusat
dengan masing-masing bagian dari obyek yang diputar akan
selalu tetap, seberapa jauh pun obyek itu diputar.
Pada sebuah game yang menggunakan grafik vektor dan

grafik bitmap, rotasi dan translasi sangat di butuhkan.
Dengan basic4GL kita bisa menggunakan source code yang
tersedia yaitu :
glTranslatef (x, y, z) digunakan untuk merubah titik posisi

awal sumbu koordinat menuju posisi yang ditentukan sesuai
koordinat x,y, dan z.
glRotatef (angle, x, y, z) digunakan untuk memutar suatu

bidang pada sudut tertentu (angle).
Gambar 4.4 Rotasi dan Translasi
Page
57
Untuk membangkitkan rotasi pada objek 3D kita harus
membuat aksis dari rotasi dan jumlah sudut rotasi . Tidak
seperti melakukan rotasi pada objek 2D yang semua proses
transformasi dilakukan di koordinat xy , sebuah rotasi objek
tiga dimensi bisa dilakukan di space manapun.
Dengan menggunakan notasi matrix, maka besaran R

bisa dikatakan sbb:
R = cos(0) sin(0)
sin(0) cos(0)
Gambar 4.5 Rotasi objek 3D pada Sumbu x , y , dan z
Fungsi Dasar Pembentuk Objek
Contoh:
Semisal kita ingin membuat pergerakan planet dan bulan.
Void Keterangan
Page
58
void Rotate(void) Rotasi
{ pergerakan
hari += 2; untuk planet
if(hari > 360)
dan bulan. Hari
hari = hari - 360;
menunjukkan
tahun += .1;
perputaran
if(tahun > 360)
bulan dan tahun
tahun = tahun - 360;
glutPostRedisplay(); menunjukkan
} perputaran
planet
void garisOrbit(float rad, float Garis orbit
inc) untuk
{ menunjukkan
glPushMatrix();
perputaran
planet yang
float y = 0.0;
beraturan dan
glColor3f(1.0, 1.0, 1.0);
tetap pada
glBegin(GL_POINTS); tempatnya
for(float sudut = 0; sudut

<=
360; sudut+=inc)
{
float x =
rad*sin((sudut)*phi/180);
float z =
rad*cos((sudut)*phi/180);
Page
59
glVertex3f(x, y, z);
}
glEnd();
glPopMatrix();
}
void merkurius(void) Penggambaran

{ planet dan
glPushMatrix(); rotasinya. Untuk
garisOrbit(5.5, 1);
pembuatan
planet hampir
glRotatef(tahun*9, 0.0, 1.0,
sama fungsi
0.0);
yang
glTranslatef(5.5, 0.0, 0.0);
digunakannya,
glutSolidSphere(0.4, 10, yang

8); membedakanny
glPopMatrix(); a hanya nilai
} dari setiap
komponen.
void fungsiKeyboard(void) Void ini untuk
{ interaksi yang
if(GetAsyncKeyState(VK_LEFT) dilakukan oleh
)
keyboard yaitu
{
1. Dengan
jarakX +=
menekan
(cos((rot+90)*phi/180))/2;
Page
60
jarakZ += - tombol Up
(sin((rot+90)*phi/180))/2; maka
} gambar akan
menjauhi
if(GetAsyncKeyState(VK_RIGHT
layar
))
2. Dengan
{
menekan
jarakX += (cos((rot-
90)*phi/180))/2; tombol
jarakZ += -(sin((rot- Down maka

90)*phi/180))/2; gambar akan
} mendekati
layar
if(GetAsyncKeyState(VK_UP)) 3. Dengan
{
menekan
jarakX +=
tombol Right
(cos(rot*phi/180)*
maka
cos(pitch*phi/180))/2;
gambar akan
jarakZ += -
bergerak ke
(sin(rot*phi/180) *
cos(pitch*phi/180))/2; arah kiri
jarakY += 4. Dengan
sin(pitch*phi/180); menekan
} tombol Left
maka
if(GetAsyncKeyState(VK_DOWN) gambar akan
)
bergerak ke
{
arah kanan
Page
61
jarakX -=
(cos(rot*phi/180)*
jarakZ -= -
(sin(rot*phi/180) *
jarakY -=
sin(pitch*phi/180);
}
xlook = jarakX +
(cos(rot*phi/180) *
cos(pitch*phi/180));
zlook = jarakZ -
(sin(rot*phi/180) *
cos(pitch*phi/180));
ylook = jarakY +
sin(pitch*phi/180);
xup = cos(rot*phi/180) *
cos((pitch+90)*phi/180);
zup = -sin(rot*phi/180) *
cos((pitch+90)*phi/180);
yup =
sin((pitch+90)*phi/180);
glutPostRedisplay();
}
Page
62
void PassiveMouse(int x, int y) Void ini untuk
{ interaksi yang
if( (lastx - x) >50 || digunakan oleh
(lastx - x) <-50 ||
mouse.
(lasty - y) >50 ||
Pergerakannya
(lasty - y) <-50 )
sesuai dengan
{
ke arah mana
lastx = x;
lasty = y; mouse bergerak
rot += ((lastx - x)/2);

lastx = x;
if(rot>360)
rot-=360;
if(rot<0)
rot+=360;
pitch += ((lasty - y))/2;

lasty = y;
if(pitch > 90)

pitch = 90.0;
if(pitch<-90)
pitch = -90.0;
Page
63
}
Tampilan Objek
Ini adalah tampilan awal perputaran planet terhadap

matahari
Gambar 4.6 Perputaran planet terhadap matahari
Page
64
Gambar 4.7 Perputaran planet terhadap matahari tampak
atas
Gambar dibawah ini adalah gambar matahari yang diberi

cahaya agar terlihat seperti matahari
Gambar 4.8 Objek diberi cahaya agar terlihat seperti

matahari
Page
65
Gambar 4.9 Beberapa planet mengelilingi matahari
C. Scale
Skala merupakan salah satu bentuk transformasi yang
merubah ukuran dari objek yang ditentukan, baik membesar
ataupun mengecil. Perubahan ukuran tersebut didasarkan
pada sumbu x, sumbu y, maupun sumbu z, dimana jika yang
diubah hanya sumbu x, maka besarnya objek akan berubah
sesuai dengan sumbu x baru yang telah ditentukan, begitu
pula jika diubah terhadap sumbu dan zy, maka objek akan
menguikuti perubahan sesuai sumbu y maupun z baru yang
telah ditentukan.
Perubahan skala diperoleh dari mengalikan nilai

koordinat objek dengan skala tertentu sesuai dengan sumbu
masing - masing. Bentuk dari matriks skala adalah:
[ ] [ ][ ]
Transformasi skala dapat dilakukan dengan cara

memanggil fungsi:
Page
66
glScalef(Sx, Sy, Sz)
glScaled(Sx, Sy, Sz)
Dimana Sx, Sy, dan Sz merupakan parameter dari masing

masing sumbu ( Sx merupakan parameter pada sumbu x, Sy
merupakan parameter pada sumbu y, dan Sz merupakan
parameter pada sumbu z)
Contoh penerapan dalam program dari transformasi

skala :
Source Code:
void renderScene(void){
drawKoordinat();
glColor3f(1,1,0);
glScalef(1,2,1);
drawQuad();
glFlush();
Page
67
Screen Shot Hasil:
Setelah di scale 2,1,1
drawKoordinat();
glColor3f(1,1,0);
glScalef(2,1,1);
drawQuad();
glFlush();
Page
68
Screen shot hasil:
D. Tutorial Urutan Transformasi

Transformasi dapat dilakukan pada level vertex, level
surface, maupun level obyek bergantung dimana transformasi
diletakkan dalam program. Operasi transformasi merupakan
operasi yang tidak bersifat komutatif, artinya, urutan
transformasi juga sangat berpengaruh pada hasilnya. Gambar
4.3 memberi ilustrasi akibat urutan transformasi yang
berbeda, yaitu hasil operasi rotasi kemudian di translasi
berbeda dengan operasi translasi baru dirotasi.
Page
69
Gambar 4.10 Pengaruh urutan transformasi
Program obyeknya sudah berupa obyek 3D berupa

kubus. Perhatikan bagaimana kubus dibentuk dari vertex dan
surface. Selain dengan mendefinisikan obyeknya sendiri,
GLUT telah menyediakan beberapa fungsi untuk menggambar
standard obyek, yaitu kubus, bola, dan poci teh.
Perhatikan apa yang terjadi bila glTranslate() dan
glRotate() di fungsi mydisplay() ditukar posisinya atau
diletakkan didalam salah satu glBegin()..glEnd()
// OpenGL
// - Complex Object
// - Notice:
// 1. There are surfaces that are not correctly

rendered in order.
// uncommented the GL_DEPTH
// 2. Flicker can be eliminated by using GL_DOUBLE
//
// Rubah rendering algoritma dengan menggunakan

data struktur
//
#include<stdio.h>
#include<stdlib.h>
#include<string.h>
#include<stdarg.h>
#include<glut.h>
Page
70
float z_pos=-10.0f;
float rot=0.0f;
void resize(int width, int height)
glViewport(0, 0, width, height);
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(45.0,
(float)width/(float)height, 1.0, 300.0);
glMatrixMode(GL_MODELVIEW);
glLoadIdentity();
void myTimeOut(int id)
// called if timer event
// ...advance the state of animation

incrementally...
rot+=10;
glutPostRedisplay(); // request redisplay
glutTimerFunc(100, myTimeOut, 0); //

request next timer event
Page
71
}
void myKeyboard(unsigned char key,int x, int y)
if((key=='<')||(key==',')) z_pos-=0.1f;
if((key=='>')||(key=='.')) z_pos+=0.1f;
void mydisplay(void)
glClear(GL_COLOR_BUFFER_BIT );
//glClear(GL_COLOR_BUFFER_BIT |
GL_DEPTH_BUFFER_BIT);
glLoadIdentity();
glTranslatef(0.0,0.0f,z_pos);
glRotatef(rot, 0, 1, 0);
glBegin(GL_QUADS);
// Front Face, red
glColor3f(1.0,0.0,0.0);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f( 1.0f, -1.0f, 1.0f);
glVertex3f( 1.0f, 1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, 1.0f);
// Back Face, green
Page
72
glColor3f(0.0,1.0,0.0);
glVertex3f( 1.0f, -1.0f, -1.0f);
glVertex3f( 1.0f, 1.0f, -1.0f);
glVertex3f(-1.0f, 1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, -1.0f);
// Top Face, blue
glColor3f(0.0,0.0,1.0);
glVertex3f(-1.0f, 1.0f, -1.0f);
glVertex3f( 1.0f, 1.0f, -1.0f);
// 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);
Page
73
glVertex3f( 1.0f, -1.0f, 1.0f);
// Left Face, magenta
glColor3f(1.0,0.0,1.0);
glVertex3f(-1.0f, -1.0f, -1.0f);
glVertex3f(-1.0f, -1.0f, 1.0f);
glVertex3f(-1.0f, 1.0f, -1.0f);
glEnd();
glFlush();
glutSwapBuffers();
void init()
glEnable(GL_DEPTH_TEST);
glClearColor( 0.0, 0.0, 0.0, 1.0 ); // A

Background Clear Color
glLoadIdentity();
gluPerspective(45,
(GLdouble)500.0/(GLdouble)500.0, 0, 100);
return;
Page
74
}
int main(int argc, char** argv)
glutInit(&argc,argv);
//glutInitDisplayMode( GLUT_DOUBLE /*|

GLUT_DEPTH*/ );
glutInitDisplayMode( GLUT_DOUBLE |
GLUT_DEPTH );
glutCreateWindow("simple");
// callbacks
glutDisplayFunc(mydisplay);
glutKeyboardFunc(myKeyboard);
glutTimerFunc(100, myTimeOut, 0);
glutReshapeFunc(resize);
init();
glutMainLoop();
return 0;
Tambahan:
Page
75
Konsep Depth Buffer. Mode display pada program di atas
diberi tambahan mode GLUT_DEPTH dan perintah
glEnable(GL_DEPTH_TEST). Hal ini untuk memastikan bahwa
surface digambar sesuai dengan urutan penampakkan yang
logis. Teknik ini merupakan salah satu algoritma HIDDEN
SURFACE REMOVAL. Untuk melihat apa yang terjadi bila
teknik ini tidak dilakukan, hapus/commented moda
GLUT_DEPTH dan glEnable(GL_DEPTH_TEST).
E. Implementasi Transformasi Objek

#include <stdlib.h>
#include <glut.h>
void drawQuad(){
glBegin(GL_POLYGON);
glVertex2f(32.,1.);
Page
76
glVertex2f(3.,90.);
glEnd();
glFlush();
glPushMatrix();
glTranslatef(-500,-500,0);
drawQuad();
glPopMatrix();
glPushMatrix();
glRotatef(30,0,0,1);
drawQuad();
glPopMatrix();
Page
77
glPushMatrix();
glScalef(0.5,0.5,0);
glColor3f(0,1,1);//cyan
drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,0);//red
drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,1);//magenta
drawQuad();
glPopMatrix();
Page
78
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
glTranslatef(-150,0,0);
drawQuad();
glPopMatrix();
glPushMatrix();
Page
79
glColor3f(0,1,1);//cyan
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,1);//pink
drawQuad();
glPopMatrix();
glPushMatrix();
Page
80
glColor3f(1,0,1);//pink
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
Page
81
drawQuad();
glPopMatrix();
glPushMatrix();
glColor3f(1,0,1);//magenta
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
Page
82
drawQuad();
glPopMatrix();
glPushMatrix();
drawQuad();
glPopMatrix();
glPushMatrix();
glRotatef(-45,0,0,1);
drawQuad();
glPopMatrix();
glPushMatrix();
Page
83
drawQuad();
glPopMatrix();
glFlush();
void main(int argc,char **argv){
glutCreateWindow("Implementasi Transformasi");
gluOrtho2D(-640.,640.,-640.,640.);
glutDisplayFunc(renderScene);
glutMainLoop();}
Gambar 4.11 Implementasi Transformsi Obje
Page
84
BAB 5
ANIMASI
A. ANIMASI, SEJARAH DAN PERKEMBANGANNYA

1. Masa Prasejarah
Seperti karya-karya peradaban manusia yang lainnya,
sejarah animasi ternyata sama tuanya dengan perkembangan
peradaban manusia di bumi ini. Sejak jaman pra sejarah,
manusia purba telah berusaha untuk membuat 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
85
2. Masa Peradaban Mesir Kuno
Perkembangan animasi tidak berhenti pada masa
prasejarah saja, namun terus berkembang bahkan hingga saat
ini. Pada masa peradaban Mesir kuno, orang-orang pada
masa tersebut telah berupaya untuk membuat sebuah
rangkaian gambar yang memiliki makna sebuah gerakan dan
bahkan mengandung unsur cerita. Peradaban Mesir telah
terbukti sebagai sebuah peradaban yang sangat maju, pada
waktu itu. Dengan huruf hieroglif meraka meninggalkan bukti
catatan peradaban maju mereka yang mengundang decak
kagum manusia hingga saat ini. Diantara ribuan peninggalan
peradaban Mesir, mereka juga meninggalkan bukti adanya
upaya manusia untuk membuat gambar yang mereka buat
seolah-olah sedang bergerak.
Pharao Ramses II di Mesir membangun sebuah kuil

untuk Dewa Isis. Tidak seperti pada kuil-kuil yang lain, dalam
kuil dewa isis tersebut terdapat beberapa tiang yang terdapat
relief fugur dewa, dalam urutan gerakan yang runut. Kuil
Page
86
tersebut sebagai bukti adanya upaya manusia pada masa
Mesir kuno untuk membuat gambar yang seolah-olah sedang
bergerak.
3. Masa Perdaban Yunani Kuno

Pada masa yunani kuno, upaya untuk membuat
rangkaian gambar yang terkesan bergerak telah mereka
lakukan. Bukti adanya upaya tersebut dapat dilihat melalui
beragam benda-benda seni yang telah dihasilkan oleh
peradaban Yunani kuno, diantaranya adalah kendi. 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
87
4. Relief Candi
Selain pada peninggalan peradaban kuno diatas,
masih ada lagi bukti perkembangan animasi pada perdaban
manusia, yaitu relief candi. Dimana pada relief tersebut
rentetan panel relief mengandung unsur cerita dan seolah-
olah hidup dalam benak orang yang melihat dan menghayati
alur ceritanya.
Page
88
5. Wayang
Wayang kulit yang dimainkan oleh dalang, dengan
efek-efek suara berupa gamelan, dan alur cerita yang sangat
kuat, mampu menyedot perhatian pemirsanya selama
berjam-jam hingga semalam suntuk, adalah bentuk animasi
pertama yang sudah dikatakan lengkap, dimana unsur-unsur
animasi adanya gambar yang bergerak, alur cerita dan efek
suara, sudah terpenuhi.
Page
89
6. The Persistance of Vision
Perkembangan animasi selanjutnya, lebih ditekankan
pada aspek keilmuan, dan mulai merambah bidang teknologi,
meskipun dengan hasil yang sangat sederhana. Adalah
Thomas Alfa Edison (1860), selain terkenal dengan penemuan
lampu pijarnya, juga mengamukakan sebuah teory yang di
kenal dengan "The Persistance of Vision". Inti dari teori
tersebut adalah, jika kita melihat sebuah gambar, maka citra
gambar tersebut akan terekam dalam retina manusia selama
1/10 detik sebelum citra akan gambar tersebut benar-benar
menghilang.
Berbasis pada teori tersebut, mulai muncul 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
90
b. (Joseph Plateu - 1826)
Berupa sebuah kepingan gambar, dan di sisi lain
terdapat kepingan dengan lubang-lubang di sekitarnya. Ketika
kepingan gambar terebut diputar, melalui lubang yang talah
disediakan, akan terlihat rangkaian gambar tersebut
bergerak.
Page
91
c. Zeotrope (Pierre Desvignes - 1860)
Hampir sama dengan Thaumatrope, Zoetrope berupa
rangkaian gambar yang dimasukkan dalam sebuah tabung,
dibagian lain dari tabung diberi lubang untuk melihat gambar.
Ketika tabung digerakkan, maka gambar tersebut akan
terlihat bergerak.
Page
92
Penemuan Film Proyektor
Penemuan film proyektor oleh Thomas Alfa Edison,

membuka peluang baru untuk menciptakan gambar yang
bergerak. Dengan menggunakan media film proyektor,
semakin mempermudah cara untuk membuat rangkaian
gambar menjadi hidup dan bergerak. Gambar dibawah ini
merupakan proyektor pertama yang di ciptakan oleh Thomas
Alfa Adison.
Page
93
Film Animasi
Era setelah diketemukannya proyektor dan

perkembangannya, mulai bermunculan film-film animasi
pendek yang dibuat dengan teknik yang masih sangat
sederhana serta dengan keterbatasan alat yang digunakan.
Film-film pada awal perkembangan animasi adalah sebagai
berikut.
1. Humourous Phases of Funny Faces. (Stuart Blackton -

1906)
Film animasi ini, berupa gambar kartun yang di buat
dengan kapur tulis diatas papan tulis. Teknik pengambilan
gambarnya adalah dengan menggambar kemudian difoto dan
dihapus untuk diganti dengan gambar selanjutnya. Rangkaian
foto-foto tersebut kemudian digabung dan disajikan sebagai
Page
94
film animasi. Film inilah yang menggunakan teknik "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
95
unsur cerita yang megalir, serta beberapa efek yang
membuat film ini menarik.
4. Flowers and tree (Walt Disney, 1932)

Film flowers and tree, sebelumnya telah diproduksi
dalam bentuk film hitam putih, film tersebut akhirnya di
produksi ulang dengan menambahkan unsur warna.
Flowers and tree akhirnya memenangkan Academy
Award untuk kategori film pendek animasi.
B. JENIS-JENIS ANIMASI
Animasi yang dulunya mempunyai prinsip sederhana,
sekarang telah berkembang menjadi beberapa jenis yaitu ;
Animasi 2d
Page
96
Animasi 3d
Animasi tanah liat (clay animation)
Animasi jepang (anime)
1. Animasi 2d
Animasi ini yang paling akrab dengan keseharian
kita,biasa juga disebut dengan film kartun.kartun berasal dari
cartoon yang artinya gambar yang lucu,memang kebanyakan
film kartun itu kebanyakan film yang lucu.
Contohnya banyak sekali, looney tunes,tom and jerry, scooby

doo, doraemon, lion king brother bear dan banyak lagi
2. Animasi 3d
Perkembangan teknologi adan komputer membuat
teknik pebuuatan animasi 3d semakin berkembang dan maju
pesat;. animasi 3d adalah pengembangan animasi 2d dengan
animasi 3d karakter yang di perlihatkan semakin hidup dan
nyata,mendekati wujud manusia asllinnya. Toy story adalah
film animasi 3d pertama buatan disney(pixar studio),dan
semenjak itu maka berlomba lombalah studio film dunia
memproduksi film sejenis .bermunculanlah bug's life,antz,
dinosaurs,final fantasy ,toy story 2,monster inc hingga finding
nemo yang merupakan film aniasi terbaik di dunia pada saat
itu dan masih banyak lagi lainnya. Kesemuannya itu biasa
juga di sebut dengan animasi 3d atau cgi (computer
generated imagery).
3. Animasi tanah liat (clay animation)

Animasi ini msudah lam sekali sebenarnya bahkan
sebelum era animasi 3d,bahkan boleh di bilang nenek
Page
97
moyangnya animasi.M eski namanya clay (tanah liat) yang di
pakai bukanlah tanah liat biasa.animasi ini memakai
plasticin,bahan lentur seperti permen karet yang di temukan
pada tahun 1897.tokoh dalam clay di buat dengan memakai
rangka khusus untuk kerangka tubuhnya lallu kerangka
tersebut di tutup dengan plasticin sesuai bentuk tokoh yang
ingin di buat .bagian-bagian tubuh kerangka ini seperti
kepala,tangan kaki bisa di lepas dan bisa di pasang lagi,
setelah semuanya siap lalu di foto gerkan pergerakan ,inilah
yang deisebut teknik pembuatan animasi dengan stop otion
picture film animasi clay pertama di rilis 1908 berjudul A
Sculptor's welsh rarebit nightmare.dan yang sekarang masih
di puta di tv2 kita adlah shawn the sheep dan timmy time.
4. Anime (aniimasi jepang)

Anime jepang tak kalah dengan animasi buatan eropa
dan amerika,jepang sudah banyak memproduksi anime
bahkan anime jepang tidak semua diperuntukkan bagi 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
98
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
99
2. Animasi Frame (Bingkai Animasi)
Animasi bingkai adalah bentuk animasi Yang
Sederhana memucat. Diupamakan Andari mempunyai
sebuah Buku bergambar Yang Berseri di Tepi Auditan
berurutan. Bila jempol Andari membuka Buku Artikel
Baru CEPAT, Maka GAMBAR kelihatan Bergerak. PADA
Komputer multimedia, animasi Buku nihil menampilkan
sebuah GAMBAR Yang berurutan secara CEPAT. Antara
GAMBAR Satu (frame satu) Artikel Baru GAMBAR lain
(bingkai Lain) berbeda. Kalau kitd bayangkan bagaimana
Film ATB ITU diputar di Bioskop, Maka dapat kitd pahami
bagaimana Cara Koperasi Karyawan Bhakti Samudera
frame animasi secara lebih BAIK Dalam, sebuah film,
serangkaian bingkai Bergerak melalui proyektor Film
Artikel Baru kecepatan sekitar 24 frame per Detik. Kita
Bisa menangkap adanya Gerak di Layar karena setiap
bingkai mengandung Satu GAMBAR Yang tampil PADA
Layar begitu bingkai Yang bersangkutan Muncul.
Mengapa 24 frame per Detik? Karena kecepatan ITU
merupakan Ambang Batas, kurang bahasa Dari ITU Maka
Yang Akan kitd lihat di Layar adalah GAMBAR Yang Kabur.
Berikut adalah contoh gambar animasi frame
Page
100
3. Animasi Sprite (Sprite Animasi)
Animasi sprite serupa Artikel Baru Teknik animasi
ATB, yaitu obyek Yang diletakkan Dan dianimasikan PADA
bagian Puncak Grafik Artikel Baru latar Belakang
diam. Sprite adalah setiap bagian bahasa Dari animasi
Andari Yang Bergerak secara mandiri, misalnya Burung
Bagus terbang, planert berotasi, bola memantul-mantul
atau berputar logo. Sprite beranimasi Dan Bergerak
sebagai obyek Yang mandiri. Dalam, animasi sprite,
sebuah GAMBAR Tunggal atau berurutan dapat
ditempelkan Dalam, sprite. Sprite dapat dianimasikan
Dalam, Satu klien untuk membuka posisi, seperti halnya
planet berputar atau Burung Bergerak Sepanjang Garis
lurus. Animasi sprite berbeda Artikel Baru animasi frame,
Illustrasi Urutan masing-masing frame, Andari hanya
dapat memperbaiki bahasa Dari Layar Yang mengandung
sprite. Andari tidak dapat memperbaiki bagian Dalam,
Yang ditampilkan Layar untuk masing-masing bingkai,
seperti Yang dapat Andari kerjakan PADA animasi frame.
Berikut adalah contoh gambar animasi sprite.
Page
101
4. Animasi Path ( Path Animasi)
Animasi path adalah animasi dari objek yang
gerakannya mengikuti garis lintasan yang sudah
ditentukan. Contoh animasi jenis ini adalah animasi
kereta api yang bergerak mengikuti lintasan rel. Biasanya
dalam animasi path diberi perulangan animasi, sehingga
animasi terus berulang hingga mencapai kondisi tertentu.
Dalam Macromedia Flash, animasi jenis ini didapatkan
dengan teknik animasi path, teknik ini menggunakan layer
tersendiri yang didefinisikan sebagai lintasan gerakan
objek.
Berikut adalah contoh gambar animasi Path.
5. Animasi Spline ( Spline Animasi )

Spline adalah representasi matematis dari kurva. Bila
obyek bergerak, biasanya tidak mengikuti garis lurus,
misalnya berbentuk kurva. Program animasi computer
memungkinkan Anda untuk membuat animasi spline
dengan lintasan gerakan berbentuk kurva. Untuk
mendefinisikan animasi spline, posisi pertama Anda pada
sebuah titik pijak. Kurva itu sendiri melewati titik pijak.
Titik pijak mendefinisikan awal dan akhir titik dari bagian
Page
102
kurva yang berbeda. Masing-masing titik pijak dapat
dikendalikan sehingga memungkinkan Anda untuk
mengubah bentuk kurva antara dua titik pijak.
Sebagian besar program animasi memungkinkan Anda
untuk membuat variasi gerakan sepanjang lintasan. Jika
sebuah lintasan gerakan mempunyai belokan tajam,
sebagai contoh sebuah obyek bergerak pelan mengikuti
belokan dan kemudian meningkatkan kecepatannya
setelah melewati belokan. Beberapa program
menyediakan pengontrol kecepatan sprite sepanjang
lintasan secara canggih.
Berikut adalah contoh gambar dari animasi Spline .
6. Animasi Vektor (Vector Animasi)

Animasi vektor serupa Artikel Baru animasi sprite.
PADA animasi sprite menggunakan bitmap untuk sprite,
animasi vektor menggunakan rumus Matematika untuk
menggambarkan sprite. Rumus inisial serupa Artikel Baru
Yang rumus menggambarkan kurva spline. Animasi vektor
menjadikan objek Bergerak Artikel Baru SIBOR
memvariasikan parameter Ujung-Pangkal, arah Dan
Panjang PADA segmen-segmen Garis Yang menentukan
objek. Macromedia adalah industri terdepan Dalam,
Page
103
perangkat lunak animasi berbasis vektor. Perangkat lunak
flash Yang dikembangkan Macromedia menggunakan
vektor grafis untuk membuat animasi interaktif Serta
grafis untuk digunakan di web. Macromedia telah
menerbitkan format file Flash (. Swf) sebagai sebuah
standar Terbuka.Untuk INFORMASI lebih JAUH, ikuti Link
situs web Macromedia Flash, di mana ANDA Bisa
mengunjungi sebuah galeri halaman Web Yang berisi
animasi Flash Dan mendownload flash gratis selama
periode 30 Hari Percobaan terpisah.
Berikut adalah contoh dari gambar animasi Vektor.
7. Animasi Clay ( Clay Animasi )

Animasi ini sering disebut juga animasi doll (boneka).
Animasi ini dibuat menggunakan boneka-boneka tanah
liat atau material lain yang digerakkan perlahan-lahan,
kemudian setiap gerakan boneka-boneka tersebut difoto
secara beruntun, setelah proses pemotretan selesai,
rangkaian foto dijalankan dalam kecepatan tertentu
sehingga dihasilkan gerakan animasi yang unik. Contoh
penerapan animasi ini adalah pada film Chicken Run dari
Dream Work Pictures. Teknik animasi inilah yang menjadi
Page
104
cikal bakal animasi 3 Dimensi yang pembuatannya
menggunakan alat bantu komputer.
Berikut adalah contoh dari gambar animasi clay.
8. Animasi Karakter (Character Animation)

Animasi karakter merupakan sebuah cabang khusus
animasi. Animasi karakter semacam yang Anda lihat
dalam film kartun. Animasi ni berbeda dengan animasi
lainnya, misalnya grafik bergerak animasi logo yang
melibatkan bentuk organic yang komplek dengan
penggandan yang banyak, gerakan yang herarkis. Tidak
hanya mulut, mata, muka dan tangan yang bergerak
tetapi semua gerakan pada waktu yang sama.
Meskipun untuk membuat animasi tunggal dan bitmap
mudah, tetapi untuk membuat animasi karakter yang
hidup dan meyakinkan merupakan sebuah seni yang
membutuhkan pertimbangan khusus dalam
pengerjaanya. Teknik ini juga dapat diterapkan terhadap
animasi obyek. Perankgat lunak yang dapat dipakai untuk
Page
105
animasi karakter, antara lain Maya Unlimited. Film kartun
Toy Story dan Monster Inc dibuat dengan Maya
Unlimited.
Berikut adalah contoh dari gambar animasi karakter.
C. Konsep Animasi pada GLUT

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

menggunakan TimerFunction
GLUTAPI void APIENTRY glutTimerFunc(unsigned int
millis, void
(GLUTCALLBACK *func)(int value), int value);
Page
106
Dalam penggunaan glutTimerFunc dimungkinkan untuk
membuat sebuah animasi yang dikontrol olehwaktu.
2. Inisialisasi dalam penggunaan TimerFunction
Fungsi dari glutPostRedisplay adalah mengirim kan

perintah untuk mengaktifkan display secara berkala
(looping).
Kemudian pada main program perlu menambahkan fungsi

untuk mengaktifkan timer function.
Berikut adalah contoh dari sebuah bentuk jam analog

sederhana dengan minimal empat tempat penunjuk angka
dan menggunakan 3 jarum. Jarum jam berputar sesuai
dengan timer per detik waktu nyata.
Source Code:
#include <stdlib.h>
#include <glut.h>
#include <math.h>
#define PI 3.1415926535
float sudut = 0;
int i,n;
Page
107
void lingkaran(int radius, int jumlah_titik, int
x_tengah, int y_tengah) {
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(){
glColor3f(0,0,0);
glVertex2i(0,200);
glVertex2i(10,180);
glVertex2i(5,180);
glVertex2i(5,0);
glVertex2i(-5,0);
glVertex2i(-5,180);
glVertex2i(-10,180);
Page
108
glVertex2i(0,200);
glEnd();
void panahMenit(){
glColor3f(1,1,1);
glVertex2i(0,220);
glVertex2i(10,200);
glVertex2i(5,200);
glVertex2i(5,0);
glVertex2i(-5,0);
glVertex2i(-5,200);
glVertex2i(0,220);
glEnd();
void panahDetik(){
glColor3f(1,0,0);
glVertex2i(0,240);
glVertex2i(10,210);
Page
109
glVertex2i(5,210);
glVertex2i(5,0);
glVertex2i(-5,0);
glVertex2i(-5,210);
glVertex2i(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();
Page
110
glPushMatrix();
glColor3f(0.7,0.7,0.7);
lingkaran(250,100,0,0);
angka(230.,0.,0.);
glPopMatrix();
glPushMatrix();
glRotatef(sudut,0,0,1);
panahDetik();
glPopMatrix();
glPushMatrix();
glRotatef(sudut/60,0,0,1);
panahMenit();
glPopMatrix();
glPushMatrix();
glRotatef(sudut/720,0,0,1);
panahJam();
glPopMatrix();
glColor3f(0,0,0);
Page
111
lingkaran(20,100,0,0);
glFlush();
void timer(int value){
sudut-=0.6;
glutTimerFunc(100,timer,0);
void main (int argc, char **argv){
glutInit(&argc, argv);
glutCreateWindow("JAM ANALOG: Prak Grafkom");
gluOrtho2D(-300.,300.,-300.,300.);
glutMainLoop();
Page
112
Output:
Contoh program ke-2
Membuat sebuah baling-baling yang bisa perputar secara

clockwise kemudian unclockwise yang pusatnya berada pada
pusat koordinat.
#include <stdlib.h>
#include <glut.h>
int x=0;
int zputer=0;
int zbalik=180;
void Timer(int value){
Page
113
if(zputer <=360){
x = 1;
zputer += 1;
}
if(zputer>360){
x = -1;
zbalik -= 1;
}
if(zbalik<0){
x = 1;
zputer = 0;
zbalik = 360;
}
glutTimerFunc(5,Timer,0);
void Draw(){
glBegin(GL_TRIANGLES);
glVertex2d(0,0);
glVertex2d(-100,200);
glVertex2d(100,200);
glVertex2d(0,0);
glVertex2d(-100,-200);
glVertex2d(100,-200);
glEnd();
}
void display(){
Page
114
glPopMatrix();
glRotatef(x,0.,0.,1.);
Draw();
glPushMatrix();
glFlush();
}
void main(int argc, char **argv){

glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE
| GLUT_RGBA);
glutCreateWindow("Praktikum Grafika
Komputer");
gluOrtho2D(-300.0,300.0,-300.0,300.0);
glutDisplayFunc(display);
glutMainLoop();
Output:
Page
115
Animasi 2D menggunakan OpenGL dapat dilakukan
dengan melakukan perpindahan objek menggunakan
glTranslatef, juga dapat dilakukan dengan melakukan
perputaran atau pergerakan objek yang berporos pada
sumbu-sumbu koordinat dari sumbu pembentuk objek
tersebut menggunakan glRotatef. Kemudian waktu yang
digunakan dalam pergerakan animasi juga dapat diatur sesuai
keinginan dengan menggunakan glutTimerFunc.
BAB 6
INTERAKSI KEYBOARD
Page
116
Keyboard adalah alat input yang berfungsi untuk
berfungsi mengetikkan huruf, angka, karakter khusus dan
memasukkan perintah atau instruksi ke dalam software atau
system operasi yang dijalankan komputer, serta sebagai
media bagi user (pengguna) untuk melakukan perintah
perintah lainya yang diperluka, seperti menyimpan file dan
membuka file.
A. STRUKTUR TOMBOL PADA KEYBOARD

Secara umum, struktur tombol pada keyboard terbagi atas 4,
yaitu:
a. Tombol Ketik (typing keys)

Tombol ketik adalah salah satu bagian dari keyboard
yang berisi huruf dan angka serta tanda baca. Secara
umum, ada 2 jenis susunan huruf pada keyboard,
yaitu tipe QWERTY dan DVORAK. Namun, yang
terbanyak digunakan sampai saat ini adalah susunan
QWERTY.
b. Numeric Keypad
Numeric keypad merupakan bagian khusus dari
keyboard yang berisi angka dan sangat berfungsi
untuk memasukkan data berupa angka dan operasi
perhitungan. Struktur angkanya disusun menyerupai
kalkulator dan alat hitung lainnya.
c. Tombol Fungsi (Function Keys)

Tahun 1986, IBM menambahkan beberapa tombol
fungsi pada keyboard standard. Tombol ini dapat
Page
117
dipergunakan sebagai perintah khusus yang
disertakan pada sistem operasi maupun aplikasi.
d. Tombol kontrol (Control keys)

Tombol ini menyediakan kontrol terhadap kursor dan
layar. Tombol yang termasuk dalam kategori ini
adalah 4 tombol bersimbol panah di antara tombol
ketik dan numeric keypad, home, end, insert, delete,
page up, page down, control (ctrl), alternate (alt) dan
escape (esc)
B. PEMETAAN (MAPPING)
Karena saluran cache lebih sedikit dibandingkan
dengan blok memori utama, diperlukan algoritma untuk
pemetaan blok-blok memori utama ke dalam saluran cache.
Selain itu diperlukan alat untuk menentukan blok memori
utama mana yang sedang memakai saluran cache. Pemilihan
fungsi pemetaan akan menentukan bentuk organisasi cache.
Dapat digunakan tiga jenis teknik, yaitu sebagai berikut :
a. Pemetaan Langsung (Direct Mapping)

Pemetaan ini memetakan masing-masing blok memori
utama hanya ke satu saluran cache saja. Jika suatu blok ada
di cache, maka tempatnya sudah tertentu. Keuntungan dari
direct mapping adalah sederhana dan murah. Sedangkan
Page
118
kerugian dari direct mapping adalah suatu blok memiliki
lokasi yang tetap (Jika program mengakses 2 block yang di
map ke line yang sama secara berulang-ulang, maka 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
119
b. Keyboard PS/2 : digunakan pada komputer ATX
c. Keyboard Wireless : digunakan pada semua jenis

komputer dan laptop
d. Keyboard USB : Untuk menjamin transfer data lebih

cepat
Page
120
Jenis Jenis Keyboard Komputer Secara Bentuk dan Tombol
1. Keyboard QWERTY
Keyboard yang biasanya dipakai adalah jenis Qwerty,

yang bentuknya ini mirip seperti tuts pada mesin tik.
ditemukan oleh Scholes, Glidden dan Soule pada tahun 1878,
dan fungsi keyboard QWERTY ini digunakan sebagai standar
mesin tik komersial pada tahun 1905. Keyboard QWERTY
memiliki empat bagian yaitu :
a. Typewriter key
b. Numeric key
c. Funtion key
d. Special function key
Tata Letak ini sama dengan keyboard yang biasa
digunakan yang terdiri dari 4 bagian yaitu:
Tombol fungsi (function key)
Page
121
Tombol alphanumerik (alphanumerik key)
Tombol kontrol (control key)
Tombol numerik (numerik keypad).
Untuk menghasilkan bilangan dalam jumlah yang besar,
orang lebih suka menggunakan tombol numerik (numerik
keyped) yang tata letak tombol-tombolnya dapat dijangkau
dengan sebuah tangan. Selain itu, fungsinya untuk
mengetikkan angka apabila tombol Num Lock di aktifkan.
Apabila tombol Num Lock tidak diaktifkan, fungsinya berubah
menjadi tombol-tombol untuk menggerakkan kursor.
2. KEYBOARD ALPHABETIC
Tombol-tombol pada papan ketik dengan tata letak

alphabetik disusun persis seperti pada tata letak QWERTY
maupun Dvorak. Susunan hurufnya berurutan seperti pada
urutan alphabet.Biasanya banyak ditemui pada mainan 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
122
3. KEYBOARD DVORAK
Ditemukan pada tahun 1932 dengan dirancang lebih

efisien 10-15 % dibanding keyboard QWERTY. Menggunakan
susunan papan ketik yang sama, tetapi susunan hurufnya
disusun sehingga tangan kanan dibebani oleh banyak
pekerjaan dibanding dengan tangan kiri. Dirancang agar 70
persen dari ketukan jatuh pada home row, sehingga 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
123
Keyboard ini dibuat dengan maksud menyempurnakan
jenis keyboard yang sudah ada, yaitu dengan memisahkan
kedua bagian keyboard (bagian kiri dan kanan).
6. KEYBOARD MALTRON
Keyboard ini dibuat agak cekung ke dalam. Dengan

pertimbangan bahwa pada saat jari-jari diposisikan akan
mengetik, maka jari-jari itu dijamin tidak akan membentuk
satu garis lurus.
7. KEYBOARD NUMERIC
Keyboad ini bertujuan untuk memasukkan bilangan

dalam jumlah yang besar.
Page
124
D. FUNGSI TOMBOL KEYBOARD KOMPUTER
Back Space : untuk menghapus 1 character di kiri cursor
Caps Lock : untuk membuat huruf kecil menjadi huruf
besar atau Kapital
Delete : untuk menghapus 1 karakter pada posisi cursor
Esc : untuk membatalkan suatu perintah dari suatu menu
End : untuk memindahkan cursor ke akhir baris /
halaman / lembar kerja
Enter : untuk berpindah ke baris baru atau untuk
melakukan suatu proses perintah
Home : Untuk menuju ke awal baris atau ke sudut kiri
atas layar
Insert : untuk menyisipkan character
Page Up : untuk meggerakan cursor 1 layar ke atas
Page Down : untuk Menggerakkan cursor 1 layar ke
bawah
Tab : untuk memindahkan cursor 1 tabulasi ke kanan
Numeric Key : memberikan perintah menghidupkan dan
mematikan fungsi tombol numerik
Page
125
E. KONSEP INPUTKEYBOARD PADA GLUT-KEY
BIASA DAN SPECIAL KEY
1. KONSEP INPUT KEYBOARD (GENERAL BUTTON)

glutKeyboardFunc adalah suatu fungsi callback
untuk digunakan sebagai masukan pada suatu jendela
window. Konsepnya pada saat seorang user atau pengguna
memberikan input yaitu menekan pada tombol keyboard,
setiap tombol keyboard yang ditekan akan menghasilkan
suatu karakter ASCII yang akan menghasilkan suatu callback
keyboard yang telah didefinisikan berupa fungsi dengan 3
parameter.
Penggunaan input keyboard pada tombol-tombol biasa

atau normal key (a-z, 1-0), dapat dilakukan dengan
menggunakan callback function berupa
glutKeyboardFunc(myKeyboard) dengan
dideklarasikan terlebih dahulu suatu fungsi buatan untuk
menampung semua perintah input yang akan digunakan oleh
user. Fungsi buatan tersebut seperti contoh di bawah ini:
void myKeyboard(unsigned char key, int x,int y)
// masukkan perintah disini
Fungsi tersebut berisi suatu perintah yang akan digunakan

dalam pengoperasian program oleh user. Di dalam fungsi
tersebut terdapat 3 parameter dan di dalamnya
dideklarasikan suatu perintah yang nantinya akan digunakan.
Page
126
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);
Draw();
glFlush();
Sintaks tersebut adalah sintak dasar yang digunakan,

untuk bisa menggunakan input keyboard maka harus
diberikan callback function untuk memanggilnya.
Page
127
Sintaks tersebut harus disertakan pada fungsi main.
Selain itu, pada keyboard juga terdapat method lain yang

bisa digunakan dalam proses input ini, yaitu: Key Press, Key
Up, dan Key Buffering.
a. Key Press
Metode ini akan memberitahukan kita pada command line
tombol apa yang sedang kita tekan. Method ini dapat
dinamakan keyPressed dan pada GLUT akan terdapat 3
parameter, satu untuk tombol yang saat itu ditekan, dan dua
untuk memberitahukan lokasi mouse ketika tombol ditekan.
void keyPressed(unsigned char key, int x, int

y){
If(key == a){ // saat tombol a ditekan
// aksi yang diberikan saat tombol a

ditekan }}
Dan fungsi tersebut akan dipanggil pada fungsi main, namun

callback function-nya sedikit berbeda dari callback function yang
sebelumnya.
glutKeyboardFunc(keyPressed); // memberitahukan
pada GLUT untuk menggunakan method "keyPressed"
untuk tombol yang ditekan
b. Key Up
Fungsi Key Up ini adalah fungsi register yang menyimpan
nilai masukan sampai ketika tombol keyboard dilepaskan. Hal
ini bisa berguna untuk pengaturan beberapa nilai ketika suatu
tombol pertama kali ditekan, dan tetap menjaga nilai tersebut
sampai tombol tersebut dilapaskan. Method sama seperti
method Key Press tadi yaitu memiliki 3 parameter yang
Page
128
memiliki fungsi yang sama, hanya berbeda pada
penamaannya yaitu, keyUp.
void keyUp(unsigned char key, int x, int y){
If(key == a){ // saat tombol a ditekan
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
129
keyStates[key] = true;
}
void keyUp(unsigned char key, int x, int y){

keyStates[key] = false;
}
void keyOperations(void){
if(keyStates['a']){ // saat tombol a
ditekan
ditekan
}
}
Sama seperti sebelumnya fungsi-fungsi tersebut akan

dipanggil pada fungsi main dengan callback function berikut:
void display (void){
keyOperations();
glClearColor(1.0f, 0.0f, 0.0f, 1.0f); //
menjadikan background menjadi warna merah

}
2. KONSEP INPUT KEYBOARD SPECIAL KEY

GlutSpecialFunc merupakan suatu fungsi callback pada
opengl yang digunakan untuk mengaktifkan tombol-tombol
khusus pada keyboard sehingga dapat digunakan untuk
berinteraksi antara user dengan objek yang ada di dalam
display opengl. Pendeklarasiannya adalah :
void glutSpecialFunc (void (* func) (int

key, int x, int y));
Page
130
callback keyboard khusus dipicu ketika keyboard fungsi
atau tombol special yang dideklarasikan ditekan. Parameter
callback kunci adalah GLUT_KEY_tombol khusus.. Parameter
x dan y mengindikasikan koordinat relatif jendela ketika
tombol ditekan. Ketika jendela baru dibuat, tidak ada callback
khusus awalnya terdaftar dan stroke kunci khusus di jendela
diabaikan. Melewati NULL untuk glutSpecialFunc
Menonaktifkan generasi callback khusus. Selama callback
khusus, glutGetModifiers dapat dipanggil untuk menentukan
keadaan tombol pengubah ketika keystroke menghasilkan
callback terjadi. Nilai-nilai yang tersedia GLUT_KEY_ * adalah:
GLUT_KEY_F1 F1 function key
Page
131
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
132
}
Selanjutnya fungsi tersebut akan dipanggil oleh

glutDisplayFunc ke dalam fungsi main, berikut script nya :
glutSpecialFunc(mySpecialKeyboard);
Selain fungsi callback yang mendeklarasikan tombol special

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

switch(key){
case GLUT_KEY_LEFT : c+=-4; d+=0; break;
case GLUT_KEY_RIGHT : c+=4; d+=0; break;
case GLUT_KEY_UP : c+=0; d+=4; break;
case GLUT_KEY_DOWN : c+=0; d+=-4; break;
}}
Page
133
glutTimerFunc(50,timer,0);}
glPushMatrix();
glTranslatef(c,d,0);
triAngles();
glPopMatrix();
glFlush();
}

glutCreateWindow("ANJAR DWI R & DWI
PANGLIPURINGTIAS");
gluOrtho2D(-320.,320.,-240.,240.);
glutMainLoop();
}
Page
134
Panah merah mengindikasikan pergerakan objek ketika
tombol arah (up, down. Left, dan right) pada keyborad
ditekan oleh user. Sesuai dengan program dimana setiap
tombol arah akan memiliki nilai variabel c dan d yang
berbeda-beda yang akan mengakibatkan gambar akan
bergeser dengan arah yang sesuai nilai variabel tersebut
ketika tombol khusus arah (up, down, left dan right) ditekan.
Page
135
BAB 7
INTERAKSI OBJEK 2D (MOUSE FUNCTION)
Mouse merupakan peralatan masukan/ inputan

selain keyboard pada computer. Mouse adalah
alat/perangkat yang digunakan untuk mengatir perpindahan
kursor secara cepat atau digunakan untuk memberikan
perintah secara praktis dan cepat pula. Didalam mouse
terdapat bola kecil yang jika digerakkan akan menyebabkan
sinyal listrik terkirim kkomputer sesuai dengan pergerakan
mouse
Mouse merupakan salah satu perlengkapan computer

meskipun apabila tidak ada juga computer masih bisa
beroperasi, akan tetapi dengan menggunakan mouse maka
kerja kita akan menjadi lebih cepat dan menghemat waktu,
lebih cepat dan efisien. Maka ridak ada salahnya jika kita
sedikit melihat sejarah perkembangan mouse itu sendiri.
A. SEJARAH MOUSE dan JENIS MOUSE

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

dan menggunakan dua buah roda yang saling tegak lurus
utnuk mendeteksi gerakan ke sumbu Xdan sumbu Y.
Engelbart kemudian mematenkan nya pada 17 November
1970, dengan nama penunjuk posisi X-Y untuk sistem
tampilan grafis (X-Y position Indicator For A Display System).
Pada waktu itu, sebetulnya Engelbart beraksud

pengguna mouse dengan satu tangan secara terus menerus,
sementara tangan yang lainnya mengperasikan alat seperti
keyboard dengan lima tombol.
Perkembangan selanjutnya dilakukan oleh Bill English

di Xerox PARC pada awal tahun 1970, yang menggunakan
bola berputar kesegala arah, putaran tersebut dideteksi oleh
roda-roda sensor didalam mouse tersebut. Pengembangan
inilah yang melahirkan mouse tipe trackball, yaitu mouse
terbalik dimana pengguna menggerakkan bola dengan
jari.Pada tahun 1980 - 1990 Xerox mempopulerkan
penggunaan keyboard QWERTY dengan dua tangan dan
menggunakan mouse pada saat dibutukan saja.
Mouse sekarang ini mengikuti desain Ecole

Polytechnique federale de lausanne (EPFL) yang diinspirasikan
oleh profesor Jean-Daniel Nicoud. Jenis yang paling akhir
adalah mouse optic dan yang paling mudah dalam
perawatannya serta penggunaannya. Mouse jenis ini tidak
erlu dibersihkan pada bagian bolanya karena banyak nya
Page
137
debu yang menempel. Mouse optikal pertamakali dibuat oleh
Steve Kirsch dari Mouse Systems Corporation.
Mouse jenis ini menggunakan LED (Light emitting

diode) dan photo dioda untuk mendeteksi gerakan mouse.
Mouse optikal petamakali hanya dapat digunakan pada alas
(mousepad) khusus yang berwarna metalik bergaris biru -
abu-abu. Seiring perkembangan jaman mouse sekarang ini
dapat digunakan disemua permukaan yang padat dan rata,
kecuali permukaan yang memantulkan cahaya.
Mouse saat ini bekerja dengan menggunakan sensor

optik yang menggunakan LED sebagai sumber penerangan
untuk mengambil beribu-ribu frame gambar selama mouse
bergerak. Dan jenis mutakhir dari mouse adalah yang
berteknologi laser, pertamakali diperkenalkan oleh logitech,
perusahaan mouse terkemuka yang bekerja sama dengan
Agilent Technologies pada tahun 2004, dengan nama logitech
MX 1000. Logitech mengklaim bahwa mouse laser memiliki
tingakt akurasi yang 20 kali lebih besar dari mouse optikal.
Meskipun dasar kerja dari mouse optikal dengan

mouse laser sama hanya berbeda pada laser pengganti LED.
Meskipun begitu jenis mouse ini belum banyak dipergunakan
diperkirakan harganya yang masih mahal. Dari sekian
banyaknya perkembangan dari awal sampai yang terakhir
yang tidak berubah dari mouse adalah jumlah tombolnya.
Semua mouse memiliki tombol satu sampai tiga buah. Mouse
pertama memiliki satu tombol.
Kebanyakan mouse saat ini, yang didesain oleh

microsoft Windows, memiliki dua tombol. Beberapa mouse
Page
138
modernjuga memiliki sebuah wheel untuk memudahkan
scrolling. Sementara Ael memperkenalkan mouse satu
tombol, yang tidak berubah hingga kini. Mouse modern juga
sudah banyak yang tanpa kabel, dengan menggunakan
teknologi wireless seperti infra red, gelombang radio ataupun
bluetooth.
Mouse wireless yang populer saat ini menggunakan

gelombang radio dan ataupun bluetooth. Sedangkan mouse
yang menggunakan infrared kurang begitu populer karena
jarak jangkaunya yang terbatas, selain itu juga kurang begitu
praktis karena antara mouse dengan penerimanya tidal boleh
ada penghalang.
Berikut urutan sejarah perjalanan mouse dan jenis-jenis

mouse:
1. Mouse yang Pertama

Mouse kali pertama diperkenalkan oleh Douglas
Engelbart pada tahun 1967. Kali pertama
diperkenalkannya, mouse hanya memiliki dua alat
mekanik berbentuk roda sebagai menanda arah yang
masing-masing mengacu pada sumbu X dan sumbu Y.
Mouse ini hanya memiliki satu tombol saja pada bagian
atasnya. Dan bentuknya masih terlihat sangat primitif.
Namun biar demikian, mouse inilah yang telah menjadi
cikal-bakal mouse yang kini.
Page
139
Untuk dapat memfungsikan mouse sebagai alat
penunjuk atau input tidak hanya dibutuhkan fisiknya saja,
melainkan juga dibutuhkan keterlibatan software dari
mouse itu sendiri.
Perkembangan software yang mengirim kemajuan

hardware dari mouse ini telah mendorong mouse ke
posisi yang sangat penting. Baik sebagai input device
pada pekerjaan sederhana seperti mengetik, sampai pada
proses design dan bermain game 3D yang supercanggih.
2. Mekanik
Page
140
Mouse trackball yang tidak menggunakan kabel atau
wireless hanya membutuhkan tenaga 5 mA saja. Sangat
kecil, sehingga Anda tidak perlu sering ganti baterai. Hal
ini dikarenakan kerjanya tidak sepenuhnya elektrik. Ada
beberapa komponen yang bekerja mekanik, sehingga
tidak membutuhkan banyak tenaga listrik. Perawatannya
juga tidak sulit, cukup dibersihkan saja rodaroda mouse,
maka mouse dapat berjalan baik kembali.
Pengunaan bola atau yang disebut trackball ternyata

tidak selalu di bawah mouse. Saat ini, ada beberapa
mouse yang menggunaka bolanya di atas mouse sehingga
menggunakannya tidak perlu menelungkupkan telapak
tangan. Sehingga lebih mudah dan nyaman digunakan
ketimbang mouse biasa. Oleh sebab itu, harganya
umumnya lebih mahal dan tidak terlalu banyak
perusahaan IT yang memproduksinya. Beberapa di
antarannya adalah Microsoft dan Logitech.
Bola yang digunakan untuk mouse jenis ini agak

sedikit berbeda. Umumnya lebih besar dan licin. Berbeda
dengan mouse yang meletakan bolanya di bawah. Bola
tersebut cenderung kecil dengan permukaan yang tidak
licin. Hal ini dilakukan agar bola dapat berjalan dengan
baik atau tidak tergelincir pada permukaan. Oleh sebab
itu, untuk menggunakan mouse mekanik dengan bola di
bawah seseorang kerap kali harus menggunakan tatakan
khusus yang dinamakan mousepad.
Cara kerja mouse mekanik yang meletakkan

trackballnya di atas sama dengan kerja mekanik mouse
yang memiliki trackball-nya di bawah.
Page
141
3. Optic
Yang disebut mouse optical adalah mouse yang
menggunakan sensor cahaya serta lampu LED merah di
bawahnya sebagai pencahaya. Sensor pada mouse optical
mampu menangkap gambar dengan kecepatan 1500
frame per detik sampai 7000 frame per detik. Dengan
kecepatan mencapai 45 inci per detik dengan resolusi
2000 count per inci (cpi).
Mouse ini dinyatakan memiliki nilai presisi yang lebih

baik ketimbang mouse yang menggunakan mekanik.
Pernyataan ini tidak sepenuhnya benar. Untuk kelas yang
sama, mouse optical tidaklah lebih presisi. Yang memang
memiliki nilai presisi yang tinggi harganya saat ini masih
terbilang mahal. Sedangkan, mouse optical yang umum
dijual tidak memiliki kecepatan dan nilai presisi yang lebih
baik ketimbang mouse biasa. Dan keterangan ini sering
diabaikan oleh si produsen.
Page
142
Berbeda dengan mouse trackball yang sulit jalan
ditempat yang terlalu licin. Oleh sebab itu, mouse ini
membutuhkan sebuah landasannya sendiri yang
dinamakan mouse pad. Berbeda dengan mouse optical
yang cenderung lebih baik bekerja dipermukaan yang
mulus dan dengan warna yang cenderung gelap. Mouse
optical sulit dijalankan pada permukaan yang putih polos.
Berbeda dengan mouse mekanik yang sulit jalan di

tempat yang terlalu licin, mouse optical dapat digunakan
hampir pada seluruh jenis permukaan. Asalkan
permukaan tersebut tidak transparan atau terlalu glossy.
Mouse optic juga membutuhkan arus yang lebih

besar ketimbang mouse bola atau mekanis biasa. Lima
kali lebih besar arus yang dibutuhkan untuk menggerakan
mouse ini(25 mA). Ini artinya bila Anda menggunakan
mouse wireless optical akan lima kalilebih sering
mengganti baterai ketimbang menggunakan mouse
mekanik yang menggunakan bola.
Page
143
Cara kerja mouse optical adalah sebagai berikut:
lampu LED menembarkan cahayanya pada permukaan
lalu, sensor cahaya yang ada pada bagian bawah mouse
akan menangkap pergeseran yang terjadi pada cahaya
tersebut. Atau dapat juga dikatakan sebagai berikut. Bila
mouse mekanik komputer mencatat pergeseran yang
dilakukan oleh mouse, sebaliknya dengan mouse optical,
komputer mencatat pergeseran yang terjadi pada
landasan mouse.
Kelebihan mouse optic:
Tidak ada celah kotoran masuk kedalam mouse artinya isi

mouse tidak akan kotor dan memperkecil kerusakan
mouse.
Tidak ada mekanisme yang bergerak, artinya mouse akan
menjadi lebih awet.
Meningkatkan sensor gerakan sehingga respon menjadi
mulus
Page
144
Tidak membutuhkan permukaan khusus seperti mouse
pad
Kekurangan mouse optic:
Tidak dapat berjalan di atas permukaan yang memantul

seperti lantai keramik, dll.
dapat berjalan di atas permukaan yang tembus pandang
seperti kaca, gelas, dll.
Mengeluarkan cahaya merah yang menyilaukan dan jika
dipandang terus menerus mungkin bisa membahayakan
kesehatan mata
4. Mouse Laser
Perkembangan mouse optical kini sudah jauh lebih

murah ketimbang waktukali pertama diperkenalkannya.
Perlahan-lahan kehadiran mouse optical sudah dinilai
sangat umum. Kini ada satu mouse lagi yang mulai
diperkenalkan kepada masyarakat. Kerjanya hampir sama
Page
145
dengan mouse optical hanya saja bila pada mouse optical
biasa menggunakan ampu LED, maka pada mouse laser,
bukan lagi sinar LED yang digunakan, melainkan sinar
laser.
Hal ini membuat ketajaman gambar yang ditangkap

oleh sensor menjadi lebih baik. Jika pada permukaan
glossy seperti papan whiteboard mouse optical dengan
lampu LED-nya sulit membedakan setiap tampilan
permukaan, sebaliknya dengan laser, permukaan tidak
lagi menjadi sama, melainkan berstruktur atau berpola.
Mouse ini kali pertama diperkenalkan tahun 2004

oleh Logitech yang bekerja sama dengan Agilent
Technologies dalam pengembangannya. Teknologi baru
ini diklaim mampu memiliki ketepatan 20x kali lebih baik
dari mouse optical. Hanya saja harga laser mouse sampai
saat ini masih tergolong sangat mahal. Kini, selain
Logitech, Microsoft juga ikut meluncurkan mouse
berbasiskan teknologi laser ini.
5. Single Click dan Scroll
Page
146
Dari sejak awal diperkenalkan, fungsi mouse tidak
hanya sebagai penunjuk arah saja. Tetapi, juga sudah
berfungsi sebagai input device. Oleh sebab itu, mouse
sejak pertama kali diperkenalkan sudah memiliki sebuah
tombol.
Waktu kali pertama, memang hanya ada satu tombol

yang melengkapinya. Namun kini seiring majunya
teknologi pada mouse, tidak hanya tombol saja yang
bertambah pada mouse, ada beberapa hal lain yang kini
juga telah melengkapi mouse. Di antaranya scroll button
atau tombol scroll, efek getar, dan masih banyak lagi.
Bahkan dari segi keamanan kini juga sudah banyak mouse
yang dilengkapi dengan sidk jari.
Tombol yang ada pada mouse memiliki berbagai

macam fungsi. Untuk fungsi yang paling umum biasanya
terletak pada tombol di sebelah kiri. Sedangkan, untuk
fungsi tambahan biasanya terletak disebelah kanan. Scroll
mouse banyak dipergunakan untuk melihat sebuah
dokumen yang panjang, ke bawah. Sedangkan tombol
yang lebih banyak dari itu umumnya sangat terasa
manfaatnya bila sedang digunakan untuk bermain games.
Misalnya saja untuk mengganti senjata, untuk melihat
peta, dan sebagainya. Sedangkan pada kebutuhan 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
147
Tidak hanya fasilitas yang beragam bentuk mouse
juga sangat beragam. Mulai dari yang sangat kecil
(setengah besar telur ayam negeri) sampai sangat besar
genggaman telapak tangan. Bahkan ada juga yang
berbentuk sangat mirip menyerupai joystick. Sebenarnya
apapun bentuk mouse harus disesuaikan dengan
kenyamanan penggunanya. Untuk presentasi banyak
sekali para pebisnis yang menggunakan trackball wireless
yang bentuknya sangat nyaman dalam genggaman seperti
layaknya sebuah remote atau joystick.
( sumber: http://ya2oke.blogspot.com/2009/04/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
148
Untuk menggulung (scrolling) layar dengan
menggunakan roda scroll.
Untuk mendeteksi gerakan 2 dimensi secara relatif
terhadap posisinya sekarang.
Mempermudah dan mempercepat pekerjaan. Terlebih
bagi kita yang sering melakukan aktivitas mengedit foto
atau membuat desain.
Sebagai pengontrol perbesaran tampilan objek.
Untuk mengaktifkan command button dan juga
melakukan suatu aksi tertentu pada aplikasi.
Dapat digunakan uantuk memperbesar atau juga
memperkecil tampilan worksheet.
Untukmelakukan konversi dan isntruksi ke dalam bentuk
sinyal elektronik yang dapat dimengerti oleh komputer.
Untuk perintah yang tidak menyediakan menu shortcut,
tombol kanan pada mouse berfungsi sebagai tombol
enter.
C. KONSEP MOUSE PADA GLUT

Dalam konsep mouse pada glut ada beberapa fungsi dasar
dan inisialisasi yang digunakan untuk melakukan interaksi
mouse. Adapun penjelasannya adalah sebagai berikut :
1. Fungsi dasar pembuatan interaksi dengan
menggunakan MouseFunction
Page
149
GLUTAPI void APIENTRY glutMouseFunc(void
(GLUTCALLBACK *func)(int button, int state,
int x, int y));
Paramater func adalah fungsi yang akan ditangani
dengan event klik mouse.
GLUTAPI void APIENTRY glutMotionFunc(void
*func(int x, int y));
Fungsi di atas adalah fungsi pelengkap dari
fungsi interaksi mouse untuk mendeteksi gerakan
mouse.
2. Inisialisasi dalam penggunaan MouseFunction

void mouse(int button, int state, int x,int
y){
if(button==GLUT_LEFT_BUTTON &&
state==GLUT_DOWN)
drawDot(x,480-y);
if(button==GLUT_RIGHT_BUTTON &&
state==GLUT_DOWN)
drawDot2(x,480-y);
if(button==GLUT_MIDDLE_BUTTON &&
state==GLUT_DOWN)
drawDot3(x,480-y);
void motion(int x,int y){
Page
150
Dalam penerapan interaksi mouse pada open gl / glut,
Fungsi inisialisasinya adalah sebagai berikut :
1. GLUT_LEFT_BUTTON
Fungsi inisialisasi ini bertujuan untuk inisialisasi button
mouse kiri. Jadi apabila kita ingin mengaktifkan fungsi
penggunaan dari button mouse sebelah kiri maka bisa
menggunakan fungsi inisialisasi ini.
2. GLUT_RIGHT_BUTTON
mouse kanan. Jadi apabila kita ingin mengaktifkan fungsi
penggunaan dari button mouse sebelah kanan maka bisa
3. GLUT_MIDDLE_BUTTON
mouse tengah. Jadi apabila kita ingin mengaktifkan fungsi
penggunaan dari button mouse tengah maka bisa
4. GLUT_DOWN
Fungsi inisialisasi ini adalah untuk inisialisasi ketika
tombol mouse ditekan.
5. GLUT_UP
Fungsi inisialisasi ini adalah untuk inisialisasi ketika
tombol mouse dilepaskan.
Kemudian pada main program perlu menambahkan

fungsi untuk callback fungsi MouseFunction.
glutMouseFunc(mouse);
glutMotionFunc(motion);
Page
151
3. Sistim Koordinat interaksi mouse pada glut
Sistim koordinat interaksi mouse pada glut adalah sebagai
berikut.
Misalnya ditentukan iinisialisasi awal adalah :
int w = 480, h=480;
float x=0, y=0, z=0;
maka :
a. Titik 0,0 berada pada pojok kiri atas, koordinatnya akan

berubah apabila terjadi pergeseran mouse.
b. Titik 480,0 berada pada pojok kanan atas.
c. Titik 0, 480 berada pada pojok kiri bawah
d. Titik 480,480 berada pada pojok kanan bawah
D. CONTOH PROGAM PENERAPAN MOUSE PADA

GLUT
1. Konsep KLIK terhadap sebuah objek
Skript code
#include <stdlib.h>
#include <glut.h>
#include <stdio.h>
void Triangles(){
Page
152
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(){
glRotatef(10,0.,0.,1.);
Triangles();
glFlush();
}

}
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE |
GLUT_RGBA);
glutCreateWindow("coba");
Page
153
gluOrtho2D(-320.0,320.0,-320.0,320.0);
glutMouseFunc(mouseku);
glutMainLoop();
}
Screenshot hasil
Analisis:
Apabila klik kiri pada mouse ditekan, maka program akan

mengeksekusi blok perintah yang ada pada kondisi pertama,
window command akan menampilkan tulisan tombol Kiri
(x,y) dimana x dan y adalah posisi pointer pada koordinat
mouse pointer di kanvas. Begitu juga dengan kondisi tombol
yang lain.
Sementara operasi klik tombol mouse dapat dideteksi
melalui identifikasi tombol pada fungsi mouse(int button, int
state, int x, int y). Pada fungsi tersebut diberi kondisi apabila
sebuah tombol tertentu di tekan, maka akan dilakukan
perintah yang ada di dalam kondisi tersebut. Callback
function untuk fungsi klik mouse adalah glutMouseFunc().
Page
154
2. Interaksi Drag
Skrip soal
#include <stdlib.h>
#include <glut.h>
#include <stdio.h>
void Triangles(){
glVertex2i(0,0);
glVertex2i(100,-30);
glVertex2i(100,30);
glEnd();
}
void mouseku(int button, int state, int x, int y){

if(button==GLUT_LEFT_BUTTON){
printf("tombol KIRI (%d,%d)\n",x,y);
}else if(button==GLUT_MIDDLE_BUTTON){
printf("tombol TENGAH
(%d,%d)\n",x,y);
}else{
printf("tombol KANAN (%d,%d)\n",x,y);
}
if(state==GLUT_DOWN){
printf("tombol DITEKAN\n");
}else{
printf("tombol DILEPAS\n");
Page
155
}
}
void motionku(int x, int y){

printf("posisi printer mouse
(%d,%d)\n",x,y);
}
void display(){
glRotatef(89,0.,0.,1.);
Triangles();
glFlush();
}

}
glutInitDisplayMode(GLUT_DEPTH | GLUT_SINGLE
| GLUT_RGBA);
glutCreateWindow("GLUT");
gluOrtho2D(-320.0,320.0,-320.0,320.0);
Page
156
glutMouseFunc(mouseku);
glutMotionFunc(motionku);
glutMainLoop();
}
Sceen shot
Analisa :
command window dapat menampilkan tulisan posisi pointer

mouse (??,??)? Saat mouse di tekan kemudian dilakukan
drag atau ditekan sambil digeser.Ditampilkan ketika
dilakukan drag atau ditekan sambil digeser.sehingga Move
event (ketika mouse digerakkan dengan tombol mouse
tertekan), passive move (ketika mouse digerakkan tanpa
menekan tombol), mouse event (ketika tombol mouse
ditekan atau dilepaskan). Ketika kita pertama kali menekan
tombol mouse, kita mengerjakan sebuah blok perintah
(event), tapi mempertahankan tombol mouse tertekan tidak
menjalankan blok perintah apapun. Event berikutnya setelah
tombol ditekan adalah: drag atau dilepaskan. Ketika event
mouse telah dilakukan, mouse akan kembali ke posisinya,
Page
157
sesuai posisi logika (tidak sebenarnya) di layar. Tetapi untuk
feedback, muncul tulisan posisi (x,y) pada layar.
3. Buatlah program untuk deteksi DOUBLE CLICK, ketika

DOUBLE CLICK object yang dipilih skalanya menjadi 1.5,
sedangkan untuk DOUBLE CLICK berikutnya
Sript :
#include "stdlib.h"
#include "stdio.h"
#include <conio.h>
#include "glut.h"
float x=1,y=1,z=0;
int w=480, h=480, flag=0,flg;
void drawQuad() {
glColor3f(0,0,1);
glVertex2f(-20.,-20.);
glVertex2f(20.,-20.);
glVertex2f(-20.,20.);
glEnd();
}
void mouse(int button, int state, int xmouse, int

ymouse){
if(flg==0)
{
if (state==GLUT_DOWN)
{
if(button==GLUT_LEFT_BUTTON)
{
Page
158
flag++;
if(flag==2)
{
flg=3;
x=3;
y=3;
printf("%d", flg);
}
}
}
}
if (flg==3)
{
if (state==GLUT_DOWN)
{
if(button==GLUT_LEFT_BUTTON)
{
flag--;
if(flag==0)
{
x=1;
y=1;
flg=0;
}
}
}
}
}
glClearColor(1,1,1,1);
glPushMatrix();
glScalef(x,y,z);
drawQuad();
glPopMatrix();
Page
159
glFlush();
}

}

glutInitWindowSize(w,h);
glutCreateWindow("Interaksi Mouse");
gluOrtho2D(-w/2,w/2,-h/2,h/2);
glutMouseFunc(mouse);
glutMainLoop();
}
Screenshot
Analisa:
Jika dilakukan klik dobel, maka akan masuk ke kondisi

pertama dimana variabel flg==0, program akan memberi nilai
pada variabel global x, dan y, masing-masing 3 yang nantinya
Page
160
akan digunakan untuk parameter fungsi scale, sehingga objek
akan memiliki ukuran 3x lebih besar. Jika dilakukan klik lagi,
maka akan masuk ke kondisi kedua yaitu dimana variabel
flg==3, program akan memberi nilai pada variabel global x,
dan y, masing-masing 3 yang nantinya akan digunakan untuk
parameter fungsi scale, sehingga ukuran objek akan kembali
seperti semula.
Page
161
BAB 8
OBJEK 3D
A. Pengertian Objek 3 Dimensi

Grafik komputer 3 dimensi biasa disebut 3D atau
adalah bentuk dari benda yang memiliki panjang, lebar,
dan tinggi. Grafik 3 Dimensi merupakan teknik
penggambaran yg berpatokan pada titik koordinat
sumbu x(datar), sumbu y(tegak), dan sumbu z(miring).
Representasi dari data geometrik 3 dimensi
sebagai hasil dari pemrosesan dan pemberian efek
cahaya terhadap grafika komputer 2D. Tiga Dimensi,
biasanya digunakan dalam penanganan grafis. 3D secara
umum merujuk pada kemampuan dari sebuah video card
(link). Saat ini video card menggunakan variasi dari
instruksi-instruksi yang ditanamkan dalam video card itu
sendiri (bukan berasal dari software) untuk mencapai
hasil grafik yang lebih realistis dalam memainkan game
komputer.
Grafik 3D merupakan perkembangan dari grafik
2D. Didalam grafika komputer, 3D merupakan bentuk
grafik yang menggunakan representasi data geometri
tiga dimensi.
Perbedaan paling utama dari objek 2 dimensi dan
objek 3 dimensi yaitu kedalamannya. Yaitu suatu jarak
antara pengamat dengan suatu objek yang dilihat (point
of view). Jadi, jika objek 2 dimensi hanya menggunakan 2
ukuran (panjang dan lebar), maka 3 dimensi
Page
162
menggunakan 3 ukuran meliputi panjang, lebar,
kedalaman yang disimbolkan dengan sumbu x, y, z.
Suatu objek rangka 3D apabila disinari dari arah
tertentu akan membentuk bayangan pada permukaan
gambar. Proses pembuatan grafik komputer 3D dapat
dibagi ke dalam tiga fase, yaitu 3D modeling yang
mendeskripsikan bentuk dari sebuah objek, layout dan
animation yang mendeskripsikan gerakan dan tata letak
sebuah objek, dan 3D rendering yang memproduksi
image dari objek tersebut.
Di dalam dunia game, 3D secara umum merujuk
pada kemampuan dari sebuah video card (link). Saat ini
video card menggunakan variasi dari instruksi-instruksi
yang ditanamkan dalam video card itu sendiri (bukan
berasal dari software) untuk mencapai hasil grafik yang
lebih realistis dalam memainkan game komputer.
B. Objek 3 Dimensi
Benda tiga dimensi tersusun dari sekumpulan
surface. Surface yaitu permukaan kulit.
Gambar 8. 1 contoh permukaan 3 dimensi
Page
163
Surface dapat dibuat dari rangkaian Polygon.
Polygon adalah bentuk yang disusun dari serangkaian
garis yang terhubung satu dengan yang lain dan
berbentuk kurva tertutup sehingga membentuk sebuah
objek gambar. Titik sudut dari Polygon disebut vertex
sedangkan garis penyusun Polygon disebut edge.
Gambar 8. 2 Polygon
Polygon digambar dengan menggambar 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
164
Bentuk polygon yang paling tepat digunakan untuk
membuat permukaan benda tiga dimensi adalah polygon
segitiga (triangle). Hal ini disebabkan polygon segitiga
akan selalu berada dalam keadaan planar (datar) 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
165
vektor tegak lurus pada permukaan. Fungsinya untuk
bayangan benda tersebut.
Gambar 8. 5 garis normal polygon
C. Alur Proses Rendering Grafis 3D
Pada grafika komputer, rendering adalah proses

pembuatan/ produksi image/gambar pada layar dari
pendeskripsian suatu model.
Proses rendering grafis 3D mendeskripsikan objek
3D dari vertex-vertex pada objek primitive(seperti
segitiga, titik, garis, dan segiempat), dan menghasilkan
warna-warna pada pixel pada layar.
Gambar 8. 6 Alur proses Rendering grafis 3D
Page
166
1. Modelling Trasnformations :
Menempatkan model pada sistem koordinat yang
disebut world space. Semua objek, sumber cahaya,
dan sudut pandang pengamat berada pada world
space.
2. Trival Rejection :
Rejection (penolakan) dilakukan terhadap 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
167
Pada tahap ini dilakukan eliminasi total pada objek
(dan bagian objek) yang tidak visible bagi citra.
6. Projection :
Objek selanjutnya diproyeksikan ke dalam 2D.
Transformasikan dari ruang pengamatan ke layar
7. Rasterization :
Konversi tiap objek primitive ke suah set fragment.
Sebuah fragment diperlakukan seperti pixel pada
ruang 3 dimensi, selaras dengan grid pixel, dengan
atribut seperti posisi, warna, dan tekstur yang
normal.
8. Display :
Melakukan interpolasi 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
168
koordinat tangan kiri banyak digunakan pada
peggambaran pada grafika komputer Sistem koordinat
tangan kiri digunakan agar objek 3 dimensi memiliki nilai
z positif (jarak jauh dekat benda lebih terlihat).
Setiap titik dalam sistem koordinat tiga dimensi

dapat ditentukan posisinya dengan meentukan seberapa
jauh, tingggi dan lebar dari objek aslinya yang dtentukan
berdasarkan koordinat-koordinat pada sumbu x, y, dan z.
Gambar 8. 7 sistem koordinat 3D tangan kiri dan tangan

kanan
E. Primitive 3D
Ada beberapa bentuk primitive dari objek 3 dimensi.
Promitive yaitu bentuk dasar yang dapat dengan mudah
didefinisikan secara matematik.
Sphere
glutWireSphere(5, 20, 20);
Page
169
Gambar 8. 1 sphere (bola)
Cube
glutWireCube(25);
Gambar 8. 2 Cube (kubus)
Cone
glutWireCone(alas, tinggi, 20, 20);
Gambar 8. 3 cone (kerucut)
Dodecahedron
glutWireDodecahedron();
Page
170
Gambar 8. 4 bola segilima
Teapot
glutWireTeapot(15);
Gambar 8. 5 Poci The
Torus
glutWireTorus(luar, dalam, 20, 20);
Gambar 8. 6 cincin
Page
171
Setiap primitive 3D memiliki parameter nilai yang
mengekspresikan letak dan bentuk primitive objek
tersebut.
F. Transformasi Objek 3 Dimensi

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

jarak untuk koordinat x, y, dan z.
Gambar 8. 7 memindahkan titik dengan translasi

vektor T = (tx, ty, tz)
Page
172
Sebuah bangun tiga dimensi yang ditranslasikan
dengan vektor tertentu, dilakukan dengan
memindahkan titik-titik sesuai dengan vektor
tersebut.
Gambar 8. 8 memindahkan balok dengan translasi

vektor T=(tx, ty, tz)
gltranslatef(x,y,z: GLfloat);
Gambar 8. 9 posisi bola sebelum dan setelah

translasi
Kode program dalam OpenGL dari program di

atas adalah
glbegin(gl_quads);
glcolor3f(1,1,1);
glvertex3f(-2,0,-2);
glvertex3f(-2,0,2);
glvertex3f(2,0,2);
Page
173
glvertex3f(2,0,-2);
glend();
quadratic:=glunewquadric();
glusphere(quadratic,0.5,32,32);
gltranslatef(1,0,1);
glusphere(quadratic,0.5,32,32);
glFlush();
Dari kode diatas diketahui bahwa posisi bola
sebelum ditranslasikan berada pada koorinat (0,0,0).
Kemudian posisinya ditranslasikan sepanjang sumbu
x sebesar 1 satuan dan sepanjang sumbu z sebesar 1
satuan. Dengan adanya proses pentranslasian
tersebut, maka pusat koordinat yang baru berada
pada koordinat (1,0,1).
b. Rotasi
Untuk merotasikan sebuah objek diperlukan
sumbu rotasi (poros untuk merotasikan objek)
(Donald Hearn, 1994). Sintaks untuk merotasikan
objek pada OpenGL adalah glRotate(sudut, x, y, z).
Parameter pertama adalah nilai perputaran
sudut. Parameter kedua , ketiga, dan keempat
bernilai 1 apabila sumbunya dijadikan sumbu putar.
Contoh perotasian objek ditunjukkan pada gambar di
bawah ini.
Page
174
Gambar 8. 10 Tabung sebelum dan setelah di
rotasi
Kode program :
quadratic:=glunewquadric();
glucylinder(quadratic,0.25,0.25,1,32,32);
gltranslatef(1,0,1);
glrotatef(-90,1,0,0);
glucylinder(quadratic,0.25,0.25,1,32,32);
Pada contoh diatas, diketahui bahwa posisi awal
tabung sejajar dengan sumbu z. Namun, setelah
dirotasi sebesar - putar x, posisi
tabung sejajar dengan sumbu y. Itu menunjukkan
bahwa perotasian objek dengan sudut putar positif
akan berputar berlawanan dengan arah jarum jam,
begitu pula sebaliknya, jika sudut putar bernilai
negatif, maka objek akan berputar searah dengan
jarum jam.
c. Skalasi
Transformasi skala adalah perubahan ukuran
suatu objek (Sutopo, 2002). Sintaks untuk untuk
Page
175
melakukan proses penskalaan dalam OpenGL adalah
glScalef(x,y,z:glFloat)
Parameter pertama, kedua, dan ketiga 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);
glColor3f(1,0,0);glVertex3f(-1,0,0);
glColor3f(0,1,0);glVertex3f(0,1,0);
glEnd;
gltranslatef(2.5,0,0);
glscalef(1.5,0.5,1);
glColor3f(1,0,0);glVertex3f(-1,0,0);
glEnd;
glFlush();
Page
176
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 |
glLoadIdentity();
glTranslatef(0,0,-40);
glRotatef(sudut,sx,sy,sz);
cube();
glutSwapBuffers();
}
void resize(int w1, int h1){

glViewport(0,0,w1,h1);
glLoadIdentity();
gluPerspective(45.0, (float) w1/(float) h1,
Page
177
1.0,300.0);
glLoadIdentity();
}
void init(){
glClearColor(0.0,0.0,0.0,1.0);
glLoadIdentity();
gluPerspective(45.,(GLdouble)w/(GLdouble)h,
1.,300.);
}
void myKeyboard(unsigned char key, int x, int y){

if(key=='x'){
sx=1;
sy=0;
sz=0;
sudut+=10;
}
else if(key=='y'){
sx=0;
sy=1;
sz=0;
sudut+=10;
}
else if(key=='z'){
sx=0;
sy=0;
sz=1;
}
}
Page
178
void update(int value){
glutTimerFunc(50,update,0);
}

glutInitDisplayMode(GLUT_DOUBLE |
GLUT_DEPTH | GLUT_RGBA);
glutCreateWindow("Objek 3D");
init();
glutMainLoop();
}
Hasil
- Tanpa interaksi keyboard
- Dengan interaksi keyboard x, maka objek

akan bergerak pada sumbu x saja.
Page
179
- Dengan interaksi keyboard y, maka objek
akan bergerak pada sumbu y saja.
2. Contoh Penerapan WireSphere pada GLUT

WireSphere menggunakan fungsivoid
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
180
disamping adalah bentuk pendeklarasian fungsi Sphere
}
void display(){
glLoadIdentity();
glTranslatef(0,0,z);
sphere();
glutSwapBuffers();
}

glLoadIdentity();
1.0,300.0);
glLoadIdentity();
}
void init(){
glLoadIdentity();
1.,300.);
}
if(key=='y'){
Page
181
sy=1;
sudut+=10;
}
}
}
init();
glutMainLoop();
}
Hasil
Page
182
- Dengan interaksi keyoboard y, objek akan
bergerak pada sumbu y saja.
Page
183
3. Contoh Penerapan WireCone pada GLUT
a. WireCone menggunakan fungsi void
glutWireCone(GLdouble base, GLdouble height,GLint
slices, GLint stacks); untuk membuat ukuran benda
ditentukan dari dasar jari-jari alasnya.

Contoh syntax:
#include<stdlib.h>
#include<glut.h>
float w=480,h=480;
Page
184
float sudut=0,sx=0,sy=0,sz=0,zz=-70;
int t=20;
void WireCone(){
glColor3d(0,1,1);
glutWireCone(10,t,50,50); fungsi disamping
adalah bentuk pendeklarasian fungsi Cone
}
void display(){
glLoadIdentity();
glTranslatef(0,0,zz);
WireCone();
glutSwapBuffers();
}

glLoadIdentity();
1.0,300.0);
glLoadIdentity();
}
void init(){
glLoadIdentity();
Page
185
1.,300.);
}

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
init();
glutMainLoop();
}
Hasil
- Dengan interaksi keyoboard x, objek akan

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

Page
187
- 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 untuk
rings);
merender 12 sisi yang berpusat pada asal,dan dengan
radius sama dengan kuadrat dari 3.
Contoh syntax:
#include<stdlib.h>
#include<glut.h>
float w=480,h=480;
float
sudut=0,sx=0,sy=0,sz=0,dalam=20,luar=50,sides=50,ri
ngs=50;
Page
188
void torus(){
glColor3d(0,1,1);
glutWireTorus(dalam,luar,sides,rings);
fungsi disamping adalah bentuk pendeklarasian fungsi Torus
}
void display(){
glLoadIdentity();
glTranslatef(0,0,-200);
torus();
glutSwapBuffers();
}

glLoadIdentity();
1.0,300.0);
glLoadIdentity();
}
void init(){
glLoadIdentity();
1.,300.);
Page
189
}

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

}

Page
190
init();
glutMainLoop();
}
Hasil


Page
191
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
192
void wireDode(){
glColor3d(0,1,0);
glutWireDodecahedron(); fungsi disamping
adalah bentuk pendeklarasian fungsi Dode
}
void display(){
glLoadIdentity();
glTranslatef(0,0,t);
wireDode();
glutSwapBuffers();
}
glLoadIdentity();
1.0,300.0);
glLoadIdentity();
}
void init(){
glLoadIdentity();
1.,300.);
}
Page
193
if(key=='x'){
sx=1;
sy=0;
sz=0;
sudut+=10;
}
else if(key=='y'){
sx=0;
sy=1;
sz=0;
sudut+=10;
}
else if(key=='z'){
sx=0;
sy=0;
sz=1;
sudut+=10;
}
}
}
init();
Page
194
glutMainLoop();
}
Hasil


Page
195
6. Contoh Penerapan TetraHedron pada GLUT

TetraHedron menggunakanfungsi
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;
void WireTetrahedron(){
glColor3d(1,0,1);
glutWireTetrahedron(); fungsi disamping
adalah bentuk pendeklarasian fungsi TetraHedron
}
void display(){
glLoadIdentity();
Page
196
WireTetrahedron();
glutSwapBuffers();
}
glLoadIdentity();
1.0,300.0);
glLoadIdentity();
}
void init(){
glLoadIdentity();
1.,300.);
}

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

}

init();
glutMainLoop();
}
Hasil
Page
198



Page
199
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;
void WireOctahedron(){
glColor3d(1,0,1);
glutWireOctahedron(); fungsi disamping
adalah bentuk pendeklarasian fungsi OctaHedron
}
void display(){
glLoadIdentity();
WireOctahedron();
glutSwapBuffers();
}
glLoadIdentity();
1.0,300.0);
glLoadIdentity();
Page
200
}
void init(){
glLoadIdentity();
1.,300.);
}

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;
}
}
Page
201
}

init();
glutMainLoop();
}
Hasil

Page
202

8. Contoh Penerapan Teapot pada GLUT
Page
203
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(){
glLoadIdentity();
teapot();
glutSwapBuffers();
}

glLoadIdentity();
1.0,300.0);
glLoadIdentity();
Page
204
}
void init(){
glLoadIdentity();
1.,300.);
}

if(key=='x'){
sx=1;
sy=0;
sz=0;
sudut+=10;
}
else if(key=='y'){
sx=0;
sy=1;
sz=0;
sudut+=10;
}
else if(key=='z'){
sx=0;
sy=0;
sz=1;
sudut+=10;
}
}
void mySpecialKeyboard(int key,int x, int y){
Page
205
switch(key){
case GLUT_KEY_UP:
tepot+=1;
break;
case GLUT_KEY_DOWN:
tepot-=1;
break;
}
}
}
init();
glutMainLoop();
}
Hasil
Page
206


Page
207
H. Contoh Implementasi Objek 3 Dimensi dalam
Open GL
Penerapan/implementasi obyek 3 dimensi OpenGL,
adalah dengan mengkombinasikan beberapa obyek
dasar dari obyek 3D, seperti Wirecube, Wiresphere, dll.
Berikut merupakan contoh pengimplementasian dari
obyek 3 dimensi OpenGL:
Membuat boneka salju.
Contoh syntax:
#include<stdlib.h>
#include<glut.h>
float w=480,h=480;
float sudut=0,rx=0,ry=0,rz=0,p=-50;
void satu(){ //bagian kepala

glColor3d(1,1,1);
glutSolidSphere(7,200,200); //berfungsi untuk
membuat bentuk bola
}
void dua(){ //bagian badan

glColor3d(1,1,1);
glutSolidSphere(9,250,250); //berfungsi untuk
membuat bentuk bola bagian badan
}
void tiga(){ //topi segitiga

glColor3d(1,1,0);
glRotatef(-90,1,0,0); //ditotasikan dari bentuk
topi pada umumnya menjadi bentuk segi3
glutSolidCone(5,10,150,150); //berfungsi untuk
membuat bentuk segitiga
Page
208
}
void empat(){ //mata

glColor3d(0,0,0);
glutSolidSphere(1.1,100,100);
}
void lima(){ //hidung

glColor3d(0,1,0);
glutSolidCone(1.1,5,50,50);
}
void manusiaSalju3D(){
satu();
glPushMatrix();
glTranslatef(0,-15,0);
dua();
glPopMatrix();
glPushMatrix();
tiga();
glPopMatrix();
glPushMatrix();
empat();
glPopMatrix();
glPushMatrix();
empat();
glPopMatrix();
Page
209
glPushMatrix();
glTranslatef(0,-0.5,6);
lima();
glPopMatrix();
}
void display(){
glLoadIdentity();
glTranslatef(0,0,p);
glRotatef(sudut,rx,ry,rz);
manusiaSalju3D();
glutSwapBuffers();
}

glLoadIdentity();
1.0,300.0);
glLoadIdentity();
}
void init(){
glLoadIdentity();
gluPerspective(45.,(GLdouble)w/(GLdouble)h,1.,3
00.);
Page
210
}

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

}

glutInitDisplayMode(GLUT_DOUBLE | GLUT_DEPTH |
GLUT_RGBA);
Page
211
glutCreateWindow("Boneka Salju");
init();
glutMainLoop();
}
Hasil
- Dengan interaksi keyoboard x, objek akan bergerak

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

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

tidak diterangi
Seperti ditunjukkan pada Gambar 1.1, wilayah
gelap tampak tidak berbeda dari bulatan dua dimensi .
hal Ini menunjukkan betapa pentingnya interaksi antara
obyek dan cahaya adalah dalam menciptakan adegan tiga
dimensi. Agar obyek yang telah dibuat terlihat lebih
nyata, diperlukan tambahan efek pencahayaan pada
obyek yang telah kita buat. Pencahayaan adalah
proses pemberian cahaya pada suatu obyek, dikenal
dengan istilah lighting atau iluminasi. Pada OpenGL
terdapat sebuah perbedaan penting antara warna dan
pencahayaan yang perlu pahami. Ketika menggunakan
pencahayaan atau tekstur pemetaan dengan efek
pencahayaan dihidupkan, warna dari vertex adalah efek
kumulatif dari warna bahan dan cahaya yang bersinar di
puncak. Ketika pencahayaan dimatikan, maka warna dari
vertex adalah efek pengaturan warna dan warna yang
berbeda dengan bahan warna.
Page
215
Gambar 1.2 Contoh ambient, diffuse, dan specular pada
pantulan cahaya
Dengan menggunakan OpenGL, dapat
memanipulasi pencahayaan dan obyek dalam sebuah
adegan untuk menciptakan berbagai macam efek.
Dalam pokok bahasan pada bab pencahayaan akan
dimulai dengan sebuah pencahayaan yang penting
pada permukaan tersembunyi penghapusan. Kemudian
menjelaskan bagaimana untuk mengontrol pencahayaan
dalam suatu adegan, membahas model konseptual
OpenGL pencahayaan, dan menggambarkan secara rinci
cara mengatur pencahayaan dengan banyak parameter
untuk mendapatkan efek tertentu. Pada akhir bab,
perhitungan matematis yang menentukan bagaimana
warna mempengaruhi pencahayaan disajikan
B. Pencahayaan pada OpenGL dan Dunia Nyata

Ketika melihat permukaan fisik, persepsi warna
pada mata tergantung pada distribusi energi foton yang
datang dan memicu sel-sel kerucut mata. Foton
berasal dari sumber cahaya atau kombinasi dari
sumber, yang sebagian diserap dan sebagian yang
Page
216
dipantulkan oleh permukaan. Selain itu, permukaan
yang berbeda memiliki sifat yang sangat berbeda ada,
misalnya yang mengkilap dengan sempurna akan
memantulkan cahaya dalam arah tertentu, sementara
yang lain menyebarkan cahaya sama-sama masuk di
segala penjuru. Pencahayaan pada OpenGL hanya dengan
cahaya pendekatan dan cahaya lampu seolah-olah dapat
dipecah menjadi komponen merah, hijau, dan biru.
Dengan demikian, warna sumber cahaya dicirikan oleh
jumlah warna yang memancarkan cahaya merah, hijau,
dan biru, dan materi permukaan ditandai dengan
persentase komponen warna merah, hijau, dan biru yang
masuk dan tercermin dalam berbagai arah. Persamaan
pencahayaan pada OpenGL hanya sebuah pendekatan,
tetapi satu yang bekerja cukup baik dan dapat dihitung
relatif cepat. Jika menginginkan yang lebih akurat atau
model pencahayaan hanya berbeda, harus melakukan
perhitungan sendiri dalam perangkat lunak. Dengan
perangkat lunak tersebut dapat menjadi sangat kompleks,
seperti beberapa jam membaca buku teks optik pun harus
meyakinkan.
Model pencahayaan dalam OpenGL, cahaya
dalam sebuah adegan berasal dari beberapa sumber
cahaya yang dapat secara individual diaktifkan dan
dinonaktifkan. Beberapa cahaya datang dari arah atau
posisi tertentu, dan beberapa cahaya umumnya
tersebar karena adanya suatu peristiwa. Sebagai
contoh, ketika menghidupkan bola lampu dalam
ruangan, sebagian besar berasal dari cahaya bola
lampu, tetapi beberapa cahaya datang setelah ada
pantulan dari dinding satu, dua, tiga, atau lebih. Cahaya
Page
217
yang memantul ini disebut ambient dan dapat
diasumsikan begitu cahaya tersebar tidak ada cara
untuk mengetahui arah semula, tetapi hal ini akan
menghilang jika suatu sumber cahaya dimatikan.
Akhirnya, mungkin ada cahaya ambient umum dalam
adegan yang tidak berasal dari sumber tertentu, 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
218
Arah pencahayaan dari sumber cahaya (omni,
spot)
Komponen pengaruh lingkungan terhadap
cahaya (ambient, diffuse, specular)
2. Material dari obyek, yang memodelkan bagaimana
material bereaksi terhadap sumber cahaya, yaitu:
Material reflektan terhadap komponen cahaya
ambient
diffuse
specular
Material sebagai sumber cahaya (emitance)
C. Cahaya Ambient, Diffuse, dan Specular

Pencahayaan ambient adalah cahaya yang sudah
berserakan begitu banyak disebabkan oleh lingkungan
dan arahnya tidak mungkin ditentukan atau tampaknya
datang dari segala penjuru. Backlighting pada sebuah
ruangan memiliki komponen ambient besar, karena
sebagian besar cahaya yang mencapai mata yang
memantul dari banyak permukaan. Sebuah lampu sorot
kecil di luar rumah memiliki komponen ambient,
sebagian besar cahaya dalam arah yang sama, dan karena
diluar, sangat sedikit cahaya mencapai mata setelah
memantul dari benda-benda lain. Ketika cahaya ambient
Page
219
menyerang permukaan, maka akan tersebar merata di
segala penjuru.
Komponen cahaya diffuse adalah komponen
yang berasal dari satu arah, jadi akan terang kalau hal
tersebut terjadi tepat diatas sebuah permukaan
dibandingkan jika hampir tidak terjadi di atas
permukaan. Setelah mengenai permukaan, akan
tersebar merata di segala penjuru, sehingga tampak
sama-sama terang, tak peduli di mana mata berada.
Setiap cahaya yang datang dari posisi atau arah
tertentu mungkin memiliki komponen diffuse.
Gambar 1.3 Cahaya Diffuse

Cahaya specular datang dari arah tertentu, dan
cenderung terpental pada permukaan dalam arah yang
diinginkan. sinar laser berkualitas tinggi memantul
pada cermin dan menghasilkan hampir 100 persen
refleksi specular. Logam atau plastik mengkilap memiliki
komponen specular tinggi, dan kapur atau karpet telah
hampir tidak ada. Specularity dapat juga dianggap sebagai
shininess.
Page
220
Gambar 1.4 Cahaya Specular
Meskipun sumber cahaya memberikan satu
distribusi frekuensi, komponen ambient, diffuse, dan
specular mungkin berbeda. Sebagai contoh, jika
memiliki cahaya putih di sebuah ruangan dengan dinding
merah, cahaya yang tersebar cenderung menjadi warna
merah, meskipun cahaya secara langsung objek putih
yang mencolok. OpenGL memungkinkan untuk
mengatur nilai merah, hijau, dan biru untuk setiap
komponen cahaya secara bebas.
Gambaran pada lighting :
Page
221
Selain pencahayaan Ambient, Diffuse, dan Specular, terdapat
juga pencahayaan Emmisive, yaitu sebuah objek
memancarkan cahayanya sendiri.
Contoh pada program :

init lighting();
void init lighting()
{
GLfloat lightPos [] = {100.0, 100.0, 200.0,
1.0}; //variabel posisi
GLfloat shin[] = {100.0};
GLShade Model (GL_SMOOTH) ;
GLlightfv(GL_LIGHT0, 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
222
Fungsi di atas adalah fungsi inisialisasi untuk pencahayaan
dimana efek pencahayaan bersifat menyeluruh dan
menyebabkan semua obyek memiliki warna serupa. Agar
warna tiap obyek 3d berbeda dengan efek pencahayaan
yang aktif maka fungsi dasarnya pada inisialisasi adalah :
Fungsi di atas dapat diaktifkan setelah

glEnable(GL_COLOR_MATERIAL). Parameter face adalah
variabel untuk menentukan bagaimana material warna
obyek 3D ditampilkan, pilihannya antara lain GL_FRONT
atau GL_BACK. Sedangkan parameter mode adalah variabel
untuk memilih material warna jenis apa yang diaktifkan
pilihannya antara terdapat di halaman selanjutnya:
Page
223
D. Implementasi Pencahayaan (lighting) pada
OpenGL
Object 3D (Solid)
Bentuk Solid
Fungsi Solid merupakan implementasi dari object 3D

yang berpusat pada asal pemodelan sistem koordinat. Utara
dan kutub selatan bola berada di Z positif dan negatif sumbu-
masing-masing dan meridian utama persimpangan sumbu X
positif.
Berikut adalah list untuk bangun 3D:
Page
224
a. Kubus Solid
void glutSolidCube(GLdouble size);
b. Fungsi glutSolidSphere membuat bola berpusat pada
asal pemodelan sistem koordinat. Utara dan kutub
selatan bola berada di Z positif dan negatif 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
225
void glutSolidTeapot(GLdouble size);
E. Contoh Program
Contoh program Level medium
Membuat kubus sederhana dengan pencahayaan
Script
#include <Windows.h>
#include <iostream>
#include <glut.h>
#include <math.h>
void cube()
//menggambar kubus dan transformasi

tarnslasi ke titik 0.5 0.5 0.5 dan skala 1
1 1
glPushMatrix();
glTranslated(0.5,0.5,0.5);//cube
glScaled(1.0,1.0,1.0);
glutSolidCube(1.0);
glPopMatrix();
void setMaterial()
Page
226
{
//set properties of surfaces material
GLfloat mat_ambient[] =
{0.7f,0.7f,0.7f,1.0f}; // ada 4 jenis
material yang dipakai, dengan kombinasi
warna tertentu
GLfloat mat_diffuse[] =
{0.6f,0.6f,0.6f,1.0f};
GLfloat mat_specular[] =
{1.0f,1.0f,1.0f,1.0f};
GLfloat mat_shininess[] = {50.0f};
glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambien
t);
glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffus
e);
glMaterialfv(GL_FRONT,GL_SPECULAR,mat_specu
lar);
glMaterialfv(GL_FRONT,GL_SHININESS,mat_shin
iness);
void setLighting()
//set light sources
GLfloat lightIntensity[] =
{0.7f,0.7f,0.7f,1.0f};//mensetting
pencahayaan
Page
227
GLfloat light_position[] =
{2.0f,6.0f,3.0f,0.0f};
glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntensi
ty);
glLightfv(GL_LIGHT0,GL_POSITION,light_posit
ion);
void setViewport()
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
glLoadIdentity();
gluLookAt(3.3,3.3,3.0,0,0.25,0,0.0,1.0,0.0)
;
Page
228
void displayObject()
setMaterial();
setLighting();
setViewport();
setCamera();
//startDrawing
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER
_BIT);
cube();//memanggil fungsi menggambar kubus
glFlush();//mengirim smua objek untuk

dirender
void main(int argc, char **argv)
glutInitDisplayMode(GLUT_SINGLE|GLUT_RGB|GL
UT_DEPTH);
glutCreateWindow("simple 3d scene");
Page
229
glutDisplayFunc(displayObject);//fungsi
dari display object yang menggabungkan
kubus lighting material dan kamera
glShadeModel(GL_SMOOTH);
glEnable(GL_NORMALIZE);
glClearColor(1.0f,1.0f,1.0f,0.0f);
glViewport(0,0,640,480);
glutMainLoop();
Output
Page
230
Contoh program Level Hard
Membuat rumah sederhana dengan
pencahayaan
#include<stdlib.h>
#include<glut.h>
float w=700, h=600;
float tr=-50;
float xl=-10, yl=10;
int sudut=0, xx=0, yy=0, zz=0;
void pagar(){
glColor3f(0,1,1); //pagar luar
glPushMatrix();
glTranslatef(1.5, -2.4, 9);
glScalef(0.2, 1.1, 0.2);
glutSolidCube(3);
glPopMatrix();
glPushMatrix();
Page
231
glScalef(0.2, 1.1, 0.2);
glutSolidCube(3);
glPopMatrix();
glPushMatrix();
glScalef(0.2, 1.1, 0.2);
glutSolidCube(3);
glPopMatrix();
glPushMatrix();
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;
Page
232
GLfloat LightPosition[] = {xl, yl,
30.0f, 1.0f};
glLightfv(GL_LIGHT0, GL_POSITION,
LightPosition);
glClear(GL_COLOR_BUFFER_BIT|GL_DEP
TH_BUFFER_BIT);
glLoadIdentity();
glEnable(GL_COLOR_MATERIAL);
glTranslatef(0, 0, tr);
glRotatef(sudut, xx, yy,

zz);
glPushMatrix(); //tembok
rumah
glColor3f(1, 0, 1);
glScalef(1.5,1,1);
glutSolidCube(9);
glPopMatrix();
glPushMatrix(); //genteng
dengan 8 sudut yang nanti akan ditutup
oleh dinding
glScalef(10,6,8);
glTranslatef(0, 0.7,-
0.05);
Page
233
glColor3f(0, 0, 1);
glRotatef(45, 0, 1,
0);
glutSolidOctahedron();
glPopMatrix();
glPushMatrix();
glColor3f(1, 1, 1);
glTranslatef(-3, -0.8,
0.5);
glScalef(0.5, 0.8,1);
glutSolidCube(9);
glPopMatrix();
glPushMatrix(); //pintu
glColor3f(1, 1, 1);
glTranslatef(2, 1.3,
0.5);
glScalef(0.5, 0.3,1);
glutSolidCube(10);
glPopMatrix();
Page
234
glPushMatrix(); //pagar
kanan
pagar();
glTranslatef(-9.0, 0.0,
0.0);
pagar();
glTranslatef(9.0, 0.0,
0.0);//pagar depan
glRotatef(-90, 0, 1, 0);
pagar();
0.0);
pagar();

//pagar kiri
glRotatef(-90, 0, 1, 0);
pagar();
0.0);
pagar();

//pagar belakang
glRotatef(-90, 0, 1, 0);
Page
235
pagar();
0.0);
pagar();
glPopMatrix();
glDisable(GL_COLOR_MATERIAL);
glutSwapBuffers();
glViewport(0,0, w1, h1);
glLoadIdentity();
gluPerspective(45.0, (float)
w1/(float) h1, 1.0, 300.0);
glLoadIdentity();
void init(){
GLfloat LightPosition[]={10.0f, 0.0f,

0.0f, 0.0f};
GLfloat LightAmbient[]={25.0f,
0.0f, 0.0f, 1.0f};
Page
236
GLfloat LightDiffuse[]={0.0f,
0.0f, -30.0f, 1.0f};
GLfloat LightSpecular[]={0.0f,
0.0f, 0.0f, 1.0f};
GLfloat Shine[]={80};
glClearColor(0.0f, 0.0f, 0.0f,

0.5f);
glClearDepth(1.0f);
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);
LightPosition);
Page
237
return;
void myKeyboard(unsigned char key, int

x, int y){
if(key == 'a'){
sudut +=5;
xx=1;
yy=0;
zz=0;
} else if(key == 'b'){
sudut +=5;
xx=0;
yy=1;
zz=0;
} else if(key == 'c'){
sudut +=5;
xx=0;
yy=0;
zz=1;
Page
238
}
glutTimerFunc(50, update, 0);
int main(int argc, char **argv){
glutCreateWindow("Lighting");
init();
gluOrtho2D(-w/2, w/2, -h/2, h/2);
glutTimerFunc(50, update, 0);
glutMotionFunc(motionku);
Page
239
glutMainLoop();
Screenshoot output :
Contoh program Level Experd

Membuat danbo lighting sederhana dengan
pencahayaan
Silver Danbo
Syntax
#include<stdlib.h>
#include<glut.h>
Page
240
float w=480, h=480;
float sudut=0, p=-50, t=0, u=0, v=0;
void drawCub(){
//badan-badan
glPushMatrix();
glColor3f(1,0,0);
glutSolidCube(4);
glPopMatrix();
glPushMatrix();
glColor3f(1,1,0);
glutSolidCube(4);
glPopMatrix();
//akhir badan
//celana
glPushMatrix();
glColor3f(1,0,0);
glutSolidCube(4.5);
Page
241
glPopMatrix();
//akhir celana
//tangan kanan
glPushMatrix();
glPushMatrix();
glColor3f(0,0,1);
//glRotatef(45,0,0,1);
glutSolidCube(3);
glPopMatrix();
glPushMatrix();
glColor3f(0,0,1);
glutSolidCube(3);
glPopMatrix();
glPopMatrix();
Page
242
//akhir tangan kanan
//tangan kiri
glPushMatrix();
glPushMatrix();
glColor3f(1,1,1);
glutSolidCube(3);
glPopMatrix();
glPushMatrix();
glColor3f(1,1,1);
glutSolidCube(3);
glPopMatrix();
glPopMatrix();
//akhir tangan kiri
Page
243
//kaki-kaki kiri
glPushMatrix();
glColor3f(0.8,0.8,0);
glTranslatef(-1.2,-9,0);
glutSolidCube(2);
glPopMatrix();
glPushMatrix();
glColor3f(1,0.8,1);
glTranslatef(-1.2,-8,0);
glutSolidCube(2);
glPopMatrix();
//akhir kaki kiri
//kaki-kaki kiri
glPushMatrix();
glColor3f(0,0.8,0);
glTranslatef(1.2,-9,0);
glutSolidCube(2);
glPopMatrix();
Page
244
glPushMatrix();
glColor3f(1,0.8,0);
glTranslatef(1.2,-8,0);
glutSolidCube(2);
glPopMatrix();
//akhir kaki kiri
//kepala
glPushMatrix();
glColor3f(1,0,1);
glutSolidCube(8);
glPopMatrix();
//akhir kepala
void setMaterial()
//set properties of surfaces material
GLfloat mat_ambient[] =
{1.7f,1.7f,1.7f,1.0f}; // ada 4 jenis
Page
245
material yang dipakai, dengan kombinasi
warna tertentu
GLfloat mat_diffuse[] =
{0.6f,0.6f,0.6f,1.0f};
GLfloat mat_specular[] =
{1.0f,1.0f,1.0f,1.0f};
GLfloat mat_shininess[] = {50.0f};
glMaterialfv(GL_FRONT,GL_AMBIENT,mat_ambie
nt);
glMaterialfv(GL_FRONT,GL_DIFFUSE,mat_diffu
se);
glMaterialfv(GL_FRONT,GL_SPECULAR,mat_spec
ular);
glMaterialfv(GL_FRONT,GL_SHININESS,mat_shi
niness);
void setLighting()
//set light sources
GLfloat lightIntensity[] =
{0.7f,0.7f,0.7f,1.0f};//mensetting
pencahayaan
GLfloat light_position[] =
{2.0f,6.0f,3.0f,0.0f};
glLightfv(GL_LIGHT0,GL_DIFFUSE,lightIntens
ity);
Page
246
glLightfv(GL_LIGHT0,GL_POSITION,light_posi
tion);
void setViewport()
glLoadIdentity();
double winHt = 1.0;//half height of the

window
glOrtho(-winHt*64/48,winHt*64/48,-
winHt,winHt,0.1,100.0);
void displayObject()
setMaterial();
setLighting();
setViewport();
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFE
R_BIT);
drawCub();//memanggil fungsi menggambar

kubus
glFlush();//mengirim smua objek untuk

dirender
Page
247
void display(){
glLoadIdentity();
glRotatef(sudut,t,u,v);
//glColor3f(0,0,1);
drawCub();
glutSwapBuffers();
glLoadIdentity();
gluPerspective(45.0, (float) w1/(float)

h1, 1.0,300.0);
glLoadIdentity();
void init(){
Page
248
glLoadIdentity();
gluPerspective(45.,(GLdouble)w/(GLdoubl
e)h,1.,300.);
void myKeyboard(unsigned char key, int x,

int y){
if(key=='a'){
p +=5;
else if (key=='s'){
p-=5;
else if(key=='x'){
sudut+=10;
t=1;
u=0;
v=0;
else if (key=='y'){
sudut+=10;
Page
249
t=0;
u=1;
v=0;
else if (key=='z'){
sudut+=10;
t=0;
u=0;
v=1;
glutInitDisplayMode(GLUT_SINGLE|GLUT_RG
B|GLUT_DEPTH);
Page
250
glutCreateWindow(" Lighting ");
init();
glEnable(GL_NORMALIZE);
glViewport(0,0,640,480);
glutMainLoop();
Output
Page
251
Page
252
Page
253
F. Evaluasi
1. Fungsi yang merupakan implementasi dari object

3D yang berpusat pada asal pemodelan sistem
koordinat adalah...
a. Fungsi Solid
b. Fungsi Hardness
c. Fungsi Roughness
d. Fungsi Torus
e. Fungsi Unbreakablle
2. Pencahayaan yang sifatnya menyinari seluruh

ruangan adalah jenis pencahayaan...
a. LED
b. Laser Beam
Page
254
c. Ambient Lightning
d. Spot Light
e. Light Resistor
3. Dalam proses rendering, lightning dipengaruhi oleh

faktor-faktor sebagai berikut, kecuali...
a. Jarak objek dengan sumber cahaya

b. Posisi Objek
c. bentuk permukaan objek
d. Letak Objek dan jarak objek dengan sumber cahaya
e. Besar objek
4. Sebelum menggunakan fungsi material atau

pencahayaan, harus melakukan pemanggilan fungsi,
yakni...
a. glMaterialState(ON)
b. glFunction3Dmode(ON)
c. gl3Dstate(ON)
d. glEnable(GL_COLOR_MATERIAL)
e. glEnable(CL_COLOR_TURN_ON)
5. Yang bukan merupakan nama parameter dari

fungsi 3D adalah...
a. GL_AMBIENT
Page
255
b. GL_COLORIZE
c. GL_SPOT
d. GL_DIFUSE
e. GL_EMISSION
6. Fungsi yang digunakan untuk membuat kerucut

solid adalah...
a. glutSolidCone()
b. glutSolidCone()
c. glutSolidTorus()
d. glutTriangle()
e. glutSolidOctahedral()
7. Fungsi yang digunakan untuk membuat bola solid

adalah...
a. glutSolidCone()
b. glutSolidCone()
c. glutSolidTorus()
d. glutSolidSphere()
e. glutSolidOctahedral()
8. Manakah yang merupakan hasil dari pencahayaan

menggunakan ambient...
Page
256
a.
b.
c.
Page
257
d.
e.
9. Untuk menghasilkan objek seperti gambar di bawah

menggunakan fungsi...
Page
258
a. GL_COLOR_INDEXE
b. GL_AMBIENT
c. GL_DIFUSSE
d. GL_SPECULAR
e. GL_WHITE
10. Pada fungsi glut kita dapat menciptakan objek berupa

teko teh dengan menggunakan...
a. glutTeaPot()
b. GlutSolidTeaPot()
c. GLUT_SOLID_TEA_POT()
d. glutSolidPot()
e. glutSolidTeaPot()
Page
259
BAB 10
TEXTURE
A. Pendahuluan
Objek 3D pada open GL merupakan objek yang lebih
hidup dibandingkan objek 2D. Namun permukaan objek 3D
yang polos membuat 3D cenderung kurang menarik dan kaku.
Untuk membuat objek yang lebih hidup pada OpenGL
diperlukan suatu texture mapping. Mapping ialah sebuah
bentuk kegiatan untuk melakukan pewarnaan atau
memetakan permukaan geometri pada objek 3D. Sedangkan
Maps adalah bentuk gambar atau warna yang digunakan
untuk melapisi objek 3D pada saat dilakukan mapping.
Dengan kata lain pemetaan texture merupakan pemberian
sebuah gambar pada permukaan objek sehingga objek akan
tampak realistis. Texture mapping memungkinkan untuk
menaruh gambar pada geometric primitive tersebut dan
sekaligus mengikuti transformasi yang diterapkan kepada
objek. Contohnya apabila sebuah objek kubus tanpa gambar
diberi texture bebatuan pada permukaannya, maka objek
tersebut akan tampak memiliki tekstur kasar seperti batu.
Texture pada permukaan objek dapat dilihat dari berbagai
Page
260
perspective yang berbeda. Beberapa contoh texture pada
objek sebagai berikut:
Texture 1 dimensi
Texture 2 dimensi
Texture 3 dimensi
Filter pembesaran texture berpengaruh pada

bagaimana OpenGL melakukan proses rasterisasi texture saat
texture ditampilkan pada jumlah pixel yang lebih besar atau
lebih kecil dari ukuran sebenarnya. Pada Nearest Filtered
Page
261
Texture, texture yang ditampilkan merupakan hasil pemilihan
nilai pixel pada posisi terdekat. Sedangkan dengan Linear
Interpolation Texture (LPT), texture yang ditampilkan
merupakan hasil interpolasi linear antara pixel-pixel
disekitarnya. Pada Mipmapped Texture(MPT), interpolasi
linear dilakukan pada awal secara offline sehingga dihasilkan
banyak texture dengan ukuran dari yang kecil hingga yang
besar.LPT dan MPT akan menghasilkan kira-kira hasil yang
sama dengan LPT akan sedikit lebih lambat dari MPT
walaupun memori yang digunakan jauh lebih kecil.
Namun terkadang efek texture yang diinginkan dapat
diperoleh dengan mencampur lebih dari satu texture. Proses
pencampuran lebih dari satu texture disebut dengan istilah
blending. Salah satu efek blending yang paling sederhana
adalah dengan memblending texture dengan warna. Fungsi
yang digunakan pada proses blending adalah
glEnable(GL_BLEND).
Implementasi texture pada objek grafika computer terdapat
pada, animasi seperti toy story maupun game animasi.
B. Konsep Texture Mapping

Texture mapping merupakan teknik pemetaan sebuah
tekstur pada pola gambar wireframe, dimana wireframe yang
telah dibuat akan ditampilkan memiliki kulit luar seperti
Page
262
tekstur yang diinginkan. Beberapa hal yang perlu diperhatikan
dalam pemberian tekstur, diantaranya:
Menentukan tekstur
1. Membaca atau membangkitkan tekstur
2. Menandai tekstur
3. Mengenablekan tekstur
Menandai koordinat tekstur pada vertek
Menentukan parameter tekstur
C. Teknik-teknik Realisme dalam Kompuer Grafik

1. . Tekstur-Maps
Maps berwujud gambar tekstur 2D yang dituangkan ke
permukaan geometri/objek untuk membuat penampilan
objek tersebut tampak halus untuk detail permukaannya.
Pada pengembangan grafik realisme tingkat tinggi diperlukan
lebih banyak lapisan tekstur, agar hasil mapping mendekati
kesempurnaan. Sebuah tekstur maps yang diterapkan
(dipetakan) biasanya dipakai untuk permukaan bentuk objek
polygon, proses ini mirip dengan menerapkan texture pada
kertas berpola kotak putih yang polos.Kegiatan texture
mapping untuk texture maps dapat didefinisikan sebagai
sebuah metode untuk menambahkan detail tekstur
permukaan (bitmap atau raster image), atau warna yang
dihasilkan komputer grafis atau model 3D. Penerapannya
Page
263
pada grafis 3D dirintis oleh Dr Edwin Catmull pada proyek
Ph.D tesisnya tahun 1974.
2. Environment-Maps
Environtment-Maps ialah maps yang memiliki pewarnaan
dengan banyak gambar (tekstur) yang merekam refleksi
global dan pencahayaan pada objek. Gambar-gambar ini
difungsikan sebagai resampled selama proses rendering,
dengan tujuan untuk mengekstrak, dan melihat informasi
spesifik yang kemudian diterapkan sebagai tekstur objek pada
permukaan geometri. Maps ini sering disebut reflection yang
berarti tekstur pencahayaan dari benda-benda luar di sekitar
objek, maps jenis ini sangat cocok untuk benda-benda yang
memiliki tingkat refleksi yang sangat tinggi, seperti kaca, dan
lain sebagainya.Environmet mapping pada maps ini memiliki
definisi yaitu metode yang efisien untuk simulasi kompleks
permukaan bercermin melalui suatu gambar tekstur. Tekstur
yang digunakan bekerja untuk menyimpan gambar dari
lingkungan sekitar objek yang diberikan. Ada beberapa cara
untuk menyimpan tekstur lingkungan sekitar objek, salah satu
metode yang paling umum adalah metode Spherical
Environment Mapping, di mana dalam metode ini suatu
tekstur yang berisi citra lingkungan sekitar akan direfleksikan
sebagai bola cermin, dan kemudian dimasukkan sebagai
tekstur objek yang diberi maps.
Page
264
3. Bump-Maps
Bump maps adalah maps yang memfokuskan permukaan
tekstur pada objek, dengan menggunakan maps ini,
permukaan geometri/objek akan terlihat berbeda dan unik,
tidak seperti objek-objek yang memiliki permukaan normal
pada umumnya. Rumus pekerjaan dari maps ini akan
menerapkan bidang untuk intensitas dalam maps yang
menunjukkan tingkat rendah tingginya suatu permukaan
objek, fungsi maps ini akan mengacaukan permukaan objek
yang normal, sehingga menimbulkan kesan unik ketika
hasilnya sudah di-render.Untuk kegiatannya, bump mapping
adalah sebuah teknik grafis komputer di mana pada setiap
pixel untuk permukaan normal objek, akan diberikan efek
tidak halus dan diterapkan sebelum melakukan perhitungan
iluminasi. Hasilnya, objek yang diberi maps akan lebih kaya,
serta lebih rinci untuk representasi permukaan objek dan
lebih mirip pada permukaan alam.
4. Normal-Maps
Maps ini serupa dengan bump-maps, perbedaannya
adalah fungsionalitas yang ada pada normal maps, maps ini
secara alami akan menghasilkan bentuk permukaan yang
tidak halus tanpa menggunakan lebih banyak penambahan
atau pengurangan poligon pada objek.Dalam dunia grafik
komputer 3D, normal mapping pada maps ini bisa disebut "
Page
265
Dot3 bump mapping ", definisinya adalah sebuah teknik yang
digunakan untuk berpura-pura menambahkan efek tidak
halus pada permukaan objek. Kenapa disebut berpura-pura
? Hal ini disebabkan karena mapping ini bekerja dengan
menambahkan rincian tidak halus pada permukaan objek
tanpa menggunakan poligon. Normal mapping biasanya
diakurasi sebagai sebuah gambar RGB yang berhubungan
dengan koordinat X, Y, dan Z dari permukaan normal suatu
objek. Penggunaan umum teknik ini adalah untuk lebih
meningkatkan tampilan dan detail dari model poligon rendah
dengan menghasilkan peta normal dari model poligon yang
tinggi.
5. Shadow-Maps
Shadow maps yaitu maps yang menghasilkan suatu
bayangan tekstur pada objek dengan menangkap siluet objek
tersebut dari sumber cahaya yang terlihat. Maps ini sangat
sering dipakai oleh pengembang grafik 3D, karena efek yang
dihasilkan seolah-olah menunjukkan objek tersebut sangat
realistis, dan disebabkan adanya bayangan dari sumber
cahaya yang ada.Fungsi kerjanya yang berkonsep shadow
mapping adalah proses di mana bayang-bayang ditambahkan
ke grafik komputer 3D. Konsep ini diperkenalkan oleh Lance
Williams pada tahun 1978, dalam sebuah makalah yang
berjudul "Casting curved shadows on curved surfaces". Sejak
Page
266
saat itu, teknik ini telah digunakan baik dalam pra-render
adegan, dipakai secara realtime, atau bahkan diterapkan ke
banyak konsol dan PC high-end game.
D. Teknik-teknik dalam Geometri

1. Texture- Mapping.
Sebuah metode untuk menambahkan detail, tekstur
permukaan (bitmap atau raster image), atau warna
yang dihasilkan komputer grafis atau model 3D.
Penerapannya pada grafis 3D dirintis oleh Dr Edwin
Catmull di gelar Ph.D. tesis 1974.
2. Poligonization.
Dengan merubah bentuk asli objek, namun, ini
membutuhkan resource hardware yang besar.
3. Splines.
Merupakan teknik yang menggunakan representasi
permukaan matematis (polynomial), tanpa
menggunakan polygon sama sekali.
4. Implicit surface (Blobbies).
Teknik ini didasarkan pada fungsi x,y, dan z.
5. Subdivision Surfaces.
Membagi objek menjadi segitiga yang bertumpuk.
6. Degradasi tingkat detail.
Page
267
Mengganti poligon pada objek yang berada pada
posisi yang jauh, menghemat waktu render.
7. Mesh decimation.
Mengurangi poligon pada suatu objek untuk
menghemat waktu rendering.
Tekstur merupakan sebuah wadah dari sebuah gambar
atau lebih. Namun, tekstur tidak menyimpan gambar begitu
saja, gambar tekstur memiliki konfigurasi tertentu. Ada tiga
karakteristik untuk mendefinisikan tekstur, karakteristik
tersebut adalah: jenis tekstur, ukuran tekstur, dan format
gambar yang digunakan tekstur. Jenis tekstur mendefinisikan
susunan gambar dalam tekstur, ukuran mendefinisikan
ukuran gambar dalam tekstur, dan format gambar
mendefinisikan format gambar yang digunakan dalam
tekstur.
Berikut ini adalah macam-macam tekstur:
GL_TEXTURE_1D: semua gambar dalam tekstur ini 1-
dimensi. Memiliki lebar, tapi tidak memiliki ketinggian
atau kedalaman.
dimensi. Memiliki lebar dan tinggi, namun tidak
punya kedalaman.
dimensi. Memiliki lebar, tinggi, dan kedalaman.
Page
268
GL_TEXTURE_RECTANGLE: Gambar dalam tekstur ini
(hanya satu gambar pada mipmapping) 2-dimensi.
Koordinat tekstur yang digunakan untuk tekstur ini
tidak dinormalisasi.
GL_TEXTURE_BUFFER: Gambar dalam tekstur ini
(Hanya satu gambar ada mipmapping) 1-dimensi.
Penyimpanan data berasal dari Buffer Object.
GL_TEXTURE_CUBE_MAP: terdapat 6 set gambar 2D
berbeda, dengan ukuran yang sama. Berbentuk
seperti 6 sisi kubus.
GL_TEXTURE_1D_ARRAY: Gambar dalam tekstur ini
semua 1-dimensi. Namun, berisi beberapa set gambar
1-dimensi, semua dalam satu tekstur. Panjang array
bagian dari ukuran tekstur itu.
GL_TEXTURE_2D_ARRAY: Gambar dalam tekstur ini
semua adalah 2-dimensi. Namun, mengandung
beberapa set gambar 2 dimensi, semua dalam satu
tekstur. Panjang array bagian dari ukuran tekstur itu.
GL_TEXTURE_CUBE_MAP_ARRAY: Gambar dalam
tekstur ini merupakan pemetaan kubus. Berisi
beberapa set peta kubus yang kesemuanya berada
dalam sebuah tekstur. Panjang Array * 6 (jumlah sisi
kubus) merupakan bagian dari ukuran tekstur.
Page
269
GL_TEXTURE_2D_MULTISAMPLE: Gambar dalam
tekstur ini (hanya satu gambar ada mipmapping)
adalah 2-dimensi. Setiap pixel dalam gambar ini berisi
beberapa sampel bukan hanya satu nilai.
GL_TEXTURE_2D_MULTISAMPLE_ARRAY:
Menggabungkan 2D array dan jenis multisample 2D.
Tidak ada mipmapping.
Ukuran tekstur memiliki batas dalam implementasinya di
open GL. Untuk tekstur 1D dan 2D (dan setiap jenis tekstur
yang menggunakan dimensi yang sama, seperti cubemaps)
ukuran maksimalnya adalah GL_MAX_TEXTURE_SIZE. Untuk
tekstur array, panjang maksimum 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
270
"texels") digunakan tergantung pada sudut di mana
permukaan akan dirender. Sebuah tekstur dipetakan ke
gambar pesawat yang hampir di tepi kamera hanya akan
menggunakan sebagian kecil dari pixel tekstur. Demikian pula,
melihat langsung ke bawah pada tekstur dari jauh akan
menunjukkan texels lebih sedikit daripada melihat dari dekat.
Masalahnya adalah dengan animasi. Ketika Anda 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
271
Beberapa jenis tekstur memiliki beberapa set independen
mipmaps. Setiap sisi cubemap memiliki pemetaan mipmaps
sendiri, seperti halnya setiap entri dalam tekstur array.
Namun, tekstur secara keseluruhan hanya memiliki satu
pengaturan yang mipmaps tertentu. Jadi jika tekstur sudah
diatur sedemikian rupa sehingga hanya bagian top 4 levels
mipmaps, Anda harus memiliki rangkaian bagian mipmaps
tersebut dalam sebuah tekstur.
Ketika melakukan sampel tekstur, implementasi
secara otomatis akan memilih mipmap yang digunakan untuk
sudut pandang, ukuran tekstur, dan berbagai faktor lainnya.
Bila menggunakan ukuran tekstur yang tidak pangkat dua,
setengah ukuran mipmaps lebih rendah dibulatkan ke bawah.
Jadi tekstur 63x63 memiliki tingkat terendah berikutnya:
31x31. Dan seterusnya.
Tingkat dasar rantai mipmap adalah yang terbesar.
Hal ini juga salah satu yang mendefinisikan ukuran penuh
tekstur. Nomor OpenGL ini tingkat mipmap sebagai 0, tingkat
mipmap terbesar berikutnya adalah 1, dan seterusnya.
Tingkat dasar tekstur tidak harus di-load. Selama Anda
menentukan rentang mipmaps dengan benar, Anda dapat
meninggalkan setiap tingkat mipmap yang Anda inginkan.
Page
272
F. Texture maping
(0.0, 1.0)
(1.0, 0.0)
Obyek
CG
(0.0, 0.0)
Obyek
CG
Proses texture mapping (2)
(0.0, 0.5)
Obye
k CG
(0.0, 0.0)
Obye
k CG
Page
273
G. Object Texture
Diagram konten objek tekstur
Tekstur dalam OpenGL adalah objek OpenGL, dan

mengikuti konvensi standar tersebut. Tekstur memiliki
standar glGenTextures, glBindTexture.Target parameter
lBindTexture sesuai dengan jenis tekstur itu. Jadi, ketika Anda
menggunakan nama tekstur baru yang dihasilkan, rangkaian
pertama akan menentukan jenis tekstur. Anda tidak dapat
memasukkan objek pada target dengan tipe yang berbeda.
Jadi, jika Anda membuat tekstur sebagai GL_TEXTURE_1D,
maka Anda harus terus menggunakan tipe itu.
Seperti jenis objek lain di OpenGL, kita dapat
menggunakan target dengan tipe yang berbeda. Sehingga
Anda dapat memiliki GL_TEXTURE_1D dan
GL_TEXTURE_2D_ARRAY.
Page
274
H. Contoh penerapan material dan tekstur
1. Membuat papan catur dengan 2 warna yaitu hitam dan
putih
Syntax:
#include<gl.h>
#include<glu.h>
#include<aux.h>
#define checkImageWidth 50
#define checkImageHeight 50
GLubyte
checkImage[checkImageWidth][checkImageHeig
ht][3];
void makeCheckImage(void)
{
int i, j, r, c;
for (i = 0; i < checkImageWidth; i++) {

for (j = 0; j < checkImageHeight; j++) {
c =
((((i&0x8)==0)^((j&0x8))==0))*255;
checkImage[i][j][0] = (GLubyte) c;
}
}
Page
275
}
void myinit(void)
{
glClearColor (0.0, 0.0, 0.0, 0.0);
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);
GL_TEXTURE_WRAP_T, GL_CLAMP);
GL_TEXTURE_MAG_FILTER,
GL_NEAREST);
GL_TEXTURE_MIN_FILTER,
GL_NEAREST);
glTexEnvf(GL_TEXTURE_ENV,
GL_TEXTURE_ENV_MODE, GL_DECAL);
glEnable(GL_TEXTURE_2D);
Page
276
glShadeModel(GL_FLAT);
}
void display(void)
{
glBegin(GL_QUADS);
glTexCoord2f(0.0, 0.0); glVertex3f(-2.0, -
1.0, 0.0);
glTexCoord2f(0.0, 1.0); glVertex3f(-2.0,
1.0, 0.0);
glTexCoord2f(1.0, 1.0); glVertex3f(0.0,
1.0, 0.0);
glTexCoord2f(1.0, 0.0); glVertex3f(0.0, -
1.0, 0.0);
glTexCoord2f(0.0, 0.0); glVertex3f(1.0, -

1.0, 0.0);
glTexCoord2f(0.0, 1.0); glVertex3f(1.0,
1.0, 0.0);
glTexCoord2f(1.0, 1.0);
glVertex3f(2.41421, 1.0, -1.41421);
glTexCoord2f(1.0, 0.0);
glVertex3f(2.41421, -1.0,-1.41421);
glEnd();
glFlush();
}
Page
277
void myReshape(GLsizei w, GLsizei h)
{
glViewport(0, 0, w, h);
glLoadIdentity();
gluPerspective(60.0,
1.0*(GLfloat)w/(GLfloat)h, 1.0, 30.0);
glLoadIdentity();
glTranslatef(0.0, 0.0, -3.6);
}
int main(int argc, char** argv)

{
auxInitDisplayMode (AUX_SINGLE | AUX_RGBA
| AUX_DEPTH);
auxInitPosition (0, 0, 500, 500);
auxInitWindow (argv[0]);
myinit();
auxReshapeFunc (myReshape);
auxMainLoop(display);
}
Page
278
Hasil Output:
2. Contoh program yang menampilkan sebuah kubus

dengan texture tiap sisinya menampilkan texture
nama yang berbeda.
Gambar awal berukuran 320x320
Syntax header (imageloader.h)

#ifndef IMAGE_LOADER_H_INCLUDED
#define IMAGE_LOADER_H_INCLUDED
//Represents an image
Page
279
class Image {
public:
Image(char* ps, int w, int
h);
~Image();
/* An array of the form (R1,
G1, B1, R2, G2, B2, ...) indicating the
* color of each pixel in
image. 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
280
#include <assert.h>
#include <fstream>
#include <stdlib.h>
#include <glut.h>
#include "imageloader.h"
int w=480, h=480; //lebar, tinggi

int s=0, p=-10; // sudut, sumbu z
int rx=0, ry=0, rz=0; //sumbu simetri
GLuint _textureId;
GLuint loadTexture(Image* image){

GLuint textureId;
glGenTextures(1, &textureId);
//allocate texture name
glBindTexture(GL_TEXTURE_2D,
textureId); //select our current texture
glTexImage2D(GL_TEXTURE_2D, //select
GL_TEXTURE_2D
0, //0 for default 2D texture
GL_RGB, //RGB format for image
image->width, image->height,
0, //border image must be 0
GL_RGB, //format image for the
stored pixels
GL_UNSIGNED_BYTE, //pixels
stored as unsigned numbers
image->pixels);
return textureId;
Page
281
}
using namespace std;
Image::Image(char* ps, int w, int h) :

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

return (short)(((unsigned
(unsigned char)bytes[0]);
}
int readInt(ifstream &input) {
Page
282
char buffer[4];
input.read(buffer, 4);
return toInt(buffer);
}
short readShort(ifstream &input) {

char buffer[2];
return toShort(buffer);
}
template<class T>
class auto_array {
private:
T* array;
mutable bool isReleased;
public:
explicit auto_array(T*
array_ = NULL) :
array(array_),
isReleased(false) {
}
auto_array(const
auto_array<T> &aarray) {
array =
aarray.array;
isReleased =
aarray.isReleased;
aarray.isReleased
= true;
Page
283
}
~auto_array() {
if (!isReleased &&
array != NULL) {
delete[]
array;
}
}
T* get() const {
return array;
}
T &operator*() const {
return *array;
}
void operator=(const
if (!isReleased &&
array != NULL) {
delete[]
array;
}
array =
aarray.array;
isReleased =
aarray.isReleased;
aarray.isReleased
= true;
Page
284
}
T* operator->() const {
return array;
}
T* release() {
isReleased = true;
return array;
}
void reset(T* array_ =

NULL) {
if (!isReleased &&
array != NULL) {
delete[]
array;
}
array = array_;
}
T* operator+(int i) {
return array + i;
}
T &operator[](int i) {
return array[i];
}
};
}
Page
285
Image* loadBMP(const char* filename) {
ifstream input;
input.open(filename,
ifstream::binary);
assert(!input.fail() || !"Could not
find file");
char buffer[2];
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");
== 0 || !"Image is compressed");
break;
case 12:
//OS/2 V1
width = readInt(input);
Page
286
height = readInt(input);
input.ignore(2);
== 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
break;
default:
assert(!"Unknown bitmap
format");
}
//Read the data

int bytesPerRow = ((width * 3 + 3) /
4) * 4 - (width * 3 % 4);
int size = bytesPerRow * height;
auto_array<char> pixels(new
char[size]);
Page
287
input.seekg(dataOffset,
ios_base::beg);
input.read(pixels.get(), size);
//Get the data into the right format

auto_array<char> pixels2(new
char[width * height * 3]);
for(int y = 0; y < height; y++) {
for(int x = 0; x < width; x++)
{
for(int c = 0; c < 3;
c++) {
pixels2[3 * (width
* y + x) + c] =
pixels[bytesPerRow * y + 3 * x + (2 -
c)];
}
}
}
input.close();
return new Image(pixels2.release(),
width, height);
}
void init(){
GLfloat LightPosition[]={-10.0f,
20.0f, 20.0f, 0.0f};
Page
288
glClearDepth(1.0f);
glHint(GL_PERSPECTIVE_CORRECTION_HINT,
GL_NICEST);
LightPosition);
glBlendFunc(GL_SRC_ALPHA,GL_ONE);
glColorMaterial(GL_BACK, GL_DIFFUSE);
Image* image = loadBMP("gambar.bmp");

_textureId = loadTexture(image);
return;
}
void mydisplay(){
glLoadIdentity();
_textureId);
glTexParameteri(GL_TEXTURE_2D,
Page
289
GL_TEXTURE_MIN_FILTER, GL_NEAREST);
glRotatef(s,rx,ry,rz);
glPushMatrix();
glBegin(GL_QUADS);
glTexCoord2f(0.0f, 0.0f);
glVertex2f(-2.0f, -2.0f);
glVertex2f(2.0f, -2.0f);
glVertex2f(2.0f, 2.0f);
glVertex2f(-2.0f, 2.0f);
glEnd();
glPopMatrix();
glPushMatrix();
glBegin(GL_QUADS);
glEnd();
glTranslatef(-2,0,-2);
Page
290
glBegin(GL_QUADS);
glEnd();
glTranslatef(-2,0,-2);
glBegin(GL_QUADS);
glEnd();
glPopMatrix();
glPushMatrix();
glBegin(GL_QUADS);
Page
291
glEnd();
glPopMatrix();
glPushMatrix();
glBegin(GL_QUADS);
glEnd();
glPopMatrix();
glDisable(GL_TEXTURE);
glutSwapBuffers();
}

glLoadIdentity();
w1/(float) h1, 1.0,300.0);
Page
292
glLoadIdentity();
}
void myKeyboard(unsigned char key, int x, int

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

{
switch(key){
case GLUT_KEY_UP :
Page
293
p += 5;
break;
case GLUT_KEY_DOWN :
p -= 5;
break;
}
}

}

glutCreateWindow("kubus");
init();
glutMainLoop();
}
Page
294
Hasil Output:
Tampilan awal:
Apabila ditekan tombol x
Page
295
Apabila ditekan tombol y
Apabila ditekan tombol z
Penjelasan Program:
Fungsi mydisplay pada kode program tersebut digunakan
untuk menggambar kubus yang di buat dan akan digeser pada
kode translatefnya. Sourcecode tersebut menampilkan
gambar dan tekstur dengan 6 sisi sehingga membentuk
Page
296
kubus. glVertex2f berfungsi untuk menentukan ukuran
kotak/box bidang tekstur. Dan gambar tersebut menampilkan
nama Anggota kelompok pada sisi kubus.
3. Contoh Shadow mapping
Cara pembuatannya yaitu:

1. Render seluruh adegan dari sudut sumber cahaya dan
meletakkannya di z-penyangga (peta kedalaman)
2. Render seluruh adegan lagi tapi dari sudut pandang
3. Untuk setiap pixel dalam sudut pandang render
(Langkah 1), jika tidak terlihat dari sumber cahaya
render (Langkah 2) itu adalah baik dalam bayangan
itu menyala
4. Contoh Pemetaan normal
Page
297
Untuk pemetaan normal, maka yang akan digunakan
dalam perhitungan dot product untuk perhitungan
pencahayaan diffuse, kita dapat melihat bahwa {0, 0,
-1} akan dipetakan ke {128, 128, 255} nilai,
memberikan semacam langit biru warna terlihat
dalam peta normal (biru (z) koordinat adalah
perspektif (kedalaman) koordinat dan RG-xy
Page
298
koordinat datar di layar). {0.3, 0.4, -0,866} akan
dipetakan ke ({0.3, 0.4, -0,866} / 2 + {0,5, 0,5, 0,5}) *
255 = {0.15 +0.5, +0.5 0,2, -0,433 +0.5} * 255 = {0,65,
0,7, 0,067} * 255 = {166, 179, 17} nilai (0,3 ^ 2 ^ 2 +
0,4 (-0,866) ^ 2 = 1).
1. Implementasi Mapping texture
Dalam menerapkan mapping texture dperlukan
header imageloader.h untuk me-load gambar dari
computer. Format gambar yang dapat digunakan
untuk texture mapping adalah dengan extension
.bmp.
Dalam membuat program terlebih dahulu membuat
header imageloader sebagai Inisialisasi yang
menghubungkan antara source code untuk texture
mapping dengan program utama dengan langkah
berikut ini :
a. Membuat Project baru pada Visual C++
b. Klik kanan pada header file add new Item
pilih header file dan beri nama imageloader
ok
c. Pada sheet code isikan kode seperti dibawah ini
Code Program :
#ifndef IMAGE_LOADER_H_INCLUDED
#define IMAGE_LOADER_H_INCLUDED
Page
299
//Represents an image
class Image {
public:
Image(char* ps, int w,
int h);
~Image();
/* An array of the
form (R1, G1, B1, R2, G2, B2,
...) indicating the
* color of each pixel
in image. Color components range
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
300
#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>
Page
301
GLuint _textureId;

GLuint textureId;
glTexImage2D(GL_TEXTURE_2D,
//select GL_TEXTURE_2D
0, //0 for default 2D
texture
GL_RGB, //RGB format for
image
GL_RGB, //format image for
the stored pixels
image->pixels);
return textureId;
}
Page
302

Image::~Image() {
delete[] pixels;
}
namespace {
((unsigned char)bytes[2] << 16) |

(unsigned
char)bytes[0]);
}

}
Page
303
char buffer[4];
}

char buffer[2];
}
template<class T>
class auto_array {
private:
T* array;
mutable bool
isReleased;
public:
array_ = NULL) :
array(array_),
isReleased(false) {
}
auto_array(const
array =
Page
304
aarray.array;
isReleased =
aarray.isReleased;
aarray.isReleased = true;
}
~auto_array() {
if (!isReleased
&& array != NULL) {
delete[]
array;
}
}
T* get() const {
return array;
}
return *array;
}
if (!isReleased
&& array != NULL) {
delete[]
Page
305
array;
}
array =
aarray.array;
isReleased =
aarray.isReleased;
}
T* operator->() const
{
return array;
}
T* release() {
isReleased =
true;
return array;
}

NULL) {
if (!isReleased
&& array != NULL) {
delete[]
array;
}
Page
306
array = array_;
}
return array +
i;
}
return array[i];
}
};
}

ifstream input;
ifstream::binary);
assert(!input.fail() || !"Could
not find file");
char buffer[2];
assert(buffer[0] == 'B' &&
buffer[1] == 'M' || !"Not a bitmap
file");
input.ignore(8);
Page
307
//Read the header
int width;
int height;
case 40:
//V3
width =
readInt(input);
height =
readInt(input);
input.ignore(2);
assert(readShort(input) == 24 ||
!"Image is not 24 bits per pixel");
!"Image is compressed");
break;
case 12:
//OS/2 V1
width =
readInt(input);
height =
readInt(input);
input.ignore(2);
Page
308
break;
case 64:
//OS/2 V2
assert(!"Can't load
OS/2 V2 bitmaps");
break;
case 108:
//Windows V4
assert(!"Can't load
break;
case 124:
//Windows V5
assert(!"Can't load
break;
default:
assert(!"Unknown
bitmap format");
}
//Read the data

int bytesPerRow = ((width * 3 + 3)
/ 4) * 4 - (width * 3 % 4);
char[size]);
Page
309
ios_base::beg);
//Get the data into the right

format
for(int x = 0; x < width;
x++) {
for(int c = 0; c < 3;
c++) {
pixels2[3 *
(width * y + x) + c] =
pixels[bytesPerRow * y + 3 * x +
(2 - c)];
}
}
}
input.close();
return new
Image(pixels2.release(), width, height);
}
void init(){
Page
310
20.0f, 20.0f, 0.0f};
glClearDepth(1.0f);
INT, GL_NICEST);
LightPosition);
glColorMaterial(GL_BACK,
GL_DIFFUSE);
Image* image =
loadBMP("gambar.bmp");
return;
}
void mydisplay(){
Page
311
glLoadIdentity();
_textureId);
glPopMatrix();
glPushMatrix();
glBegin(GL_QUADS);
glVertex2f(-2.0f,
2.0f);
glEnd();
glPopMatrix();
Page
312
glutSwapBuffers();
}

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

x, int y)
{
if (key == 'y'){
rx=0;
ry=1;
rz=0;
s +=5;
}
rx=1;
ry=0;
rz=0;
s +=5;
}
Page
313
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;
p -= 5;
break;
}
}

}

Page
314
glutCreateWindow("Modul 10 - Nomor
2-3-4");
init();
glutSpecialFunc(mySpecialKeyboard)
;
glutMainLoop();
}
Tampilan
Page
315
Penjelasan
Page
316
Pada program terdapat implemetasi mapping texture dimana
terdapat header dan syntak untuk me-load gambar
Pada mapping texture terdapat inisialisasi

texture yang nantinya akan digunakan untuk
meload gambar dan pada fungsi load texture
terdapat 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
317
pada gambar dan pada obyek window aplikasi
tidak sama, maka perlu dihubungkan koordinat
gambar dengan obyek. Titik (0,0) pada gambar
berada di pojok kiri bawah, sedangkan pada
obyek windows aplikasi titik (0,0) berada di
tengah-tengah windows, sehingga
glTexCoord2f(0.f,0.f); untuk posisi koordinat
(0,0) obyek dihubungkan dengan glVertex2f(-
2.f,-2.f); (pojok kiri bawah). glTexCoord2f(1.f,0.f);
dihubungkan dengan glVertex2f(2.f,-2.f); (pojok
kanan bawah). glTexCoord2f(1.f,1.f);
dihubungkan dengan glVertex2f(2.f,2.f); (pojok
kanan atas). Dan glTexCoord2f(0.f,1.f);
dihubungkan dengan glVertex2f(-2.f,2.f); (pojok
kiri atas).
Apabila program tersebut dijalankan, gambar
yang telah di-import tadi akan menampilkan
hasilnya. Apabila ditekan huruf x, maka program
akan berputar searah sumbu x, ditekan huruf y,
maka program akan berputar searah sumbu y,
dan apabila ditekan huruf z, maka program akan
berputar searah sumbu z, setelah itu apabila
PgUp ditekan maka gambar(objek)tersebut akan
bertambah besar, sedangkan apabila PgDn
Page
318
ditekan maka obyek tersebut akan bertambah
kecil.
2. Membuat tampilan texture mapping dengan
glTexCoord2f
Code Program
#include <assert.h>
#include <fstream>
#include <stdlib.h>
#include <glut.h>

GLuint _textureId;

GLuint textureId;
glTexImage2D(GL_TEXTURE_2D,
//select GL_TEXTURE_2D
0, //0 for default 2D
texture
Page
319
GL_RGB, //RGB format for
image
GL_RGB, //format image for
the stored pixels
image->pixels);
return textureId;
}

Image::~Image() {
delete[] pixels;
}
namespace {
Page
320
(unsigned
char)bytes[0]);
}

}

char buffer[4];
}

char buffer[2];
}
template<class T>
class auto_array {
private:
Page
321
T* array;
mutable bool
isReleased;
public:
array_ = NULL) :
array(array_),
isReleased(false) {
}
auto_array(const
array =
aarray.array;
isReleased =
aarray.isReleased;
}
~auto_array() {
if (!isReleased
&& array != NULL) {
delete[]
array;
}
}
Page
322
T* get() const {
return array;
}
return *array;
}
if (!isReleased
&& array != NULL) {
delete[]
array;
}
array =
aarray.array;
isReleased =
aarray.isReleased;
}
T* operator->() const
{
return array;
}
Page
323
T* release() {
isReleased =
true;
return array;
}

NULL) {
if (!isReleased
&& array != NULL) {
delete[]
array;
}
array = array_;
}
return array +
i;
}
return array[i];
}
};
}
Page
324
ifstream input;
ifstream::binary);
assert(!input.fail() || !"Could
not find file");
char buffer[2];
assert(buffer[0] == 'B' &&
buffer[1] == 'M' || !"Not a bitmap
file");
input.ignore(8);
//Read the header

int width;
int height;
case 40:
//V3
width =
readInt(input);
height =
readInt(input);
input.ignore(2);
Page
325
!"Image is compressed");
break;
case 12:
//OS/2 V1
width =
readInt(input);
height =
readInt(input);
input.ignore(2);
break;
case 64:
//OS/2 V2
assert(!"Can't load
OS/2 V2 bitmaps");
break;
case 108:
//Windows V4
assert(!"Can't load
break;
case 124:
//Windows V5
assert(!"Can't load
Page
326
break;
default:
assert(!"Unknown
bitmap format");
}
//Read the data

int bytesPerRow = ((width * 3 + 3)
/ 4) * 4 - (width * 3 % 4);
char[size]);
ios_base::beg);
//Get the data into the right

format
for(int x = 0; x < width;
x++) {
for(int c = 0; c < 3;
c++) {
pixels2[3 *
(width * y + x) + c] =
Page
327
pixels[bytesPerRow * y + 3 * x +
(2 - c)];
}
}
}
input.close();
return new
Image(pixels2.release(), width, height);
}
void init(){
20.0f, 20.0f, 0.0f};
glClearDepth(1.0f);
INT, GL_NICEST);
LightPosition);
Page
328
glColorMaterial(GL_BACK,
GL_DIFFUSE);
Image* image =
loadBMP("gambar.bmp");
return;
}
void mydisplay(){
glLoadIdentity();
_textureId);
glPopMatrix();
glPushMatrix();
Page
329
glBegin(GL_QUADS);
glVertex2f(-2.0f, -
2.0f);
glVertex2f(2.0f, -
2.0f);
glVertex2f(2.0f,
2.0f);
glVertex2f(-2.0f,
2.0f);
glEnd();
glPopMatrix();
glutSwapBuffers();
}

glLoadIdentity();
w1/(float) h1, 1.0,100.0);
glLoadIdentity();
Page
330
}

x, int y)
{
if (key == 'y'){
rx=0;
ry=1;
rz=0;
s +=10;
}
rx=1;
ry=0;
rz=0;
s +=10;
}
rx=0;
ry=0;
rz=1;
s +=10;
}
}
void mySpecialKeyboard(int key, int x,

int y) {
switch(key){
Page
331
case GLUT_KEY_UP :
p += 10;
break;
p -= 10;
break;
}
}

}

glutCreateWindow("Modul 10 -
LAtihan 5");
init();
glutSpecialFunc(mySpecialKeyboard)
Page
332
;
glutMainLoop();
}
Tampilan
Page
333
Penjelasan
Pada saat pertama kali program
dijalankan hasil output yang ditampilkan adalah
posisi tekstur pada gambar akan berurutan
sesuai dengan pendeklarasian pada program.
Jadi, untuk program di atas, posisi gambar akan
terbalik karena urutan pendeklarasian pada
gambar (tekstur) bukan dimulai dari titik (0,0).
glTexCoord2f(1.f,0.f); dihubungkan dengan
glVertex2f(-2.f,-2.f); sehingga posisi b gambar
akan berada pada pojok kiri bawah, yang mana
seharusnya posisi a yang berada di pojok kiri
bawah. glTexCoord2f(1.f,1.f); dihubungkan
dengan glVertex2f(2.f,-2.f); sehingga posisi
cberada pada pojok kanan bawah.
glVertex2f(2.f,2.f); sehingga posisi d menempati
posisi c semula, pada pojok kanan atas. Dan
glVertex2f(-2.f,2.f); sehingga posisi a berada
pada pojok kiri atas. Apabila program tersebut
dijalankan, gambar yang telah di-import tadi
akan menampilkan hasilnya. Apabila ditekan
huruf x, maka program akan berputar searah
Page
334
sumbu x, ditekan huruf y, maka program akan
berputar searah sumbu y, dan apabila ditekan
huruf z, maka program akan berputar searah
sumbu z, setelah itu apabila PgUp ditekan maka
gambar(objek)tersebut akan bertambah besar,
sedangkan apabila PgDn ditekan maka obyek
tersebut akan bertambah kecil.
Efek texture diatas di dapat dari manipulasi fungsi

vertex pada glTexCoord.
Page
335
DAFTAR PUSTAKA
. . Glut Tutorial (Keyboard). http://www.-

lighthouse3d.com/opengl/glut/index-php3?5. Online
diakses pada tanggal 13 April 2013
___. 2011. Komputer Grafik.
http://dotsal.wordpress.com/2011/09/25/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
336
/04/translasiskala-dan-rotasi-grafik.html). Diakses
_________. 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
337
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
338
Kilgrad, Mark. 1996. glutSpecialFunc. glutKeyboardFunc.
http://www.opengl.org/resources/libraries/glut/spec
3/node49.html#944. (Diakses pada tanggal 14 April
2013.Pukul 16.15 WIB)
Kilgrad, Mark. 1996. glutSpecialFunc.
http://www.opengl.org/-
resources/libraries/glut/spec3/-node54.html#1044.
(Diakses pada tanggal 14 April 2013.Pukul 16.16 WIB)
Kilgrad, Mark. 1996. glutSpecialFunc. http://www.opengl.org-
/resource/libraries/glut/spec3/node54.html.online
diakses pada tanggal 13 April 2013.
Maliki, Irfan, S. T., Grafika Komputer.
http://elib.unikom.ac.id/download.php?id=108172
Diakses 13 April 2013
Maliki, Irfan. 2010. Grafika Komputer. (Online).
http://elib.unikom.ac.id/files/disk1/470/jbptunikomp
p-gdl-irfanmalik-23471-1-modulgr-r.pdf. Diakses
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
339
Nur, Alivi Rosida. 2011. Membuat Jam Analog Menggunakan
OpenGL.
http://aliphoemarley.blogspot.com/2011/10/membu
at-jam-analog-menggunakan-.opengl.html
Official Website OpenGL. 1996. glutKeyboardFunc. (accessed
at April 4th, 2013).
http://www.opengl.org/resources/libraries/-
glut/spec3/node49.html#SECTION000840000000000
00000
Official Website Zeus Communication, Multimedia &
Development. 2005. Keyboard Input. (accessed at
April 4th, 2013).
http://www.zeuscmd.com/tutorials/opengles/04Keyb
oardInput.php
Prihatmanto, Ary Setijadi. 2007. EC5130 Grafika Komputer
dan Pemrograman GPU. Suplemen Diktat Kuliah.
OpenGL Tutorial dengan GLUT: Fixed Pipeline.
(Online). http://ferygeps.files.wordpress.com
/2012/12/suplemen_opengl-glut_tutorial.pdf. Diakses
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
340
/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
341
KONTRIBUTOR
BAB 1 KELOMPOK 3 dan 4
110533406975 Ika Rizki Choirunnisaa
110533406968 Jalu Febry Kesumaninggalih
110533406990 Muhammad Ridwan
110533406977 Nabilla Zamzamiyah
110533406994 Ahmad Rizqiyani P
110533406993 Ainun Fikri L
110533406989 Iman Budi Hutomo
110533406969 Selly Handik P
110533406995 Akhmad Aprilianto
110533406973 Alifian Ranum Herliantika
110533406986 Dewi Rizka Fithriyah
110533406992 Setia Putri
110533406976 Rafsanjaya Mahaputra
110533430504 Rizka Rahmania AmeIlia
110533406974 Sigma Akhiria Maulida
110533406964 Virginia Nurita
110533406996 Anik Triasih
110533406961 Armanda Prastyan Pratama
110533406991 Bahtiyar Hidayat
110533406963 Ria Suciati
110533406962 Ahmad Khakim Amrullah
110533406968 Anjar Dwi Rahmawati
110533406983 David Chandra Kusuma
110533406984 Dwi Panglipuringtias
Page
342
110533406988 Nani Masrifah
110533406981 Nefi Liana
110533406997 Salwa Ika Wulandari
110533406987 Shofiana Fitri
110533406967 Aulia Rahmah
110533406960 Evania Kurniawati
110533406972 Ifanatun Nadhiroh
110533406979 M. Damaris Widigdya
110533406985 Akhsin Nurlaily
110533406978 Novi Adi Triswandi
110533406970 Novia Ratnasari
110533406982 Qoimatul Adilah
110533406959 Elsa Dwi Rochmah R
110533406971 Indri Widyarti
110533406965 Sotya Renaningwibi S
110533406980 Sulis Setyowati
Page
343
Page
344
Page 1

Buku Grafkom

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Buku Grafkom

Diunggah oleh

Hak Cipta:

Format Tersedia

KATA PENGANTAR

Segala puji syukur kami ucapkan atas kehadirat Tuhan

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

A. Pengertian Grafika Komputer

C. Peranan dan Penggunaan Grafika Komputer

Gambar 1.1. Contoh Penggunaan 3D dengan 3Ds Max

Gambar 1.2. Grafik Presentasi

Contoh perangkat lunak yang digunakan yaitu Corel

Salah satu efek CGI dalam film yang kurang dikenal,

Gambar 1.5. Game Angry Bird Seasons

- Drill and Practice (latih dan praktek)

Gambar 1.6. Aplikasi bidang pengajaran mata pelajaran

Virtual Reality adalah lingkungan virtual yang seakan-

10. Image Processing

D. Sistem Grafika Komputer

Penggunan user mengendalikan isi,struktur, dan

Komponen Dasar Sistem Grafik Interaktif meliputi:

- Masukan : mouse,tablet,dan stylus,peralatan

- Proses & Penyimpanan .

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

Sistem Interaktif Grafik Pertama, Sketchpad, ditemukan oleh

1960, William Fetter, dimulainya pembuatan model

E. Teknologi Display Komputer Grafik

Sejak terjadi pengembangan yang pesat dari tahun ke

Cathode Ray Tubes (CRT) mampu menampilkan

Untuk menggambar pada screen, komputer

Delta electron gun arrangement

Sebuah electron gun memancarkan elektron, melalui

sehingga pancaran elektron mencapai posisi tertentu dari

Focusing system pada CRT diperlukan untuk mengarahkan

elektron ke tengah monitor.

Resolusi adalah jumlah titik per centimeter yang dapat

ditampilkan, serta focusing dan deflection system.

Liquid Crystal Display (LCD) mampu menampilkan

Plasma, mempunyai cara kerja yang mirip dengan lampu

Alat utama untuk menampilkan output pada sistem

a. Refreshing, yaitu menembakkan elektron

Raster Scan Display

Color Monitor CRT

Color CRT dalam sistem grafika dirancang sebagai RGB

Merupakan video display merupakan kelas video yang

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

SGIs pesaing (termasuk Sun Microsystems, Hewlett-

OpenGL pada awalnya didesain untuk digunakan pada

OpenGl melayani dua tujuan :

Untuk menyembunyikan kompleksitas dari interfacing

OpenGL adalah hasil dari usaha SGI untuk

Untuk lebih mempopulerkan openGL SGI mengijinkan

Letak openGL dalam aplikasi gambar di atas pada

D. GLUT (GL Utility Toolkit)

Primitive : berupa geometric, imagesAttribute :

E. CARA KERJA OPENGL

OpenGL mempunyai bnayak fungsi dan penggunaan

Contoh script untuk inisialisasi openGL :

Fungsi primitif, menentukan elemen yang bisa

F. SET UP PROJECT BARU

Gambar 1.1a New Project Template

2. Buka windows explorer pada direktori project prak0

3. Kembali ke folder project dan copy-paste file

Gambar 1.2 Penambahan file untuk grafika komputer menggunakan

4. Lakukan konfigurasi pada properties projek prak0.

Gambar 1.4a menambah lokasi file include

Gambar 1.4b Pemilihan folder yang berisi glut.h

Gambar 1.5a Menambahkan item baru