← naspäť na zoznam cvík

15.4

06 : textúry

Textúry použité v cviku: obr.zip

O čom je vlastne textúrovanie?

Okej, máme model. Ako na neho nalepiť textúru?

Šak takto, nie?

Ale vážne. Nie vždy je to také jednoduché.

Čisto matematicky, máme konečný počet plôch a každému musíme priradiť nejaký obrázok. V informatike je ale nutné pozerať aj na efektivitu. Textúra, čiže obrázková informácia zaberá veľa miesta, takže je dobré používať čo najmenšie množstvo obrázkov. Hlavne pri veciach, kde je zjavné, že sa textúra opakuje, čiže s istotou vieme využiť ten istý obrázok na viacero stien modelu.

Samotný proces sa nazýva texture mapping. Pôvodne išlo čisto iba o priradenie farby/textúry. V dnešnej dobe sa pomocou textúr robí kopa ďalších krásnych efektov, niektoré si aj ukážeme.

Takže najprv si trochu predefinujeme našu úlohu. Máme textúrový priestor v ktorom je naša textúra (jeho súradnice sa štandardne označujú UV) a náš model. Našou úlohou je každému vrcholu modelu priradiť (nejakým zobrazením f) bod v textúrovom priestore. Čiže vlastne robíme niečo takéto:

Toto vlastne budeme robiť väčšinu času.

Okrem manuálneho priraďovania pre každú stenu existuje viacero iných prístupov, napríklad textúrovanie pomocou pomocných telies. Princíp je taký, že textúru najprv prilepíme na nejaké teleso, ktoré sa textúruje ľahko (napríklad kocka, alebo valec) a následne vytvoríme zobrazenie medzi našimi pomocným telesom a naším modelom.

Jednodochý príklad: chceme otextúrovať vázu. Otextúrujeme si teda najprv valec, položíme ho okolo vázy a potom priradíme každému bodu vázy bod valca, ktorý leží na rovnakej polpriamke vedenej zo stredovej osi.

Tých možností pomocných telies aj samotného priradenia je viacero, nejak zvlášť sa tomu venovať nebudeme.

Procedurálne generované textúry

Existujú aj matematicky generované textúry, hovorí sa im procedurálne. Na vstupe nemáme žiaden obrázok, ale nejakú funkciu, ktorá pre každý pixel vypočíta hodnotu farby (R,G,B). Výhodou je, že to nezaberá takmer žiadne miesto, a tiež to, že si ich vieme vygenerovať pre ľubovoľné rozlíšenie.

Jednoduchý príklad je napríklad šachovnica. Vymyslím si textúru, ktorá strieda biele a čierne kocky, ako šachovnica. Koľko vstupných informácii na generovanie potrebujeme? Iba jednu, číslo, koľkokrát to nasekám. Vyzerá to teda takto:

Takže miesto veľkého obrázku stačí, ak si budem pamätať jedno číslo. To je veľká úspora. Nevýhodou je, že tým získam iba veľmi takúto konkrétnu textúru. Mohla by som si povoliť viac vstupných informácií, napríklad farby kociek, alebo nejaké zošikmenie. To závisí od toho, čo od našej textúry vlastne chceme.

Typickým príkladom veľmi dobrej procedurálnej textúry je Perlinov šum (wiki:Perlin_noise). Ten si najskôr vygeneruje niečo takéto (aj s použitím náhody):

Následne vhodným spôsobom takéto fľaky skladá dokopy cez seba, pričom stále sú menšie a menšie. Pri vhodných vstupných hodnotách vytvára parádne textúry a dá sa použiť ako podklad pre generovanie textúr simulujúcich organické štruktúry.

Rôzne textúry generované pomocou Perlinovho šumu.

Procedurálne generované textúry sme už v blendri videli. Dávali sme si ich do pozadia (boli to tehličky a také farebné fľaky)

Priradenie textúry jednej stene.

Okej, najprv priradíme nejakú textúru jednej stene. Otvorte si blender, zmažte kocku a mieste nej vložte plochu (plane). Nezabudnite si prepnúť Viewport Shading na Rendered (aby sme videli aj textúry).

