Grafika komputer

Deskripsi Proses Citra / animasi

…
sphere { objek grafika komputer 2D / 3D
0.0, 1
texture {
pigment {
color rgb <0.8,0.8,1.0> }
finish{
diffuse 0.3
ambient 0.0
specular 0.6
reflection {
0.8
metallic }
conserve_energy } } }
…
Pengolahan citra

Citra yang
Citra Pengolahan sesuai dgn
awal citra kebutuhan
Image Processing vs Computer Graphics

Image Processing Computer Graphics

Berorientasi pixel Berorientasi Vektor
Mengolah data citra untuk Menggunakan model 2D/3D
mendapatkan interpretasi 2D/  hasil realistik
3D
Titik berat pada memanipulasi Cenderung mempelajari
citra sesuai dengan keperluan konsep dan implementasi
user metode untuk pembangkitan
citra/animasi (2D/3D)
Berawal dari citra digital  Mendeskripsikan objek
deskripsi objek pada citra dengan primitif dasar grafis
untuk mem-bentuk citra
2D/3D
Tujuan Instruksional Umum
1. Memahami definisi dan konsep dari Grafika Komputer,
teknik pembangunan primitive serta tahapan dalam
proses Grafika

2. Memahami definisi dan konsep dalam melakukan

Pengolahan Citra representasi data citra digital ,
operasi – operasi yang menjadi area pengolahan citra
berikut dengan teknik yang digunakan.

3. Mengetahui penerapan grafika dan pengolahan citra

dalam berbagai bidang serta perkembangannya
 SUBSTANSI PEMBAHASAN
1. Pemahaman tentang perbedaan antara grafika dan
pengolahan citra ditinjau dari sisi definisi, tujuan yang
akan dicapai, representasi informasi
2. Memahami algoritma pembangkitan primitif dasar 2
Dimensi dalam grafika computer, pengubahan atribut
objek grafik dan operasi transformasi yang dapat
dilakukan pada objek grafik, operasi clipping, kurva bezier,
viewing, rendering, texture mapping
3. Membangun perangkat lunak yang menyediakan modul
primitif grafik, operasi pengubahan atribut dan operasi
transformasi dalam grafika 2 Dimensi, memanfaatkan tool
untuk menghasilkan scene 3 Dimensi
SUBSTANSI PEMBAHASAN (cont’d)
4.Teknik penghasilan Citra Digital (kuantisasi dan
sampling), representasi data Citra Digital dengan tipe
dasar (Bitmap), Operasi-Operasi dasar yang dilakukan
untuk pengolahan citra digital, operasi pada domain
spatial dan domain frekuensi, enhancement citra,
smoothing citra, segmentasi, kompresi data citra,
steganography.

5. Mekanisme deteksi sisi, segmentasi gambar dan

kompresi gambar serta mekanisme pengukuran
peformansi operasi dengan menerapkan fidelity kriteria
Tujuan Instruksional
Khusus
 memaparkan perbedaan grafika komputer dan
pengolahan citra
 menjelaskan primitif dasar pembentuk grafika
komputer
 membangun modul pembangun primitif keluaran
grafika
 manipulasi terhadap objek-objek grafika 2D sederhana
 menjelaskan konsep-konsep dasar grafika komputer 3D
 menggunakan tool untuk membangun scene 3D
 menjelaskan representasi citra digital
 menjelaskan penggunaan algoritma-algoritma
pengolahan citra sederhana
 mengimplementasikan program pengolahan citra secara
digital dengan memperhatikan unjuk kerja teknik yang
digunakan
Ket: knowledge skill
PUSTAKA
DAFTAR PUSTAKA
1. [DON96] Donald H and M. Pauline Baker, Computer Graphics
Principle and Practice in C, 2nd Edition, Addison Wesley, 1996
2. [SAM03] Samuel R.Buss, 3-D Computer Graphics A Mathematical
Introduction with OpenGL, Cambridge University Press, 2003
3. [GON02] Rafael C. Gonzales and Richard E. Woods, Digital Image
Processing, 2nd Edition, Prentice Hall, 2002
4. [PRAT01] William K. Pratt, Digital Image Processing, 3rd Edition,
Addison Wesley, 2001
5. [ACH05] Acharya Tinku, K. Ray Ajoy, Image Processing: Principles
and Application, John Wiley & Son, 2005
6.[ION93]Pitas, Ioannis. 1993. Digital Image Processing
Algorithms. Prentice Hall International (UK) Ltd
GRAFIKA KOMPUTER
 Fungsi Komputer  mempercepat
perhitungan
 Jumlah data yang besar
 Penyajian data yang efisien dan
efektif
 Penyajian secara grafis  munculnya
computer graphics
 Computer Graphics  meningkatkan
komunikasi manusia dengan mesin
2
SISTEM GRAFIKA KOMPUTER
 Data  Grafik, operator tidak dapat
berinteraksi dengan komputer (statis)
 Diinginkan Interactive Computer
Graphic  operator bisa
mengendalikan : isi, format, bentuk,
ukuran, warna.
 Sistem interaktif  mensimulasikan
real world pada layar komputer

4
SISTEM GRAFIKA KOMPUTER
Berdasarkan cara pandang pada layar :
 Motion dynamic  objek bergerak,
kita sbg pengamat (diam) atau
sebaliknya.
ex : flight simulator
 Update dynamic  perubahan sifat
pada objek (bentuk,warna).
ex : simulasi tabrakan mobil
CS3204 Departement Teknik Informatika 5
IT Telkom
PENERAPAN GRAFIKA KOMPUTER
 Computer Aided Design (CAD)
 Presentasi
 Art
 Hiburan
 Pendidikan dan Pelatihan
 Visualisasi
 GUI (Graphical User Interface)

CS3204 7
www.motionportrait.com
KLASIFIKASI PENERAPAN GRAFIKA
KOMPUTER
 Berdasarkan tipe dari objek dan
gambar yang dihasilkan
 Berdasarkan interaksi dan derajat
pengendalian objek/gambar dalam
layar
 Berdasarkan role of the picture
 Berdasarkan hubungan antara objek
dan gambar yang tertampil.

12
Image Processing vs Computer Graphics

Image Processing Computer Graphics

Berorientasi pixel Berorientasi Vektor
Mengolah data citra untuk Menggunakan model 2D/3D 
mendapatkan interpretasi 2D/3D hasil realistik

Titik berat pada memanipulasi Cenderung mempelajari konsep

citra sesuai dengan keperluan
user
Berawal dari citra digital 
deskripsi objek pada citra
dan implementasi metode untuk
pembangkitan citra/animasi
(2D/3D)
Mendeskripsikan objek dengan
primitif dasar grafis untuk mem-
bentuk citra 2D/3D

13
Image Processing vs Computer Graphics
0 1 2 3 4
0 1 1 1 0
0
0 1 0 1 0
1 Image Processing
0 1 0 1 0
2
0 1 0 1 0
3
0 1 1 1 0
4

Computer Graphics

 (3,Timur),(4,Selatan),(3,Barat),(4,Utara)
 [(0,1),(0,3)], [(0,3),(4,3)], [(4,3),(4,1)], [(4,1),(0,1)]
(Y2 − Y1 )
Arah = tan − 1 Besar = ( X 1 − X 2 ) 2 + (Y1 − Y2 ) 2
(X 2 − X1)
 [(0,1),(4,3)] atau (0,1,4,3)  atribut informasi segi empat

14
MONITOR

Komponen Utama Monitor :

 Display

 Frame Buffer  berbentuk matrix

 Display Controller/Display processor

15
MONITOR (cont.)

Dari cara menampilkan gambar :

 Vector Display/Calligraphic Display/
Stroke Display (60-an)
 Raster Display. (70-an)

16
Vector Display
Input
Line (1,1,5,5)

Circle (3,3,10)

Frame Buffer Display Processor Display

Isi dari Frame Buffer Display Processor

function Line (X1,Y1,X2,Y2) { Menterjemahkan Data Digital menjadi tegangan analog

……………………………. Yang akan dipakai untuk memancarkan Elektron
}
Contoh :
function Rectangle (X1,Y1,X2,Y2) { Input : Line (1,1,5,5)
……………………………. Misalkan output dari function Line pada Frame Buffer
} adalah (1,1),(2,2),(3,3),(4,4),(5,5)
Maka display processor akan memerintahkan
function Circle (X,Y,r) { penembakan elekron pada pixel
……………………………. (1,1),(2,2),(3,3),(4,4),(5,5)
}

17
Raster Display
Input
y

5
4
3
2
1
x
0 1 2 3 4 5

Frame Buffer Display Processor Display

Frame Buffer Display Processor

Berfungsi sebagai penyimpan Menterjemahkan Data Digital menjadi

sementara apa yang akan ditampil - tegangan analog yang akan dipakai
kan ke layar untuk memancarkan Elektron dari
sudut kiri atas layar sampai
kanan bawah layar .

18
MONITOR (cont.)

Jenis Monitor :
 Layar Tabung

(CRT = Cathode-Ray Tube)

 Layar Tanpa Tabung (LED, LCD,
Plasma Display)

19
PRINTER vs PLOTTER

 Printer  Raster Technology

 Plotter  Vector Technology

20
Perangkat Lunak Grafis

 Corel Draw

 Auto CAD

 3D Studio MAX

 Visio

21
Primitif Grafis
 Primitif Grafis dapat diartikan sebagai
sebuah bentuk dasar dari objek grafis
yang dapat dibentuk
 Primitif grafis yang menjadi dasar
bagi semua objek grafis adalah titik
(DOT)

2
PRIMITIF GRAFIS
 Pixel (Dot) Posisi (x,y), Warna
 Garis (Line)  Posisi (x1,y1,x2,y2), Warna, Thickness,
Pattern
 Lingkaran (Circle)  Pusat(x,y), Radius, Warna,
Thickness, Pattern
 Ellipse  Pusat(x,y), Radius Horisonal/Vertikal, Warna,
Thickness, Pattern

 Kurva  Teratur/Tidak teratur (Bezier)

 Character  Type, Slanted, Thickness, Color, dll

3
Titik (Pixel/Dot)
 Pustaka Grafis (Library)
BGI  putpixel (x,y,color)
OPENGL  GL_Drawdot(x,y,color)

 Low Level Programming

