Jaa

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

  • Artikkeli

[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

Comments

  • Anonymous
    October 25, 2007
    PingBack from http://www.soundpages.net/computers/?p=5032

  • Anonymous
    October 25, 2007
    Great stuff! I think you'll see this in almost every WPF app, now you made it so dead simple. Wouldn't make sense to expose FieldOfView as well for more fine-grained control?

  • Anonymous
    October 26, 2007
    3D so simple even I can do it!  This is so cool! Is there a way to make this work with more dynamic content though?  For example, it seems like the size of the content needs to be hard-coded (can't use HorizontalAlignment="Stretch", for example).  

  • Anonymous
    October 26, 2007
    3D so simple even I can do it!  This is so cool! Is there a way to make this work with more dynamic content though?  For example, it seems like the size of the content needs to be hard-coded (can't use HorizontalAlignment="Stretch", for example).  

  • Anonymous
    October 26, 2007
    This is sweet, just finished some 3D flips myself using Viewport2DVisual3D and you are right.  Question: With your control how would I put elements on the back of the plane?

  • Anonymous
    October 31, 2007
    WPF 3.5 includes an exciting new feature: Viewport2DVisual3D. It makes building interactive 3D experiences

  • Anonymous
    October 31, 2007
    WPF 3.5 includes an exciting new feature: Viewport2DVisual3D. It makes building interactive 3D experiences

  • Anonymous
    November 18, 2007
    This is really cool. However, when used in Expression Blend, it crashes Blend (September Preview). Any reason why?

  • Anonymous
    November 27, 2007
    My previous post introduced a simple, but very powerful custom WPF control called a Planerator.&#xA0;

  • Anonymous
    November 27, 2007
    My previous post introduced a simple, but very powerful custom WPF control called a Planerator.&amp;#xA0;

  • Anonymous
    February 10, 2008
    Sean Cullinan, of blendblog.net , recently posted a VB.NET port of the Planerator .&#160;

  • Anonymous
    February 10, 2008
    Sean Cullinan, of blendblog.net , recently posted a VB.NET port of the Planerator .&#160;