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 : Page 2

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



The final WPF 3D topic—for now—is transformation. A transformation modifies something by scaling, rotating, or moving it. You can apply transformations to all sorts of things, including lights, brushes, objects, Model3DGroups, ModelVisual3Ds, and cameras.

Figure 2. Perfect Projections: Perspective projections look more natural so most applications use them.

The Projections program example shown in Figure 2 uses transforms to make building cubes easier. Building a cube in XAML code isn't too hard, but it is tedious, so it's a convenient candidate for automation. Rather than building three cubes from scratch, the Projections program uses a Model3DGroup to build a cube centered at the origin. It then uses copies of the same Model3DGroup, but with transformations, to create two other cubes that have been translated to new positions.

The following XAML code shows how the program builds one of its cubes. All the program's cubes use the exact same GeometryModel3D objects. Each cube uses a TranslateTransform to translate itself into the proper position. In this example, the cube is translated by four units in the Z direction.

        <TranslateTransform3D OffsetZ="4"/>
    <GeometryModel3D Material="{StaticResource matYellow}">
              -1,-1,-1   1,-1,-1   1,-1, 1  -1,-1, 1
              -1,-1, 1   1,-1, 1   1, 1, 1  -1, 1, 1
               1,-1, 1   1,-1,-1   1, 1,-1   1, 1, 1
               1, 1, 1   1, 1,-1  -1, 1,-1  -1, 1, 1
              -1,-1, 1  -1, 1, 1  -1, 1,-1  -1,-1,-1 
              -1,-1,-1  -1, 1,-1   1, 1,-1   1,-1,-1"
               0  1  2     2  3  0
               4  5  6     6  7  4
               8  9 10    10 11  8
              12 13 14    14 15 12
              16 17 18    18 19 16
              20 21 22    22 23 20"/>
Figure 3. Cube Conversion: This program displays three cubes that have been stretched.

By using TranslateTransform, RotateTransform, and ScaleTransform elements, you can move a 3D object just about anywhere you like. That lets you use simple objects such as cubes centered at the origin to build more complex objects.

For example, the Interlocked program shown in Figure 3 displays three cubes that have been scaled by a factor of 0.4 in one direction and 1.25 in another. You could calculate the location of each shape's corners manually, but it's a lot easier to simply transform the cube appropriately.

Most of the programs described in this article use one more transformation: they transform the camera's position when you use the programs' sliders.

The following code shows how the programs define their cameras.

<Transform3DGroup x:Key="CameraTransform">
            <AxisAngleRotation3D Axis="1,0,0"
             Angle="{Binding ElementName=sliX,Path=Value}"/>
            <AxisAngleRotation3D Axis="0,1,0"
             Angle="{Binding ElementName=sliY,Path=Value}"/>
<PerspectiveCamera x:Key="Camera"
    Position="0, 0, 8"
    LookDirection="0, 0, -8"
    UpDirection="0, 1, 0"
    Transform="{DynamicResource CameraTransform}"/>

The code begins with a Transform3DGroup that includes two rotations, first around the X axis and then around the Y axis. The rotations' angles are bound to the values of two Sliders named sliX and sliY.

The camera's definition uses the transformation to change the camera's position at run time.

The following code shows how the programs define their Sliders. The only real trick here is that sliX uses a ScaleTransform to flip itself upside down. That makes its values increase downward instead of upward and just seems more intuitive to use.

<Slider Name="sliX" Grid.Row="0" Grid.Column="1"
 Minimum="-90" Maximum="90" Value="-20"
 TickFrequency="10" TickPlacement="None">
        <ScaleTransform ScaleY="-1"/>
<Slider Name="sliY" Grid.Row="1" Grid.Column="0"
 Minimum="-180" Maximum="180" Value="-20"
 TickFrequency="10" TickPlacement="None"/>
Figure 4. Amazing Maze: This scene uses multiple lights, materials, and an animated transformation.

Into the Third Dimension

Even split across two parts, this article covers only a small part of WPF's 3D capabilities. There's still plenty to learn about brushes, transformations, building shapes, and animating 3D models. However, the techniques described here can get you pretty far.

The Maze program example (see Figure 4) demonstrates many of the techniques described here—plus a few others, including lights, materials that display images, and a camera transformation that you can control with the program's sliders. (See the downloadable code to find out how it uses an animated transformation to make the globe spin, and to see subroutines that build rectangles, boxes, spheres, and cones.)

The results may not fool anyone into thinking they're looking at a photograph but they are fairly realistic, and the performance is outstanding. They're certainly good enough to build some interesting visualization or game programs.

Now it's your turn. You can start from scratch or use the downloadable sample programs as starting points to build some scenes of your own. If you send me images of the result (you can contact me via my bio at the end of this article), I can post them online.

Rod Stephens is a consultant and author who has written more than a dozen books and two hundred magazine articles, mostly about Visual Basic. During his career he has worked on an eclectic assortment of applications for repair dispatch, fuel tax tracking, professional football training, wastewater treatment, geographic mapping, and ticket sales. His VB Helper web site receives more than 7 million hits per month and provides three newsletters and thousands of tips, tricks, and examples for Visual Basic programmers.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date