Tutorial Game Asset: Texture Parte 1

Stai vedendo 2 articoli - dal 1 a 2 (di 2 totali)
  • Autore
    Articoli
  • #580303

    Fangetto
    Partecipante
    • Veterano
    • ★★
    • Post sul Forum 630
    • Associato Blender Italia

    Rieccomi qua con un altro tutorial sui Game Asset, questa volta affrontiamo le texture PBR, creandole utilizzando Blender e Krita.

    Come per la modellazione anche la dimensione delle texture deve essere ottimizzata a partire da come sono realizzate le UV, come visto nell’altro tutorial del pozzo, creare magari un oggetto con 3-4 materiali con texture riempite al 60% è a dir poco sbagliato, come lo è utilizzare una texture di dimensioni sproporzionate rispetto all’oggetto, la prassi (quando possibile) è raccogliere più oggetti in una singola texture soprattutto se statici e dimensionare la texture in base alla dimensione che l’oggetto avrà sullo schermo.

    Vediamo un esempio

    L’immagine sopra è uno screenshot in Unity di dimensioni 900×800, la dimensione del coltello a schermo è quindi superiore a quella che avremo in una visuale in prima persona a 1080p, nel primo coltello da destra si vede il degrado della texture, nelle altre 3 io non vedo differenze significative.
    Partendo da destra le texture sono: 256×256 – 512×512 – 1024×1024 – 2048×2048.
    Se a video la differenza è quasi inesistente non lo è per la nostra scheda video infatti il set (color/metallic/rougness/normal) da 512×512 pesa 726kb contro i 7.31 Mb del set da 2048, un bel risparmio direi….
    ora guardiamo quest’altra immagine sempre in Unity

    Sia il ponte che il carro hanno un buon impatto visivo e le texture sono una 2048×2048 per il ponte e il carro una 1024×1024 più una 256×256 per la texture dei chiodi ( che potrà poi essere condivisa con altri oggetti), per realizzare una casa di piccole/medie dimensioni si potrà utilizzare una set fi texture 4086×4086 con i dovuti accorgimenti, tipo usare la rougness e metallic maps da 2048, l’utilizzo di file .dds ecc.. dipende comunque da quanti edifici si avranno in scena perchè un set di texture 4k se gestito male può tranquillamente arrivare a pesare 100mb, per cose più grandi si ricorre alla modularizzazione o al tiling.

    Quindi tutto dipende dalle dimensioni della scena che andremo a realizzare,la cosa importante è che il livello di dettaglio sia proporzionato, come esempio prendiamo una serie di cubi, uno 4x4m uno 2x2m ed uno 1x1m, se su quello 4×4 utilizziamo una texture 4086, su quello 2×2 utilizzeremo una texture da 2048 e una 1024 per quello 1×1.

    Veniamo alla realizzazione delle Texture, sui vari siti che più o meno tutti conosciamo si trovano diversi materiali pbr già pronti che potremo utilizzare per i nostri progetti, vediamo però come crearci i nostri materiali pbr utilizzando Krita.

    Questa è la procedura che utilizzo per creare la texture base per delle tavole di legno, passando per la creazione della texture seamless. Per prima cosa dobbiamo trovare la nostra immagine delle tavole, la cosa importante è che abbia illuminazione neutra e che sia di dimensioni adeguate, quella che andrò ad utilizzare è 2200x1180px e come vedremo dopo per il seamless questa immagine non è il massimo…

    Bene apriamo Krita e carichiamo la nostra immagine

    Cominciamo creando la Normal Map

    Duplichiamo il livello Base e lo desaturiamo (Filtro – Regola – Desatura) e selezioniamo medio, questa operazione può variare da texture a texture, la cosa importante è avere un buon contrasto fra bianco e nero

    Una Volta desaturato utilizziamo il filtro Rilevamento dei Bordi (filtro – Rilevamento dei Bordi – Rilevamento dei bordi) i comandi che utilizzerò sono tutti nel menu filtro quindi smetto di indicarveli li potete vedere dalle immagini

    A noi i Bordi servono in nero quindi utilizziamo il filtro inverti

    Diamo una leggera sfocatura all’immagine

    Ora riduplichiamo il layer del colore e lo desaturiamo come abbiamo fatto prima, poi impostiamo il Layer dove abbiamo rilevato i bordi su Multiply e applichiamo il filtro Regolazione del Colore

    in modo da tirare fuori il più possibile le venature

    Applichiamo il filtro Regolazione del Colore al Layer desaturato in modo da attenuare il più possibile la parte grigia cercando di far rimanere le venature visibili

    Nel caso il contrasto bianco nero sia troppo marcato (come in questo caso) applichiamo ancora il filtro sfuma sul layer dei bordi

    A questo punto uniamo i 2 layer e applichiamo il filtro Altezza alla Mappa Normale

    e abbiamo la nostra normal map, ora passiamo alla creazione della rougness Map, come prima duplichiamo il layer del colore e lo desaturiamo, questa volta però l’obbiettivo è ridurre il range del tono di grigio il più possibile impostiamo quindi il filtro su Minimo

    Utilizziamo ora il Filtro Regolazione del colore

    Più la texture sarà bianca più la rougness sarà accentuata, non è detto che otteniate subito il risultato che volete, per regolarla semplicemente aprite blender caricate le texture in un nodo principled e regolate di conseguenza utilizzando sempre il Filtro Regolazione del colore, o se preferite potete lavorare direttamente in Blender utilizzando il nodo Rgb Curves.

    Se state realizzando un materiale metallico il procedimento per la texture metallic è uguale a quello della texture rougness, tenedo presente che il bianco sarà un materiale metallico e il nero no.

    Passiamo adesso in Blender e finiamo il nostro materiale PBR

    Create un piano con misure corrispondenti alla texture, nel mio caso quindi 2,2m x 1,18m create le UV e applichicate un materiale con il nodo principled.

    Caricate le Texture nel nodo principled in questo caso ho deciso di dare una mano alla normal map per creare le fibre del legno inserendo una Noise texture nel nodo height, per farlo ho usato la sequenza di nodi che vedete nell’immagine.

    La noise Texture è collegata al nodo mapping (che è collegato alle UV) lo ho utilizzato per stirare la texture noise nel verso delle fibre, ho collegato poi la texture noise al nodo di conversione in bianco e nero e al nodo ColorRamp che ha la funzione di tagliare i livelli del colore, se consideriamo una scala di grigi da 0 a 10 impostando il valore minimo del ColorRamp a 4 e il massimo a 7 tutti i valori inferiori a 4 diventeranno 4 e tutti quelli superiori a 7 diventeranno 7 lasciando la sfumatura fra i 2 valori, avvicinando i 2 valori del nodo ColorRamp ci sposteremo verso l’effetto “Mucca”.

    Il nodo ColorRamp entra in un nodo mixColor impostato su Darken insieme alla texture del colore principale per scurire un poco le venature che abbiamo creato e da li nell’ingresso Base Color del nodo principled, inoltre il nodo ColorRamp prima di entrare nel nodo bump passa attraverso un nodo MixColor dove viene mixato con il colore nero per limitare l’effetto di bump.

    A questo punto il materiale è pronto, possiamo quindi passare alla realizzazione del modello ma prima vediamo come creare una texture seamless, per prima cosa creiamo la tavole in 3d, avendo la texture mappata su un piano con misure corrispondenti è cosa semplice, usando ctrl+R creiamo dei loop.

    Passiamo in modalità display material e utilizzando il vertex slide create il contorno delle tavole,

    ricordate di aver abilitato l’opzione correct uvs, è fondamentale che vi spostiate solamente lungo l’asse perpendicolare alle tavole.

    Finito di fare il contorni distacchiamo le tavole dall’oggetto selezionandole e premendo P.

    Eliminiamo l’oggetto da cui abbiamo ricavato le tavole e andiamo ad estrudere le tavole nell’oggetto creato premendo P, impostiamolo shading smooth all’oggetto e creiamo i bevel.

    Create le tavole dobbiamo creare un nuovo piano e cominciare a posizionale, nel mio caso le tavole sono molto lunghe e poche quindi non verrà proprio una bella texture cmq per spiegare come realizzare una texture seamless è più che sufficente, l’importante è il metodo, vediamolo:

    posizionate le tavole sopra il piano, come prima tavola in alto sceglietene una con un profilo abbastanza regolare, create un loop con ctrl+R e posizionate il loop il più preciso possibile sul profilo del piano aiutandovi con lo snap to vertex, a noi serve che questo loop sia parallelo al profilo del piano quindi selezionate il loop tenendo premuto alt e cliccando su uno degli edge, attiviamo lo scale (dovrebbe essere “S” io ho un layout completamente personalizzato e le mie shortcut sono completamente differenti quindi potrei sbagliarmi) premiamo Y poi 0 (zero) in questo modo tutti i vertici si allineeranno rispetto all’asse y ripetiamo lo snap che sara millimetrico ma è importantissimo che sia preciso.

    Ora selezioniate l’intera tavola e utilizzando lo snap posizioniatela più o meno come nell’immagine, l’importante è che uno dei loop perpendicolari coincida con quello del piano e che rimanga dello spazio vuoto fra tavola e piano sul lato opposto, utilizzando edge split dividete la tavola.

    Prendete il troncone di tavola eccedente e usando lo snap e muovendosi solamente sull’asse delle X posizionatelo allineato all’edge del piano opposto, con ctrl+R create un loop in prossimità dell’inizio dell’altra parte della tavola e dividete in quel punto, spostate la parte di tavola sovrapposta e richiudete il troncone che avete appena riposizionato.

    Ora selezionate il loop longitudinale su entrambi i pezzi della tavola, dividetelo con edge split, prendete la parte in alto e utilizzando lo snap posizionatela sull’edge inferiore del piano.

    Ripetete l’operazione di taglio e posizionamento laterale per tutte le tavole, nel caso vi rimanga dello spazio vuoto non sufficiente a posizionarci un’altra tavola fra la parte di tavola finale inferiore e l’ultima tavola che avete posizionato scalate leggermente tutte le tavole in Y una fila alla volta,

    non resta che aggiungere un pò di random alla testa delle tavole e il posizionamento è finito.

    Prima di passare al Baking verificate che il tiling sia venuto bene duplicando l’oggetto e snappandolo su tutti i lati o creando un array

    Passiamo al Bake, applicate al piano che avete sotto le tavole un materiale nero e unitelo all’oggetto delle tavole (join) , create un’altro piano delle stesse dimensioni e posizionatelo sopra alle tavole, create le UV, applicate un materiale chiamatelo ad esempio Bake Material

    Andate nell’image editor e create una nuova immagine 2048×2048, chiamatela con il nome vhe vorrete dare alla texture, esempio Old_Planks_Tile_Diffuse, e assegnatela come image texture al materiale Bake Material, in questo caso non c’è alcuna texture o impostazione del canale metallic nell’oggetto sorgente se invece fosse presente disconnettete l’immagine dal nodo principled o impostate il valore a 0.

    Selezionate prima l’oggetto con le tavole poi il piano e procedete con il bake impostandolo come da immagine

    Avrete adesso la texture color del materiale, salvatela dall’image editor, e create una nuova immagine con suffisso _Rougness impostatela per essere il target del bake come avete fatto prima, andate nel node editor dell’oggetto con le tavole e inserite la texture rougness al posto del color, e impostate il colore del piano sottostante vicino al bianco, procedete con il bake e salvate la texture.

    Se avete la texture metallic ripetete l’operazione connettendo la texture metallic nel nodo color, impostate il piano sottostante su nero, create la nuova immagine ecc…

    Passiamo adesso alle texture delle normali, create una nuova immagine con suffisso _normal_bake

    impostate il bake come in immagine ed effettuatelo.

    Adesso la chicca di questo tutorial, create una nuova immagine con suffisto normal_Emit e impostatela come target del bake, eliminate il piano sotto le tavole, andate nel material editor e nel materiale delle tavole create il seguente nodo

    Il nodo Tangent impostatelo su UVMap, I nodi Cross Product e Dot Product sono dei nodi Vector Math impostati come da nome dal menu a tendina, a questi nodi connette l’uscita del nodo bump del materiale come da immagine, il nodo Vector Curves va impostato come da immagine, in tutti e 3 i canali (X – Y – Z) impostate il punto di partenza con Y a 0 come vedete nell’immagine, il nodo Gamma impostatelo con gamma 2.2 come da immagine, disconnettete il nodo principled dall’output

    create uno shader emission e connettetelo all’output e alla catena di nodi che abbiamo creato.

    Impostate il Bake come da immagine ed eseguitelo

    Vi consiglio di crearvi un gruppo per questo nodo in modo da poterlo richiamare rapidamente con append per utilizzarlo in altri progetti invece di ricrearlo tutte le volte, non vi ho ancora detto cosa fa… questo nodo trasforma e combina tutto quello che entra nel nodo bump, lo trasforma in normal map e vi permette di farne il bake…

    Non ci resta che tornare in Krita per creare la Texture Normal Map finale, apriamo le 2 normal map che abbiamo creato, inseritele in 2 layer separati in una sola immagine e impostate il layer superiore su combina normal map

    Ecco il test/risultato  finale

    Per controllare che il materiale sia venuto bene inserite nel test la versione hd, non si deve notare la differenza.

    Se volete creare texture seamless con componenti non regolari come le tavole (tipo pietre, erba ecc…) potete utilizzare le booleane per tagliare l’oggetto precisamente sull’edge e seguire poi il medesimo procedimento.

    Sta diventando veramente troppo lungo questo tutorial, interrompo qua la prima parte e rimando (a breve) la creazione del modello e delle decals alla seconda parte.

    Un Ringraziamento a Julien Deville per il nodo Normal to Map, i suoi corsi sono molto interessanti e ben realizzati ve li consiglio.


    Don’t Feed The Trool
    #580581

    Fangetto
    Partecipante
    • Veterano
    • ★★
    • Post sul Forum 630
    • Associato Blender Italia

    Proseguo  con la parte 2 del tutorial riguardante le Texture, nello specifico il tiling e le texture detail, iniziamo dal tiling, è consuetudine associare il tiling con le texture seamless ma in realtà queste sono 2 cose distinte, le texture seamless si usano sfruttando il tiling ma il tiling si può sfruttare anche senza texture seamless, quali sono i vantaggi del tiling rispetto all’utilizzo di texture tradizionali? Semplice, con una texture di dimensioni inferiori avremo potenzialmente più dettaglio che con una texture normale, ma come vi ho detto nei vari tutorial precedenti il livello di dettaglio dovrebbe essere sempre il più simile possibile quindi quando lo utilizziamo? Quando per avere lo stesso dettaglio degli altri oggetti la texture sarebbe enorme o si utilizzarebbero diverse texture e quindi diversi materiali, cosa molto deleteria in termini di prestazioni, ovviamente questa tecnica non è priva di difetti, ne di rapida realizzazine, il principale difetto è che avremo la ripetizione della texture e per creare gli effetti tipo logorio, macchie ecc.. la cosa diventa un pò più problematica, si puo fare ma non verrà come con il texturing normale (in Unity, in Blender non ci sono impedimenti ma quando parliamo di rendering certe ottimizzazioni sono superflue).

    Come funziona questa tecnica? Come funziona il tiling immagino lo sappiamo tutti, la texture viene ripetuta in X e in Y, quello che dobbiamo fare è un lavoro di selezione nelle nostre UV, raggrupparle per tipo di materiale e dividerle in base al numero di tile che vorremo utilizzare, capire di quanto spazio abbiamo bisogno sulla texture per ogni singolo materiale, creare il nostro template e la texture. La parte più impegnativa è quella della sistemazione delle UV una volta che abbiamo capito più o meno come deve venire la texture la cosa diventa semplice.

    Vediamo un esempio:

    Come si può vedere dal layout delle UV ho utilizzato un tile 3×3, ovviamente resteranno diversi spazi vuoti ma cmq noi stiamo moltiplicando il dettaglio della ns texture quindi non ci pesa più di tanto, in questa texture ci sono ben 6 materiali, il livello di dettaglio di ogni materiale è di 2048×2048 come la dimensione della texture, anche se avessimo 3 tile completamente inutilizzati avremo il dettaglio di una texture 6144×4096 utilizzando una singola 2048×2048.

    Una volta capito la dimensione che deve avere ogni materiale nella texture procediamo nel seguente modo: creiamo un plane, (per comodità lo chiamerò Plane Material) facciamo le UV, lo dividiamo in base alle esigenze dei materiali, applichiamo e regoliamo i materiali.

    A questo punto dobbiamo creare un altro piano (che chiamerò Plane Bake) lo mettiamo esattamente sopra l’altro, creiamo una nuova immagine nell’uv editor, creiamo un nuovo materiale, impostiamo l’immagine appena creata come attiva e realizziamo il bake del diffuse dal Plane Material al Plane Bake, salviamo l’immagine che sarà la copia del poligono sottostante, inseriamo la texture nel diffuse del materiale del Plane Bake e utilizzando i nodi texture coordinate e mapping moltiplichiamo la texture in base alle nostre esigenze.

    Creiamo una nuova immagine, la inseriamo come immagine attiva nel materiale del Plane Bake e realizziamo ancora il bake del diffuse questa volta però dal Plane Bake al Plane Bake (togliendo la spunta da Selected to Active nel tab Bake)

    quello che avremo sarà un template per sistemare accuratamente le UV

    A questo punto non resta che sistemare le UV e sperare di aver fatto bene i calcoli, se qualcosa non è come previsto modificate il Plane Material in modo da sistemare il problema e ripetete i bake.

    Quando sarete soddisfatti fate il Bake delle altre mappe come abbiamo visto nell’altro tutorial.

    Questo il risultato utilizzando una singola 2048×2048, (devo rivedere le teste delle travi in basso, non mi piace per niente l’effetto che danno….)

    Ora passiamo a come fare le Decals

    Per creare le Decals possiamo seguire diverse vie, Per esigenze di rendering si utilizza un secondo set di UV quando invece si tratta di game asset l’opzione più comune è la creazione di un poligono da posizionare a pochi mm di distanza dall’oggetto con una texture con trasparenza.

    Per la creazione della texture si ricorre al programma di fotoritocco e allo strumento di baking, mentre per il posizionamento si può fare manualmente o sfruttando un addon che vedremo dopo.

    Dopo aver creato gli oggetti di cui fare il baking e le nostre immagini in Krita che assegneremo a dei plane, uniamo utilizzando il comando join tutti gli oggetti che comporranno la nostra texture ed eseguiamo il baking utilizzando le stesse tecniche che abbiamo utilizzato fino ad adesso, (un plane con sotto l’altro oggetto), ricordate di impostare il margin a 0 perchè l’immagine della texture color sarà quella che ci darà il canale alpha.

    Ottenuto il nostro set di texture apriamo krita, uniamo le normal Map, ripuliamo la texture color (quando si effettua il baking di un poligono con trasparenza questa viene stampata in nero dovremo eliminarla in questa fase) e utilizzando il filtro drop shadows (lo trovate fra i filtri G’MIC-qt) creiamo una leggera sfumatura nera ai bordi delle immagini servirà per smorzare la transizione fra le decals e il resto.

    Creiamo i Plane ai quali applicheremo le decals, dimensioniamoliin base alla dimensione della decal applicata, applichiamo il Materiale delle Decals, creiamo le UV e posizioniamole, cercando di ridurre la parte trasparente al minimo indispensabile.

    Passiamo al posizionamento, fatta eccezione per decals che richiedono una certa cura nel posizionamento, si può utilizzare l’addon gratuito Paint Clones ( https://blenderartists.org/t/mifthtools-addon/619227 ) che ne rende molto semplice l’applicazione, questo tool posiziona l’origine dell’oggetto nel punto dove cliccherete posizionando in automatico l’orientamento dell’oggetto rispetto alla faccia dove volete applicare la decals, permette inoltre di dare in automatico del random alla nostra decals, vi ho detto che le decals devono stare leggermente distaccate dall’oggetto sottostante per evitare fenomeni di flickering, quello che dobbiamo fare per rendere questo processo automatico utilizzando l’addon è molto semplice, andiamo in edit mode all’interno dell’oggetto decals selezioniamo il poligono e lo posizioniamo leggermente rialzato rispetto all’origine

    l’impostazione dell’addon è molto semplice e intuitiva, questo è quello che dobbiamo fare, selezioniamo l’oggetto Decal (o qualunque altro oggetto, anche per posizionare ad esempio la vegetazione è veramente un ottimo tool), clicchiamo su Pick Source

    Impostiamo i valori di Random, selezioniamo l’oggetto al quale vogliamo applicare le decals, clicchiamo su Paint Clones e iniziamo a “paintare” le decals.

    Finito di “paintare” il primo oggetto premendo il tasto opposto a quello di selezione del mouse (se avete impostato il tasto destro per selezionare gli oggetti premete il sinistro o l’opposto) uscirete dalla modalità painting dell’addon, selezionate un’altro oggetto e proseguite.

    Ora  bisogna selezionare tutti gli oggetti “paintati” dall’outliner (inutile dire che dare nomi corretti agli oggetti è cosa importante) e unirli all’oggetto sul quale stavamo paintando usando il comando Join.

    Per oggetti più complessi tipo corde o catene creiamo l’oggetto con una striscia di poligoni, la posizioniamo e creiamo le UV, vi ricordo che i Game Engine hanno il backface culling quindi una volta create le UV duplichiamo tutti i poligoni della striscia e invertiamo le normali.

    Ecco il risultato

     

    Come al solito spero che questo tutorial sia utile e vi ringrazio per la lettura.


    Don’t Feed The Trool
Stai vedendo 2 articoli - dal 1 a 2 (di 2 totali)

Devi essere loggato per rispondere a questa discussione.