- Interupt  H/W, S/W
- DMA (Direct Memory Access)
Modus Text : B800:0000h
Modus Grafis : A000:0000h

4
Titik (Pixel/Dot)
void setpixel_DMA (x,y,color)
{
char *Segmen = 0xA0000000;
(Segmen+(800*y+x)) = color;
}
procedure setpixel_DMA(x,y,color);
begin
mem[A000:(800*y+x)] := color;
end;

5
GARIS (LINE)
Y2 y − y1 x − x1
=
y 2 − y1 x 2 − x1
Y1

y = m.x + c
X1 X2
y 2 − y1 ∆ y
m= =
x 2 − x1 ∆ x

6
Algoritma Pembuatan Garis
 Algoritma pembuatan garis lurus vertikal dan horisontal
relatif mudah, tetapi bila garis tersebut miring, maka
algoritma menjadi sulit.
 Misal : Line (1,3,8,5)

y 2 − y1 5 − 3 2
m= = =
x 2 − x1 8 − 1 7
2 19
c = y1 − m.x1 = 3 − .1 =
7 7
2 19
y = .x +
7 7
7
Algoritma Pembuatan Garis

8
Analisa Algoritma
 Bentuk umum persamaan garis :
y=mx+c digunakan apabila nilai m
berada pada rentang 0 s/d 1 {artinya
bahwa delta x lebih besar daripada
delta y} sedangkan apabila m > 1
maka digunakan persamaan x=(y-c)/
m. Mengapa???

9
DDA (Digital Differential Analyser)
Algorithm
 DDA merupakan pengembangan dari
algoritma persamaan garis
sebelumnya (persamaan matematis)
 Ide dasar dari DDA adalah
menggunakan nilai pemetaan yang
telah didapat (bisa x atau y) untuk
menghitung nilai selanjutnya untuk
mempercepat proses komputasi

10
DDA (Digital Differential Analyser)
Algorithm
 Dari persamaan y=mx+c maka bisa
disimpulkan bahwa:
 Y(i) = m x +c
 Y(i+1) = Y(i) + m Y(i+1) = Y(i) + m

Y(i) = m x +c

 Nilai pemetaan selanjutnya setara

dengan kenaikan nilai m

11
DDA (Digital Differential Analyser) Algorithm
y = m.x + c
y 2 − y1 ∆ y
m= =
x 2 − x1 ∆ x

•Jika 0<m<1  yk+1 = yk + m

xk+1 = xk + 1
•Jika m>1  xk+1 = xk + 1/m
yk+1 = yk + 1

12
Proses DDA
Dengan mengambil contoh soal yang sama pada persamaan garis secara
Matematis, maka proses DDA dapat digambarkan sebagai berikut

Perubahan nilai Yi setara dengan gradien m

13
Bresenham’s Algorithm
 Dengan mengamati algoritma pembuatan
garis sebelumnya maka dapat kita katakan
bahwa :
 proses perhitungan yang terjadi seolah-olah
menyatakan bahwa nilai pemetaan berikutnya
sama dengan pemetaan sebelumya atau
berubah (Ada pedoman perubahan)

Yi
Y(i+1) Apa dasarnya ???
Yi + 1

14
Bresenham’s Algorithm
 Setelah melakukan penelitian yang serius,
maka seorang pakar menemukan suatu
metode dalam pembuatan garis yang
memiliki kecepatan komputasi yang lebih
cepat dibandingkan dengan metode
sebelumnya => Bresenham’s Algorithm
(Mengapa lebih cepat ??)
 Algoritma Bresenham’s melakukan proses
pemetaan berdasarkan sebuah decision
parameter p

15
 Bresenham’s Algorithm
P0 = 2∆ y − ∆ x
Plot (Xo,Yo)
Repeat
If Pk<0 then
Plot (Xk+1,Yk)
Pk + 1 = Pk + 2∆ y
Otherwise
Plot (Xk+1,Yk+1)
Pk + 1 = Pk + 2∆ y − 2∆ x
Until X=end
16
Bresenham’s Algorithm
 Contoh : Line
(20,10,30,18)
∆X = 10, ∆Y = 8
Po = 2∆Y - ∆X = 6
2.∆Y = 16
2∆Y - 2∆X = -4
K Pk (Xk+1,Yk+1) K Pk (Xk+1,Yk+1)
0 6 (21,11) 5 6 (26,15)
1 2 (22,12) 6 2 (27,16)
2 -2 (23,12) 7 -2 (28,16)
3 14 (24,13) 8 14 (29,17)
4 10 (25,14) 9 10 (30,18)
17
 Bresenham’s Algorithm
 Ilustrasi penentuan parameter
Kita hitung jarak (d) antar titik y rumus
dengan y yang mungkin:
y= m ( Xk+1) + c

d1= y-yk = m (xk+1) + c –yk

d2= yk+1 - y= yk+1 -m (xk+1) – c
d1-d2 = 2m(xk+1) – 2yk + 2c -1
Penyederhanaan:
pk= Δx(d1-d2) = 2Δy.xk-2Δx.yk+ Z
Bila pk <0 maka pilih pemetaan d1
Bila pk >=0 maka pilih pemetaan d2
xk+1,yk xk+1,yk+1
xk,yk setelah ini ada 2 kemungkinan 2Δy+Δx(2c-1)
yaitu xk+1,yk+1 atau xk+1,yk
18
Bresenham’s Algorithm
 Nilai pk berikutnya dapat dihitung dengan
cara:
pk= 2Δy.xk-2Δx.yk+ Z
pk+1 = 2Δy.(xk+1)-2Δx.yk+1+ Z
Disederhanakan
pk+1- pk= 2Δy.(xk+1 - Xk)-2Δx.(yk+1-yk)
Kita tahu bahwa xk+1 =xk+1
pk+1= pk+ 2Δy-2Δx.(yk+1-yk)
Dimana nilai (yk+1-yk) bisa 0 atau 1tergantung
pada nilai pk
19
Area Filling

Setelah berhasil membangun objek grafis
maka langkah selanjutnya adalah
melakukan customisasi terhadap atribut
objek grafis

Atribut dari objek grafis dapat berupa:
 Ukuran garis batas
 Tipe garis batas
 Warna garis batas
 Warna objek (Fill color / Area Filling)

2
Area Filling

Dalam grafis, selain digunakan
primtif-primitif grafis, diperlukan
algoritma khusus untuk mengisi
warna. Untuk pengisian warna pada
grafik diterapkan pada objek yang
memiliki hole.

Contoh :

3
Area Filling
Beberapa algortima yang dapat
digunakan untuk melakukan area filling,
yaitu :

Scan Line

Boundary Fill Algorithm

Flood Fill Algorithm

4
Scan Line Fill Algorithm

Dimulai dari kiri atas layar

Bergerak ke kanan hingga batas kanan layar

Ulangi untuk baris-baris berikutnya

Jika ditemukan suatu batas area, maka dilakukan
operasi putpixel hingga ditemukan batas area
berikutnya

Kelemahan :
 Algoritma akan gagal jika ditemui titik-titik ujung,
sehingga perlu penanganan khusus.
  Solusi : periksa semua informasi titik ujung
berdasarkan list vektor yang dimiliki setiap primitif.

5
Scan Line Fill Algorithm

Ilustrasi Proses Scan Line

Ada masalah ??

6
Boundary Fill

Dengan teknik ini pengisian warna
dilakukan berdasarkan penentuan titik
awal.

Posisi awal diletakkan pada area filling.

Kemudian semua titik tetangga diuji
terhadap batas area

Ada 2 metoda untuk mencari titik tetangga
:
 4 Connected
 8 Connected
7
Boundary Fill

4 Connected
1

4 X 2

8 Connected
1 2 3

8 X 4

7 6 5

8
Algoritma 4-Connected
Procedure BFill (x,y,fillcol,boundcol);
Var
Currcol : integer;
Begin
Currcol  getpixel(x,y);
If (Currcol<>boundcol) and (Currcol<>fillcol) then
Begin
Putpixel (x,y,fillcol);
Bfill(x+1,y,fillcol,boundcol);
Bfill(x-1,y,fillcol,boundcol);
Bfill(x,y+1,fillcol,boundcol);
Bfill(x,y-1,fillcol,boundcol);
End;
End;

9
Algoritma 8-Connected
Procedure BFill (x,y,fillcol,boundcol);
Var
Currcol : integer;
Begin
Currcol  getpixel(x,y);
If (Currcol<>boundcol) and (Currcol<>fillcol) then
Begin
Putpixel (x,y,fillcol);
Bfill(x-1,y-1,fillcol,boundcol);
Bfill(x,y-1,fillcol,boundcol);
Bfill(x+1,y-1,fillcol,boundcol);
Bfill(x-1,y-1,fillcol,boundcol);
Bfill(x+1,y-1,fillcol,boundcol);
Bfill(x-1,y+1,fillcol,boundcol);
Bfill(x,y+1,fillcol,boundcol);
Bfill(x+1,y+1,fillcol,boundcol);
End;
End;

10
Boundary Fill
1
7 8 9 . . . .
4 X 2
6

5
3
4

2
BFill (x,y,Red,Black);
1

Seed position (x,y)

11
Boundary Fill

Bila Area Fill menjadi atribut dari
objek maka warna batas dari proses
ini akan sama dengan warna batas
objek.

Ingat bahwa boundry objek tidak
boleh ada lubang

12
Flood Fill Algorithm

Proses flood fill mirip dengan
boundary fill, dimana inti dari proses
ini adalah mengubah suatu warna
menjadi warna yang lain

13
Flood Fill Algorithm
Procedure floodFill (x,y,fillColor,oldColor);
Begin
If getpixel(x,y)= oldColor then
Begin
Putpixel (x,y,fillColor);
floodFill (x+1,y,fillColor,oldColor);
floodFill (x-1,y,fillColor,oldColor);
floodFill (x,y+1,fillColor,oldColor);
floodFill (x,y-1,fillColor,oldColor);
End;
End;

14

Apa perbedaan dari Boundary Fill dan Flood
fill, kapan kita memakai Flood fill dan
kapan kita memakai Boundary Fill

