8
TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah [email protected] 1 TH3813 Realiti Maya Pemetaan Tekstur TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah [email protected] 2 Pemetaan tekstur TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah [email protected] 3 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: ambil masa lama untuk tuliskan kod VRML ambil masa lama untuk melukis TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah [email protected] 4 Latarbelakang Kaedah yang lebih cepat: dapatkan gambar objek sebenar, seperti pokok tampalkan gambar tersebut pada bentuk yang dikehendaki Teknik ini dipanggil Pemetaan Tekstur (Texture Mapping) TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah [email protected] 5 Contoh [can.wrl] TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah [email protected] 6 Contoh tekstur

Th3813 10 pemetaan tekstur

Embed Size (px)

Citation preview

Page 1: Th3813 10 pemetaan tekstur

1

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 1

TH3813 Realiti MayaPemetaan Tekstur

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 2

Pemetaan tekstur

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 3

LatarbelakangDunia nyata dipenuhi dengan objek yang penuhdetail, spt pokok, haiwan dan lain-lain.Dalam disiplin grafik komputer pendetailan visual ini dinamakan tekstur (texture).Dengan VRML boleh juga modelkan setiaptekstur dengan detail dengan menggunakanpelbagai permukaan berwarna:

ambil masa lama untuk tuliskan kod VRMLambil masa lama untuk melukis

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 4

LatarbelakangKaedah yang lebih cepat:

dapatkan gambar objek sebenar, seperti pokoktampalkan gambar tersebut pada bentuk yang dikehendaki

Teknik ini dipanggil Pemetaan Tekstur (Texture Mapping)

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 5

Contoh

[can.wrl]

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 6

Contoh tekstur

Page 2: Th3813 10 pemetaan tekstur

2

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 7

Penggunaan imej teksturTekstur imej

Gunakan satu imej daripada fail berformat sepertiberikut:

GIF JPEGPNG

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 8

Penggunaan tekstur movieTekstur movie

Movie daripada fail MPEG-1Movie akan dimain semula dalam bentuk tekstur

ada kalanya timbulkan masalah pada sesetengahbrowser.

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 9

Sintaks: AppearanceNod Appearance jelaskan bentuk keseluruhanappearance

texture - sumber teksturShape {

appearance Appearance {material Material { . . . }texture ImageTexture { . . . }

}geometry . . .

}

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 10

Sintaks: ImageTextureNod ImageTexture pilih tekstur imej untukpemetaan tekstur

url - URL bagi fail imej teksturShape {

appearance Appearance {material Material { }texture ImageTexture {

url “wood.jpg”}

}geometry . . .

}

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 11

Sintaks: PixelTextureNod PixelTexture tentukan piksel tekstur imejuntuk pemetaan tekstur

image - piksel imej teksturdata imej - lebar, ketinggian, bytes/pixel, nilai piksel

Shape {appearance Appearance {

material Material { }texture PixelTexture

image 2 1 30xFFF00 0xFF0000

}}geometry . . .

}TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah

[email protected] 12

Sintaks: MovieTextureNod MovieTexture pilih tekstur movie untuk tujuanpemetaan tekstur

url - berikan URL bagai fail moviebila untuk mainkan movie, dan sepantas mana(sama spt nod TimeSensor)

Page 3: Th3813 10 pemetaan tekstur

3

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 13

Sintaks: MovieTextureShape {

appearance Appearance {material Material { }texture MovieTexture {

url “movie.mpg”loop TRUEspeed 1.0startTime 0.00stopTime 0.00

}}geometry . . .

}[Contoh]

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 14

Penggunaan material dengantekstur

Tekstur warna ambil alih warna dalam nod MaterialTekstur grayscale digabungkan dengan warnanod Material

sesuai untuk mewarnakan tesktur grayscaleJika tiada nod Material, tekstur akan digunakan

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 15

Penggunaan tekstur transparenImej tesktur boleh terdiri dari nilai warna dantransparen bagi setiap pixel

Transparensi pixel juga dikenali sebagai alphaTransparensi pixel membenarkan sebahagiandaripada bentuk menjadi transparen

tingkap, grill, lubangpokok, awan

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 16

Contoh tekstur transparen

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 17

Contoh tekstur transparen

[treewall.wrl]

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 18

Memahami bagaimana teksturdipetakan

Bila gunakan sebagai nilai kepada medan texture dalam nod Appearance, nod-nod ImageTexture, PixelTexture dan MovieTexture tentukan imejtexture untuk dipetakan ke bentuk.Cara tekstur dipetakan berbeza-bezaberdasarkan nod geometri yang digunakan untukhasilkan bentuk.

Page 4: Th3813 10 pemetaan tekstur

4

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 19

Contoh-contoh pemetaan

Nod geometri Box

Nod geometri Cylinder

Nod geometri Cone

Nod geometri Sphere

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 20

Pemetaan teskstur padasebahagian bentuk primitif

[can.wrl]

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 21

