Introduction: Interactive Content from LightWave Scenes

These tutorials are designed to enable you, as a LightWave artist, to produce interactive 3D content for WPF applications quickly and easily via Microsoft Expression Blend. They attempt to guide you around the potential pitfalls in the process while presenting the quickest route to the best possible output. It also acts as a very brief introduction to using Expression Blend. If you've already got experience using it, you can probably skip some of the details.

I've assumed that the keyboard and menu layouts are as default; if you've customised your config then you'll need to adjust accordingly. I've also assumed that you've followed the instructions for installation here.

Tutorial 1: Exporting a Simple Model from Modeler

In this tutorial, you will export a simple logo from Modeler and import it into Expression Blend as static content in a new project.

Here you see a simple model in Modeler. This model is a simple mesh, with only a colour value set. This is the simplest possible case.

1. The first thing to do is to ensure that the only polygons in the mesh are triangles. WPF can only handle triangles - other n-gons need to be deleted or tripled by pressing "T"

2. Select "XamlLayerExport" from the Additional menu on the Plugins sub-pane on the Utilities tab.

3. Navigate to the content directory, enter a filename of "tut1.xaml" and press "OK". When the plugin has finished saving the file, close Modeler.

4. Open Expression Blend and create a new project. Select "Link to Existing Item..." from the Project menu, navigate to and select "tut1.xaml", and press "OK".

5. The project pane should now appear as shown on the right.

6. Double-click the entry for tut1.xaml, and the content will appear on the art-board.

7. To insert the content into the project's start page (Window1.xaml), right-click the Viewport3D at the top of the Objects and Timeline pane, and select "Copy". Now, switch to Window1.xaml's tab in the art-board, right-click the LayoutRoot entry in the Object and Timeline pane, and select "Paste". The content will appear in Window1.

8. Press "F5" to test the project. Once the project has built, you should see your window appear as a full-fledged application.

Notes

As noted above, WPF can only handle geometries composed of triangles. Tripling gets rid of quads and higher n-gons, but if your model contains any subpatches, they'll need to be frozen (press "Ctrl-d").

Tutorial 2: Converting a Simple Scene from Layout into a Button

Because Modeler has no notion of cameras or lights, the plugin generates a potted rig which should suffice for the simplest of cases. To get control over the camera and lighting, you need to shift to Layout. Shown here is our logo from tutorial 1 with a simple rig. I've assumed that since it's the same content as before, the model has already been tripled.

1. Running the plugin from Layout is the same as from Modeler. Select "XamlSceneExport" from the Additional menu on the Plugins sub-pane on the Utilities tab.

2. Navigate to the content directory, and save the file as "tut2.xaml", and follow steps 4 to 7 of tutorial 1 to import the content into Blend.

3. Select the Viewport3D in the Objects and Timelines pane, and select "Make Button..." from the Tools menu,

4. Enter "tut2ButtonStyle" in the popup which appears, and click "OK".

The content has now been converted into a button.

Notes

The button as created has no finery - it doesn't react to MouseOver events, nor does it visually react when it's clicked. There are a number of ways to deal with this, one of which will be handled in a later tutorial.

Tutorial 3: Converting a Scene with Image Textures

The scene for this tutorial only contains one image; the process is easily extended to more than this.

The plugin is set up to allow the exported content to be viewed as quickly as possible, assuming that you "Link to Existing Item..." when you import the content into Blend. This works, and there is minimal impact when importing content into an existing project, but there is a catch. If you export a scene which includes image textures, the image paths contained in the exported XAML will be absolute paths, including full drive information for your computer. This means that any application you build this way won't work on anyone else's computer. To fix this, do the following:

1. After you "Link to Existing Item..." to import tut3.xaml into Blend, select "New Folder" from the Project menu. Name it "Images".

2. Right-click the Images folder, and select "Add Existing Item..."

3. Navigate to and select the image in LightWave's content directory, and click "OK". The image should appear in the Project pane under the Images directory.

4. Double-click tut3.xaml in the Projects pane to open the Design view. Switch to XAML view.

5. Locate one of the absolute paths in the XAML, and select the path from the drive to the "Images" entry (excluding "Images").

6. Select "Replace" from the Edit menu. The selected path should appear in the "Find what: " textbox. If there's anything in the "Replace with:" text box, remove it. Click "OK".