Untuk menjamin keamanan dari algoritma
fill yang digunakan maka sebainya
ditambahkan sebuah parameter
penghentian yang lain, yaitu posisi dari
pixel yang diproses apakah masih didalam
objek atau sudah diluar

Ingat bahwa area fill dan garis batas
merupakan 2 buah atribut yang berbeda
15
16
Pengertian

‘Transformasi’  geometric
transformation

Transformasi = mengubah deskripsi
koordinat dari objek
Transformasi dasar:
 Translasi
 Rotasi
 Penskalaan
Translasi

Mengubah posisi objek: perpindahan lurus

Menambahkan translation distance tx & ty
ke tiap titik dari objek

(x,y) ––translasi (x’,y’)
 x’=x+tx
 y’=y+ty

Pasangan (tx,ty) disebut
dengan translation vector
Contoh translasi
Rotasi

Mengubah posisi objek: perpindahan

sesuai jalur sirkular

Perlu dispesifikasikan:
 Sudut rotasi θ (rotation angle)
 Titik tumpu rotasi (xr,yr) (pivot point)

Konsensus ttg θ:
 Positif: putaran berlawanan arah jarum
jam
 Negatif: putaran searah jarum jam
Rotasi terhadap titik (0,0)
x = r cos φ
y = r sin φ

x’ = r cos (φ+θ)
= r cos φ cos θ - r sin φ
sin θ
r

= x cos θ - y sin θ
y’ = r sin (φ+θ)
= r cos φ sin θ + r sin φ
cos θ
= x sin θ + y cos θ
Rotasi terhadap titik (xr,yr)

x’ = xr + (x-xr) cos θ - (y-yr)

sin θ
y’ = yr + (x-xr) sin θ + (y-yr)
cos θ

1. Translasi tx= -xr & ty= -

r

yr
2. Rotasi sebesar θ
3. Translasi tx= xr & ty= yr
Rigid-body transformation

Transformasi yang hanya mengubah
posisi objek, tanpa mengubah
bentuknya

Setiap titik pada objek mendapat
perlakuan yang sama

Transformasi dasar:
 Translasi
 Rotasi
Rigid-body transformation: teknik

Transformasikan hanya titik-titik yang
terlibat dalam deskripsi objek

Titik-titik lain digambar ulang dgn
algoritma pembangkit primitif grafika
Rigid-body transformation:
translasi
Rigid-body transformation: rotasi
Penskalaan

Mengubah ukuran objek

(memperbesar / memperkecil)
 Mengubah jarak setiap titik pada objek
terhadap titik acuan

Perlu dispesifikasikan:
 Faktor penskalaan: sx & sy  real: (0..N]
 Titik acuan (xf,yf)

Jenis penskalaan: y y

 Uniform: sx = sy
 Differential: sx ≠ sy

x x
 Penskalaan terhadap titik (0,0)
x’=x.sx
y’=y.sy
y

Bentuk objek berubah

Posisi objek berubah

0<S<1: lebih dekat ke (0,0)

S=1: ukuran tetap

S>1: lebih jauh dari (0,0)

x
Penskalaan terhadap titik (xf,yf)
x’= xf + (x-xf).sx
y’= yf + (y-yf).sy
y

1. Translasi tx= -xf & ty= -yf

2. Penskalaan dgn Sx & Sy
3. Translasi tx= xf & ty= yf

x’= x. sx + xf(1-sx)
(xf,yf)
y’= y. sy + yf(1-sy)
xf(1-sx) & yf(1-sy) x
 konstan untuk semua (x,y)
Penskalaan uniform untuk poligon,
lingkaran dan elips

Poligon:
 Transformasikan titik-titik sudut
 Gambar ulang tiap garis

Lingkaran:
 Transformasikan titik pusat
 Sesuaikan ukuran jari-jari
 Gambar ulang tiap titik

Elips:
 Transformasikan sumbu mayor dan minor
 Gambar ulang tiap titik
Representasi dalam matriks

Memudahkan perhitungan transformasi

Setiap titik direpresentasikan sebagai
vektor kolom
P=(x,y)  P=  x
 y
 

Koefisien transformasi direpresentasikan
sebagai vektor atau matriks
Persamaan matriks translasi

Translation distance tx & ty  T= t x 
 

P’ = P + T t y 

 xx''  x tx 
 y' =  y + t  (-4,4)

     y
3

 − 4   2   − 5 -6
 4  = 1  +  3 
(2,1)

     
Persamaan matriks rotasi:
pivot = (0,0)

x’ = x cos θ - y sin θ y
y’ = x sin θ + y cos θ (2,7)

 x' cosθ − sinθ   x

 y' = sinθ cosθ  •  y
     

 7  cos(−900 ) − sin(−900 ) 2

− 2 =  •
0    x
  sin(−90 ) cos(−90 )  7
0

(7,-2)
 Persamaan matriks rotasi:
pivot = (xr,yr)

x’ = xr + (x-xr) cos θ - (y-yr)

sin θ
y’ = yr + (x-xr) sin θ + (y-yr)
cos θ
 x'  xr   cos θ − sin θ    x   xr   
 y ' =  y  +   sin θ  •    −    
   r  cos θ    y   yr   

0 1   cos 900 − sin 900   7  1  

8 = 2 +   •
0   
−   
     sin 90 0
cos 90   3 2  
Persamaan matriks penskalaan
x’=x.sx  x' Sx 0   x
y’=y.sy  y' =  0 S  •  y
   y  

x’= xf + (x-xf).sx
y’= yf + (y-yf).sy

 x'  x f    S x 0    x  x f  
  
 y ' =  y  +   0 • −
S y    y   y f   
   f   
Transformasi Komposit

Dari beberapa penjelasan sebelumnya
dinyatakan bahwa suatu transformasi dapat
disusun menjadi urutan dari beberapa
transformasi

Contoh: Rotasi dengan sumbu rotasi (xc,yc)

Bila kita melakukan representasi
transformasi sebagai sebuah matrik, maka
kita perlu menghasilkan matrik homogen
=> sehingga proses transformasi dapat
dihitung sebagai proses perkalian matrik
Matrik Homogen 2D

Dinyatakan bahwa proses
transformasi adalah perkalian matrik
sehingga untuk operasi translasi bila
dinyatakan dalam matrik homogen
menjadi:
X’ 1 0 tx X
Y’ = 0 1 ty Y
1 0 0 1 1
Matrik Homogen 2D

Sedangkan untuk penskalaan dengan
titik acuan (0,0)

X’ Sx 0 0 X
Y’ = 0 Sy 0 Y
1 0 0 1 1

Dengan mekanisme matrik homogen

maka kita dapat menentukan hasil
dari penskalaan dengan titik acuan
(xf,yf) dengan perkalian matrik
Matrik Homogen 2D

Penskalaan dengan titik acuan (xf,,yf)
dapat dinyatakan sebagai:
1. Translasi tx= -xf & ty= -yf =A
2. Penskalaan dgn Sx & Sy =B
3. Translasi tx= xf & ty= yf =C

Matrik Homogen : C.B.A

Proses yang sama dapat dilakukan untuk

menyelesaikan transformasi yang lainnya
Clipping

Istilah Kliping (Clipping) = kumpulan guntingan
koran

Clipping = memotong objek dengan bentuk
tertentu.

Sarana pemotong objek  clipping window

Dalam konteks grafika komputer, untuk
melakukan clipping, kita lebih dulu harus
menentukan bentuk window dan baru kemudian
menentukan hanya objek yang terdapat di
dalam window tersebut yang akan ditampilkan.
Contoh Teknik Clipping
Interior Clipping

Exterior Clipping
Clipping Window / Viewport

Fungsi clipping window :
 Mengidentifikasi obyek yang akan di clip
dan memastikan bahwa data yang di
ambil hanya yang terletak di dalam
clipping window.

Bentuk Clipping Window :
 Segi empat, segi tiga
 Lingkaran atau elips
 Poligon dan lain-lain.
Digital Differential Analyzer (DDA)
ClippingTitik

Untuk menentukan letak suatu titik di

dalam clipping window dapat kita
gunakan rumus sbb :
 Xmin ≤ x ≤ Xmax
 Ymin ≤ y ≤ Ymax Ymax

P1
Y1

Terdapat 2 buah titik P1(x1,y1) dan P2
(x2,y2), dengan : P2
Y2
 P1 terletak di dalam clipping window,
karena :
Xmin ≤ X1 ≤ Xmax Ymin

Ymin ≤ Y1 ≤ Ymax
Xmin X1 Xmax X2
 P2 terletak di luar clipping window,
karena :
X2 ≥ Xmax
walaupun
Ymin ≤ Y2≤ Ymax ,,dan
X2 ≥ Xmin
 Clipping Garis

Clipping sebuah garis P1-P2 dengan
window L,R,T,B akan berhubungan
dg.garis yang terletak di dalam
window dan garis di luar window.

Dalam hal ini garis yang ingin kita
tampilkan hanya garis yang terdapat
di dalam window (visible)

Sedangkan garis di luar window
akan di buat tidak tampak (invisible)

Setelah garis di clipping, data garis
P1 dan P2 tidak boleh hilang. Dalam
hal ini harus dibuatkan satu copy
garis P1’ dan P2’ yang terletak di
dalam jendela. Copy garis inilah
yang ditampilkan pada layar
Algoritma Clipping Garis
1.Baca data garis
2.Baca data clipping window
3.Cek kondisi garis terhadap clipping
window
4.Proses Clipping
Clipping Garis

Kondisi garis terhadap clipping
window dapat :
 Invisible (1)
Tidak kelihatan, terletak di luar
clipping window

 Visible (2)
Terletak di dalam clipping window

 Halfpartial (3)
Terpotong sebagian oleh clipping
window

 Vollpartial (4)
Terpotong penuh oleh clipping
window, garis melintasi clipping
window
Clipping Garis

Untuk kondisi garis yang invisible dan
visible tidak perlu dilakukan aksi
clipping,dimana untuk :
 Invisible, tidak perlu ditampilkan
 Visible, langsung di tampilkan
Struktur data clipping window
struct point {
double x;
double y;
}

struct line {
struct point p1;
struct point p2;
}

struct clipwindow {
double l; //batas kiri window, sumbu x
double r; //batas kanan window, sumbu x
double t; //batas atas window, sumbu y
double b; //batas bawah window, sumbu y
}
Pointcode