Textúra je vlastnosť materiálu. Priradíme našej ploche materiál a miesto farby (Base Color) si pomocou malého kolečka vedľa vyberieme Image Texture. Kliknite na open a vyberte váš obrázok. A je to tam. Zatiaľ v pohode.

Teraz povedzme, že máme trojuholníkovú textúru, ktorú chceme nalepiť na trojuholník. Prerobte si v Edit Mode vašu štvorcovú plochu na trojuholník a priraďte jej nejaký trojuholníkový obrázok.

Už to nie je také pekné. Keďže to blender nezvládol automaticky, musíme urobiť zmenu v textúrovom priestore. Používa sa tu na to takzvaný UV-editor.

Predtým ešte pár slov k pracovnej ploche. Obrazovku máme rozloženú na niekoľko okienok. V ľavom hornom rohu každého okienka máme vždy kocočku, ktorá nám ukazuje, aké okno tam máme momentálne otvorené.

V základnom nastavení máme otvorené štyri okienka.

Každé okienko si vieme vymeniť za ľubovoľné iné. Vieme im meniť veľkosť tým, že potiahneme za hranicu dvoch okienok. Obrazovku si vieme podľa potreby deliť na viacero okienok, alebo ich zasa spájať.

Napríklad Timeline (ten sa používa na animovanie) teraz potrebovať nebudeme, tak si ho zrušíme. Pravým klikom na hranici dvoch okienok si vieme vybrať, či chceme okienka spájať, alebo ešte viac deliť. Pri spájaní vám tam vyskočí taká veľká šípka, ktorá sa pýta ktorú oblasť chcete prekryť ktorou.

Rozdvojiť okienko si vieme aj tým, že potiahneme za pravý horný roh. Rozdvojte si hlavný 3D Viewport a otvorte si v druhej polke UV Editor.

A teraz môžeme ísť opraviť našu textúru. Najprv si náš mesh musíme na našu textúru „rozbaliť“. Prepnite sa do Edit Mode, označte si všetko a kliknite na UV → Unwrap.

(ak sa vám tam naša textúra neukáže, môžete si ju otvoriť manuálne)

Teraz asi vidíme, kde je problém. V UV-priestore, tj v textúrovom priestore vidíme, ako k nemu máme priradený náš trojuholník. A je to zle. Takže si to opravíme. V UV-editore vieme presúvať (G), škálovať(S) a rotovať(R) vrcholy, hrany a steny rovnako ako v 3D priestore.

Opravte si obraz našeho trojuholníka v textúrovom priestore. Nemusíte to robiť presne tak ako ja, rovnako môžete napríklad po jednom popresúvať všetky tri vrcholy na správne miesta.

Dobre, takže to by sme mali. Pre jednu stenu. Teraz znie otázka, ako rozbaliť nejaký zložitejší objekt, ktorý má veľa stien.

Textúrovanie objektu.

Za prvé, blender má pre všetky základné tvary urobené inteligentné rozbaľovanie. Pri určitých typoch menších úprav sa to dá využiť. Vyskúšame si to. Urobíme si vázu.

Vráťte sa do Object Mode, zmažte si trojuholník a vložte nový objekt. Vyberieme si valec. Ak si ho rovnakým spôsobom rozbalíte teraz, zistíte, že sa rozbalí na dva kruhy (podstavy) a jeden veľký obdĺžnik (plášť). To je celkom fajn.

Prerobíme si ho na vázu. Najprv mu dáme trochu vázičkovitejší tvar. Za prvé, hornú podstavu nechceme, tú zmažeme. Za druhé, chceme si ho horizontálne nasekať, aby sme ho mohli tvarovať.

A ideme na to. Toto sú veci, čo už sme robili, takže dám len nejaké hinty. Otočte si pohľad spredu, aby ste sa na to pozerali kolmo (1 na numerickej klávesnici). Ak si prepnete Viewport shading na Wireframe, budete môcť pri hromadnom označovaní vrcholov chytať aj zadné vrcholy. Teraz môžete jednotlivé horizontálne okruhy zväčšovať, zmenšovať a presúvať. (Ak chceme posúvať iba v smere osi Z, použijeme skratku G Z. Tieto písmenká stačí iba kliknúť postupne za sebou, nemusíte ich držať, ani nič také). V prípade potreby si model viete aj dodatočne ešte viachorizontálne nasekať.

