Pengantar Grafika Komputer dan Teknologi
Pengantar Grafika Komputer dan Teknologi
Nopember 2013
Daftar
Isi
DAFTAR ISI 2
1.1 PENDAHULUAN 7
1.2 PENYAJIAN 7
1.3 PENUTUP 11
2.1 PENDAHULUAN 13
2.2 PENYAJIAN 13
2.3 PENUTUP 17
3.1 PANDAHULUAN 18
3.2 PENYAJIAN 18
4.1 PENDAHULUAN 24
4.2 PENYAJIAN 24
4.3 PENUTUP 28
5.1 PENDAHULUAN 30
5.2 PENYAJIAN 30
5.3 PENUTUP 32
6.1PENDAHULUAN 34
6.2 PENYAJIAN 34
6.3 PENUTUP 38
7.1 PENDAHULUAN 40
7.2 PENYAJIAN 40
7.3
PENUTUP
42
7.3.1
SOAL
LATIHAN
42
BAB 8. CLIPPING 43
8.1 PENDAHULUAN 43
8.3 PENUTUP 50
9.1 PENDAHULUAN 52
9.2 PENYAJIAN 52
9.3 PENUTUP 57
10.1 PENDAHULUAN 59
10.2 PENYAJIAN 59
10.3 PENUTUP 63
12.1 PENDAHULUAN 71
12.2 PENYAJIAN 71
12.3 PENUTUP 75
13.1 PENDAHULUAN 77
13.3 PENUTUP 78
13.3.1 SOAL 78
13.1 PENDAHULUAN 79
14.3 PENUTUP 80
14.3.1 SOAL 80
DAFTAR
PUSTAKA
81
Bab
1.
Pengantar
Grafika
Komputer
dan
Pemanfaatnanya
1.1 Pendahuluan
1.2 Penyajian
Film
Pemodelan Industri
Permainan/Game
Tiga tema utama dalam grafika komputer :
q Modeling
n Bagaimana kita merepresentasikan (= memodelkan) objek 3
Dimensi ?
n Bagaimana kita dapat membuat model dari objek-objek tertentu
?
q Animation
n Bagaimana kita merepresentasikan gerakan sebuah objek
n Bagaimana kita dapat memberikan kendali kepada pembuat
animasi (animator) dalam pembuatan animasi
q Rendering
n Bagaimana kita mensimulasikan formasi gambar
n Bagaimana kita dapat mensimulasikan cahaya seperti pada
dunia nyata?
1.3 Penutup
Soal Latihan dinilai untuk mereview pemahaman mahasiswa dalam menerima materi.
Penilaian dilakukan dengan dasar sebagai berikut:
Apabila rata-rata kelas dibelum memahami, maka materi harus disampaikan ulang di
dalam kelas.
Bab
2.
Teknologi
Display
2.1 Pendahuluan
2.2 Penyajian
Plasma menampilkan lebih tipis dari tabung sinar katoda (CRT) menampilkan dan
lebih terang dari liquid crystal display (LCD).
Liquid Cristal Display (LCD)
o Suatu jenis display yang menggunakan Liquid Crystal sebagai media
refl eksinya. LCD sudah digunakan di berbagai bidang, sebagai
contoh: monitor,TV, kalkulator. Pada LCD berwarna semacam
monitor terdapat puluhan ribu pixel. Pixel adalah satuan terkecil di
dalam suatu LCD. Pixel-pixel yang berjumlah puluhan ribu inilah yang
membentuk suatu gambar dengan bantuan perangkat controller, yang
terdapat di dalam suatu
monitor.
Metode CRT
Setiap kondisi pixel di layar disimpan ke dalam memori yang disebut : frame
buffer.
Pixel mempunyai informasi mengenai :
lokasi = lokasi memori di frame buffer
banyaknya (lokasi) pixel yang dapat disimpan disebut sebagai
resolusi
warna = banyaknya byte di frame buffer = 2n
1 bit memori = 21 warna = 2 warna
4 bit memori = 24 warna = 16 warna
8 bit memori (1 byte) = 28 warna = 256 warna
Kapasitas memori membatasai banyaknya pixel yang ditampilkan dan
warna yang dapat direpresentasikan.
2.3 Penutup
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
3.
Synthetic
Camera
3.1 Pandahuluan
3.2 Penyajian
Viewing Coordinate
Viewing coordinate sering juga disebut sebagai UVN system. Sistem koordinat UVN
mempunyai tiga sumbu :
l U
l V
l N
Viewing coordinate diperoleh berdasarkan informasi mengenai :
l posisi kamera pada world coordinate, posisi ini disebut juga sebagai
VRP (Viewing Reference Point).VRP ditentukan berdasarkan vector r
= (rx, ry,rz)
l Arah viewplane, disebut sebagai VPN (Viewplane Normal) dan
ditentukan berdasarkan vector n (nx,ny,nz). Vector n ditentukan
berdasarkan world coordinate.
l Arah sumbu V ditentukan berdasarkan vector u. Vector u bersifat
tegak lurus terhadap n dan v.
l posisi mata (eye) ditentukan dalam viewing coordinate dan
disimbolkan dengan e = (eu,ev,en). Umumnya e berisi (0,0,E)
norm
| norm |
Untuk memperoleh norm, tentukan titik yang menjadi pusat pandang camera (look
at) dan kemudian norm dihitung sebagai : norm = scene - r
Karena vector u harus tegak lurus terhadap n dan v maka vector u dapat diperoleh dari
:
u = nv
l Catatan : n x v menyatakan cross product
Vieweing Coordinate
Setiap titik di world coordinate (w) dapat ditransformasikan ke viewing coordinate (p)
Jika diketahui titik p=(pu;pv;pn) adalah titik di viewplane dan mata terletak di
(eu;ev;en) maka titik q (u*,v*) sebagai proyeksi perspektif dari p dapat diperoleh
dengan
u* =
t=w-r
en pu - eu pn
pu = t u
e -p
pvn = t n v v*
pn = t n =
en - pn en
en pv - ev pn p
p u* = 1-
3.3 Penutup
Synthetic camera mengenalkan proyeksi perpektif dengan mata berada di sumbu
proyeksi sangat membatasi sudut pandang. Memutar objek agar memperoleh sudut
pandang yang berbeda sangat tidak efisien.
3.3.1
Soal
Latihan
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
4.
Warna
4.1 Pendahuluan
Materi tentang warna menjelaskan proses pemberian dan hasil yang utampilkan ketika
pewarnaan terhadap ssuatu objek selesai dijalankan.
4.2 Penyajian
Warna sebenarnya merupakan persepsi kita terhadap pantulan cahaya dari benda-
benda.
Cahaya merupakan energi elektromagnetik. Cahaya dapat dibagi menjadi dua bagian :
q Cahaya terlihat (visible light) yaitu bagian dari energi elektromagnetik
dengan panjang gelombang 400-700 nm (nanometer)
q Cahaya tidak terlihat (invisible light) yaitu bagian dari energi
elektromagnetik dengan panjang gelombang < 400 nm atau > 700 nm
Mata manusia hanya peka terhadap panjang gelombang 400 - 700 nm dan perbedaan
panjang gelombang tersebut dipersepsikan sebagai 'warna'.
Spektrum Warna
Rods
q Hanya dapat membedakan terang dan gelap (hitam / putih)
q Mata mempunyai 120 juta rod
q Tidak sensitif terhadap warna
Cones
q Bagian retina yang peka terhadap warna
q Mata mempunyai 60 juta cones
q Ada tiga macam cones, masing-masing peka terhadap warna merah
(L), biru (S) dan hijau (M).
q Dapat membedakan 200 warna sekaligus
Fovea adalah arena di retina yang berisi cones, Berukuran 1/150 inch, Fovea hanya
mempunyai sudut pandang sebesar 1,7 derajad. Diluar itu gambar terlihat kabur.
Setiap cones di fovea mempunyai satu jalur syaraf ke otak dan dapat mengirim
'gambar' sekaligus (paralel). Bandingkan : Video Kamera mempunyai 400.000 sensor
tetapi hanya dapat mengirim 'gambar' satu persatu (stream).
4.3 Penutup
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
5.
Sistem
Koordinat
5.1 Pendahuluan
5.2 Penyajian
v*
=
pv
Tranformasi
1-
p
en
n
Agar gambar di screen tampak sama dengan di world maka perlu dilakukan
transformasi koordinat. Dengan demikian setiap titik di wc dapat diketahui
lokasinya di sc sebagai :
xsc = xwc
ysc = ymax ywc
Rumus (1) tidak dapat mengatasi persoalan :
l Pemakaian window dan viewport.
l Nilai negatif dari koordinat wc.
5.3 Penutup
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
6.
Algorithma
Garis
6.1Pendahuluan
Bagian ini menjelaskan bagaimana algorithma garis dibuat dan manipulasi garis
sehingga menghasilkan beberapa fungsi matematika.
6.2 Penyajian
Permasalahan Pixel mana yang harus dipilih untuk menggambar sebuah garis ?
Algorithma garis adalah algorithma untuk menentukan lokasi pixel yang paling dekat
dengan garis sebenarnya (actual line) . Ada tiga algorithma utama untuk menggambar
garis :
q Line Equation
q DDA Algorithm
q Bresenhams Algorithm
Line Equation
Sebuah garis lurus dapat diperoleh dengan menggunakan rumus :
y = mx + b
dimana :
q m = gradien
q b = perpotongan garis
dengan sumbu y.
Apabila dua pasang titik akhir dari sebuah garis dinyatakan sebagai (x1,y1) and (x2,
y2), maka nilai dari gradien m dan lokasi b dapat dihitung dengan
Algorithma DDA
Digital differential analyzer (DDA) merupakan algorithma untuk menghitung posisi
pixel disepanjang garis dengan menggunakan posisi pixel sebelumnya. Algorithma
berikut ini menggunakan asumsi bahwa garis berada di kuadran I atau II serta garis
bertipe cenderung tegak atau cenderung mendatar.
yi +1 = yi + m
Untuk garis dengan m > 1, maka yi+1 = yi + 1 dan :
1
xi +1 = xi +
m
Algorithma Bresenham
Bresenham mengembangkan algorithma yang lebih efisien. Algorithma ini mencari
nilai integer yang paling mendekati garis sesungguhnya (actual line). Algorithma ini
tidak memerlukan pembagian. Algorithma Bresenham yang disajikan berikut ini
hanya dapat digunakan untuk garis yang berada di kuadran I dan 0 < m < 1. Anda
yang ingin mempelajari pembuktian matematis dari algorithma Bresenham silahkan
membaca buku Computer Graphics (Hearn dan Baker)
d1=m , karena d1> 0 atau positif maka pixel berikutnya adalah pixel (xi+1, yi+1)
Atribut Garis
Atribut garis meliputi :
q Ketebalan garis
q Pola garis
q Warna garis
6.3
Penutup
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
7.
Algoritma
Lingkaran
7.1 Pendahuluan
7.2 Penyajian
Bresenhams Circle
Algorithma lingkaran bresenham melibatkan angka integer dan tidak membutuhkan
pembagian. Algorithma yang disajikan berikut ini hanya membahas pada kuadran I
yaitu pada x 0 dan y 0
Contoh Algorithma Lingkaran Bresenham :
i=(xi+1)2+(yi-1)2-R2
i < 0 maka
=mH - mD (kasus 1 dan 2)
bila 0 maka pilih mH
bila > 0 maka pilih mD
i > 0 maka (kasus 3 dan 4)
= mD mV
7.3 Penutup
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
8.
Clipping
8.1 Pendahuluan
8.2 Penyajian
Clipping adalah metoda untuk hanya menampilkan garis pada area yang visible
(terlihat) seperti pada gambar berikut:
Terdapat Visible dan Ivisible Link Berdasarkan posisi garis terhadap area gambar
maka garis dapat dibedakan menjadi :
Algorithma Clipping
Berbagai algorithma telah dikembangkan untuk menangani masalah pemotongan
garis tersebut, antara lain :
Cyrus-Beck
Cohen-Sutherland
Algorithma Cohen-Sutherland
Cohen dan Sutherland memberikan kode kepada tiap area yang mungkin dilewati oleh
Region code mempunyai panjang empat bit dan menggunakan urutan sebagai berikut :
Sehingga diperoleh region code :
Garis kemungkinan partially visible atau fully invisible apabila region code dari
bit bernilai 1. Contoh sebelumnya menunjukkan bahwa ujung Pa, Pb, Qc,Qd dan Re
Ujung garis Pa
Ujung garis Pb
Apabila ditemukan lebih dari satu titik potong maka pilih titik potong yang paling
Contoh algoritma:
0 : p = Pa
1 : p = (xmin,yp1)
2 : p = (xmax,yp2)
4 : p = (xp2,ymin)
5 : p1 = (xp2,ymin) ; p2 = (xmin,yp1)
6 : p1 = (xp2,ymin) ; p2 = (xmax,yp2)
8 : p = (xp1,ymax)
9 : p1 = (xp1,ymax) ; p2 = (xmin,yp1)
10 : p1 = (xp2,ymax) ; p2 = (xmin,yp1)
switch (rc)
0 : q = Pb
1 : q = (xmin,yp1)
2 : q = (xmax,yp2)
4 : q = (xp2,ymin)
5 : p1 = (xp2,ymin) ; p2 = (xmin,yp1)
6 : p1 = (xp2,ymin) ; p2 = (xmax,yp2)
q = Tentukan mana yang lebih dekat antara p1 & p2
8 : p1 = (xp1,ymax)
9 : p1 = (xp1,ymax) ; p2 = (xmin,yp1)
10 : p1 = (xp2,ymax) ; p2 = (xmin,yp1)
8.3 Penutup
1. Tugas (kelompok) :
Tentukan titik-titik potong dari garis-garis berikut :
P = (2,1) - (6,7)
Q = (2,3) - (7,5)
S = (4,2) - (8,7)
pada area gambar (2,2) - (5,5)
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
9.
Transformasi
2
Dismensi
9.1
Pendahuluan
Materi pada bagian ini menjelaskan proses transformasi atau perubahan objek grafis
menjadi objek 2 Dimensi.
9.2 Penyajian
Transformasi adalah Metoda untuk memanipulasi lokasi sebuah titik. Ada 3 macam
transformasi :
q Translation (Pergerseran)
q Scaling (Penskalaan)
q Rotation (Pemutaran )
Translation
Titik A (x,y) digeser sejumlah Trx pada sumbu x dan digeser sejumlah Try pada
sumbu y
Rumus Umum :
Q(x,y) = P(x,y) +Tr
= P(x+Trx, y+Try)
Contoh :
Diketahui : A(2,4) digeser sejauh (4,2)
Ditanya : lokasi hasil pergeseran (A)
Jawab :
A (x,y) = A + Tr
= (2,4) + (4,2)
= (6,6)
Scalling
Menggunakan asumsi titik pusat (0,0). Lokasi asli dikalikan dengan besaran Sx pada
sumbu x dan Sy pada sumbu y
Rumus Umum :
Q(x,y) = A * S
= A(x,y) * S(x,y)
= A(x*Sx, y * Sy)
Contoh
Diketahui : Titik A (1,1);B (3,1); C(2,2), ketiga titik tersebut diskalakan sebesar Sx =
2 dan Sy = 3
Ditanyakan : Lokasi titik hasil penskalaan
Jawab :
A=(1*2, 1*3) = (2,3)
B=(3*2, 1*3) = (6,3)
C=(2*2, 2*3) = (4,6)
Rotasi
x = r cos , y = r sin
x'=xcosysin
y'=xsin+ycos
Contoh
Diketahui : A(1,1);B(3,1);C(2,2)
Ditanyakan : Rotasikan ketiga titik tersebut sebesar 90o
Jawab :
A=(1*cos 90 - 1*sin 90,
1*cos 90+1*sin 90)
=(0-1,0+1)=(-1,1)
B=(3*cos 90 1*sin 90,
1*cos 90 + 3*sin 90)
=(-1,3)
C=(2*cos 90 2*sin 90,
2 * cos 90 + 2*sin 90)
=(-2,2)
Rotasi/Penskalaan pada Sembarang Titik Pusat
Tahapan untuk melakukan rotasi atau penskalaan dengan sembarang titik pusat
(xr, yr).
q Lakukan pergeseran sebesar (-xr,-yr)
q Lakukan rotasi atau penskalaan
q Lakukan pergeseran sebesar (xr,yr)
a b c
M = d e f
g h i
Sehingga rumus transformasi menjadi :
Rumus Umum :
Mb= M1 * M2 * M3*...*Mn
Dengan Mb merupakan matrik transformasi baru dan M1...Mn merupakan komponen
matrik transformasi.
9.3 Penutup
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
10.
Transformasi
3
Dimensi
10.1 Pendahuluan
Materi ini membahas bagaimana proses transformasi objek grafika ke dalam bentuk 3
Dimensi
10.2 Penyajian
Elaborasi 3 D
Bagaimana manusia memperoleh kesan kedalaman ?
q Manusia mempunyai dua mata.
q Kedua mata manusia mempunyai selisih sudut pandang 120o
q Perbedaan sudut pandang tersebut membuat masing-masing mata
memperoleh gambar yang berbeda untuk objek yang sama.
q Perbedaan gambar diproses oleh otak sehingga kita memperoleh kesan
'kedalaman' atau jarak terhadap benda.
Percobaan : Tutup salah satu mata anda selama kurang lebih 2 hari dan anda akan
mengetahui bahwa anda tidak dapat menentukan dengan mudah jarak antara anda
dengan benda yang anda lihat
Sifat 3D
Setiap titik dalam 3 dimensi ditentukan oleh tiga posisi :
q x : jarak titik tersebut terhadap sumbu x
q y : jarak titik tersebut terhadap sumbu y
q z : jarak titik tersebut terhadap sumbu z
Posisi sebuah titik dalam 3 dimensi dituliskan dalam bentuk (x,y,z). Komputer dapat
digunakan untuk mengolah benda tiga dimensi. Ada tiga persoalan dalam mengolah
benda tiga dimensi menggunakan komputer :
q Pembuatan lokasi titik 3D
q Manipulasi titik 3D
q Transformasi titik 3D menjadi 2D
Proses yang digunakan untuk menghasilkan lokasi titik-titik 3D yang menunjukkan
bentuk dari benda 3D. Ada 3 macam proses untuk menghasilkan lokasi titik 3D :
q Penentuan langsung menggunakan peralatan seperti mouse3D,
scanner3D berbagai peralatan lain
q Menggunakan parametric surface
q Menggunakan prosedur khusus seperti extrude dan surface of
revolution.
Scanner 3D
Scanner 3D merupakan peralatan yang digunakan untuk menghasilkan lokasi titik-
titik 3D secara langsung dengan menunjuk lokasi titik tersebut.
Contoh peralatan : mouse, trackball, laser scanner dan sebagainya.
Parametric Surface
Digunakan untuk menghasilkan benda-benda yang dapat direpresentasikan dalam
rumus matematika seperti : bola, donut, tabung, cone dan sebagainya
Extrude
Merupakan prosedur menghasilkan lokasi titik 3D dengan menarik titik-titik 2
dimensi ke satu arah tertentu
Surface of Revolution
Prosedur untuk menghasilkan lokasi titik 3D dengan cara memutar profile pada
sumbu putar
Representasi Struktur data titik 3 D
Titik 3D dapat disimpan sebagai :
q Mesh
n Mesh merupakan kumpulan titik 3D yang saling dihubungkan.
n Model yang dihasilkan disebut sebagai wireframe model
n Permukaan benda (surface) diperoleh dengan menghubungkan
titik-titik vertex baik dalam bentuk segiempat atau segitia.
n Umumnya digunakan surface dalam bentuk segitiga karena
bentuk segitiga akan selalu berada dalam keadaan planar
(datar).
q Rumus matematika
q Titik profile
Proses Komputer 3D
10.3
Penutup
Jawaban :
Point3D = record
x,y,z:real;
end;
Mesh = record
jumvertex,jumedge:integer;
end;
Ilustrasi:
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
11.
Proyeksi
11. 1 Pendahuluan
Materi ini menjelaskan metode menggambarkan benda tiga dimensi pada bidang 2
dimensi
11.2 Penyajian
Proyeksi adalah metoda menggambarkan benda tiga dimensi pada bidang 2 dimensi.
Ada 2 cara melakukan proyeksi :
q Proyeksi paralel : Semua garis paralel akan tampak paralel pada bidang
proyeksi.
q Proyeksi perspektif : Semua garis paralel akan menghilang di titik
pusat proyeksi.
Proyeksi Pararel
Ada dua macam proyeksi paralel :
q Proyeksi Orthographic
q Proyeksi Oblique
Proyeksi orthographic adalah proyeksi dengan mata tegak lurus terhadap bidang
proyeksi
Proyeksi Oblique adalah proyeksi dengan mata berada di lokasi yang tidak tegak lurus
terhadap bidang proyeksi
Dengan bidang proyeksi adalah bidang xy dan titik terletak di sumbu z sejauh E maka
titik hasil proyeksi akan z = 0 apabila :
1
t' =
1 z
E
y' = y * t '
x' = x * t '
dengan E > z
11.3 Penutup
Proyeksi benda 3D ke dalam bidang 2D dapat dilakukan denga beberapa teknik
proyeksi, antara lain Proyeksi paralel : Semua garis paralel dan Proyeksi perspektif.
11.
3.1
Soal
latihan
Diketahui sebuah benda dengan vertex-vertex dan edge seperti tabel di bawah ini,
lakukan proyeksi perspektif jika E terletak di z=10 dan z = 20:
Jawaban
11.3.2
Petunjuk
Penilaian
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
12.
3D
Street
Art
12.1 Pendahuluan
Materi ini memeberikan pengalaman kepada peserta didik untuk melakukan praktek
materi yang didapatkan dalam format project 3D Street Art.
12.2 Penyajian
3D street art adalah proses mengabungkan unsur kreatif grafik dengan konsep 3D
pada grafika komputer.
3. Proyeksi
7. Compare
12.3 Penutup
Proyek 3D street art ini dibuat untuk mengimplementasi teori kedalam praktek rieal
yang penuh dengan implementasi keilmuan
Buat kelompok maksimal 5 orang dan lakukan langkah diatas dengan objek gambar
lainnya
Dosen perlu memberikan model atau demo terkait dengan perbedaan teknologi yang
akan dijelaskan.
Bab
13.
Ujian
Tengah
Semester
13.1 Pendahuluan
Soal Ujian tengah Semester digunakan sebagai instrumen penilaian dan kemampuan
Peraturan
13.3 Penutup
Sebagai evaluasi tengah semester memberikan masukan kepada pegampu porsi materi
yang sudah dan belum dikuasai oleh mahasiswa
13.3.1 Soal
13.1 Pendahuluan
Soal Ujian Akhir Semester digunakan sebagai instrumen penilaian dan kemampuan
Peraturan
1. Diketahui sebuah benda dengan vertex-vertex dan edge seperti tabel di bawah ini,
lakukan proyeksi perspektif jika E terletak di z=10 dan z = 20:
14.3 Penutup
Sebagai evaluasi akhir semester memberikan masukan kepada pegampu porsi materi
yang sudah dan belum dikuasai oleh mahasiswa
14.3.1 Soal
Shirley P., Ashikhmin M., dan Marschner S., 2009, Fundamentals of Computer
Graphics, A K Peters
Asthana, R.G.S. dan Sinha, N.K., 2001, Computer Graphics For Scientists and
Engineers, New Age International Ltd., New Delhi.
Ammeraal L., dan Kang Z., 2007, Computer Graphics for Java Programmer, 2nd
Edition, Wiley,