Hubungan antara sebuah garis dengan clipping window
dapat di tulis seperti hubungan antara titik awal dan titik
akhir sebuah garis dengan clipping window

Untuk menentukan relasi tersebut diperlukan suatu struktur
data pembantu yang disebut POINTCODE.

struct pointcode{
int l;
int r;
int t;
int b
}

Nilai pointcode l,r,b,t adalah 1 dan 0, dimana dengan nilai

ini kita lebih mudah menentukan posisi suatu garus
terhadap clipping window, apakah garisnya di dalam, di
luar, dipotong clipping window
Visibilitas suatu titik

Titik yang visible  titik terletak di dalam window

Titik yang invisible  titik terletak di luar window

Titik yang visible  jika nilai pointcode l,r,t,b = 0

Jika salah satu dari nilai pointcode l,r,t,b ≠ 0, maka titik
tersebut di luar window.
Pointcode Arti Kode
0000 Terletak di dalam window
0001 Terletak di sebelah kiri window
0010 Terletak di sebelah kanan window
0100 Terletak di sebelah bawah window
1000 Terletak di sebelah atas window
1001 Terletak di sebelah kiri atas window
1010 Terletak di sebelah kanan atas window
0101 Terletak di sebelah kiri bawah window
0110 Terletak di sebelah kanan bawah window
Visibilitas suatu titik
Pengecekan titik terhadap clipping window dilakukan :

Sumbu x di cek dengan L dan R

Sumbu y di cek dengan T dan B

void setpointcode (struct point p;struct clipwindow cw;struct

pointcode pc;) {
if (p.x > cw.l) pc.l = 0; else pc.l = 1;
if (p.x < cw.r) pc.r = 0; else pc.r = 1;
if (p.y < cw.b) pc.b = 0; else pc.b = 1;
if (p.y > cw.t) pc.t = 0; else pc.t = 1;
}

Asumsi : Koordinat yang digunakan :

(0,0) X

Y
Visibilitas suatu Garis

Visibilitas suatu garis tergantung dari pointcode pada kedua titik yang
membentuk garis tersebut, yaitu P1 dan P2

Jika P1 dan P2 di dalam window  garis Visible

Jika salah satu dari P1 atau P2 di luar window  garis halfpartial

Jika P1 dan P2 di luar window  garis invisible atau vollpartial

void logicline (struct pointcode pc1;struct pointcode pc2;

int linelogic) {
int logicbit[4];
logicbit[0] = pc1.l && pc2.l;
logicbit[1] = pc1.r && pc2.r;
logicbit[2] = pc1.b && pc2.b;
logicbit[3] = pc1.t && pc2.t;
linelogic = logicbit[0] || logicbit[1] || logicbit[2]
logicbit[3];
}

Jika linelogic = 0  garis visible ???

Jika linelogic ≠ 0  garis invisible ???
Midpoint Subdivision

Midpoint subdivision melakukan clipping dengan cara
: suatu garis L yang mempunyai titik P1 dan P2 terus
dibagi 2 dan didapatkan titik tengah M (midpoint)
sampai ketemu dengan titik singgung pada clipping
window.

Titik singgung tercapai jika salah satu nilai titik P1.x,
P1.y, P2.x atau P2.y sama dengan L,R,B, atau T.
Midpoint Subdivision

Contoh :
 Asumsi : Sumbu koordinat kartesian
 Clipwindow (-100,100,100,-100)
 P1(-140,90), P2(160,40)
Midpoint Subdivision

P1
90

P2
40

-140 -100 (0,0) 100 160

-100
Midpoint Subdivision
Midpoint Subdivision
Midpoint Subdivision
Midpoint Subdivision
Midpoint Subdivision
Midpoint Subdivision
Midpoint Subdivision
Midpoint Subdivision
 Midpoint Subdivision
Garis dibagi 2 :
X1 Y1 X2 Y2 xM yM Garis Midpoint
-140 90 160 40 10 65 P1-P2 M
Setengah Garis Pertama
X1 Y1 X2 Y2 xM yM Garis Midpoint
-140 90 10 65 -65 78 P1-M M11
-140 90 -65 78 -103 84 P1-M11 M12
-103 84 -65 78 -84 81 M12-M11 M13
-103 84 -84 81 -94 83 M12-M13 M14
-103 84 -94 83 -99 84 M12-M14 M15
-103 84 -99 84 -101 84 M12-M15 M16
-101 84 -99 84 -100 84 M16-M15 D1
Titik Singgung pertama ditemukan pada titik D1 (-100,84)

Setengah Garis Kedua

X1 Y1 X2 Y2 xM yM Garis Midpoint
10 65 160 40 85 53 M-P2 M21
85 53 160 40 123 47 M21-P2 M22
85 53 123 47 104 50 M21-M22 M23
85 53 104 50 95 52 M21-M23 M24
95 52 104 50 100 51 M24-M23 D2
Titik Singgung kedua ditemukan pada titik D2 (100,51)
 P2

P2
M P2

P1 P2
M
M
P1
P1
M

P1
Ilustrasi Pembuatan Kurva Bezier

en.wikipedia.org/wiki/Bézier_curve
 Linear Bézier curves
• Given points P0 and P1, a linear Bézier curve is 
simply a straight line between those two 
points. The curve is given by

• and is equivalent to linear interpolation.
Ilustrasi: kurva linier
• The t in the function for 
a linear Bézier curve can 
be thought of as 
describing how far B(t) is 
from P0 to P1. 
• For example 
when t=0.25, B(t) is one 
quarter of the way from 
point P0 to P1. 
• As t varies from 0 to 
1, B(t) describes a curved 
line from P0 to P1.
 Quadratic Bézier curves
• A quadratic Bézier curve is the path traced by 
the function B(t), given points P0, P1, and P2,

• A quadratic Bézier curve is also a parabolic 
segment.
Ilustrasi: kurva kuadratik
• For quadratic Bézier curves 
one can construct 
intermediate 
points Q0 and Q1 such that 
as t varies from 0 to 1:
• Point Q0 varies 
from P0 to P1 and describes a 
linear Bézier curve.
• Point Q1 varies 
from P1 to P2 and describes a 
linear Bézier curve.
• Point B(t) varies 
from Q0 to Q1 and describes 
a quadratic Bézier curve.
 Cubic Bézier curves
• Four points P0, P1, P2 and P3 in the plane or in 
three‐dimensional space define a cubic Bézier 
curve. 
• The curve starts at P0 going toward P1 and arrives 
at P3 coming from the direction of P2. Usually, it 
will not pass through P1 or P2; these points are 
only there to provide directional information. The 
distance between P0 and P1 determines "how 
long" the curve moves into direction P2 before 
turning towards P3.
• The parametric form of the curve is:
Ilustrasi : Kurva Cubic
• For higher‐order 
curves one needs 
correspondingly more 
intermediate points. 
For cubic curves one 
can construct 
intermediate 
points Q0,Q1 & Q2 that 
describe linear Bézier 
curves, and 
points R0 & R1 that 
describe quadratic 
Bézier curves
Ilustrasi: Fourth‐order curve
• For fourth‐order curves 
one can construct 
intermediate 
points Q0, Q1, Q2 & Q3 th
at describe linear Bézier 
curves, 
points R0, R1 & R2that 
describe quadratic 
Bézier curves, and 
points S0 & S1 that 
describe cubic Bézier 
curves
The Math Behind the Bezier 
Curve
www.moshplant.com/direct‐or/bezier/math.html
• A cubic Bezier curve is defined by four points. 
• Two are endpoints. 
– (x0,y0) is the origin endpoint. 
– (x3,y3) is the destination endpoint. 
• The points (x1,y1) and (x2,y2) are control points.
• Two equations define the points on the curve. 
Both are evaluated for an arbitrary number of 
values of t between 0 and 1.
• As increasing values for t are supplied to the 
equations, the point defined by x(t),y(t) moves 
from the origin to the destination. 
• This is how the equations are defined in 
Adobe's PostScript references.

x(t) = axt3 + bxt2 + cxt + x0

x1 = x0 + cx / 3
x2 = x1 + (cx + bx) / 3
x3 = x0 + cx + bx + ax

y(t) = ayt3 + byt2 + cyt + y0

y1 = y0 + cy / 3
y2 = y1 + (cy + by) / 3
y3 = y0 + cy + by + ay
• This method of definition can be reverse‐
engineered, so:

cx = 3 (x1 ‐ x0)
bx = 3 (x2 ‐ x1) ‐ cx
ax = x3 ‐ x0 ‐ cx ‐ bx

cy = 3 (y1 ‐ y0)
by = 3 (y2 ‐ y1) ‐ cy
ay = y3 ‐ y0 ‐ cy ‐ by
Pendahuluan

Grafika Komputer dalam aplikasinya terbagi menjadi 2 :
 Grafika 2D
 Grafika 3D

Aplikasi 2D banyak dipakai dalam pembuatan grafik, peta,
kreasi 2D yang banyak membantu pemakai dalam membuat
visualisasi.

Grafika 2D memiliki kekurangan, yaitu : ketidakmampuannya
untuk merepresentasikan objek 3D. Kekurangan ini sangat
dirasakan terutama dalam bidang desain, dimana
kebanyakan desainer membuat barang yang ada dalam dunia
nyata yang berdimensi 3.

Grafika 3D memiliki kemampuan untuk membuat visualisasi
dari sebuah benda yang nyata yang dapat dilihat dari
berbagai sudut pandang. Hal inilah yang membuat grafika 3D
banyak dipakai terutama dalam bidang desain dari sebuah
produk.
Sistem Koordinat 3D

+y +y

+z

+x +x

+z
Right-handed Left-handed
Primitif 3D

Dalam dunia 3D terdapat beberapa primitif seperti :
 Titik (point)
 Garis (line)
 Bidang/Permukaan (plane/surface)
 Bola (sphere)
 Kubus(cube)
 Silinder (cylinder)
 Kerucut (cone)
 Cincin (torus)
 dll
Primitif 3D

Titik
 Posisi sebuah titik dalam grafika 3D diekspresikan dengan
(x,y,z)

Garis
 Sebuah garis dibentuk dengan mendeskripsikan dua buah titik,