Netrápte sa tým, že je váza príliš hranatá. To vyriešime neskôr. Zatiaľ chceme dostať napríklad niečo takéto.

Teraz vyriešime hrúbku stien. V realite je každá váza je vytvorená z materiálu, ktorý má nejakú hrúbku. Zatiaľ máme iba nekonečne tenké steny. Ilustračne, ide nám o toto:

Ako to dosiahnuť? Pamätáte si Extrude (skratka E)? Ten vedel vytiahnuť zo steny objem. To je presne to, čo chceme.

Teraz vyvstáva otázka, ktorým smerom sa nám steny vytiahnu. Ak si označíte celú vázu a kliknete E, extruduje sa vám to všetko jedným smerom. To nie je úplne ono. Našťastie je tu možnosť extrúdovať pozdĺž normál, to znamená kolmo na plochu, pre každú plochu zvlášť. (vzdialenosť extrudu kontrolujete pohybom myšou, potvrdíte ľavým klikom)

Už to začína vyzerať lepšie. Možno ešte keby sme ju trochu zaguľatili. Ešteže je tu náš starý dobrý kamarát Subdivision Surface. (ak máte pomalý počítač, tak opatrne s tým) A smooth shading.

Tak a teraz mu poďme dať nejakú vhodnú textúru. Toto je presne situácia, kedy chceme Seamless Texture, čiže textúru, ktorá naväzuje sama na seba. Vďaka tomu nám pekne obalí vázu bez toho, aby bol niekde zlom. Ak si vyhladáte cez google Seamless Texture, nájde vám to kopu pekných Aj platených, aj zdarma, aj za registráciu. Na vázu by sa hodil napríklad mramor. Alebo niečo kvetinové (floral pattern). Alebo nejaké geometrické art deco? Je to na vás.

Takže teraz si urobíme ten istý postup, ako pri mačiatkach. Prepnite si Viewport Shading na Rendered (aby sme videli aj textúry). Pridajte našej váze nový materiál a miesto Base Color kliknite na to koliečko vedľa a vyberte Image Texture. Otvorte danú textúru.

Prepnite na edit mode a pozrite si v UV-Editore, ako je vaša textúra namapovaná. Teraz bude mať dosť veľa vrcholov, ale stále je rozložená podobne, ako bol pôvodný kužeľ. Mne sa napríklad nepáči, ako je na na boku vázy roztiahnutá. Takže poďme to opraviť.

V UV priestore sa mi obraz meshu rozdelil na dve samostatné komponenty. Jeden z toho prislúcha spodku vázy (na tom mi až tak nezáleží) a druhý stenám (ten chcem upraviť). Teraz mi príde praktická skratka L, ktorá označí celú komponentu pre daný označený vrchol. Komponentu prislúchajúcu plášťu si natiahnem do výšky, až kým nie je textúra požadovane pekná. Bude sa síce prekrývať s tým kolieskom, čo predstavuje podstavu, ale to nie je problém. Znamená to iba to, že na dvoch miestach nášho objektu budem mať ten istý kúsok textúry a to mi nevadí.

Skúste si trochu zlepšiť osvetlenie a upraviť materiálové vlastnosti (odporúčam dať plný Clearcoat). Nebojte sa využiť viac svetelných zdrojov, môžete zmeniť aj pozadie. Už by to mohlo vyzerať aj celkom pekne. Pošlite mi vyrendrovaný výsledok!

Výroba textúry na mieru.

Teraz sa pozrieme na vytváranie textúry na mieru. Ideme si spraviť 3D tetrisovú kocku. Zbavte sa vázičky a pridajte si nový objekt, obyčajnú kocku.

Ak si ju prepnete do Edit Modu, môžete vidieť, že už je v UV-editore pekne rozbalená. Pomocou Extrude ju prerobte na nejakú 3D tetrisového typu.

V UV-editore vidíme, že náš unwrap (náš rozbalený mesh) už nie je taký vhodný. Pre každý Extrude zobrazil všetky nové vzniknuté steny na to isté miesto. V blendri existuje aj inteligentný automatický unwrap, (Smart UV Project), môžete si ho vyskúšať, ale my si to teraz spravíme ručne.

