Texturing di un Triangolo, Teoria e Applicazione

Questo articolo intende mostrare come si risolve il problema della mappatura di una tessitura in coordinate UV su facce triangolari in un ambiente 3D.
Le cosiddette mesh, altro non sono infatti che un insieme strutturato di triangoli che approssimano una data geometria solida reale.

Le rappresentazioni testuali, leggibili della struttura di una mesh (vedi VRML, OBJ, X3D, WPF XAML...) solitamente prevedono:

nodi: elenco ordinato di punti tridimensionali (x, y, z);
facce: consistono in una serie di triplette di indici riferiti ai vari nodi in elenco che costituiscono i vari triangoli;
normali: i vettori tridimensionali normali nei vertici di ogni triangolo al piano individuato dal triangolo stesso;
coordinate di tessitura: le coordinate UV (punti ∈ [0,1]²) individuati per nodo e per faccia.
Ecco, si parla proprio di queste ultime nel presente articolo!

Allora, come si applica una immagine ad un triangolo date le coordinate UV per ogni vertice (problema ultimo)?
In ambiente Silverlight, dobbiamo preoccuparci di trasformare coerentemente il riempimento della nostra shape triangolare. In maniera predefinita, esso è allineato ed occupa in toto il bounding box del triangolo deformandosi in larghezza ed altezza secondo le necessità.

Nota bene: questo articolo intende offrire un approccio teorico al problema, è però strettamente connesso alla tecnologia Silverlight per quanto riguarda le applicazioni pratiche.

Il nocciolo del problema è quello di ottenere quella trasformazione che rimappa le coordinate bidimensionali dei tre punti sullo schermo sulle rispettive coordinate UV.
Esso si risolve nella soluzione di un sistema algebrico linare di 6 equazioni in 6 incognite, infatti dobbiamo ottenere i coefficienti della matrice affine 3x3 che consente la seguente trasformazione:

Dove:

u₁ (∈ [0,1]) è la coordinata U nel sistema di riferimento UV del primo vertice (A);
v₁ (∈ [0,1]) è la coordinata V nel sistema di riferimento UV del primo vertice (A);
ξ₁ (∈ [0,1]) è la coordinata x normalizzata (lungo la larghezza del bounding box del triangolo) del primo vertice (A);
η₁ (∈ [0,1]) è la coordinata y normalizzata (lungo la altezza del bounding box del triangolo) del primo vertice (A);

Lo stesso risultato, utilizzando la stessa matrice, dobbiamo ottenerlo per i vertici 2 (B) e 3 (C). Per cui, combinando le tre condizioni, abbiamo il sistema in 6 equazioni e 6 incognite (m₁₁, m₁₂, m₂₁, m₂₂, offset_x, offset_y) anticipato precedentemente:

La soluzione del sistema si ottiene sfruttando per via computazionale la regola di Cramer.
I sei valori ottenuti popolano quindi la matrice di trasformazione del riempimento (proprietà RelativeTransform del nostro oggetto ImageBrush) del nostro triangolo in ambiente Silverlight!
Potete testare voi stessi la correttezza del risultato ottenuto interagendo con la seguente applicazione dimostrativa (Silverlight 2 Beta 2):

Questo articolo è stato scritto, come già detto, a mo' d'introduzione teorica al problema del mesh texturing.
Per il codice e le applicazioni "serie", beh, si tratta di aspettare un paio di giorni il mio prossimo articolo: in esso mostrerò le funzionalità di mesh texturing integrate con il resto dell'engine 3D per Silverlight già introdotto su questo blog.

Take care. Bye.

Feedbacks

Re: Triangle Texturing, Theory and Silverlight App

Martijn Croezen (lunedì 30 giugno 2008 1.22)

“Nice, Could've used this 2 months ago when I built my own texturemapper. (I'm not that great at Math)

I haven't tried RelativeTransform yet, but does that take care of where the matrix starts to draw?
I use .Transform myself, but I have to determine the left- and rightmost corner of a triangle first, and then offset the texture correctly.

Your example also seems to have a rounding error, when you move 1 vertex of the triangle, you can see the texture 'jump around' a little on the opposite side.

check out my version (also includes slight expansion of the triangles to get rid of antialias lines)

http://whizzkid74.blogspot.com/2008/06/panoramacube-for-silverlight-2beta2.html”
Re: Triangle Texturing, Theory and Silverlight App

martijn croezen (lunedì 30 giugno 2008 1.24)

“Duh, see I knew I had seen this site before :) AND I've already told you about the panocube hehe,
ahwell, at least the link i gave you now has the updated version of the cube in it :)

cheers!
”
Re: Triangle Texturing, Theory and Silverlight App

Mike (domenica 3 agosto 2008 10.57)

“Hi, when can we expect the source code for this? I am dying to see how its done programmatically. Thanks
”
Re: Triangle Texturing, Theory and Silverlight App

Quikboy (sabato 29 novembre 2008 5.01)

“Beautiful Silverlight blog! I love it. It's not even slow!”
Re: Triangle Texturing, Theory and Silverlight App

balu (lunedì 19 gennaio 2009 5.24)

“hi. nice application i was looking for 3D in silverlight. i have one question how can we create 3d models in silverlight. is there any tool for it? regards balu”