yaitu (x1,y1,z1) dan (x2,y2,z2) yang sebagai ujung dari
sebuah garis.
 Sebuah garis dalam grafika 3D dapat diekspresikan dengan
sepasang persamaan, yaitu :
y − y1 y 2 − y1
=
x − x1 x 2 − x1
z − z1 z 2 − z1
=
x − x1 x 2 − x1
Primitif 3D

Bidang
 Pada grafika 3D, terdapat sebuah
geometri yang sangat penting, yaitu
bidang datar (plane). Sebuah bidang
datar pada grafika 3D dispesifikasikan
dengan sebuah persamaan, yaitu :
Ax + By + Cz + D = 0
Representasi Object 3D

Untuk merepresentasikan object 3D :
 Persamaan Geometri
 Constructive Solid Geometry (CSG)
 Kurva & Permukaan Bezier
 Lathe Object
 Fractal
Representasi Object 3D

Dengan Persamaan Geometri
 Suatu object 3D dapat direpresentasikan
langsung dengan menggunakan persamaan
geometri dari object tersebut.
 Misalkan : untuk membangun sebuah bola,
maka bisa dengan menggunakan rumus :

X 2 + Y 2 + Z 2 = R2
atau dengan rumus :
Representasi Object 3D
z

θ y

x = r.sinΦ.sinθ ;0 ≤ Φ ≤ 2π

y = r.sinΦ.cosθ ;- π ≤ θ ≤ π

z = r.cosΦ
Representasi Object 3D

Dengan Constructive Solid Geometry (CSG)
 CSG adalah suatu cara membentuk object
dengan jalan menggabungkan atau
memotong(mengurangi) dari beberapa object
primitif 3D.
 CSG dalam POV-Ray melibatkan :

difference

union

intersect
Representasi Object 3D

Dengan CSG – cont.

 Contoh 1:
Object 1 Object 2
Representasi Object 3D

Dengan CSG – cont.

 Contoh
Object 1 2: Object 2 Object 3

Object 5 = Object 1 – Object 2 Object 6 = Object 5 + Object 3

Representasi Object 3D

Kurva & Permukaan Bezier
Representasi Object 3D

Lathe Object

Linear Spline Quadratic Spline Cubic Spline

Representasi Object 3D

Lathe Object - cont

Bezier Spline
Representasi Object 3D

Dengan Fractal
Rendering

Rendering  Proses untuk menghasilkan sebuah citra

2D dari data 3D.

Prose ini bertujuan untuk untuk memberikan
visualisasi pada user mengenai data 3D tersebut
melalui monitor atau pencetak yang hanya dapat
menampilkan data 2D

Metode rendering yang paling sederhana dalam grafika

3D :
 Wireframe rendering
 Hidden Line Rendering
 Shaded Rendering
Rendering

Wireframe rendering
 Yaitu Objek 3D dideskripsikan sebagai objek
tanpa permukaan.
 Pada wireframe rendering, sebuah objek dibentuk
hanya terlihat garis-garis yang menggambarkan
sisi-sisi edges dari sebuah objek.
 Metode ini dapat dilakukan oleh sebuah komputer
dengan sangat cepat, hanya kelemahannya
adalah tidak adanya permukaan, sehingga
sebuah objek terlihat tranparent. Sehingga sering
terjadi kesalahpahaman antara siss depan dan
sisi belakang dari sebuah objek.
Rendering

Hidden Line Rendering

 Metode ini menggunakan fakta bahwa dalam sebuah
objek, terdapat permukaan yang tidak terlihat atau
permukaan yang tertutup oleh permukaan lainnya.

 Dengan metode ini, sebuah objek masih

direpresentasikan dengan garis-garis yang mewakili
sisi dari objek, tapi beberapa garis tidak terlihat
karena adanya permukaan yang menghalanginya.
Metode ini lebih lambat dari dari wireframe rendering,
tapi masih dikatakan relatif cepat. Kelemahan metode
ini adalah tidak terlihatnya karakteristik permukaan
dari objek tersebut, seperti warna, kilauan (shininess),
tekstur, pencahayaan, dll.
Rendering

Shaded Rendering

Pada metode ini, komputer diharuskan
untuk melakukan berbagai perhitungan baik
pencahayaan, karakteristik permukaan,
shadow casting, dll.

Metode ini menghasilkan citra yang sangat

realistik, tetapi kelemahannya adalah lama
waktu rendering yang dibutuhkan.
Rendering

+ + Karakteristik Algoritma
Geometri Kamera Cahaya + + Rendering
Permukaan

Citra Rendering

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

Dalam grafika 3D, sudut pandang (point of view) adlah
bagian dari kamera. Kamera dalam grafika 3D biasanya tidak
didefinisikan secara fisik, namun hanya untuk menentukan
sudut pandang kita pada sebuah world, sehingga sering
disebut virtual camera.

Sebuah kamera dipengaruhi oleh dua buah faktor penting.

 Faktor pertama adalah lokasi (camera location). Lokasi sebuah
kamera ditentukan dengan sebuah titik (x,y,z).
 Faktor kedua adalah arah pandang kamera. Arah pandang
kamera ditunjukkan dengan sebuah sistem yang disebut sistem
koordinat acuan pandang atau sistem (U,N,V). Arah pandang
kamera sangat penting dalam membuat sebuah citra, karena
letak dan arah pandang kamera menentukan apa yang terlihat
oleh sebuah kamera. Penentuan apa yang dilihat oleh kamera
biasanya ditentukan dengan sebuah titik (x,y,z) yang disebut
camera interest.
Kamera

Pada kamera, dikenal field of view yaitu daerah yang terlihat oleh
sebuah kamera.Field of view pada grafika 3D berbentuk piramid,
karena layar monitor sebuah komputer berbentuk segiempat. Objek-
objek yang berada dalam field of view ini akan terlihat dari layar
monitor, sedang objek-objek yang berada di luar field of view ini
tidak terlihat pada layar monitor. Field of view ini sangat penting
dalam pemilihan objek yang akan diproses dalam rendering. Objek-
objek diluar field of view biasanya tidak akan diperhitungkan,
sehingga perhitungan dalam proses rendering, tidak perlu dilakukan
pada seluruh objek.
Cahaya

Sumber cahaya pada grafika 3D merupakan sebuah objek
yang penting, karena dengan cahaya ini sebuah world
dapat terlihat dan dapat dilakukan proses rendering.
Sumber cahaya ini juga membuat sebuah world menjadi
lebih realistis dengan adanya bayangan dari objek-objek 3D
yang ada.

Sebuah sumber cahaya memiliki jenis. Pada grafika 3D

dikenal beberapa macam sumber cahaya, yaitu :
 Point light
 Spotlight
 Ambient light
 Area light
 Directional light
 Parallel point
Cahaya

point light
 memancar ke segala arah, namun intensitas cahaya yang diterima objek
bergantung dari posisi sumber cahaya. Tipe ini mirip seperti lampu pijar
dalam dunia nyata.

spotlight
 memancarkan cahaya ke daerah tertentu dalam bentuk kerucut. Sumber
cahaya terletak pada puncak kerucut. Hanya objek-objek yang terletak
pada daerah kerucut tersebut yang akan nampak.

ambient light
 cahaya latar/alam. Cahaya ini diterima dengan intensitas yang sama oleh
setiap permukaan pada benda. Cahaya latar tersebut dimodelkan
mengikuti apa yang terjadi di alam, diaman dalam keadaan tanpa sumber
cahaya sekalipun, benda masih dapat dilihat.

area light

directional light
 memancarkan cahaya dengan intensitas sama ke suatu arah tertentu.
Letak tidak mempengaruhi intensitas cahayanya. Tipe ini dapat
menimbulkan efek seolah-olah sumber cahaya berada sangat jauh dari
objek

parallel point
 sama dengan directional, hanya pencahayaan ini memiliki arah dan posisi.
Cahaya

Model dari pencahayaan, dipakai untuk menghitung
intensitas dari cahaya yang terlihat dari setiap posisi pada
setiap permukaan benda yang terlihat oleh kamera. Ketika
melihat sebuah benda, terlihat cahaya yang dipantulkan
dari permukaan benda, dimana cahaya ini merupakan
intregrasi dari sumber-sumber cahaya serta cahaya yang
berasal dari pantulan cahaya permukaan-permukaan yang
lain. Karena itu benda-benda yang tidak langsung
menerima cahaya dari sumber cahaya, masih mungkin
terlihat bila menerima cahaya pantulan yang cukup dari
benda didekatnya.

Model sederhana dari sumber cahaya adalah sebuah titik

sumber, dimana dari titik ini cahaya dipancarkan.
Perhitungan pencahayaan bergantung pada sifat dari
permukaan yang terkena cahaya, kondisi dari cahaya latar
serta spesifikasi sumber cahaya.
Cahaya

Semua sumber cahaya dimodelkan sebagai sumber titik
yang dispesifikasikan dengan :
 Lokasi  Lokasi (x,y,z) dari sebuah sumber cahaya
akan menentukan pengaruhnya terhadap sebuah
objek.
 Intensitas  Intensitas cahaya menyatakan kekuatan
cahaya yang dipancarkan oleh sebuah sumber cahaya.
Parameter ini merupakan angka, yang biasanya makin
besar nilainya, makin terang sumber cahaya tersebut.
 Warna  Warna cahaya dari sumber ini akan
mempengaruhi warna dari sebuah objek, jadi selain
warna objek tersebut warna cahaya yang jatuh pada
objek tersebut akan mempengaruhi warna pada
rendering. Warna cahaya ini biasanya terdiri dari 3
warna dasar grafika komputer, yaitu: merah, hijau,
biru atau lebih dikenal dengan RGB.
Karakteristik Permukaan

Karakteristik permukaan dari sebuah objek adalah sifat dari
permukaan sebuah objek.

Karakteristik permukaan ini meliputi
 Warna
 Tekstur
 Sifat permukaan, seperti kekasaran (roughness), refleksifitas,
diffuseness (jumlah cahaya yang dipantulkan oleh objek), transparansi,
dan lain-lain.

Parameter Warna dalam karakteristik permukaan

