![Page 1: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/1.jpg)
Contoh: tanpa & dengan texture mapping
![Page 2: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/2.jpg)
Texture Mapping
� Memetakan peta tekstur 2D (2D texture map) ke permukaan objek kemudian memproyeksikannya ke bidang proyeksi (projection plane)bidang proyeksi (projection plane)
� Teknik:� Forward mapping (texture order alg)
� Inverse mapping (screen order alg)
![Page 3: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/3.jpg)
Forward mapping
Surface
parametrizationProjection
Texture space
(u,v)
Object space
(xw, yw, zw)
Screen space
(xs, ys)
Forward mapping
![Page 4: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/4.jpg)
Forward mapping (cont’d)
� Dispesifikasikan dengan fungsi linier parametrik:
ssss xxxxs cvbuavufx ++== ),(
� 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
ssss
ssss
yyyys
xxxxs
cvbuavufy ++== ),(
![Page 5: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/5.jpg)
Inverse mapping
Surface
parametrizationProjection
Texture space
(u,v)
Object space
(xw, yw, zw)
Screen space
(xs, ys)
Inverse mapping
![Page 6: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/6.jpg)
Inverse mapping (cont’d)
� Pada prakteknya, inverse mapping lebih sering digunakan
� Metoda:� Metoda:� Interpolasi bilinear
� Memanfaatkan permukaan antara
![Page 7: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/7.jpg)
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: � Operasi image warping, dimodelkan dengan:
ihugu
fevduy
ihugu
cbvaux
++
++=
++
++= ;
)/',/'(),();/',/'(),(
'
'
'
'
qvquvuwywxyx
q
v
u
ihg
fed
cba
w
y
x
==
=
![Page 8: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/8.jpg)
The inverse transform
−−−
−−−
=
=
y
x
afcdcgaidifg
cebfbichfhei
v
u
w
y
x
IHG
FED
CBA
q
v
u
'
'
'
'
'
'
'
'
−−−
−−−=
w
y
bdaeahbgegdh
afcdcgaidifg
q
v ''
� 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
![Page 9: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/9.jpg)
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) tidak berubah secara linear thd (x,y)
� (u,v) = (u’/q,v’/q)
![Page 10: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/10.jpg)
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)
![Page 11: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/11.jpg)
Two-part mapping
S mapping O mapping
� S mapping: T(u,v) � T’(xi,yi,zi)
� O mapping: T’(xi,yi,zi) � O(xw,yw,zw)
2D texture map Intermediate
surface
![Page 12: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/12.jpg)
Jenis permukaan antara
� Bidang (dengan berbagai orientasi)
� Permukaan lengkung dari silinder
� Permukaan kubus
� Permukaan bola� Permukaan bola
![Page 13: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/13.jpg)
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
![Page 14: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/14.jpg)
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 antarapermukaan 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)
![Page 15: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/15.jpg)
4 kemungkinan O mapping
![Page 16: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/16.jpg)
Environment mapping
� Cara cepat untuk me-render objek mengkilap yang memantulkan cahaya dari sekelilingnya
� Batasan environment mapping:� 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
![Page 17: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/17.jpg)
Cubic mapping
� Environment diwakili oleh 6 sisi kubus
� Titik pandang berada di pusat objek
![Page 18: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/18.jpg)
Contoh cubic mapping
Bandingkan dengan
hasil Ray Tracing
![Page 19: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/19.jpg)
Cubic mapping dengan real images
Environment map
Hasil mapping
![Page 20: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/20.jpg)
Bump mapping
� Permukaan tampak berkerut tanpa harus memodelkannya secara geometris
� Vektor normal dari permukaan � Vektor normal dari permukaan dimodifikasi secara angular �mempengaruhi model pantulan cahaya
� Kekurangan: garis siluet tetap mengikuti bentuk asli objek
![Page 21: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/21.jpg)
Ilustrasi prosedur bump mapping
P(u):
Original
surface
P’(u):
Modifying P(u)
with B(u)
B(u):
Bump mapN’(u): The
vectors to the
new ‘surface’
![Page 22: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/22.jpg)
Interpretasi geometris bump mapping
![Page 23: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/23.jpg)
Contoh bump mapping
![Page 24: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/24.jpg)
Contoh bump mapping (cont’d)
Bump mapBump map Texture mapBump map Texture map
![Page 25: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/25.jpg)
Anti-aliasing
� ‘Alias’: gejala pada image (paling terlihat pada texture map) dimana perulangan tekstur mencapai dimensi pixel pixel
� Under-sampling: menghitung satu warna untuk tiap pixel
� Anti-aliasing: mengurangi efek alias
![Page 26: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/26.jpg)
Contoh alias & antialiasing
a) Aliased [Moiré effect]
b) Anti-aliased c) Anti-aliased-sinc
Zoom a) Zoom c)
![Page 27: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/27.jpg)
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)� 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
![Page 28: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/28.jpg)
Anti-aliasing options
� Pre-filtering – ‘infinite’ samples per pixel
� No filtering – one sample per pixel
� Post-filtering – n uniform samples per � Post-filtering – n uniform samples per pixel
� Post-filtering – stochastic samples
![Page 29: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/29.jpg)
Post-filtering: supersampling
� Teknik yang paling sering digunakan untuk rendering polygon mesh
� Memperbesar frekuensi sampling� 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
![Page 30: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/30.jpg)
Supersampling & ‘down averaging’
Super pixels
Pixels
Filter step = S superpixels
I(p,q) virtual image: (Sxn) x (Sxm)
I’(i,j) real image: n x m
Filter step = S superpixels
),(),(),(' qSjpSihqpIjiIkSi
kSip
kSj
kSjq
−−= ∑ ∑+
−=
+
−=
S: faktor skala; h: filter; k: dimensi filter
![Page 31: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/31.jpg)
Contoh filter (h)
� Bartlett window (3 diantaranya)
� Semakin besar dimensi filter: semakin bagus menangani aliasing, semakin blur � trade-off
![Page 32: Contoh: tanpa & dengan texture mappingmohiqbal.staff.gunadarma.ac.id/Downloads/files/29432/13-Texture... · Hubungan antara titik sudut poligon dengan ... lingkungannya tidak untuk](https://reader031.vdocuments.pub/reader031/viewer/2022021702/5c8c750609d3f2a66a8d07ae/html5/thumbnails/32.jpg)
Contoh supersampling
Anti-aliasingvirtual image 2x real image
Tanpa anti-aliasing