Contoh: tanpa & dengan texture...

32
Contoh: tanpa & dengan texture mapping

Transcript of Contoh: tanpa & dengan texture...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Contoh supersampling

Anti-aliasingvirtual image 2x real image

Tanpa anti-aliasing