Wednesday, April 27, 2011

Silverlight 5 3D Housebuilder Project Shown at MIX11

by via JohnPapa.net on 4/27/2011 11:39:47 PM

I presented this application during the MIX11 Day 2 keynote to demonstrate the new 3D features in Silverlight 5 along with a few other new Silverlight 5 features including RelativeSource Ancestor, Data Binding Debugging, Implicit DataTemplates, and Binding in Style Setters.

Download it now

You can download the source for the 3D Housebuilder on the MSDN Code Sample Gallery

Application workflow

• Select a type of house to start from a base model
• Add details like doors and windows and customize their color
• Change the camera angle using the arrow keys
• The brick house has layering, so you can remove layers and view the interior of the house
• View the final price list of materials

Technical topics

• Integrate Silverlight UI with XNA 3D using DrawingSurface
• Load and render a 3D model (partial COLLADA support)
• Configure the graphics pipeline for rendering
• Load and mipmap textures
• Apply pixel and vertex shaders
• Project 2D mouse coordinates into 3D space
• Use the MVVM pattern
• Create custom UI controls
• The color swatches in step 2 use binding in style setters to apply the colors to the door and shutter models
• The construction list in step 3 uses implicit data templates
• Some templates in the construction list in step 3 use the RelativeSource Ancestor feature to load their ItemsSource
• The demo set a breakpoint on the price of the door in the door template (in the construction list in step 3) to demonstrate data binding debugging. You can do this anywhere you choose.

Building the Project

The project depends on behaviors in the ExpressionBlend Preview for Silverlight 5, so install it along with the included Silverlight 5 SDK first.

Open the HouseBuilder solution to build the project. To run the application after building, ensure HouseBuilderSite is the startup project and start with or without debugging from the Debug menu.

Other included projects (created by Archetype):

• A3D contains types to import and render 3D assets like a Model
• MeshMender is for mesh stitching on import
• Pina is a partial COLLADA file parser

More Information

For more information on Silverlight 3D and XNA:

• John Papa's Blog and on Twitter (@john_papa)
• Aaron Oneal’s Blog
• Shawn Hargreaves Blog
• Archetype (creative minds behind the housebuilder)
• 3D Graphics Overview
• Other Silverlight Graphics Samples
• MIX11 Day 2 Keynote showing the 3D demo (10 minutes)

Special thanks to Aaron Oneal of Microsoft and to Luigi Rosso of Archetype and his colleagues for their tremendous efforts on bringing life to the Housebuilder!