Welcome back to our third and final post on using the Visual Studio 3D Starter Kit! If you read our previous posts in this series (here and here), you’ve got an app that has an animated die, and you’re ready to make the last few changes to get this app to run on Windows RT devices and Windows Phone 8.
If you haven’t read the previous posts, you may want to go through these posts and create an app – we’ll be here once you’re ready.
If you're more of a visual learner, you might prefer following Part 1 and 2 in our new Channel 9 video! In less than 30 minutes you'll go from zero to jumping dice!
Since current Windows RT devices have a graphics card with D3D_FEATURE_LEVEL_9_1 and the Visual Studio Graphics tools generate shaders for graphics cards with D3D_FEATURE_LEVEL_10_0 and above, there’s one small extra step that has to be done for this app to run on Windows RT: we need to generate a version of the shaders to be compiled for the correct feature level.
To do that, open your mesh (Die.fbx) and click the cube. On the Properties tool window look for a property called Effect. Click the “+” button to the left of that property and select the (Advanced) value. Finally, click the “…” button to open the shader source for the Phong effect.
What you see now is the default shader that Visual Studio applied to this mesh, displayed in the Visual Studio Shader Designer. The Shader Designer allows you to build complex visual effects without the need to learn a new programming language. To learn more about the Shader Designer, check the documentation and walkthrough on MSDN.
What we want to do with this shader is export it to HLSL in order to be able to re-compile it for Direct3D Feature Level 9 graphics cards. The Starter Kit will automatically look for a fallback shader with the same name as the original in case the device does not support D3D Feature Level 10 or higher.
To export this shader, go to the last icon in the toolbar (Advanced) -> Export -> Export as… (see figure below) and save it as “Phong.hlsl” in your Assets folder. Then, add the file to the project by right-clicking the Assets folder on Solution Explorer -> Add -> Existing item… and selecting the file we just exported.
Finally, we need to tell the HLSL compiler that this file is a Pixel Shader. To do that, right-click “Phong.hlsl” on your Solution Explorer and choose Properties. On the Properties page, make sure the “Configuration” drop down is set to “All Configurations” and the “Platform” drop down is set to “All Platforms”, so that the changes we make are applied to all versions of our app.
Then, on the “HLSL Compiler” page, change the Shader Type property to “Pixel Shader (/ps)” and make sure to enable optimizations (set the Disable optimizations property to "No"), like the figure below:
With this step, everything is ready for Windows RT. This app can now be deployed to your favorite device using the Visual Studio Remote Debugging Tools.
Another change you should make before releasing the app for Windows RT is to make sure snap view and portrait mode work as expected. In this case, all we did was to make sure the camera stayed on the same orientation when we change the view, by deleting the following line on the CreateWindowSizeDependentResource() method on Game.cpp:
// (snip) Initialize camera...
if (aspectRatio < 1.0f)
/// portrait or snap view
m_graphics.GetCamera().SetUpVector(XMFLOAT3(1.0f, 0.0f, 0.0f));
fovAngleY = 120.0f * XM_PI / 180.0f;
// (snip) Lights...}
You can download the project at this state on CodePlex (direct download link below).
Using the Starter Kit with support for Windows Phone, porting this app to Windows Phone 8 is a breeze. All you have to do is get the Starter Kit, replace the Game.cpp and Game.h classes by the ones you created for this app, add all your assets (in this case, Die.fbx, DieTexture.png and Phong.hlsl), and change the XAML codebehind to call RollDie() when the screen is tapped. Let’s go over this in a short step by step:
void Direct3DBackground::OnPointerReleased(DrawingSurfaceManipulationHost^ sender, PointerEventArgs^ args)
Done! You can now run this app on the Windows Phone emulator or on your Windows Phone 8 device. You may want to tweak the camera position and field of view to get a bigger die on your phone screen.
You can download the final project on CodePlex (direct download link below).
This app is now complete, but there’s still a lot that can be done to make it shine on the Windows Store. Here are some initial ideas:
In this blog series you saw how to create a 3D app for Windows 8, Windows RT and Windows Phone with the Visual Studio 3D Starter Kit, sharing all the app logic and assets between all platforms. You also learned a little bit about the Visual Studio Graphics tools, and discovered that creating a 3D app is not a mysterious task – you can start without a deep knowledge of 3D modeling, complex math and HLSL, and learn new concepts at your own pace.
We’d love to hear feedback about this walkthrough, the Visual Studio 3D Starter Kit, or what you’d like to see in the future from Visual Studio for graphics development. Leave us a note in the comments!
Very special thanks to Jennifer Leaf for co-authoring the articles and beta-testing the code. Special thanks to Golnaz Alibeigi for all the help with the video, and Bruno Sonnino and Eric Battalio for reviewing the blog posts.
like the AT&T commercial of the little girl saying... "we need more, because when we have less, we want more"..
as so, we need more articles like this and the 3D capabilities of the platforms... :)
When will you release Visual Studio 2012 compiler update with more c++11 features?
Hi, Roberto. How to use Visual Studio Graphics Diagnostics tools to diagnose Windows Phone 8 DirectX App?
@Z731 You can find links to several resources on how to use the Visual Studio Graphics Diagnostics in a previous blog post - blogs.msdn.com/.../directx-graphics-development-with-visual-studio-2012.aspx These links include end-to-end walkthroughs, as well as documentation on each of the individual tools.