Obsah
1. Texturování ve VRML
2. Uzel typu PixelTexture
3. První demonstrační příklad: použití uzlu typu PixelTexture
4. Uzel typu ImageTexture
5. Druhý demonstrační příklad: použití uzlu typu ImageTexture
6. Uzel typu MovieTexture
7. Transformace textur
8. Třetí demonstrační příklad: transformace textury
9. Obsah následující části tohoto seriálu
1. Texturování ve VRML
Jak již bylo řečeno v perexu článku, jsou v jazyce VRML podporovány tři formy texturování. Pomocí uzlu typu PixelTexture je možné uložit data textury, tj. barvy jednotlivých pixelů, přímo ve VRML souborech. Je zřejmé, že tento způsob ukládání textur (rastrových obrázků s volitelným alfa-kanálem), je omezen pouze na textury s menším rozlišením, ale i ty jsou v některých případech docela dobře použitelné, například při vytváření pruhů (textura má v jednom směru snížené rozlišení až na pouhý jeden pixel).
Druhý typ uzlu, který se používá pro nanesení textury na povrch tělesa, se jmenuje ImageTexture a jak již jeho název napovídá, jedná se o uzel, ve kterém je (kromě dalších volitelných atributů) uloženo jméno externího obrázku, přesněji řečeno jeho URL (Uniform Resource Locator). To mimo jiného znamená, že obrázek může být uložený na zcela jiném místě v rámci sítě Internet než samotný VRML soubor, což by nemělo být překvapením, protože samotné VRML bylo navrženo jako „3D varianta“ k technologii HTML.
Třetí typ uzlu, MovieTexture jde v možnostech texturování ještě dále, protože umožňuje místo statického obrázku použít jako texturu i externí soubor s animací nebo filmem. Vytvoření např. modelu televize, která ve scéně skutečně vysílá pořad, je tedy s tímto typem textury poměrně jednoduchá úloha.
Ve druhé kapitole si ukážeme způsob zápisu rastrových obrázků představujících texturu přímo ve VRML souborech, v kapitole čtvrté použití externích obrázků typu PNG, GIF a JPEG a konečně v kapitole šesté způsob nanášení celých animací či filmů ve formě textury. Vzhledem k tomu, že je možné texturu při nanášení na povrch objektu různým způsobem transformovat, tj. zvětšovat, zmenšovat, otáčet atd., popíšeme si v osmé kapitole uzel typu TextureTransform, ve kterém lze specifikovat právě tyto poměrně často používané operace.
2. Uzel typu PixelTexture
Nejjednodušší formu textur představují textury zapsané přímo ve VRML souborech, tj. v uzlu typu PixelTexture. Jedná se vlastně o malé rastrové obrázky, u nichž jsou barvy pixelů zakódovány různým způsobem. Podporovány jsou obrázky ve stupních šedi (jedna číselná hodnota na pixel), obrázky ve stupních šedi s přidaným alfa-kanálem (dvě číselné hodnoty na pixel), obrázky v kódování RGB (tři číselné hodnoty na pixel) a konečně obrázky v kódování RGB s přidaným alfa-kanálem (čtyři číselné hodnoty na jeden pixel). V případě zápisu dvojic, trojic a čtveřic číselných hodnot se typicky tyto hodnoty slučují do jednoho hexadecimálního čísla podobným způsobem, jaký je použit při specifikaci barvy v HTML nebo CSS. Uzel typu PixelTexture je zapisován s následující syntaxí:
PixelTexture {
image 0 0 0 # specifikace rozlišení a typu pixelů (0 0 0 jsou implicitní hodnoty)
repeatS TRUE # povolení či zákaz opakování textury ve směru souřadnice S
repeatT TRUE # povolení či zákaz opakování textury ve směru souřadnice T
} První dvě číselné hodnoty slouží ke specifikaci rozlišení textury, tj. velikosti rastrového obrázku, který texturu představuje. Většinou se používají textury, jejichž šířka i délka jsou mocninami čísla 2, tj. například se může jednat o rozlišení 64×64 pixelů, 128×128 pixelů a 256×256 pixelů, ve VRML však toto omezení není popsáno, takže by prohlížeče měly akceptovat i jiné poměry stran. Třetí číselnou hodnotou je zapsán počet složek reprezentujících jeden pixel. Jsou povoleny následující hodnoty:
- 0 – textura neobsahující žádná data (implicitní hodnota, povrch objektu není definován)
- 1 – pixel je reprezentován hodnotou šedi (grayscale)
- 2 – pixel je reprezentován hodnotou šedi a alfa-kanálem (grayscale+alpha channel)
- 3 – pixel je reprezentován třemi hodnotami R, G a B (RGB triplet)
- 4 – pixel je reprezentován čtyřmi hodnotami: R, G, B a alfa-kanálem (RGB triplet+alpha channel)
Za touto zjednodušenou hlavičkou textury jsou již umístěna data jednotlivých pixelů, typicky uložená ve formě hexadecimální hodnoty začínající prefixem „0ד. Dále se mohou v uzlu PixelTexture vyskytovat dva příznaky, pomocí nichž je povoleno či naopak zakázáno opakování textury ve směru osy S a T v případě, že je textura zmenšena na takovou velikost, že nepokryje celý povrch tělesa.
3. První demonstrační příklad: použití uzlu PixelTexture
V dnešním prvním demonstračním příkladu je ukázáno použití uzlu typu PixelTexture pro specifikaci jednoduché textury o rozlišení 10×10 pixelů. Pixely textury (někdy také nazývané texely) jsou reprezentovány trojicí hodnot R, G a B, která je zapsána formou jednoho hexadecimálního čísla v rozsahu 0×000000 až 0×ffffff. Textura je použita pro nanášení na povrch jednotkové krychle, jak je však patrné z druhého obrázku, dá se tatáž textura nanést i na geometricky značně odlišné těleso – kouli. Zdrojový kód prvního demonstračního příkladu má tvar:
#VRML V2.0 utf8
# verze 2.0 vyzaduje kodovani UTF-8
# ---------------------------------------------------------
# Prvni demonstracni priklad trojrozmerne sceny
# popsane jazykem VRML 2.0, ktera obsahuje jednoduche
# otexturovane teleso. Textura je zadana pomoci dat
# ulozenych primo ve VRML souboru.
#
# Priklad je soucasti serialu "Graficke formaty"
# (/serialy/graficke-formaty/)
# vychazejiciho na Root.cz (http://www.root.cz)
#
# Textura byla ziskana ze stranky:
# http://www.ballreich.net/vrml/texture/vrml-2.html
# ---------------------------------------------------------
WorldInfo {
title "Prvni 3D scena s ukazkou texturovani"
info ["Autor: Pavel Tisnovsky, 2007"
"sireno pod licenci GPL "]
}
# nastaveni barevneho prechodu na pozadi sceny
Background {
skyColor [1 1 0,
1 0 0]
skyAngle [3.14]
}
# nastaveni pozice pozorovatele
Viewpoint {
position 0.0 1.5 7.0
}
# nastaveni svetelneho zdroje
# (ve skutecnosti neni ve scene pouzit)
PointLight {
color 1.0 1.0 1.0 # barva svetla
intensity 1.0 # intenzita bodoveho svetla
location 0.0 4.0 1.0 # pozice svetelneho zdroje
}
# otexturovane teleso ve tvaru osove orientovane krychle
Shape {
# vzhled objektu - negeometricke informace
appearance Appearance {
texture PixelTexture {
image 10 10 3 0x511504 0x511504 0x511504 0x511504 0x511504
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0x511504
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0x511504
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0x511504
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA
0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0x511504
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0x511504
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0x511504
0x511504 0x511504 0x511504 0x511504 0xAAAAAA
0x511504 0x511504 0x511504 0x511504 0x511504
0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA
0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA 0xAAAAAA
}
}
# tvar objektu - geometricke informace
geometry Box {
}
}
# pomocne teleso slozene z usecek (ctverice usecek)
Shape {
# vzhled objektu - negeometricke informace
appearance Appearance {
# u usecek neni mozne pouzit Phonguv osvetlovaci model
material Material {
emissiveColor 0 0 1
}
}
# tvar objektu - geometricke informace
geometry IndexedLineSet {
# interni poduzel se souradnicemi bodu
coord Coordinate {
point [
-4 -4 -4,
4 4 4,
4 -4 4,
-4 4 -4,
4 4 -4,
-4 -4 4,
4 -4 -4,
-4 4 4
]
}
# indexy do predchoziho pole
# (pouze usecky) oddelene
# indexem s hodnotou -1
coordIndex [
0 1 -1
2 3 -1
4 5 -1
6 7 -1
]
}
}
# ---------------------------------------------------------
# finito
# --------------------------------------------------------- 
4. Uzel typu ImageTexture
Výše uvedený uzel typu PixelTexture se používá pouze v případech, že nanášená textura má malé rozlišení (výhody jsou zřejmé – vše je uloženo v jednom souboru). Ovšem pokud máme k dispozici textury složitější (například fotografie), došlo by k přílišnému nárůstu velikosti VRML souborů, protože použitý formát ukládání pixelů je velmi neefektivní – v některých případech může pomoci komprimace VRML souboru.
Z tohoto důvodu je ve VRML možné se odkazovat na externí grafické soubory uložené ve formátech GIF, PNG či JPEG, přičemž odkaz je uvedený ve formě URL, tj. samotný soubor s obrázkem se může nacházet na jiném počítači než samotný VRML soubor. Vlastní zabezpečení přístupu VRML prohlížeče na Internet je ponecháno na operačním systému, popř. na nastavení proxy serveru (pokud je VRML prohlížeč nainstalován jako součást Webového prohlížeče, měl by použít jeho komunikační kanály). Vlastní zápis uzlu ImageTexture je poněkud jednodušší, než tomu bylo u uzlu PixelTexture, protože není nutné zapisovat formát obrázku (ten je zjištěn z hlavičky externího souboru):
ImageTexture {
url [ ] # seznam URL obrázků
repeatS TRUE # povolení či zákaz opakování textury ve směru souřadnice S
repeatT TRUE # povolení či zákaz opakování textury ve směru souřadnice T
} Všimněte si, že se nemusí zadat pouze jedno URL obrázku, ale hned celý seznam. Je tomu tak z toho důvodu, že obrázek nemusí být na jednom serveru dostupný (přetížený server, výpadek připojení k serveru apod.), proto může VRML prohlížeč stáhnout obrázek z jiného umístění. Jedná se o seznam s implicitní prioritou, tj. nejdříve uvedené URL je použito pro první pokus o stažení textury, druhý pokus využije druhé URL atd.
5. Druhý demonstrační příklad: použití uzlu typu ImageTexture
Dnešní druhý demonstrační příklad se svojí strukturou příliš neliší od příkladu prvního, ovšem s tím rozdílem, že místo rastrového obrázku uloženého přímo ve VRML souboru je použit externí obrázek uložený ve formátu PNG. Je samozřejmě možné použít i obrázky s alfa-kanálem (ten je plně v PNG podporován), ovšem s tím, že ne všechny VRML prohlížeče dokážou takto vytvořené trojrozměrné scény korektně vykreslit.
Zdrojový kód druhého demonstračního příkladu má tvar:
#VRML V2.0 utf8
# verze 2.0 vyzaduje kodovani UTF-8
# ---------------------------------------------------------
# Druhy demonstracni priklad trojrozmerne sceny
# popsane jazykem VRML 2.0, ktera obsahuje jednoduche
# otexturovane teleso.
#
# Priklad je soucasti serialu "Graficke formaty"
# (/serialy/graficke-formaty/)
# vychazejiciho na Root.cz (http://www.root.cz)
# ---------------------------------------------------------
WorldInfo {
title "Druha 3D scena s ukazkou texturovani"
info ["Autor: Pavel Tisnovsky, 2007"
"sireno pod licenci GPL "]
}
# nastaveni barevneho prechodu na pozadi sceny
Background {
skyColor [1 1 0,
1 0 0]
skyAngle [3.14]
}
# nastaveni pozice pozorovatele
Viewpoint {
position 0.0 1.5 7.0
}
# nastaveni svetelneho zdroje
# (ve skutecnosti neni ve scene pouzit)
PointLight {
color 1.0 1.0 1.0 # barva svetla
intensity 1.0 # intenzita bodoveho svetla
location 0.0 4.0 1.0 # pozice svetelneho zdroje
}
# otexturovane teleso ve tvaru osove orientovane krychle
Shape {
# vzhled objektu - negeometricke informace
appearance Appearance {
texture ImageTexture {
url "lena_logo.png" # URL obrazku (muze byt i na jinem serveru)
}
}
# tvar objektu - geometricke informace
geometry Box {
}
}
# pomocne teleso slozene z usecek (ctverice usecek)
Shape {
# vzhled objektu - negeometricke informace
appearance Appearance {
# u usecek neni mozne pouzit Phonguv osvetlovaci model
material Material {
emissiveColor 0 0 1
}
}
# tvar objektu - geometricke informace
geometry IndexedLineSet {
# interni poduzel se souradnicemi bodu
coord Coordinate {
point [
-4 -4 -4,
4 4 4,
4 -4 4,
-4 4 -4,
4 4 -4,
-4 -4 4,
4 -4 -4,
-4 4 4
]
}
# indexy do predchoziho pole
# (pouze usecky) oddelene
# indexem s hodnotou -1
coordIndex [
0 1 -1
2 3 -1
4 5 -1
6 7 -1
]
}
}
# ---------------------------------------------------------
# finito
# --------------------------------------------------------- 
Textura s alfa kanálem
Některé prohlížeče nedokážou korektně pracovat s poloprůhlednými texturami
Texturu je možné mapovat i na tělesa s ploškami ve tvaru kružnic
6. Uzel typu MovieTexture
V první kapitole jsme si řekli, že VRML podporuje i dynamické textury, které jsou uloženy ve formátu videa (například klasického MPEG 1, 2, 4 či přes speciální plugin lze použít i formát Flashe). Takovou texturu je možné použít při modelování televize, tvorbě složitějších 3D světů s animacemi, výbuchy, ohněm, vodopádem apod. Specifikace tohoto typu textury se provádí pomocí uzlu MovieTexture s následující syntaxí:
MovieTexture {
loop TRUE # určení, zda se má přehrávání opakovat stále dokola
speed 1 # relativní rychlost přehrávání (záporná čísla - zpětné převinutí filmu)
startTime 0 # časová značka začátku přehrávání udaná ve formátu Unixového času (epochy)
stopTime 0 # časová značka konce přehrávání udaná ve formátu Unixového času (epochy)
url [ ] # seznam URL video souborů
repeatS TRUE # povolení či zákaz opakování textury ve směru souřadnice S
repeatT TRUE # povolení či zákaz opakování textury ve směru souřadnice T
} Zbývá vysvětlit způsob určení časových značek. Samotný svět vymodelovaný ve VRML souboru je podle definice vytvořen o půlnoci 1.1.1970, tj. jedná se o začátek Unixové epochy. Specifikací atributů startTime a stopTime je možné nastavit čas spuštění a zastavení animace. Dále se pomocí atributu loop určuje, zda se má animace neustále opakovat, nebo zda je přehrána pouze jedenkrát.
7. Transformace textur
Důležitou součástí texturování je i určení způsobu nanášení textur na povrch těles. Ve VRML jsme poněkud omezeni tím, že se nedá přesně popsat způsob nanášení, tj. mapování texelů na povrch, nicméně ve většině případů si vystáčíme s implicitním chováním, které bylo ukázáno v předchozích příkladech – textura je na plošku namapována tak, aby ji celou vyplnila. Souřadnice do textury je však možné specifikovat u výškových polí i těles popsaných uzlem IndexedFaceSet. Kromě toho je možné pro celou texturu globálně zadat způsob mapování pomocí lineární transforamce zapsané jako změna měřítka, rotace a posun. K tomuto účelu slouží uzel TextureTransform s následující syntaxí (vypsány jsou i implicitní hodnoty):
TextureTransform {
scale 1 1
rotation 0
center 0 0
translation 0 0
} 
Aplikace transformace při mapování textury
8. Třetí demonstrační příklad: transformace textury
Ve třetím demonstračním příkladu je ukázána jednoduchá transformace textury nanesené na povrch jednotkové krychle. Textura je podrobena transformaci změny měřítka, což konkrétně znamená, že se na povrch každé stěny krychle vykreslí celkem čtyřikrát. Kromě toho je provedeno i natočení textury o 0.785398 radů (π/4), což je zhruba 45°. Všimněte si, že zvětšení textury je zapsáno pomocí dvojice hodnot 2.0×2.0, ovšem to je změna měřítka v prostoru textury, tj. prostoru specifikovaném souřadnicemi S a T. Zvětšení textury v tomto prostoru znamená, že se textura po namapování na povrch objektu ve skutečnosti zmenší. Zdrojový kód třetího demonstračního příkladu má tvar:
#VRML V2.0 utf8
# verze 2.0 vyzaduje kodovani UTF-8
# ---------------------------------------------------------
# Treti demonstracni priklad trojrozmerne sceny
# popsane jazykem VRML 2.0, ktera obsahuje otexturovane
# teleso. Na texturu je aplikovana transformace.
#
# Priklad je soucasti serialu "Graficke formaty"
# (/serialy/graficke-formaty/)
# vychazejiciho na Root.cz (http://www.root.cz)
# ---------------------------------------------------------
WorldInfo {
title "Treti 3D scena s ukazkou texturovani"
info ["Autor: Pavel Tisnovsky, 2007"
"sireno pod licenci GPL "]
}
# nastaveni barevneho prechodu na pozadi sceny
Background {
skyColor [1 1 0,
1 0 0]
skyAngle [3.14]
}
# nastaveni pozice pozorovatele
Viewpoint {
position 0.0 1.5 7.0
}
# nastaveni svetelneho zdroje
# (ve skutecnosti neni ve scene pouzit)
PointLight {
color 1.0 1.0 1.0 # barva svetla
intensity 1.0 # intenzita bodoveho svetla
location 0.0 4.0 1.0 # pozice svetelneho zdroje
}
# otexturovane teleso ve tvaru osove orientovane krychle
Shape {
# vzhled objektu - negeometricke informace
appearance Appearance {
texture ImageTexture {
url "lena_logo.png" # URL obrazku (muze byt i na jinem serveru)
}
# transformace textury
textureTransform TextureTransform {
#translation 0.5 0.5
scale 2.0 2.0 # zmena meritka - ve skutecnosti zmenseni textury
rotation 0.785398 # rotace textury zadana v radianech
}
}
# tvar objektu - geometricke informace
geometry Box {
}
}
# pomocne teleso slozene z usecek (ctverice usecek)
Shape {
# vzhled objektu - negeometricke informace
appearance Appearance {
# u usecek neni mozne pouzit Phonguv osvetlovaci model
material Material {
emissiveColor 0 0 1
}
}
# tvar objektu - geometricke informace
geometry IndexedLineSet {
# interni poduzel se souradnicemi bodu
coord Coordinate {
point [
-4 -4 -4,
4 4 4,
4 -4 4,
-4 4 -4,
4 4 -4,
-4 -4 4,
4 -4 -4,
-4 4 4
]
}
# indexy do predchoziho pole
# (pouze usecky) oddelene
# indexem s hodnotou -1
coordIndex [
0 1 -1
2 3 -1
4 5 -1
6 7 -1
]
}
}
# ---------------------------------------------------------
# finito
# --------------------------------------------------------- 
Zdrojové kódy s demonstračními příklady i přiloženými texturami můžete získat pod tímto odkazem.
9. Obsah následující části tohoto seriálu
V další části seriálu o grafických formátech a metaformátech si ukážeme práci s multimédii a také s takzvanými senzory, které se používají pro přidání interaktivních prvků do vytvářených prostorových scén, tj. prvků, které určitým způsobem reagují na pohyb uživatele (resp. jeho avatara) či manipulaci s jednotlivými objekty.
ČLÁNKY DO MAILU