http://www.ftsm.ukm.my/samn/TH3813.htm

1. TH3813 Realiti Maya
Pemetaan Tekstur
Pemetaan tekstur
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
1
Latarbelakang
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
2
Latarbelakang
Dunia nyata dipenuhi dengan objek yang penuh
detail, spt pokok, haiwan dan lain-lain.
Dalam disiplin grafik komputer pendetailan visual
ini dinamakan tekstur (texture).
Dengan VRML boleh juga modelkan setiap
tekstur dengan detail dengan menggunakan
pelbagai permukaan berwarna:
Kaedah yang lebih cepat:
dapatkan gambar objek sebenar, seperti pokok
tampalkan gambar tersebut pada bentuk yang
dikehendaki
Teknik ini dipanggil Pemetaan Tekstur (Texture
Mapping)
ambil masa lama untuk tuliskan kod VRML
ambil masa lama untuk melukis
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
3
Contoh
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
4
Contoh tekstur
[can.wrl]
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
5
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
6
1

2. Penggunaan imej tekstur
Penggunaan tekstur movie
Tekstur imej
Tekstur movie
Gunakan satu imej daripada fail berformat seperti
berikut:
Movie daripada fail MPEG-1
Movie akan dimain semula dalam bentuk tekstur
GIF
JPEG
PNG
TH3813 10 VRML 8
ada kalanya timbulkan masalah pada sesetengah
browser.
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
7
Sintaks: Appearance
texture - sumber tekstur
url - URL bagi fail imej tekstur
9
Sintaks: PixelTexture
Shape {
appearance Appearance {
material Material { }
texture ImageTexture {
url “wood.jpg”
}
}
geometry . . .
© Dr. Shahrul Azman Mohd Noah
TH3813 10 VRML 8
}
samn@ftsm.ukm.my
10
Sintaks: MovieTexture
Nod PixelTexture tentukan piksel tekstur imej
untuk pemetaan tekstur
Nod MovieTexture pilih tekstur movie untuk tujuan
pemetaan tekstur
image - piksel imej tekstur
data imej - lebar, ketinggian, bytes/pixel, nilai piksel
Shape {
appearance Appearance {
material Material { }
texture PixelTexture
image 2 1 3
0xFFF00 0xFF0000
}
}
geometry . . .
© Dr. Shahrul Azman Mohd Noah
TH3813 10 VRML 8
samn@ftsm.ukm.my
}
8
Nod ImageTexture pilih tekstur imej untuk
pemetaan tekstur
Shape {
appearance Appearance {
material Material { . . . }
texture ImageTexture { . . . }
}
geometry . . .
}
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
Sintaks: ImageTexture
Nod Appearance jelaskan bentuk keseluruhan
appearance
TH3813 10 VRML 8
TH3813 10 VRML 8
11
url - berikan URL bagai fail movie
bila untuk mainkan movie, dan sepantas mana
(sama spt nod TimeSensor)
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
12
2

3. Penggunaan material dengan
tekstur
Sintaks: MovieTexture
Shape {
appearance Appearance {
material Material { }
texture MovieTexture {
url “movie.mpg”
loop TRUE
speed 1.0
startTime 0.00
stopTime 0.00
}
}
geometry . . .
}
TH3813 10 VRML 8
Tekstur warna ambil alih warna dalam nod
Material
Tekstur grayscale digabungkan dengan warna
nod Material
sesuai untuk mewarnakan tesktur grayscale
Jika tiada nod Material, tekstur akan digunakan
[Contoh]
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
13
Penggunaan tekstur transparen
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
14
Contoh tekstur transparen
Imej tesktur boleh terdiri dari nilai warna dan
transparen bagi setiap pixel
Transparensi pixel juga dikenali sebagai alpha
Transparensi pixel membenarkan sebahagian
daripada bentuk menjadi transparen
tingkap, grill, lubang
pokok, awan
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
15
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
16
Memahami bagaimana tekstur
dipetakan
Contoh tekstur transparen
Bila gunakan sebagai nilai kepada medan texture
dalam nod Appearance, nod-nod ImageTexture,
PixelTexture dan MovieTexture tentukan imej
texture untuk dipetakan ke bentuk.
Cara tekstur dipetakan berbeza-beza
berdasarkan nod geometri yang digunakan untuk
hasilkan bentuk.
[treewall.wrl]
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
17
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
18
3

