65.9K
CodeProject is changing. Read more.
Home

Newton Game Dynamics Extensions for the WPF (Part 2) - Modelling with Blender and the 3D Xaml Editor basics

Leslie Godwin
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.93/5 (12 votes)

Aug 26, 2008

CPOL

16 min read

viewsIcon

71681

downloadIcon

1828

Create WPF scenes with Blender and export to the 3D Xaml Editor for fine tuning.

With This You Can... the 10 second overview

  • Create 3D Scenes for the WPF in a cool 3D modelling package called Blender...
  • Play with the model in real-time 3D physics environment...
  • Make that next generation Amazing World Game you've secretly been wanting to write...
  • Spill your cornflakes and milk all over your keyboard as you see just how easy it can be...

References

Requirements

Visual Studio 2008 (to compile the project)
.Net framework 3.0 (to view the demos)

Planned Articles

Part1 - The basic concepts and the Moon Lander Game explained.
Part2 - Modelling with Blender and using the Xml Editor to tweak the model Xaml for Physics. (This article)
*Part3 - More advanced exporting examples, building up to the Moon Lander object.
*Part4 - More the Crane project. (Making a robotic arm with ONLY Xaml. No Coding!)

* - not written yet.

Project Contents

There is a lot more in the project source package like the updated Moon Lander game and all the libraries that the Xaml Editor uses, but this is the list of goodies related to this article.

ProjectLocation in Source Package
Xaml Editor /XamlEditor
Blender script /Blender
Blender Examples /Examples/Blender Exporting/Basic_Export1
/Examples/Blender Exporting/Stacked_Item

Introduction

In my first article for the Newton Dynamics Extensions series I covered the basic usage of the Newton library in Xaml mark-up, but before further exploration can be done you will be wanting to create more complex models to work with and the easiest way to create flashy models is the use a proper 3D modelling tool, like Blender.

Now, the problem with just exporting from one format like a 3D scene in Blender to a Viewport3D scene in Xaml is invariably you'll want to change or add extra information to the output file that you'll be using in your application. But what happens when you go back to the model change something and then re-export. You'll loose all your changes. (The fluffy bunny of doom....right?) Right.

That where the Xaml Editor steps in. It allows you to have a source file, open it, view your model tree, specify some information to change, and will keep this information separate from the source. In this case in a ".xaml-project" file, so when you reload later your changes would be applied again.

This article will cover the basics of this process. I won't go into Blender modelling though, there are plenty of tutorials on the Inter-Tubes covering that. I will go into what you'll need to do in Blender to create a user friendly model.

The WPF currently is not fast enough as a fully fledged gaming engine, nor does is it even support all those cool Direct-X'y goodies, however it definitely has its place to allow you to learn and experiment with ideas easily before you start that awesome game you've always been meaning to write. This project makes it easy to build models in Blender and play with them.

Blender

The 3D application Blender was used as the object modeler. This project includes the "Blender to XAML Exporter" specially modified to make it easier to structure a model in Blender and allow it to be modified (via the Xml Editor) to include the Newton mark-up extensions.

Installing the Xaml Exporter

To install the Xaml Exporter script into blender:
Take the (source)/Blender/xaml_export.py file and copy it into the (Program Files)/Blender/.blender/scripts folder and restart Blender.
You should then see the "Xaml (.xaml) (Empty Mesh ...)" menu item in the File > Export menu.

Points Of Interest

  • Please visit the www.blender.org - Tutorials website if you would like to learn how to use Blender. It really is a very cool product. It has some interesting twists to traditional GUI interaction which might not initially be obvious until you've gone though their tutorials.
  • I struggled with it when I first started, however if you are into GUI design it's nice to see a different perspective on the subject. Blender has some interesting UI interaction features and behaviors.
  • Hey, it's free and worth your time.
If you would like to learn Blender, start by reading the Blender: Noob to Pro article.

Xaml Editor

A 3D Editor. The editor is not really a designer, but rather a manipulator. It allows you to explore the exported Xaml file and provides 3D gizmo manipulators to change the Newton physics properties you'll add to your model. It takes a source Xaml file and lets you to tweak it (usually adding the Newton extensions Xaml mark-up, but any marking additions can also be done). You can then play with the model in real-time. (This is the fun bit :-). You can then save out the result to be used in an application keeping the original source and changes separate letting you go back to your 3D package, make changes and reload the model back into your WPF application.

Points Of Interest

  • Loads any Xaml file.
  • It will automatically reload the source file and update all the Views when the source file changes. This is pretty handy when you update the model in Blender. You'll see the changes immediately.
  • You can explore your Xaml scene as a tree view and include changes in the lower xml editor to merge into the final output.
  • The Xaml scene can be viewed and navigated using the mouse. If there are physics properties attached to the objects you will be able to change them with gizmos overplayed on the model. These changes will then be saved back to the tweaked information in the ".xaml-project" file.
  • I'm using the "Source Editor Control" from the SharpDevelop project for my Syntax highlighting editor. You can have a look at my code to see how to use the editor in your own projects.
  • The editor also uses a new MouseGesture class I wrote to handle Mouse Move as well as Mouse Up button messages. The default WPF class only handles Mouse Down messages. The camera movement is controlled via WPF CommandBindings so you can easily change which UI/key combinations are used for navigation without re-compiling the app. (See the Themes folder)

