RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


WPF Wonders: 3D Drawing with Textures, Transformations, and Realism

To build realism into 3D scenes, you need to draw with the appropriate materials—and transformations help make the drawing process much simpler.


he previous article on WPF 3D development showed examples that all use relatively simple single-color materials. The material's brush determines its color. But WPF also allows you to make materials using brushes that are not simple colors. The following list summarizes the kinds of brushes you can use to make a material.

  • Drawing: Paints an area with a drawing that can include shapes, images, text, and even media.
  • Gradient: Paints an area with a linear or radial color gradient.
  • Image: Paints an area with an image.
  • Visual: Paints an area with an image of a visual such as a Button, Label, or Grid.

Here's how to create a simple material that uses a blue brush.

    <DiffuseMaterial Brush="Blue"/>

To make a more complicated material, simply replace the Brush attribute with a more sophisticated brush. The following code makes a brush that displays the image in the file brick.jpg.

            <ImageBrush ImageSource="brick.jpg"/>

Here's another example that creates a visual brush containing a Label with a gradient background. (This kind of brush can get quite complex if it contains a complicated visual.)

                    <Label Content="VB Helper"
                     FontWeight="Bold" FontFamily="Comic Sans MS">
                                <GradientStop Color="White"
                                <GradientStop Color="Blue"

When you use these kinds of brushes, you need to make one more change to the MeshGeometry3D object: you need to tell Direct3D which part of the 3D object corresponds to which part of the brush.

You specify the mapping from brush to object by adding a new TextureCoordinates attribute to the MeshGeometry3D object. This attribute gives the coordinates of the 3D points in the 2D texture space. In that texture space, the upper left corner is at (0, 0), with X increasing to the right and Y increasing downward.

For example, the following code defines a square in the Z = 1 plane.

 Positions="-1,1,1 -1,-1,1 1,-1,1 1,1,1"
 TriangleIndices="0,1,2 0,2,3"
 TextureCoordinates="0,0 0,1 1,1 1,0"/>

Table 1 shows how the rectangle's points correspond to the brush's coordinates.

Table 1. Point-to-Brush Relationship: The table shows the mapping from a brush to a 3D object for a square defined in the Z=1 plane.
3D Point Texture Coordinate Brush Corner
(-1, 1, 1) 0, 0 Upper left
(-1, -1, 1) 0, 1 Lower left
(1, -1, 1) 1, 1 Lower right
(1, 1, 1) 1, 0 Upper right

The sample program TexturedCube shown in Figure 1 uses materials filled with image and visual brushes.

Figure 1. Terrific Textures: This cube is covered with images and visuals.

If you recall how the XAML code builds three-dimensional objects, you'll remember that a GeometryModel3D object contains both the geometric data that defines the object and the material that covers it. That means one material must apply to all the objects defined by the GeometryModel3D object. Therefore, you need more than one GeometryModel3D object to draw objects that have different materials.

The sample program TexturedCube uses six different GeometryModel3D objects with their own materials to draw a cube where every face has a different material.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date