Pemetaan tekstur ke bentuk TextShape {

appearance Appearnce {

material Material { }

texture ImageTexture {

url “brick.jpg”

}

}

geomery Text {

fontStyle FontStyle

. .. . .. .

}TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah

[email protected] 22

Pemetaan tekstur ke bentuk Face-Set

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 23

Pemetaan tekstur ke bentuk grid dongakan

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 24

Pemetaan tekstur ke bentukextruded

Page 5: Th3813 10 pemetaan tekstur

5

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 25

Penggunaan tekstur grayscale

[greyscale] [green]

Shape {appearance Appearance {

material Material {diffuseColor 0.0 1.0 0.0

}texture ImageTexture {

url "lines_g.jpg"}

}geometry Cylinder {

height 2.0radius 1.0

}} TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah

[email protected] 26

Pengawalan bagaimanatekstur dipetakan

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 27

LatarbelakangSecara default, keseluruhan imej teksturdipetakan pada keseluruhan bentuk.Boleh juga:

ekstraksikan sebahagian sahaja daripada bentukkeseluruhanhasilkan pattern yang sama berulang-kali

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 28

Penggunaan sistem ko-ordinattekstur

Imej tekstur adalah dalam sistem ko-ordinattekstur

Index KoOrdinatTekstur Koordinat (S,T)

0 0.0 0.0

1 1.0 0.0

2 1.0 1.0

3 0.0 1.0

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 29

Penggunaan sistem ko-ordinattekstur

Untuk ekstrakkan sebahagian daripada imejseperti di bawah

Index KoOrdinatTekstur Koordinat (S,T)

0 0.2 0.2

1 0.8 0.2

2 0.8 0.8

3 0.2 0.8

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 30

Transformasi teksturTransformasi tekstur anjakkan, putarkan danskalakan ko-ordinat tekstur

Page 6: Th3813 10 pemetaan tekstur

6

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 31

Penteksturan permukaanTambatkan tekstur ke permukaan (tarikkan kuihtersebut dan tampalkan)

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 32

Proses penteksturanPilih bahagian diperlukan menggunakan ko-ordinat tekstur dan indeks

hasilkan “pemotong kuih”Transformasikan ko-ordinat tekstur

posisikan dan orientasikan “pemotong kuih”Tambatkan tekstur kepada permukaan

padankan tekstur dan lekatkan pada permukaanProses ini seiras dalam menghasilkan permukaan

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 33

Sintaks: TextureCoordinateNod TextureCoordinate mengandungi senaraikoordinat teksturTextureCoordinate {

point [0.2 0.2, 0.8 0.2, . . . ]}

Gunakan sebagai nilai medan bagi texCoord padanod IndexedFaceSet atau ElevationGrid

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 34

Sintaks: IndexedFaceSetNod geometri IndexedFaceSet hasilkan geometridaripada permukaan

texCoord dan texCoordIndex - tentukan kepingantekstur

Shape {appearance Appearance { . . . }geometry IndexedFaceSet {

coord Coordinate { . . . }coordIndex [ . . . ]texCoord TextureCoordinate { . . . }texCoordIndex [ . . . ]

}}

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 35

Sintaks: ElevationGridNod geometry ElevationGrid hasilkan terrain

texCoord - tentukan kepingan tekstursecara automatik janakan indeks ko-ordinat tekstur

Shape {appearance Appearance { . . . }geometry ElevationGrid {

height [ . . . ]texCoord TextureCoordinate { . . . }

}}

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 36

Sintaks: AppearanceNod Appearance deskripsikan keterampilankeseluruhan bentuk

textureTransform - transformasikan teksturShape {

appearance Appearance {material Material { . . . }texture ImageTexture { . . . }textureTransform TextureTransform { . . . }

}geometry . . .

}

Page 7: Th3813 10 pemetaan tekstur

7

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 37

Sintaks: TextureTransformNod TextureTransform transformasi koordinattekstur

translation - kedudukanrotation - putaranscale - saiz

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 38

Sintaks: TextureTransformShape {

appearance Appearance {material Material { . . . }texture ImageTexture { . . . }textureTransform TextureTransform {

translation 0.0 0.0rotation 0.0 scale 1.0 1.0

}}

}

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 39

Contoh penggunaan tanpatransformasi

a. Tekstur dalam ruang tekstur a. Tekstur dalam bentuk

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 40

Contoh penggunaan translasi

a. Tekstur dalam ruang tekstur b. Tekstur yang tertranslasi

c. Tekstur pada bentuk

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 41

Contoh penggunaan putaran

a. Tekstur dalam ruang tekstur b. Tekstur yang terputar

c. Tekstur pada bentukTH3813 10 VRML 8 © Dr. Shahrul Azman Mohd Noah

[email protected] 42

Contoh penggunaan skala

a. Tekstur dalam ruang tekstur b. Tekstur yang diskalakan

c. Tekstur pada bentuk

Page 8: Th3813 10 pemetaan tekstur

8

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 43

Contoh penggunaan koordinattekstur

a. Imej tekstur b. Tekstur pada bentuk

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 44

Contoh penggunaan skala

a. Imej tekstur b. Tekstur pada bentuk

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 45

Skala, putar dan translasiSkala, putar dan translasikan imej tekstur satudemi satu

Shape {appearance Appearance {

material Material { . . . }texture ImageTexture { . . . }textureTransform TextureTransforms {

translation 0.0 0.0 rotation .785scale 8.5 8.5

}}

} TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 46

Skala, putar dan translasiBaca operasi tranformasi tekstur dari atas kebawah

tekstur imej di translasi, putar dan skalasusunan adalah tetap, tidak bergantung susunanmedanmerupakan songsangan daripada nod Transform

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 47

Contoh penggunaan skala danputaran

a. Imej tekstur b. Tekstur pada bentuk

TH3813 10 VRML 8 © Dr. Shahrul Azman Mohd [email protected] 48

Contoh persekitaran melibatkanpemetaan tekstur

Hiasan rumahRumah