Getting started with 3D Elements in WPF

Noah — Wed, 09 Dec 2009 02:33:49 GMT

I was watching the video entitled How Do I: Get started with 3D Elements in WPF and was just completely thrown off by author, Todd Miranda’s, complete lack of visuals. So I played around with his example until I better understood what was going on and I figured I’d share. Please understand that I am not a XAML master and certainly not in 3D, so if you find any errors please let me know.

The XAML that Todd starts off with is:

        1: <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

       2:  xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

       3:   <Grid>

       4:     <Viewport3D>

       5:         <Viewport3D.Camera>

       6:             <PerspectiveCamera Position="-50,20,15" LookDirection="50,-15,-10" UpDirection="0,0,1" />

       7:         </Viewport3D.Camera>

       8:         <ModelVisual3D>

       9:             <ModelVisual3D.Content>

      10:                 <Model3DGroup>

      11:                     <DirectionalLight Color="White" Direction="-1,-1,-3" />

      12:                     <GeometryModel3D>

      13:                         <GeometryModel3D.Geometry>

      14:                             <MeshGeometry3D Positions="0,0,0 10,0,0 10,10,0 0,10,0 0,0,10 0,10,10"

      15:                                         TriangleIndices="0 1 3  1 2 3  0 4 3  4 5 3" />

      16:                         </GeometryModel3D.Geometry>

      17:                         <GeometryModel3D.Material>

      18:                             <DiffuseMaterial Brush="Red" />

      19:                         </GeometryModel3D.Material>

      20:                     </GeometryModel3D>

      21:                 </Model3DGroup>

      22:             </ModelVisual3D.Content>

      23:         </ModelVisual3D>

      24:     </Viewport3D>

      25:   </Grid>

      26: </Page>

The output is:

Camera Perspective

First off, let’s play with the Camera perspective. I think the best way to do this is first to define the different parts of the Camera Perspective, the most important being Position and LookDirection.

Take the grid above. It’s hard to show a Z axis, so I made the font smaller to try to trick your eye into believing it’s farther away.

Position

So the grid above is akin to a room, right? You have a top & bottom, right & left, and depth – we’ll call Z0 Backward and Z50 Forward so that if you’re walking into the room you’re walking Forward, ok?

Now here we have a video camera pointed at a box. It’s way too close to the box, as you can see, since all you can see in the viewfinder is part of the box. Well to get a better picture we have 3 directions to move the camera: forward/back, right/left, up/down:

(This might be a Position of -5(Z), 25(X), and 25(Y))

So in this instance, I might want to move the camera backwards, like so:

(This might be a position of –25,25,25)

Now notice how I moved the camera backwards and got the whole box in the viewfinder. I’m farther away from the box so I can see the whole thing.

The same principle holds true for the X & Y axis:

Perhaps this is –25,5,25 -- I moved the camera too far to the right and only see the right most part of the box.

The above is all the job of the Position attribute. But there’s another important element to how the camera picks up the image and that is the angle of the camera

LookDirection

“Well my head went back and to the left.”

In WPF, just like in real life, once you have your camera setup where you want it, you also need to angle the camera to point in the direction of the object you want to see. For instance, if you want to catch a right-hand side (from your view) shot of a box, what would you need to do? You would place your camera to the right side of the box at a depth that was equal with the center of the box. Then you would need to turn your camera to the left in order for the lens to face the box.

Step 1, move your camera to the side of the box

Step 2, turn your camera to the left:

XAML

This post was actually a lot of work to write. I think I’ll have to break up the other elements into other blog posts and write those at another time. However, for the sake of completion, let’s fold these new concepts back into the XAML from before.

Suppose you want to look change the direction so that you’re facing the red shape head-on. In other words, you want to look at the shape so that it looks just like a square (instead of an L shaped 3D shape). You might change the XAML so that line 3 reads

       1: <PerspectiveCamera Position="-50,0,15" LookDirection="50,0,-10" UpDirection="0,0,1" />

The output looks like this:

Now don’t mind that it’s black on top – that has to do with the light source and is out of the context of this post. But let’s just see how we got here. Here are the two lines juxtaposed (I added spacing so that everything lines up):

       1: <PerspectiveCamera Position="-50,20,15" LookDirection="50,-15,-10" UpDirection="0,0,1" />

       2: <PerspectiveCamera Position="-50,0 ,15" LookDirection="50, 0 ,-10" UpDirection="0,0,1" />

So first I changed the Position’s X to 0 from 20, so I’m moving the camera to the right. Now if I didn’t change the LookDirection it would mean that the camera would be facing slightly downwards (-10) and slightly to the left (-15), so you’re not looking at it straight on. That’s why I dropped the X value of LookDirection up from –15 to 0.

Just keep in mind that it is very easy to place the Postion and/or LookDirection of the camera so that the shape is completely out of view.

Hopefully this helps put some of what Todd says in his video in context.