Articoli

Papervision3D - Affiancamento delle texture

Nello sviluppo per il web, la dimensione del file è sempre stato qualcosa da tenere in considerazione.
Utilizzare un sacco di texture con Papervision3D può presto provocare un pesante download.
Eventuali accorgimenti che mantengono la dimensione del file più bassa possibile dovrebbero essere presi in considerazione, soprattutto quando si lavora su progetti di grandi dimensioni.

Una tecnica intelligente spesso utilizzata in 3D è l'affiancamento delle texture. Si ripete la texture in direzione orizzontale e verticale, creando una nuova struttura più grande di quella originale.
Il codice descritto di seguito mostra come funziona ciò. Per questo esempio, utilizziamo un materiale bitmap con una dimensione di 128 per 128 pixel e creiamo un piano di 1024 per 512 unità. L'immagine verrà caricata 8 volte in orizzontale e 4 volte in senso verticale.
In primo luogo possiamo semplicemente istanziare BitmapFileMaterial come si farebbe normalmente .

private function init():void
{
  var material:BitmapFileMaterial = new BitmapFileMaterial("assets/
tile.jpg");

Per definire i parametri di affiancamento, l'immagine deve essere caricata per prima. Una nuova immagine  composta non può essere creata fino a quando non ci sono immagini completamente caricate. Pertanto, dobbiamo definire un evento listener che sarà attivato non appena il caricamento è completato.

material.addEventListener(FileLoadEvent.LOAD_COMPLETE,loadComplete);

Adesso possiamo creare il piano e aggiungerlo alla scena come al solito.

  var plane:Plane = new Plane(material,1024,512);
  scene.addChild(plane);

Una volta che l'immagine è stata caricata, il metodo LoadComplete () verrà attivato.
All'interno di questo metodo, dobbiamo cambiare alcune impostazioni del materiale. Per ottenere l'accesso facilitato al materiale dell'oggetto, scegliamo come bersaglio dell'evento un BitmapFileMaterial.

private function loadComplete(e:FileLoadEvent):void
{
  var material:BitmapFileMaterial = BitmapFileMaterial(e.target);

Per applicare l'affiancamento cambiamo tre proprietà del materiale. La prima imposta affiancamento su true.
Le proprietà seconda e la terza impostano il numero di tessere in senso orizzontale (maxU) e verticalmente (maxV).

material.tiled = true;
material.maxU = 8;
material.maxV = 4;

Dopo la pubblicazione di questo codice, vedrete che il piano ora è composto da 8 x 4 copie dell'immagine originale.

La proprietà maxU e le proprietà maxV provengono dalla mappatura UV. La mappatura UV è un modo per mappare un immagine trasformata 2D su un oggetto 3D. Invece di usare le coordinate x, y, z utilizza le coordinate. U e V. U e V stanno per la x e y in 2D, ma il le lettere U e V sono stati utilizzati al fine di evitare confusione con x e y in 3D.
Ulteriori informazioni sul mapping UV può essere trovato su Wikipedia all'indirizzo  http://en.wikipedia.org/wiki/UV_mapping

Per l'affiancamento è importante avere un'immagine che è fatta per essere usata può essere copiata
senza soluzione di continuità in senso orizzontale e verticale. La creazione di texture è una competenza a sé stante e quindi non nell'ambito di questa guida.

Filippo Porcari
Author: Filippo PorcariWebsite: http://filippo.porcari.oranjuice.org/Email: Questo indirizzo email è protetto dagli spambots. E' necessario abilitare JavaScript per vederlo.
designer freelance
Sono un graphic designer e mi occupo di pubblicità. Da più di 10 anni dedico le mie energie alla realizzazioni d'immagine aziendale e comunicazione visiva con un'attenzione alle nuove tecnologie del web. Da qualche anno ho scoperto il software open source e mi sono dedicato alla sua introduzione nel mio workflow produttivo ottenendo ottimi risultati.

© copyright 2011

Porcari Filippo studio grafico - p.iva 01985590023

Tutti i diritti riservati.