Blender and Xaml: A good blend

The files used for this example can be found in the (source)/Examples/Blender Exporting/Basic_Export1 folder.
If you open the BasicScene.blend.xaml-project file the physics fixtures have already been done and the scene has been corrected. You can load it and play with simulation model.
If you are more adventurous you can open the source BasicScene.blend.xaml file and follow the example that follows.

Some Screen Shots

By looking at the 2 screen shots you can see a simple scene with 3 cubes. The 2 upper cubes are parented to the center one and are placed above and behind their parent.

Front Orthographic View



Camera View

This view is from the scene's camera. When exported, this camera view as you see it would be exported. (See the next screen shot)



The Scene viewed in the Xaml Editor

If you click on the scene and drag the mouse you can navigate around the scene. Try holding down the Ctrl or Alt key while dragging.



The Scene Nodes explored

The tree view as been expanded to reveal the camera, the main visual, its children and the light point.

First Glance

The Xaml exporter exports the entire scene as a Viewport3D class exporting the scene Camera, Lights and Model Objects with all their transformations.
When exporting the scene objects, it will export all top/root level objects as ModelVisual3D objects. The geometry will be exported as a Model3DGroup, and by default child objects will be exported as Model3DGroup objects under the visuals main Model3DGroup. (In the next article you'll see how to export children as Visuals as well).

Note:

Any of your existing Viewport3D Xaml files can be opened in the editor as well, but you may have some problems. Currently the editor has only been tested with data from the Blender exported files.

The "Outliner" view in Blender

The outliner view gives you all your scene nodes in a nice tree view similar to the Xaml Editor and you'll mostly use this view to select your objects before you manipulate them.

  • A

    This part of the node represents the main visual part of the object. Think of the icon are the transformation property that would be exported. It will help you deduced how scenes are converted to a WPF scene. Notice that the Camera and Lamp are exported as an Xaml Element with its Transform property set, so even though your the camera has a Position and LookDirection property the Transform property of the object is rather set.

  • B

    If you see the icon in the node then it means the Model3DGroup will contain a GeometryModel3D when exported into the ModelVisual3D.Content or in the Model3DGroup container. When exported the child objects are exported as Model3DGroup elements and the Model3DGroup element will have the transforms applied to it.

  • C

    The outliner will also show how the scene is structured. See the 2 Cube.xxx objects under the root Cube object. By default this type of scene would create on large Model3DGroup tree structure under the root ModelVisual3D object. (See the previous screen shot of the Xml Editor's Xml tree view)

The XZY -> XYZ Transformation order problem.


Just when you thought it was all getting so easy, and haa haaaa, "3D graphics, I has dem" a spanner is thrown into the works, well not really as big as a whole spanner.
Maybe, more like a......tooth pick.
If you look at the "3D view" in blender you'll notice the transform order icon at the bottom left of the view. See how Z (in Blue) and X (in Red) indicates that Blender uses X as its left/right and Z as its up/down transform axis. However the WPF uses X as the left/right, Y as the up/down and Z as the front/back the transform axis. What this causes is that the scene when imported into the Xaml Editor (or any WPF app) would be rotated by +90 degrees on the X axis. This little "gotcha" will be explored in the next section when you convert the Viewport3D scene into a ModelVisual3D scene.

Cleaning Up the Imported Scene.

OK, so how you can import a raw scene and it's looking good. Except for that weird blue'y tint you've got in the 3D view, kinda cutting the scene in half. What's that about? (I mean blue is a nice colour and all, but when you're coding your "Cubes Of Death" game, you'll probably want a red tinted scene.)

The blue tint, is from the Terrain added (by default) to the scene by the Xaml Editor. You are looking through it, from its semi-transparent underside. The scene however has been exported with its funny axis issue. (To remove the terrain, you could select the Dynamics > Terrain menu item.)
Currently, however, you can move the camera around and things still look normal. This is because the camera has also been exported with the funny transform so the scene's transform and camera's transform cancel out the problem.

The next step in the evolution of your Xaml model would be to convert the scene from a Viewport3D element into a ModelVisual3D element which could then be dynamically loaded into your application's scene. To achieve this, select the Edit > Remove Viewport menu item. If you look at the next screen shot and compare it to the Blender's camera view the translation problem comes to light since the viewport's camera is replaced by the default (normal X,Y,Z transformed) scene camera, added by the Xaml Editor. Notice how the model has been rotated.

Scene after the Viewport has been removed

The screen shot has been taken after the camera was zoomed back and rotated a little to show the object's orientation.
Notice that the model has now been rotated by 90 degrees. You can now also see the Terrain looking more terrain-like.

Note: By default the terrain is positioned at 0,0,0 (slap bang in the center of your model), but it will automatically be adjusted once the physics connections have been made.

The Xml view shows your project now as a ModelVisual3D scene and no longer a Viewport3D. Notice that the camera has been removed since it was a property of the viewport, but that the light source is still retained. Normal convention would be to delete the light from your Blender scene since your application scene would have all its lighting setup separate from your models, however you might want to have a model with lights parented to the object itself and this is also quite do-able. The Xaml Editor will in any case manage default lighting if the scene doesn't contain any.

Now, to correct the rotation problem there is a property in the editor project called "Model Rotation" you simply set this property to "1,0,0: -90" which adjusts all the top level ModelVisual3D elements under the root element by -90 degrees along the X-axis.
Note: It could have been only applied to the root element but I wanted the root element to be free of any transformations when exported because it would probably be attached to something in your program and it simplifies the task of worrying about needing the model's Transform to contain a Transform3DGroup.

Breathing Life into your Cubes of Glory (or was that "Death")

As impressive as the model is, it stands still, "bereft of life". Kind of like a dead parrot. (Please to search 'You Tube' for "Monty Python Dead Parrot" if my obscure reference is a little too obscure.)

Tweaking the Xaml

In my previous article Newton Dynamics Game Dynamics - The Moon Lander Game you would have seen the Xaml for the Newton Attached Properties that were added to the viewport scene to give a Visual a physical property. 

<ModelVisual3D newton:World.Body="ConvexBody3D">
    <ModelVisual3D.Content>
        <GeometryModel3D>
        ...
<ModelVisual3D />

This same effect will be achieved in the Xaml Editor as you will see, but will be achieved not by going into the source, but by configuring a change to the Xaml element where you would like to merge the attached property into the existing Xaml.

In the "Xml" tab select the first model visual element under the root element and select the Dynamics > Xml > Add Body Node menu item. Have a look at the Xaml at the bottom of the screen.


Notice that it has changed from <current></current> to what you can see in the screen shot. The <current> element is a pseudo element. It modifies the final output (viewed in the "View" tab) of the selected element (in the tree view) by appending any element defined within the <current> element into the source element, or merging any attributes defined on the <current> element into the source's element's attributes:

So on the source Xaml: 
<ModelVisual3D>
    <ModelVisual3D.Content>
        ...
<ModelVisual3D />
the following Xaml tweak: 
<current>
  <newton:World.Body>
    <newton:ConvexBody3D Mass="1" />
  </newton:World.Body>
</current>
or 
<current newton:World.Body="ConvexBody3D">
<current />
would result in: 
<ModelVisual3D>
  <newton:World.Body>
    <newton:ConvexBody3D Mass="1" />
  </newton:World.Body>
<ModelVisual3D /;>
or 
<ModelVisual3D newton:World.Body="ConvexBody3D">
    <ModelVisual3D.Content>
        ...
<ModelVisual3D />
been applied as the the final output. The 3D view displays the final output so what you see is what you'll get.

"Physics, you has 'dem"

Right! The physics has been added (simple right?) Right.
If you now go back to the "View" tab you'll see that the terrain has moved down and the cubes have been pimped up with sweet wire framing and a spiffy yellow Center Of Mass Gizmo (right in the center of the model)
All this gizmo bling or adornment is as a result of the physics properties now picked up by the designer. Off to simulate!!

To start the simulation select the Dynamics > Start/Stop Simulation menu item.
You can click anywhere on model to drag it around with a Pick Force Gizmo.

To adjust the "centre of mass" of the object, click on the little yellow cube currently in the centre of the object without moving the mouse as you click. When you let go of the button you'll see a gizmo allowing you to move the "centre of mass". Click on the arrow heads to move the item. You can move the centre of mass whether the simulation is turned on or off. It's quite cool to see the body react to it's new mass dynamics.

Try make the physics simulation more accurate by moving the mass slightly back to unbalance the object.

Note: I'll be going into more detail on how I created the 3D Editor in later articles.

To reset the model, go to the "Xml" tab and then back to the "View" tab.

Conclusion

Ok, ok, w're not nearly done here but an article can only be so long and I need my beauty sleep. I'm becoming an age-ed person and need it more and more. Trust me the next articles won't take as long to get published.
Hum, you know,.....once I have removed all the foul language as order by the moderators. Seriously. Cubes....foul language sometimes required to describe them.

I have discussed the very basics of Blender exporting and the problems you need to look our for. I've also just briefly covered the tweaking possibilities. There are other vital scenarios like naming your elements for better merging, and exporting into a <class>.xaml file for your WPF application. This was what I did for the Moon Lander game.

Apparently the Rome exe wasn't compiled in a day, so till the next article which will continue from where this one left off.

History

  • 2008-08-25 - Initial publication. (Foul language removed)
  • 2008-08-27 - Fixed many hideous typos. I truly am special.