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
- Spill your cornflakes and milk all over your keyboard as you see just how easy it can be...
Visual Studio 2008 (to compile the project)
.Net framework 3.0 (to view the demos)
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.
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.
|Project||Location in Source Package
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
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.
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.
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"
- 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
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
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.
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
The geometry will be exported as a
Model3DGroup, and by default child objects
will be exported as
Model3DGroup objects under the visuals main
the next article you'll see how to export children as Visuals as well).
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.
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
LookDirection property the
of the object is rather set.
If you see the
icon in the node then it means the
Model3DGroup will contain a
ModelVisual3D.Content or in the
When exported the child objects are exported as
Model3DGroup element will have the transforms applied to it.
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
(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
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
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
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
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
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
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
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
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.
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
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:
the following Xaml tweak:
<newton:ConvexBody3D Mass="1" />
would result in:
<newton:ConvexBody3D Mass="1" />
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
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.
Note: I'll be going into more detail on how I created the 3D Editor in later articles.
Try make the physics simulation more accurate by moving the mass slightly back to unbalance the object.
To reset the model, go to the "Xml" tab and then back to the "View" tab.
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.
- 2008-08-25 - Initial publication. (Foul language
- 2008-08-27 - Fixed many hideous typos. I truly am special.
Computers are really sweet. Aren't they?
Yup they are...
I've always loved writing tools and components...never been too interested in playing games....always wanted to be able to write them though.
And, yes. I'm still pretty annoyed they discontinued the Amiga computer.