V podstate ide iba o to, povedať blendru, kde chceme náš mesh narezať. Ak to spravíme inteligentne, tak nám ho rozbalí pekne. Ak to spravíme debilne, tak nám ho rozbalí škaredo.

Sú na to určené tzv. švy, (v angličtine Seams). Najprv si všetko predrozbalené zrušíme pomocou reset.

Teraz si narobíme švy podľa našich predstáv. Prepnite sa na označovanie hrán a označte všetky hrany, pri ktorých chcete, aby v tých miestach blender model rozkrájal.

Je dobré krájať to logicky, teda nechať si pri sebe steny, ktoré chceme. Napríklad ponechať bočné steny vkuse, alebo tak. Dôležité je vymyslieť si to tak, aby bolo po rozkrájaní možné model rozložiť naplocho tak, aby sám seba neprekrýval. Pokojne to môžete riešiť tým, že ho rozkrájate na viacero komponentov.

Keď budete spokojní s výberom hrán, zaklikneme si, aby sa z nich stali švy (UV → Mark Seam). Na obrazovke sa nám zafarbia načerveno. (Prípadne môžete aj dodatočne ďalšie švy pridávať a odoberať pomocou Mark Seam/Clear Seam).

A môžeme zasa rozbaľovať. Takže označíme si všetko a rozbalíme.

Ak sa nám nepáči, ako nám jednotlivé komponenty blender poukladal na plochu, môžeme si ich popresúvať.

Teraz vieme, ako je náš mesh rozbalený do textúrového UV-priestou. Takže si môžeme urobiť textúru na mieru. Celý rozbalený mesh si označíme, vyexportujeme, niekam uložíme (Export UV Layout) a otvoríme v gimpe (alebo v niečom grafickom).

Vrstvy - Layers

V gimpe využijeme jednu vec, čo sme minule nepreberali a to sú vrstvy. Totiž UV layout sa nám vyexportoval ako sivá sieť na priesvitnom pozadí. My chceme využiť túto sieť, aby sme vedeli, kde máme farbiť, ale vo výslednej textúre ju mať nechceme.

Najprv niečo k tomu, čo sú to vrstvy (layers). Každý obrázok v gimpe môže mať ľubovoľne veľa vrstiev. Vizuálne sa prekresľujú jedna cez druhú. Tam kde je nejaká priesvitná, vidíme cez ňu ďalšiu. Takto môžeme každú editovať samostatne, bez toho, aby sme ovplyvnili ostatné.

Najprv si to ukážeme na samostatnom prázdnom obrázku. Manúčko pre layers sa nachádza vpravo. Viete si tam vytvoriť nové vrstvy a používať ich. Pomocou očka si vieme vybrať, ktoré vrstvy vidíme a ktoré nie.

Teraz naspäť k našej UV sieti. Keď si ju otvoríte v gimpe, uvidíte, že okrem samotnej siete je vŠade priesvitná (znázornené sivou šachovnicou). Vytvoríme si samostatný layer, nazveme si ho textura, (na ňom bude naša textúra) a presunieme ho POD sieť. Zmena poradia layerov sa dá robiť pomocou dvoch malých šípočiek dole.

Teraz si môžeme vyfarbiť náš útvar podľa chuti. Maľovať budeme na vrstve „textura“. Vyexportovaná sieť nám poslúži ako pomocné čiary. Nebojte sa maľovať mimo rozbalenej siete, to sa aj tak nikam nezobrazí.

Môj výsledok vyzerá takto:

Ak chcem využiť vzniknutú textúru môj model, potrebujem si ju vyexportovať bez pomocnej siete. Takže zneviditeľníme si sieť pomocou očka, a uložíme ako .png pomocou File → Export as.

A teraz ju môžeme využiť na náš model. Takže znova to isté: priradíme objektu nový materiál, materiálu miesto Base Color zvolíme Image texture a otvoríme náš obrázok. A už bude pekne napasovaný presne na mieste. Náhoda???

Znova, ak sa vám to podarí, pošlite mi render! Môže byť aj škaredý. Nech viem, ako vám to šlo :)