7. Now, because the paths are essentially broken from the point of view of the original file, you need to copy and paste the XAML itself into Window1. Select the entire Viewport3D, and copy it and paste it into the Window1's XAML. Switch back to the Design view, and your content should be visible.

Notes

The copying and pasting of raw XAML can be avoided if you "Add Existing Item..." to import tut3.xaml in stage 1 instead of "Link to Existing Item...". You will still need to fix the paths, however.

Tutorial 4: Converting an Animation to a Button's OnMouseOver Animation

In exporting an animation, a Storyboard entry is created in the XAML. If you only want to play an animation back, then you can simply add the exported XAML to the project and set it as the startup page (by right-clicking it in the Project pane and selecting "Startup"). The plugin generates a trigger which will play the animation back as soon as the application is loaded under these conditions, and you can also play it back in Blend by selecting the animation timeline in the Objects and Timelines pane (click where it says "Default" and you should see an option presented which, when clicked, produces a timeline pane).

However, in following the sequence of actions in Tutorial 2, this storyboard is stripped out when the Viewport3D is pasted into the destination window, and needs to be re-inserted before it can be hooked up to a trigger.

1. Having followed steps 1 to 4 of Tutorial 2 (with an animated scene, tut4.lws),

2. Double-click the "tut4.xaml" file in the Project pane to open the file containing the storyboard. Switch to the XAML view, and select and copy the entire storyboard.

3. Switch back to the Window1 tab, right-click the created button in the Objects and Timelines pane, and select "Edit Control Parts (Template)" > "Edit Template". This will change the Object and Timelines pane's scope to just edit the button.

4. Click the "IsMouseOver = True" entry in the Triggers pane. The IsMouseOver triggers will appear in the pane immediately below.

5. Click the '+' button on the "Actions while activating" row. A popup will appear saying that a new timeline has been created, called "Timeline1". Dismiss it by pressing "OK".

6. Switch to the XAML view, and search for "Timeline1". The first entry found should be a line containing '<Storyboard x:Key="Timeline1"/>'. Select this entire line, and paste over it.

7. Copy the new storyboard's x:Key element.

8. Press F3 to search again for "Timeline1". The next entry found should be the only other entry in the file; it is part of the trigger declaration.

Paste the copied storyboard key over it.

9. Switch back to the Design view. It will have changed back to top-level scope; repeat step 3 to return to editing the button template.

10. Select the "IsMouseOver" trigger in the Triggers pane. You should see that the "Actions when activating" section now contains an entry for the pasted-in storyboard.

11. Click the '+' button for "Actions when deactivating". An entry matching that under "Actions when activating" will be created; change the final drop-down from "Begin" to "Stop".

12. Press "F5" to test the application. You should now see the animation played when you hover the mouse over the button, and the animation should reset when it leaves the button area.

Notes

Certain animation features cannot currently be exported from LightWave to XAML. WPF doesn't handle TCB splines - the only options are cubic splines and linear keyframes. In addition, there are restrictions on where the spline control points can be located and still be accurately exported. These will give warnings on export from Layout. TCB splines are currently linearised on export - a future release will convert them to a best-guess cubic spline, but for best results you should perform the conversion manually.

Of LightWave's pre- and post-conditions on keyframes, only "Repeat" and "Oscillate" are supported.

Tip: if you intend to loop your animation, ensure that you have keyframes at the start and at the end of your animation. WPF handles looping differently to LightWave, and keyframing the start and end points forces them to agree.

Tutorial 5: Exporting a Morphed Animation

For LightWave, an animation involving morphs is not fundamentally different from any other type of animation. However, because WPF doesn't include any classes to handle vertex deformation of models, an extra step is needed if your animation involves them. Prior to attempting to import the XAML (however you wish to do so - this applies no matter whether you set the objects up as buttons, as static content, or anything else for that matter), you need to:

1. Ensure that you have a copy of ShaxamAnimation.dll. You should have received this with your copy of the plugin. If not, you can download it from http://www.shaxam.com.

2. Open your project in Blend (or, if starting a new one, do so) and select "Add Reference..." from the Project menu. Navigate to, select and confirm ShaxamAnimation.dll. You should now see ShaxamAnimation.dll under References in the Project pane.

3. Import your XAML as normal.