WPF 3D: correct definition of meshgeometry3d texture coordinates

To display 2D-based textures in 3D objects, we must define texture coordinates of 3D mesh objects. In WPF, this function uses the meshgeometry3d. texturecoordinates attribute.

 

The coordinates of the 2D texture are the same as those of the startpoint and endpoint of lineargradientbrush of WPF.

Description from msdn about startpoint of lineargradientbrush:

 

() Indicates the upper left corner of the entire image, and () indicates the lower right corner. (0, 1) indicates the lower left ...... Of course, the unit is relative. a decimal point between 0 and 1 can be used to represent the relative position in the center.

 

For the simplest mesh definition without sharing vertices (meshgeometry3d. positions attributes do not share points). texturecoordinates corresponds to the coordinates of each triangle in the mesh. Of course, this corresponds to meshgeometry3d. triangleindices attributes are defined.

 

For example, to define a simple 3D plane rectangle, first define the meshgeometry Shell Based on the triangle distribution. In this case, texture coordinates are defined based on the distribution of triangles. For example, if the first vertex is 0, 0, or 0, it clearly corresponds to the lower left corner of the rectangle in 3D space, the first corresponding texturecoordinates is 0 1, and so on, so that the entire plane is defined.

<Meshgeometry3d positions = "0 0 0, 5 5 0, 0 5 0, 0 0 0, 5 0 0, 5 5 5 0"

Triangleindices = "0 1 2 3 4 5"

Texturecoordinates = "0 1, 1 0, 0 0,

0 1, 1 1, 1 0 "/>

 

The final texture is correctly displayed:

 

 

If I flip the material definition of the triangle above (because it is a counter-clockwise definition, you can change the first two points)

<Meshgeometry3d positions = "0 0 0, 5 5 0, 0 5 0, 0 0 0, 5 0 0, 5 5 5 0"

Triangleindices = "0 1 2 3 4 5"

Texturecoordinates = "1 0, 0 1, 0 0,

0 1, 1 1, 1 0 "/>

 

The result is:

 

Mesh definition with shared vertices (meshgeometry3d. triangleindices attribute to specify vertices), texture coordinates directly correspond to the positions of each definition in a 3D image. In the preceding example, we define a 3D plane rectangle, four points, then, the relative coordinates of the four corresponding texture locations are displayed.

 

The following code:

<Meshgeometry3d positions = "0 0 0, 5 0 0, 5 5 0, 0 5 0"

Triangleindices = "0 1 2 0 2 3"

Texturecoordinates = "0 1, 0, 0"/>

 

The output result is consistent with the preceding one!

 

Of course, everything above is made in a 3D space for easy understanding. The following uses the above knowledge in a 3D texture-based cone (using lineargradientbrush ):

 

Or imagebrush:

 

 

Complete code:

<Viewport3d>

<Viewport3d. Camera>

<Perspectivecamera position = "0 0 20" lookdirection = "0 0-2"/>

</Viewport3d. Camera>

<Modelvisual3d>

<Modelvisual3d. content>

<Model3dgroup>

<! -- With the combination of ambientlight and directionallight, we can make the texture clearer without any shadow effect. -->

<Ambientlight color = "#555555" type = "codeph" text = "/codeph"/>

<Directionallight direction = "1, 0,-7"

Color = "white"/>

<Geometrymodel3d>

<Geometrymodel3d. Geometry>

<Meshgeometry3d positions = ", 0-5,-5,-, 0, 0, 5-5,-5,-, 0, 0, 5, 0, 5, 5,-, 0, 0, 0"

Triangleindices = "0 1 2 3 4 5 6 7 8"

Texturecoordinates = ","/>

</Geometrymodel3d. Geometry>

<Geometrymodel3d. Material>

<Diffusematerial>

<Diffusematerial. Brush>

<Lineargradientbrush startpoint = "" endpoint = "">

<Gradientstop color = "yellowgreen" offset = "0"/>

<Gradientstop color = "green" offset = "1"/>

</Lineargradientbrush>

</Diffusematerial. Brush>

</Diffusematerial>

</Geometrymodel3d. Material>

</Geometrymodel3d>

</Model3dgroup>

</Modelvisual3d. content>

</Modelvisual3d>

</Viewport3d>

 

By replacing the brush attribute of diffusematerial, you can use other textures.