Perspective : Easy 3D programming with WPF

A few years ago, I was impressed by the ease of 3D programming with VPython . This library made it possible to build in language Python 3D models starting from basic (cube, cylinder, sphere, etc.) or composite (arrow) geometrical objects, and to anime them. The default visualization window allowed to move the camera around the scene, and to zoom. Thus it was easy to get with a few lines of code a very spectacular application. VPython was very much used to illustrate physical models. Example .

WPF uses Direct3D technology to provide creation services for 2D user interface but also for 3D scenes. You can find many references about this subject like this tutorial , who describes the different steps of the creation of a cube. Even if WPF is much easier to program than Direct3D, we are still far from the VPython productivity. WPF misses high-level classes for the 3D programming (cube, cylinder, sphere, etc.). Several authors make this constatation and give some solutions (of which however none goes as far as VPython) :

• Generating a sphere-mesh in XAML
• Generating 3d discs, cubes, spheres, etc. in WPF
• Extending Visual3D - Sphere, Cone, and Cylinder

Since 2006, I developed the Perspective class library, which offers WPF functionalities and productivity close to those of VPython while integrating technological innovations such as interactive 3D controls.

The continuation of the article applies to the version 2.0 of Perspective, which requires .NET 4.0 and Visual Studio 2010.

Wpf3D Basics

Getting and installing Perspective

3D WPF programming basics are not explained here, but the text contains some links towards the SDK documentation .

To use the Perspective classes in a Xaml file, you have to define 2 XML namespaces referring the Perspective assemblies :

<Page x:Class="PerspectiveDemo.UI.Pages.pWpf3D.Box3D"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:p="http://www.codeplex.com/perspective"
...

Basically, a 3D scene is displayed in a Viewport3D object. Then we have to configure the camera and lights . In order to be able to move the point of view and to turn around the model, it is possible to apply rotations to the camera (RotateTransform3D) around the X, Y and Z axis . A scaling (ScaleTransform3D) may be applied to simulate a zoom effect. These transformations may be bound to sliders.

In practice, it is tedious and repetitive. Perspective is consistent with this approach, but provides, since version 0.9, the Workshop3D element which includes a Viewport3D, a camera, lighting and a system of zoom and displacement of view.

<Page ...>
    <p:Workshop3D>
      ...
    </p:Workshop3D>
</Page>

We can now instanciate our first visual Wpf3D object : the coordinate system (XyzAxis3D class) which will visually help us to position our 3D elements :

<p:Workshop3D>
    <p:XyzAxis3D />
</p:Workshop3D>

If we execute now the application, we can see the coordinate system.

The camera can be controlled by mouse (with joysticks) or by keyboard (when the Workshop3D is focused) :

• Plus and Minus keys act on the zoom factor.
• Numeric keypad arrow key act on the camera position (on a XZ plane)
• When the Ctrl key is pressed, they move the orientation of the camera according to a vertical plane (Up and Down arrows) or horizontal plane (Left and Right arrows).
• When the Shift key is pressed, they turn the camera around the origin according to a vertical plane (Up and Down arrows or position joystick's buttons) or horizontal plane (Left and Right arrows or position joystick's buttons).
• The key 5 or Ctrl-Plus of the numeric keypad elevate the position of the camera. Keys Ctrl-5 or Ctrl-Minus reduce the height of the camera position.

The main properties of XyzAxis3D are : Radius, radius of each body axe, Length, size of each axis, and Signed which dislays the negative axis.

<p:XyzAxis3D Length="5" Signed="True"/>

We can now begin to create our models. Let's start with a cube using the Box3D class:

<p:Workshop3D>
    <p:XyzAxis3D Length="3.0"/>
    <p:Box3D />
</p:Workshop3D>

Each Wpf3D object has a default material, which can be modified using the Material property.

Our cube is positioned at the origin of the coordinate system, and the edges size is of 1 unit. While reading the documentation, it may seem surprising that no property enables us to modify the position and the size of the cube. But that is completely normal. WPF uses the graphics processor (GPU) which supports instructions to transform the position or the aspect of the models. Modifying the position and the size of the cube in our code would use the main processor (CPU) instead of the GPU. To respect the WPF logic, we will use 3D transformations and assign them to the Transform property (always with the possibility of defining the transformation in the resources centralized zone) :

...
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Transform3DGroup x:Key="ModelTransform">

        <TranslateTransform3D OffsetX="1.0" OffsetY="-1.0" OffsetZ="0.5" />

        <ScaleTransform3D ScaleX="1.0" ScaleY="1.0" ScaleZ="3.0" />

    </Transform3DGroup>
    ...
</ResourceDictionary>
...
<Page.Resources>
    <ResourceDictionary Source="Wpf3DResources.xaml" />
</Page.Resources>
<p:Workshop3D>
    <p:XyzAxis3D Length="5.0"/>
    <p:Box3D Transform="{StaticResource ModelTransform}"/>
</p:Workshop3D>
...

This principle applies to all the basic models delivered in Perspective. Their basic dimension is the unit, and they are based on the origin of the coordinate system (the point of coordinates 0.0, 0.0, 0.0).