direpresentasikan dengan tiga warna dasar, yaitu RGB. Saat
rendering, warna pada sebuah objek tergantung dari warna dalam
karakteristik permukaan dan warna cahaya yang mengenainya.
Jadi citra hasil rendering mungkin akan memiliki warna yang
sedikit berbeda dengan warna objek tersebut.
Karakteristik Permukaan

Parameter tekstur direpresentasikan dengan sebuah
nama file. File ini akan menjadi tekstur pada
permukaan objek tersebut. Selain itu juga ada
beberapa parameter dalam tekstur yang berguna
untuk menentukan letak tekstur pada sebuah objek,
sifat tekstur, perulangan tekstur, dan lain-lain.

Sifat Permukaan, seperti diffuseness, refleksisifitas,

dan lain-lain direpresentasikan dengan sebuah nilai.
Nilai ini menentukan sifat dari parameter-parameter
tersebut. Misalnya pada roughness, makin besar nilai
parameternya, makin kasar objek tersebut.
Algoritma Rendering

Algoritma Rendering adalah prosedur yang digunakan
oleh suatu program untuk mengerjakan perhitungan
untuk menghasilkan citra 2D dari data 3D.

Kebanyakan algoritma rendering yang ada saat ini

menggunakan pendekatan yang disebut scan-line
rendering  berarti program melihat dari setiap pixel,
satu per satu, secara horizontal dan menghitung warna
di pixel tersebut.

Saat ini dikenal 3 algoritma :

 Ray-Casting
 Ray-Tracing
 Radiosity
 Algoritma Rendering
Ray-Casting
• Menembakkan sinar untuk
mengetahui warna dari cell
Ray-Tracing Radiosity
• Menelusuri sinar secara • Membagi bidang menjadi
terbalik untuk mengetahui bidang yang lebih kecil
warna dari sebuah pixel untuk menentukan warna

• Menggunakan metode • Tidak menggunakan • Tidak menggunakan

sampling untuk sampling sampling
menampilkan hasil
• Biasanya dimodifikasi sesuai • Tidak dapat dimodifikasi • Tidak dapat dimodifikasi
kebutuhan

• Memiliki konstrain geometrik • Tidak Memiliki konstrain • Tidak Memiliki konstrain

tertentu geometrik tertentu geometrik tertentu

• Waktu rendering cepat • Waktu rendering lambat • Waktu rendering sangat

lambat
• Digunakan untuk visuali-sasi • Digunakan untuk visualiasi • Digunakan untuk visualiasi
secara cepat hasil akhir hasil akhir

• Dapat digunakan untuk out- • Dapat digunakan untuk out- • Biasanya digunakan untuk
door dan in-door scene door dan in-door scene in-door scene

• Hasil rendering kadang • Hasil rendering sangat • Hasil rendering sangat

terlihat kotak-kotak realistik realistik
Dari 2D ke 3D

Pemodelan objek maupun metode

transformasi pada 3D merupakan
perluasan dari hal serupa pada 2D

Koordinat 2D: (x,y) – koordinat 3D:
(x,y,z)

Representasi transformasi pada 3D
juga dalam bentuk matrik

Transformasi berurut juga dapat dicari
matrik transformasi kompositnya
Translasi

P’ = T . P

(tx, ty, tz) = transformation distance

Koordinat ‘tangan kanan’
Translasi: operasi matriks pada
koordinat homogen

x’ = x + tx; y’ = y + ty; z’ = z + tz

 x' 1 0 0 t x   x
 y' 0  
1 0 t y   y
 = •
 z' 0 0 1 tz   z 
     
 1  0 0 0 1  1
Penskalaan

P’ = S . P

(sx, sy, sz) = scaling factor

Mengubah lokasi dan ukuran objek
Penskalaan: operasi matriks pada
koordinat homogen

x’ = x . sx; y’ = y . sy; z’ = z . Sz

Relatif terhadap pusat koordinat (0,0,0)

 x' sx 0 0 0  x
 y'  0 s 0  
0  y
 = y
•
 z'  0 0 sz 0  z 
     
1  0 0 0 1 1
Penskalaan: titik acuan sembarang
(xf,yf,zf)

Translasi hingga (xf,yf,zf) berhimpit dengan (0,0,0)

Penskalaan objek relatif terhadap (0,0,0)

Translasi balik hingga (xf,yf,zf) kembali ke posisi
semula T ( x , y , z ) • S ( s , s , s ) • T ( − x ,− y ,− z )
f f f x y z f f f

sx 0 0 (1 − s x ) x f 
0 sy 0 (1 − s y ) y f 
=
0 0 sz (1 − s z ) z f 
 
0 0 0 1 
Rotasi

Perlu dispesifikasikan:
 Besar sudut rotasi (θ)
 Sumbu rotasi

2D: titik (xr,yr)  analog dgn 3D:
selalu terhadap garis sejajar sumbu
z

3D: garis (yang manapun dalam
ruang 3D)
 Rotasi yang paling mudah  sumbu
rotasi berhimpit dgn salah satu sumbu
koordinat
Konvensi tentang θ

(+)  berlawanan arah jarum jam; (-)
 searah jarum jam

Dilihat dari ujung positif sumbu rotasi ke
(0,0,0)
 Rotasi dgn sumbu rotasi = sumbu
koordinat

Rotasi terhadap sumbu z:
 x’ = x cos θ - y sin θ
 y’ = x sin θ + y cos θ
 z’ = z
 x' cosθ − sinθ 0 0  x
 y' sinθ cosθ 0 0  y  P’=Rz(θ).P
 = •
 z'  0 0 1 0  z 
     
1  0 0 0 1 1

Rotasi terhadap sumbu x dan y mudah

didapat dengan mengganti secara siklik: x
yzx
Rotasi terhadap garis yg sejajar
dgn sumbu koordinat

Urutan transformasi:
 Translasi, sampai garis sumbu rotasi
berhimpit dengan salah satu sumbu
koordinat
 Rotasi terhadap sumbu koordinat
tersebut
 Translasi balik, hingga sumbu rotasi
kembali ke posisi semula

P’ = T-1 . Rx(θ) . T . P
Rotasi terhadap garis sembarang

Urutan transformasi:
 Translasi, sampai sumbu rotasi memotong
salah satu sumbu koordinat
 Rotasi, sampai sumbu rotasi berhimpit
dengan salah satu sumbu koordinat
 Rotasi terhadap sumbu koordinat tersebut
 Rotasi balik, hingga sumbu rotasi kembali
ke kemiringan semula
 Translasi balik, hingga sumbu rotasi
kembali ke posisi semula
Transformasi komposit

Transformasi komposit pada 3D
analog dengan transformasi komposit
pada 2D

Dilakukan dengan cara mengalikan
sejumlah matriks transformasi [4x4]
sesuai urutan kemunculannya
Refleksi

Terhadap garis sumbu refleksi
 Rotasi 1800 terhadap garis tersebut

Terhadap bidang refleksi
 Bidang koordinat (xy, yz, atau xz) ≈
konversi dari sistem koordinat tangan
kanan ke tangan kiri atau sebaliknya
 Bidang sebarang ≈ rotasi 1800 terhadap
bidang tersebut dalam ruang empat
dimensi
Refleksi terhadap bidang koordinat

1 0 0 0
0 1 0 0
RFz = 
0 0 − 1 0
 
0 0 0 1
Shear

Bisa dilakukan relatif terhadap sumbu x, y

atau z

Contoh shear terhadap sumbu z:
1 0 a 0
0 1 b 0
SH z = 
0 0 1 0
 
0 0 0 1
Transformasi pada POV-Ray
Sistem Koordinat POV-Ray

Sistem koordinat tangan kiri
 Representasi

Titik: vektor baris

Matriks transformasi [4x4]  [4x3] dgn
kolom ke-4 diasumsikan selalu berisi
<0,0,0,1>  xx'' a b c d   x 
 y '  e f g h   y 
 = •
 z '  i j k l  z
     
 1  0 0 0 1  1 
