Triangle Texturing, Theory and Silverlight App
Cristian Merighi ()
Theoretical solution and practical (demonstrative) Silverlight application for the problem of UV mapping (texture coordinates mapping), tipical of a 3D engine.
This article is obsolete. Some functionalities might not work anymore. Comments are disabled.
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]^{2}) 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_{1} (∈ [0,1]) is the U coordinate of the 1st vertex (A);
- v_{1} (∈ [0,1]) is the V coordinate of the 1st vertex (A);
- ξ_{1} (∈ [0,1]) is the homogeneous x coordinate of the 1st vertex (A) (normalized along the bounding box width);
- η_{1} (∈ [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_{11}, m_{12}, m_{21}, m_{22}, 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.