Enter The Planerator - Dead-simple 3D in WPF, with a stupid name

[UPDATED: November 26, 2007 - updated source code zip one last time.]  

[UPDATED: November 7, 2007 - updated source code zip and made a few clarifications.]  

When incorporating 3D support into WPF, we strived for integration with the rest of the system, and sufficient flexibility that will support lots of different scenarios.  So, even though 3D in WPF is typically far easier to use and higher-level than other 3D platform APIs, there are still a whole bunch of concepts and object model you need to learn to effectively use it.

But what about the developer that just wants to "make this thing tilt backwards into 3D"?  Or "give this element a 3D perspective"?  Currently, to do that, you need to know about Viewport3D, cameras, lights, models, meshes, texture coordinates, triangle indices, materials, visual brushes, 3d transformations, and caching hints.  (And yes, this still is substantially easier than most 3D platform APIs.)  And you also need to understand, re-derive, or steal the math necessary for aligning 3D frontal projections with 2D (as described in this previous blog entry).  Just for these very simple, constrained scenarios, it shouldn't be that difficult to do.

Those thoughts motivate construction of the custom WPF control I'll describe here.  I'm calling it the Planerator control, because it takes a WPF element and puts it on a flat plane that you can manipulate in 3D.  The original element remains interactive as it's transformed in 3D.  (This is thanks to our WPF 3.5 - Orcas - feature called Viewport2DVisual3D... Lester shows a usage of it here.)

All you need to do to use the Planerator is wrap it around some other WPF element, and set (or animate, or databind) its exposed RotationX, RotationY, and RotationZ properties, and you're done.  The element is now living in 3D, still fully interactive, and the Planerator itself will participate in 2D layout.  Here's a simple example:

 

    <!-- Excluding backgrounds and list box items for brevity -->

        <pl:Planerator RotationY="35" >

           <StackPanel Orientation="Horizontal" ... >

                <StackPanel>

                    <Label  FontSize="24" Content=" " Foreground="#FF000000"/>

                    <Border ... >

                        <MediaElement x:Name="myMediaElement" />

                    </Border>

                </StackPanel>

                <ListBox ... />

            </StackPanel>

        </pl:Planerator>

The above results in this:

image

Again, no cameras or meshes or lights to set up, and no complicated math to align the 3D projection with the original 2D sources.  Drop dead simple perspective projections into 3D (that remain interactive, too!)

By the way, in case you were wondering what it looks like behind this plane... it's just what you'd expect :-)  :

image

Get Yours

I've attached a Visual Studio solution to this blog post that contains the Planerator custom control, and two sample apps -- one a windowed application, and the other an XBAP.  Both apps demonstrate the video browser demo panel shown above with controls for changing the angles ("field of view" can also be modified on the Planerator, to change the amount of perspective).  Note that the solution is for Visual Studio 2008, and uses C# 3.0 features and WPF 3.5 features.  I built it on Visual Studio 2008 Beta 2.

Have fun... if you create some cool uses, send 'em along...

I'll make a subsequent post that talks about some of the more interesting aspects of getting the Planerator working.

PlaneratorSolution.zip