Triangle Texturing, Theory and Silverlight App

This article wants to show how to solve the UV/Texture mapping problem in relation to mesh faces (triangles) in a 3D environment.
Meshes are indeed nothing but surfaces of triangles that approximate real solid geometry.

The textual, readable representation of meshes' structure usually (see VRML, OBJ, X3D, WPF XAML) provides:

nodes: ordered list of points in a 3D environment (x, y, z);
faces: the indices of the nodes in the list which enclose the triangular faces of the mesh;
normals: the 3D vectors orthogonal to each face per single node;
texture coordinates: the UV coordinates (points ∈ [0,1]²) per node per face.
Here we are we're talking about them in this article!

So, how do we apply a texture to a triangle given per-vertex UV coordinates?
In a Silverlight scenario, we apply coherent affine transformation to the fill of the triangle. By default, it fills the bounding box of the triangle itself stretching its dimensions.

Nota bene: this article offers a theoretical approach to the problem but is also strictly connected to specific Silverlight technology for practical applications.

The key of the problem is to get the transformation that maps the bidimensional screen coordinates of the three vertices of our triangle to their respective UV coordinates.
That is obtained by solving a linear algebraic system of 6 equations in 6 variables: in fact we need to know all the coefficients of the 3x3 affine matrix that permits the following transformation:

Where:

u₁ (∈ [0,1]) is the U coordinate of the 1st vertex (A);
v₁ (∈ [0,1]) is the V coordinate of the 1st vertex (A);
ξ₁ (∈ [0,1]) is the homogeneous x coordinate of the 1st vertex (A) (normalized along the bounding box width);
η₁ (∈ [0,1]) is the homogeneous y coordinate of the 1st vertex (A) (normalized along the bounding box height);

The same result must be obtained, using the same matrix, also for the vertices 2 (B) and 3 (C). Combining these 3 conditions we get the already mentioned linear algenraic equations system in 6 equations and 6 variables (m₁₁, m₁₂, m₂₁, m₂₂, offset_x, offset_y):

The computational solution of this system involves once more matrices (please refer to Cramer's rule).
The six coefficients that we obtain will populate, in a Silverlight environment, the Fill's transformation matrix (in particular the RelativeTransform property of an ImageBrush object) of our triangle!
You can test the correctness of the result by interacting with the following demo app (Silverlight 2 Beta 2):

This article was written as a kind of theoretical approach to the problem of 3D mesh texturing.
If you ask for some code, just wait a couple of days: I'll post my entire 3D engine comprehensive of 3D mesh texturing in an ad-hoc article.

Take care. Bye.

Feedbacks

Re: Triangle Texturing, Theory and Silverlight App

Martijn Croezen (Monday, June 30, 2008 1:22 AM)

“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 (Monday, June 30, 2008 1:24 AM)

“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 (Sunday, August 03, 2008 10:57 AM)

“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 (Saturday, November 29, 2008 5:01 AM)

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

balu (Monday, January 19, 2009 5:24 AM)

“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”