a e i
b f j 
⇒ [x' y ' z '] = [x y z 1]• 
c g k
 
d h l
Demo POV-Ray

Sumbu koordinat

Objek CSG

Transformasi dasar: translasi, rotasi,
penskalaan

Matriks transformasi komposit

Refleksi & shear
3D viewing ≈ memotret

Menentukan posisi kamera

Menentukan arah pandang kamera

Menekan ‘shutter’ kamera  cahaya
masuk

Scene di-crop sesuai dengan ‘window’

Cahaya dari permukaan yang tampak
diproyeksikan ke film
 Viewing pipeline
Modelling Modelling World Viewing Viewing
coordinate transformation coordinate transformation coordinate

Device Workstation Projection Projection

coordinate transformation coordinate transformation

Objek di luar batas viewing yang telah dispesifikasikan akan

mengalami clipping.
Objek di dalam batas viewing mengalami proses identifikasi
permukaan tampak dan prosedur rendering permukaan
untuk mendapatkan display pada viewport
Viewplane

Dalam 3D, objek dapat dilihat dari
segala sudut, dengan jarak
bervariasi, orientasi dan atribut
kamera yang beragam

Viewplane ≈ film pada kamera
 N: Vektor normal dari viewplane

View reference point: titik pandang
kamera
Menggerakkan kamera

Mengubah arah N dengan view
reference point tetap
 Melihat objek dari berbagai sudut pandang
Menggerakkan kamera (cont’d)

Mengubah view reference point
dengan arah N tetap
 Menggeser kamera
Proyeksi

Memetakan objek 3D ke viewplane
(2D)
 Mencari perpotongan antara garis proyeksi
dengan viewplane

Yang paling umum digunakan:
 Paralel: orthografik
 Perspektif

Proyeksi lain:
 Paralel: oblique; Fisheye; Super-fisheye;
Panoramik; Silindrikal dll
Proyeksi Paralel: orthografik

Posisi titik-titik pada objek
diproyeksikan ke viewplane mengikuti
garis paralel
Proyeksi Perspektif

Posisi objek diproyeksikan ke
viewplane mengikuti garis yang
konvergen ke satu titik (projection
reference point)
Kamera perspektif
Proyeksi perspektif dari titik

(xp,yp,zvp)
P=(x,y,z)

zvp zprp zv

viewplane

 z prp − zvp   z prp − zvp 

x p = x ; y p = y 
 z−z   z−z 
 prp   prp 
Proyeksi perspektif: matriks transformasi

 x h  1 0 0 0   x
 y  0 1 0 0   
 h =   •  y
 z h  0 0 zvp / d p − zvp ( z prp / d p )  z 
     
 h  0 0 1/ d p − z prp / d p   1 
z − z prp
d p = z prp − zvp ; h=
dp
x p = xh / h; y p = yh / h
Perspektif vs paralel
(ortografik)
Proyeksi fisheye
3D Clipping

Mengidentifikasi dan
mempertahankan semua segmen
permukaan yang berada di dalam
view volume

Pengembangan dari clipping pada 2D
 Objek di-clip terhadap bidang batas view
volume (pada 2D: clip terhadap garis
batas window)
Teknik 3D Clipping

Langsung menggunakan bidang batas
view volume

Menggunakan view volume yang
dinormalkan

Memanfaatkan koordinat homogen

[mungkin ada lagi teknik lain]
Clipping menggunakan view
volume secara langsung

Uji posisi relatif titik terhadap bidang
batas view volume

Untuk setiap P = (x,y,z):
 Ax + By + Cz + D > 0  P di luar bidang
 Ax + By + Cz + D < 0  P di dalam
bidang
 Ax + By + Cz + D = 0  P pada bidang
 Clipping pada koordinat homogen
 xh   a b c d   x
y   e f g h   y 
y Tampak
 h =  • samping view
 zh   i j k l  z yvmax volume
     
 h  m n o p 1 
yvmin

z
P (xh,yh,zh) di dalam zvmin zvmax

view volume jika :

xh yh zh
xvmin ≤ ≤ xvmax ; yvmin ≤ ≤ yvmax ; zvmin ≤ ≤ zvmax
h h h
 Contoh clipping

object {
sphere {
<0,0,0>, 1
pigment {Brown}
}
clipped_by {
box {
<-0.5,-0.5,-1.5>,
<0.5,0.5,1.5>
}
}
}
3D Photorealism

Ketepatan pemodelan objek

Proyeksi secara perspektif

Efek pencahayaan yang natural kepada
permukaan tampak: pantulan, transparansi,
tekstur, dan bayangan
Illumination model vs
surface rendering

Model pencahayaan: model untuk
menghitung intensitas cahaya pada
satu titik pada suatu permukaan

Rendering permukaan: prosedur yang
menerapkan model pencahayaan
untuk mendapatkan intensitas semua
titik pada seluruh permukaan tampak
Model Pencahayaan

Ada 3 Jenis Warna yang
mempengaruhi pewarnaan dalam
proses rendering :
 Ambient
 Diffuse
 Specular
Model Pencahayaan L = ( Lx Ly Lz )
(X L − X P)
Lx =
N |L|
(Y − Y )
Ly = L P
L |L|
cos φ = N.L (Z − Z P )
Lz = L
|L|
Ф
P
Ia = (Wa + Wd ).Ka
dist. cos φ
Id = Wd .Kd .
dist
dist.(cos φ ) Ks
Is = Ws.
dist
I total = Ia + Id + Is
Teknik Rendering Permukaan

Melakukan perhitungan dengan model

pencahayaan untuk semua titik yg
tampak
 Ray-tracing

Melakukan interpolasi untuk titik-titik
pada permukaan dari sekumpulan
intensitas hasil perhitungan dengan
model pencahayaan
 Scan-line
Scan-line algorithms

Permukaan = poligon

Aplikasi model pencahayaan:
 Perhitungan intensitas tunggal untuk
masing-masing poligon
 Intensitas tiap titik pada poligon didapat
dengan cara interpolasi

Algoritma:
 Flat (constant-intensity) shading
 Gouraud shading
 Phong shading
Flat shading

Intensitas tunggal untuk setiap poligon
 Semua titik dalam poligon ditampilkan dengan
intensitas yang sama

Sering digunakan untuk mendapat tampilan
cepat dari objek

Akurat dengan asumsi:
 Objek = polihedron (bukan aproksimasi kurva)
 Sumber cahaya cukup jauh (N.L konstan)
 Pengamat cukup jauh (V.R konstan)

 Bisa disiasati dengan memperkecil poligon

facet
Flat shading: contoh
Gouraud shading

Rendering poligon dengan interpolasi
linear terhadap nilai-nilai intensitas
vertex (titik sudut poligon)

Nilai intensitas untuk tiap poligon
disesuaikan dengan poligon lain yang
bersebelahan untuk mengurangi
discontinuity (seperti yg terjadi pada
flat shading)
Langkah-langkah Gouraud shading

Tentukan vektor normal satuan rata-
rata untuk setiap vertex pada poligon

Terapkan model pencahayaan ke tiap
vertex untuk mendapatkan
intensitasnya

Lakukan interpolasi linear terhadap
intensitas vertex untuk mendapatkan
intensitas titik-titik lain pada poligon.
1) Vektor normal untuk vertex
V
n

∑N k
Nv = k =1
n

∑N
k =1
k

 Setelah mendapatkan vektor normal pada

vektor V, dengan model pencahayaan bisa
didapat intensitas untuk titik tersebut
2) Interpolasi intensitas
y4 − y2 y1 − y4
I4 = I1 + I2
y1 − y2 y1 − y2

x5 − xP x P − x4
IP = I4 + I5
x5 − x4 x5 − x4
Interpolasi secara inkremental

y − y2 y1 − y
I= I1 + I2
y1 − y2 y1 − y2

I 2 − I1
I'= I +
y1 − y2
Gouraud shading: contoh
Kekurangan Gouraud

Tampilan highlight tidak sempurna

Mach band: garis terang atau gelap
muncul pada permukaan
 Akibat penggunaan interpolasi linear

 Untuk mengurangi efek tersebut:

 Perkecil ukuran poligon
 Gunakan metode lain (misal: Phong)
Phong shading

Interpolasi terhadap vektor normal

Model pencahayaan diterapkan pada
semua titik pada permukaan

Memberikan highlight yang lebih
realistik dan mereduksi efek Mach-
band
Langkah-langkah Phong

Tentukan vektor normal satuan rata-
rata untuk setiap vertex pada poligon

Lakukan interpolasi linear terhadap
vektor normal ke seluruh permukaan
poligon

Terapkan model pencahayaan
sepanjang scan line untuk
mendapatkan intensitas setiap titik
pada permukaan
Interpolasi vektor normal

y − y2 y1 − y
N= N1 + N2
y1 − y2 y1 − y2

Untuk mendapatkan vektor-vektor normal antar scan

line dan sepanjang scan line digunakan metode
inkremental
Phong shading: contoh
Evaluasi Phong

Hasil lebih akurat

 Interpolasi vektor normal
 Model pencahayaan diterapkan pada tiap titik

Trade-off: butuh ‘biaya’ komputasi yang
lebih besar

 Fast Phong Shading:

 aproksimasi intensitas dengan perluasan deret
Taylor
 permukaan dengan patch berbentuk segitiga
 wireframe Flat shading

Gouraud shading Phong shading

Ray-tracing

Kelanjutan ide Ray-Casting
 ‘Sinar’ diteruskan (memantul ke / menembus
objek lain)
 Mencatat semua kontribusi terhadap intensitas
suatu titik
 Untuk mendapatkan efek pantulan dan transmisi
secara global

Ray-Tracing dasar:
 deteksi permukaan tampak, efek bayangan,
transparansi, pencahayaan dengan beberapa
sumber cahaya

Pengembangan Ray-Tracing:
 tampilan fotorealistik (terutama objek mengkilap)
Ilustrasi ‘tracing a ray’
 Algoritma Ray-Tracing Dasar

For each pixel in projection plane {

Create ray from the reference point passing through this pixel
Initialize NearestT to INFINITY and NearestObject to NULL

For every object in scene {

If ray intersects this object {
If t of intersection is less than NearestT {
Set NearestT to t of the intersection
Set NearestObject to this object
}
}
}

If NearestObject is NULL {
Fill this pixel with background color
} Else {
Shoot a ray to each light source to check if in shadow
If surface is reflective, generate reflection ray: recurse
If transparent, generate refraction ray: recurse
Use NearestObject and NearestT to compute shading function
Fill this pixel with color result of shading function
}
}
Rekursif pada ray-tracing

Saat primary ray (sinar yang berawal

dari projection reference point)
dipantulkan atau dibiaskan oleh objek,
sinar pantulan atau biasan disebut
dengan secondary ray

Secondary ray akan mengalami
perlakuan yang sama seperti primary
ray saat menemui objek (dipantulkan
dan / atau dibiaskan)
Binary Ray-Tracing tree
R4

R3
T3
S4 R2

S3 T1
R1
S2

S1
Projection
reference
point
Binary Ray-Tracing tree
(cont’d)

Tracing (pembentukan tree) berhenti jika:

 Sampai maximum depth (pilihan user / kapasitas
memori)
 Sinar sampai ke sumber cahaya

Intensitas pada suatu pixel: akumulasi
intensitas mulai terminal node (paling
bawah) pada tree

Intensitas tiap permukaan mengalami
atenuasi (pelemahan) setara dengan jarak
permukaan tersebut ke permukaan parent-
nya (pada tree: node yang tepat di atasnya)
Intensitas akhir suatu pixel

Merupakan hasil penjumlahan seluruh
intensitas -yang telah mengalami atenuasi-
(pada root node)

Jika tidak ada permukaan yang berpotongan
dengan sinar dari pixel, maka pixel tersebut
diberi nilai intensitas sama dengan latar
belakang

Jika sinar dari pixel berpotongan dengan
sumber cahaya (meski tidak reflektif), maka
pixel tersebut diberi nilai intensitas sama
dengan sumber cahaya
Pantulan

Ambient= ka Ia
Diffuse= kd (N.L)
Specular= ks (H.N) ns

R = u − (2u.N)N

Jika L berpotongan dengan permukaan lain, maka

permukaan tersebut dalam daerah bayangan
Pembiasan

Untuk objek dengan material transparan

ηi η
T T= u − (cos θ r − i cos θ i ) N
θr ηr ηr
N
θi
2
u  ηi 
Incoming cos θ r = 1 −   (1 − cos 2 θ i )
ray  ηr 
Contoh Ray-Tracing
Radiosity

Memodelkan pantulan difusi dengan lebih
akurat