4. Pemetaan teskstur pada
sebahagian bentuk primitif
Contoh-contoh pemetaan
Nod geometri Box
Nod geometri Cylinder
Nod geometri Cone
Nod geometri Sphere
[can.wrl]
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
19
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
20
Pemetaan tekstur ke bentuk FaceSet
Pemetaan tekstur ke bentuk Text
Shape {
appearance Appearnce {
material Material { }
texture ImageTexture {
url “brick.jpg”
}
}
geomery Text {
fontStyle FontStyle
. .. . .. .
}
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
21
Pemetaan tekstur ke bentuk grid
dongakan
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
22
Pemetaan tekstur ke bentuk
extruded
23
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
24
4

5. Penggunaan tekstur grayscale
[greyscale]
[green]
Pengawalan bagaimana
tekstur dipetakan
Shape {
appearance Appearance {
material Material {
diffuseColor 0.0 1.0 0.0
}
texture ImageTexture {
url "lines_g.jpg"
}
}
geometry Cylinder {
height 2.0
radius 1.0
}
}
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
25
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
26
Penggunaan sistem ko-ordinat
tekstur
Latarbelakang
Secara default, keseluruhan imej tekstur
dipetakan pada keseluruhan bentuk.
Boleh juga:
Imej tekstur adalah dalam sistem ko-ordinat
tekstur
Index KoOrdinatTekstur Koordinat (S,T)
ekstraksikan sebahagian sahaja daripada bentuk
keseluruhan
hasilkan pattern yang sama berulang-kali
27
Penggunaan sistem ko-ordinat
tekstur
TH3813 10 VRML 8
1.0 0.0
1.0 1.0
3
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
0.0 0.0
1
2
TH3813 10 VRML 8
0
0.0 1.0
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
28
Transformasi tekstur
Untuk ekstrakkan sebahagian daripada imej
seperti di bawah
Transformasi tekstur anjakkan, putarkan dan
skalakan ko-ordinat tekstur
Index KoOrdinatTekstur Koordinat (S,T)
0
0.8 0.2
2
0.8 0.8
3
TH3813 10 VRML 8
0.2 0.2
1
0.2 0.8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
29
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
30
5

6. Penteksturan permukaan
Proses penteksturan
Tambatkan tekstur ke permukaan (tarikkan kuih
tersebut dan tampalkan)
Pilih bahagian diperlukan menggunakan koordinat tekstur dan indeks
hasilkan “pemotong kuih”
Transformasikan ko-ordinat tekstur
posisikan dan orientasikan “pemotong kuih”
Tambatkan tekstur kepada permukaan
padankan tekstur dan lekatkan pada permukaan
Proses ini seiras dalam menghasilkan permukaan
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
31
Sintaks: TextureCoordinate
texCoord dan texCoordIndex - tentukan kepingan
tekstur
Gunakan sebagai nilai medan bagi texCoord pada
nod IndexedFaceSet atau ElevationGrid
33
Sintaks: ElevationGrid
texCoord - tentukan kepingan tekstur
secara automatik janakan indeks ko-ordinat tekstur
samn@ftsm.ukm.my
Shape {
appearance Appearance { . . . }
geometry IndexedFaceSet {
coord Coordinate { . . . }
coordIndex [ . . . ]
texCoord TextureCoordinate { . . . }
texCoordIndex [ . . . ]
}
© Dr. Shahrul Azman Mohd Noah
TH3813 10 VRML 8
samn@ftsm.ukm.my
}
34
Sintaks: Appearance
Nod geometry ElevationGrid hasilkan terrain
Shape {
appearance Appearance { . . . }
geometry ElevationGrid {
height [ . . . ]
texCoord TextureCoordinate { . . . }
}
}
© Dr. Shahrul Azman Mohd Noah
TH3813 10 VRML 8
32
Nod geometri IndexedFaceSet hasilkan geometri
daripada permukaan
TextureCoordinate {
point [0.2 0.2, 0.8 0.2, . . . ]
}
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
Sintaks: IndexedFaceSet
Nod TextureCoordinate mengandungi senarai
koordinat tekstur
TH3813 10 VRML 8
TH3813 10 VRML 8
Nod Appearance deskripsikan keterampilan
keseluruhan bentuk
textureTransform - transformasikan tekstur
Shape {
appearance Appearance {
material Material { . . . }
texture ImageTexture { . . . }
textureTransform TextureTransform { . . . }
}
geometry . . .
}
35
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
36
6

7. Sintaks: TextureTransform
Sintaks: TextureTransform
Shape {
appearance Appearance {
material Material { . . . }
texture ImageTexture { . . . }
textureTransform TextureTransform {
translation 0.0 0.0
rotation 0.0
scale 1.0 1.0
}
}
}
Nod TextureTransform transformasi koordinat
tekstur
translation - kedudukan
rotation - putaran
scale - saiz
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
37
Contoh penggunaan tanpa
transformasi
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
Contoh penggunaan translasi
a. Tekstur dalam ruang tekstur
a. Tekstur dalam ruang tekstur
38
b. Tekstur yang tertranslasi
a. Tekstur dalam bentuk
c. Tekstur pada bentuk
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
39
Contoh penggunaan putaran
a. Tekstur dalam ruang tekstur
TH3813 10 VRML 8
b. Tekstur yang terputar
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
40
Contoh penggunaan skala
a. Tekstur dalam ruang tekstur
c. Tekstur pada bentuk
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
b. Tekstur yang diskalakan
c. Tekstur pada bentuk
41
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
42
7

8. Contoh penggunaan koordinat
tekstur
a. Imej tekstur
TH3813 10 VRML 8
Contoh penggunaan skala
b. Tekstur pada bentuk
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
a. Imej tekstur
43
Skala, putar dan translasi
samn@ftsm.ukm.my
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
44
Skala, putar dan translasi
Skala, putar dan translasikan imej tekstur satu
demi satu
Shape {
appearance Appearance {
material Material { . . . }
texture ImageTexture { . . . }
textureTransform TextureTransforms {
translation 0.0 0.0
rotation .785
scale 8.5 8.5
}
}
© Dr. Shahrul Azman Mohd Noah
}
TH3813 10 VRML 8
TH3813 10 VRML 8
b. Tekstur pada bentuk
Baca operasi tranformasi tekstur dari atas ke
bawah
tekstur imej di translasi, putar dan skala
susunan adalah tetap, tidak bergantung susunan
medan
merupakan songsangan daripada nod Transform
45
Contoh penggunaan skala dan
putaran
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
46
Contoh persekitaran melibatkan
pemetaan tekstur
Hiasan rumah
Rumah
a. Imej tekstur
TH3813 10 VRML 8
b. Tekstur pada bentuk
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
47
TH3813 10 VRML 8
© Dr. Shahrul Azman Mohd Noah
samn@ftsm.ukm.my
48
8