Mempertimbangkan transfer energi radian
antar permukaan (sesuai dengan hukum
kekekalan energi)

Tingkat kecerahan (brightness) dan warna
dari segala sesuatu tergantung dari segala
sesuatu yang lain

Lebih realistik
Efek visual radiosity

Cahaya putih mengenai bola merah

Ada pantulan cahaya merah dari bola ke objek lain di
sekelilingnya

Lantai putih di sekitar bola menjadi kemerah-merahan
Contoh lain radiosity
Teori dasar radiosity

Radiosity (B): energi per satuan luas yang

meninggalkan permukaan per satuan waktu;
total energi yang dipancarkan dan yang
dipantulkan

Bi dAi = Ei dAi + Ri ∫ Bj FjidAi

j
Radiosity x luas = energi dipancarkan + energi dipantulkan
 Teori dasar radiosity (cont’d)

Hubungan timbal
balik: Fij Ai = F ji A j

Setelah dibagi dengan dAi:

Bi = Ei + Ri ∫ Bj Fij
j

Untuk lingkungan diskrit:
n
Bi = Ei + Ri ∑ B j Fij
j =1
Teori dasar radiosity (cont’d)

Tiap permukaan saling mempengaruhi,
sehingga perlu menyelesaikan n persamaan
secara simultan:

1− R1F11 − R1F12 ... − R1F1n  B1   E1 

 − R F 1− R F ... − R2 F2n B2  E2 
 2 21 2 22
=
 ... ... ... ...  ...   ... 
    
 − Rn Fn1 − Rn Fn2 ... 1− Rn Fnn Bn  En 

Radiosity bersifat monokromatik.

Untuk RGB, lakukan perhitungan untuk tiap warna
Form factor

Aj
Fij =energi dari permukaan Ai yang sampai ke Aj
dAj
energi dari permukaan Ai yang menyebar ke
semua arah dalam ruang hemisphere yang
melingkupi Ai

θj
Nj 1 cos θ i cos θ j
r Fij =
Ai ∫∫ πr 2
dA j dAi
Ni Ai A j

θi

Ai
dAi
Asumsi dlm perhitungan form
factor

Berlaku hukum kekekalan n
energi
∑F
j =1
ij =1

Pantulan cahaya seragam

Ai Fij = Aj Fji

Permukaan datar atau convex

F jj = 0
Contoh: tanpa & dengan
texture mapping
Texture Mapping

Memetakan peta tekstur 2D (2D
texture map) ke permukaan objek
kemudian memproyeksikannya ke
bidang proyeksi (projection plane)

Teknik:
 Forward mapping (texture order alg)
 Inverse mapping (screen order alg)
Forward mapping

Surface
Projection
parametrization

Texture space Object space Screen space

(u,v) (xw, yw, zw) (xs, ys)

Forward mapping
Forward mapping (cont’d)

Dispesifikasikan dengan fungsi linier

parametrik:
xs = f xs (u, v) = axs u + bxs v + cxs
ys = f ys (u, v) = ays u + bys v + cys

Object-to-image space mapping dilakukan

dengan transformasi: viewing - projection

Kekurangan: ukuran texture patch seringkali
tidak sesuai dengan batas pixel, sehingga
harus ada perhitungan untuk pemotongan
Inverse mapping
Surface
Projection
parametrization

Texture space Object space Screen space

(u,v) (xw, yw, zw) (xs, ys)

Inverse mapping
Inverse mapping (cont’d)

Pada prakteknya, inverse mapping

lebih sering digunakan

Metoda:
 Interpolasi bilinear
 Memanfaatkan permukaan antara
Inverse mapping dgn interpolasi bilinear

Dapat dibayangkan sebagai transformasi dari

2D screen space (x,y) ke 2D texture space
(u,v)

Operasi image warping, dimodelkan dengan:
au + bv + c du + ev + f
x= ; y=
gu + hu + i gu + hu + i

 x'  a b c  u '
 y ' = d e f   v'
    
 w   g h i   q 
( x, y ) = ( x' / w, y ' / w); (u, v) = (u ' / q, v' / q)
The inverse transform
u '  A B C   x'
 v' =  D E F   y '
  
 q  G H I   w 
u '  ei − fh ch − bi bf − ce   x'
 v' =  fg − di ai − cg cd − af   y '
    
 q  dh − eg bg − ah ae − bd   w 

Hubungan antara titik sudut poligon dengan

koordinat pada texture map dispesifikasikan
pada fase pemodelan
 Dengan empat titik sudut quadrilateral, bisa
didapat 9 koefisien (a,b,c,d,e,f,g,h,i)  Gaussian
elimination
Interpolasi bilinear pada screen space

Tiap koordinat vertex punya koordinat
texture (u’,v’,q)

Yang diinterpolasikan: (u’,v’,q)
 (u,v) tidak berubah secara linear thd (x,y)

(u,v) = (u’/q,v’/q)
Inverse mapping dengan
penggunaan permukaan antara

Bisa digunakan jika belum ada

hubungan antara koordinat vertex dan
texture
 Digunakan untuk menentukan hubungan
tsb

Two-part mapping:
 Texture dipetakan ke permukaan antara
(biasanya non-planar)
 Baru kemudian dipetakan ke objek (3D-
to-3D mapping)
Two-part mapping
S mapping O mapping

2D texture map Intermediate

surface

S mapping: T(u,v)  T’(xi,yi,zi)

O mapping: T’(xi,yi,zi)  O(xw,yw,zw)
Jenis permukaan antara

Bidang (dengan berbagai orientasi)

Permukaan lengkung dari silinder

Permukaan kubus

Permukaan bola
Ilustrasi: transfer pola ke permukaan ¼ silinder

Permukaan: a = θ, b = z; 0 ≤ θ ≤ π/2, 0 ≤ z ≤ 1

xi = r cos a; yi = r sin a; zi = b

a = uπ/2, b = v

Inverse:
 a = tan-1 (yi/xi), b = zi
 u = 2a/π, v = b
O mapping

T’(xi,yi,zi)  O(xw,yw,zw)

Lebih mudah: sudut pandang ray tracing

Empat kemungkinan:
1. Perpotongan pantulan view ray dengan
permukaan antara
2. Perpotongan vektor normal dari permukaan pada
(xw,yw,zw) dengan permukaan antara
3. Perpotongan garis yang menghubungkan pusat
objek dan (xw,yw,zw) dengan permukaan antara
4. Perpotongan antara garis yang menghubungkan
(xw,yw,zw) dengan (xi,yi,zi), yang orientasinya
sama dengan vektor normal pada (xi,yi,zi)
4 kemungkinan O mapping
Environment mapping

Cara cepat untuk me-render objek
mengkilap yang memantulkan cahaya dari
sekelilingnya

Batasan environment mapping:
 Benar secara geometris jika objek relatif kecil
dibanding lingkungannya
 Objek hanya dapat memantulkan cahaya dari
lingkungannya  tidak untuk objek concave
 Setiap objek dalam scene membutuhkan
environment map yang berbeda
 Kadang diperlukan environment map yang baru
jika sudut pandang berubah
Cubic mapping

Environment diwakili oleh 6 sisi kubus

Titik pandang berada di pusat objek
Contoh cubic mapping

Bandingkan dengan
hasil Ray Tracing
 Cubic mapping dengan real images

Environment map

Hasil mapping
Bump mapping

Permukaan tampak berkerut tanpa
harus memodelkannya secara
geometris

Vektor normal dari permukaan
dimodifikasi secara angular 
mempengaruhi model pantulan
cahaya

Kekurangan: garis siluet tetap
mengikuti bentuk asli objek
Ilustrasi prosedur bump mapping

P(u):
Original P’(u):
surface Modifying P(u)
with B(u)

B(u):
N’(u): The
Bump map
vectors to the
new ‘surface’
Interpretasi geometris bump mapping
Contoh bump mapping
Contoh bump mapping (cont’d)

Bump map
Bump map Texture map
Anti-aliasing

‘Alias’: gejala pada image (paling
terlihat pada texture map) dimana
perulangan tekstur mencapai dimensi
pixel
 Under-sampling: menghitung satu
warna untuk tiap pixel

Anti-aliasing: mengurangi efek alias
Contoh alias & antialiasing

a) Aliased b) Anti-aliased c) Anti-aliased-sinc

[Moiré effect]

Zoom a) Zoom c)
Prinsip pendekatan anti-aliasing

Image ideal memiliki detil yang tak
berhingga  direpresentasikan dengan
fungsi f(x,y) dimana x dan y adalah bilangan
real yang mendefinisikan koordinat.

Untuk dapat menampilkan image f(x,y)
dengan keterbatasan perangkat display,
harus disederhanakan
 Cara paling sederhana: pencuplikan image pada
f(i,j) untuk tiap pixel (i,j)  Moiré effect
 Cara yang lebih baik: untuk tiap pixel (i,j),
gunakan intensitas rata-rata dari area pada
permukaan dalam scene yang memuat f(i,j)
 Cara-cara lain yang lebih kompleks
Anti-aliasing options

Pre-filtering – ‘infinite’ samples per
pixel

No filtering – one sample per pixel

Post-filtering – n uniform samples per
pixel

Post-filtering – stochastic samples
Post-filtering: supersampling

Teknik yang paling sering digunakan

untuk rendering polygon mesh

Memperbesar frekuensi sampling

Perhitungan melibatkan:
 virtual image dengan resolusi spasial yang
lebih besar daripada image yang akan
ditampilkan
 ‘down averaging’ image dengan resolusi
tinggi ke resolusi yang akan ditampilkan
 Supersampling & ‘down averaging’

Pixels

Super pixels

Filter step = S superpixels

I’(i,j) real image: n x m

I(p,q) virtual image: (Sxn) x (Sxm)

Si + k Sj + k
I ' (i, j ) = ∑ ∑ I ( p, q)h(Si − p, Sj − q)
p = Si − k q = Sj − k
S: faktor skala; h: filter; k: dimensi filter
Contoh filter (h)

Bartlett window (3 diantaranya)

Semakin besar dimensi filter: semakin bagus

menangani aliasing, semakin blur  trade-
off
 Contoh supersampling
Anti-aliasing
virtual image 2x real image

Tanpa anti-aliasing