IRhetoric - Karsten Januszewski : 3D

New Lab Posted: Creating 3D Content with Windows Presentation Foundation

karstenj — Wed, 28 Mar 2007 23:25:00 GMT

I just posted a new lab for learning how to use 3D in WPF. This is a great lab that I would highly recommend if you are learning WPF 3D. It shows how to do dynamic animation of 3D content as well as how to do 2D on 3D using the 3DTools.

3D Cloth Source Code Posted: Technique for WPF 3D Morph Mesh

karstenj — Mon, 26 Feb 2007 22:44:00 GMT

There is a great 3D cloth demo that has been floating around interally for awhile and shown at conferences, talks, channel 9 interviews, etc. However, we haven't ever posted the source code . . . until now. You can run it from here and download the source code here.

I didn't write this code; David Teitlebaum, from the WPF team, did. He was hesitant to release it as the code isn't factored to his liking, but I convinced him otherwise. His code is interesting to read: Thing3D is my personal favorite class. It is also worth calling out that he uses no XAML and he also uses a MatrixCamera instead of the more easy-to-grok PerspectiveCamera and OrthographicCamera. And the technique he uses for morphing the mesh is to swap out vertices on the fly using a timer, again not for the feint of heart. But, if you already know 3D paradigms and are wondering how to create stunning effects like this in WPF, this source code will be illuminating for you.

If you can't run the application because you either aren't on Vista or haven't installed .NET 3.0 on XP, here are some pics to give you a sense of the effect as the cloth, which is really just a 20 x 20 vertice plane, drops onto a sphere, bounces and slides onto a cube:

You can run it from here and download the source code here.

Inspired By Flash Math Creativity #2: WPF Planets

karstenj — Sat, 24 Feb 2007 00:45:00 GMT

My next inspiration from the algorithms introduced in Flash Math Creativity was based on the work of Jamie MacDonald. In looking at his work, I quickly realized that I was going to need to brush up on my trigonometry skills. This led me to another great Friend of Ed book, Foundation ActionScript Animation: Making Things Move, which has some great trigonometry for animation explanations.

You can see the results of my latest experiment here and the code is here. Just to make sure I was up an running with basic trig, I created a sine wave in 01 as follows:

double x = 0;
double y = 0;
double angle = 0;
for (int i = 0; i < 500; i++)
{
    x += 1;
    y = 200 + Math.Sin(angle) * 50;
    Ellipse el = new Ellipse();
    el.Width = 2;
    el.Height = 2;
    el.Fill = Brushes.Red;
    Canvas.SetLeft(el, x);
    Canvas.SetTop(el, y);
    stage.Children.Add(el);
    angle += .05; }

Nothing fancy here. To make a circle, I changed the x to be x = Math.Cos(angle) * 50. This is the basis for doing circle and ellipse animations. Now, instead of trying to do animations using CompositionTarget.Rendering, I remembered that the SDK has a great sample called CustomAnimations, in which a CircleAnimation exists already using this formula. Here's the key code where it overrides the GetCurrentValueCore method to create the circle effect using basic trig:

protected override double GetCurrentValueCore(double defaultOriginValue, double defaultDestinationValue, AnimationClock clock)
{
double returnValue;
double time = clock.CurrentProgress.Value;

    // math magic: calculate new coordinates using polar coordinate equations. This requires two
    // animations to be wired up in order to move in a circle, since we don't make any assumptions
    // about what we're animating (e.g. a TranslateTransform).
    if (Direction == DirectionEnum.XDirection)
    {
        returnValue = Math.Cos(2 * Math.PI * time);
    }
    else
    {
        returnValue = Math.Sin(2 * Math.PI * time);
    }

// Need to add the defaultOriginValue so that composition works.
return returnValue * Radius + defaultOriginValue;
}

At first, I used this in code to create the effect of these circles circling toward you using BeginAnimation, based on the TowardUs sample in the Flash Math Creativity book (the very first sample):

CircleAnimation cx = new CircleAnimation();
cx.Duration = new Duration(TimeSpan.FromSeconds(1.5));
cx.Direction = CircleAnimation.DirectionEnum.XDirection;
cx.Radius = 150;
cx.RepeatBehavior = RepeatBehavior.Forever;

CircleAnimation cy = new CircleAnimation();
cy.Duration = new Duration(TimeSpan.FromSeconds(1.5));
cy.Direction = CircleAnimation.DirectionEnum.YDirection;
cy.Radius = 150;
cy.RepeatBehavior = RepeatBehavior.Forever;

stage.Children.Add(el);
el.BeginAnimation(Ellipse.OpacityProperty, opacityAnimation);
st.BeginAnimation(ScaleTransform.ScaleXProperty, d);
st.BeginAnimation(ScaleTransform.ScaleYProperty, d);
tt.BeginAnimation(TranslateTransform.XProperty, cx);
tt.BeginAnimation(TranslateTransform.YProperty, cy);

This resulted in 03. It worked, but the code started getting ugly as far as getting each circle to fire when I wanted it to. I found myself using a timer and wiring up an anonymous delegate. I realized Storyboards and ParallelTimelines would serve me much better, which are much easier to wire up in XAML than in code. So, 04 is the same thing, but a XAML solution instead:

By using parallel timelines I could structure my animations and when they fired.

A nice thing about this CustomAnimation is that it can be applied to 3D animations as well, applied to the TranslateTransform3D which I did 05, changing the Radius property to be much smaller to fit the coordinates I was using for my ViewPort.

void towardus3d_Loaded(object sender, RoutedEventArgs e)
{
    sphere = new GeometryModel3D(sphereFactory.Mesh, materialGreen);
    ModelVisual3D mv3d = myViewPort3D.Children[1] as ModelVisual3D;
    mv3d.Content = sphere;

    CircleAnimation ca3d_y = new CircleAnimation();
    ca3d_y.Duration = TimeSpan.FromSeconds(5);
    ca3d_y.RepeatBehavior = RepeatBehavior.Forever;
    ca3d_y.Radius = .5;
    ca3d_y.Direction = CircleAnimation.DirectionEnum.YDirection;

    CircleAnimation ca3d_x = new CircleAnimation();
    ca3d_x.Duration = TimeSpan.FromSeconds(5);
    ca3d_x.RepeatBehavior = RepeatBehavior.Forever;
    ca3d_x.Radius = .5;
    ca3d_x.Direction = CircleAnimation.DirectionEnum.XDirection;

ModelTranslate.BeginAnimation(TranslateTransform3D.OffsetYProperty, ca3d_y);
ModelTranslate.BeginAnimation(TranslateTransform3D.OffsetXProperty, ca3d_x);
}

It then dawned on me, as I looked at 05, an orbiting sphere, that it would make for great planets. I went out to NASA and found the texture maps for Jupiter and its moons. I also wanted to do all of this 3D work in XAML, so I made a class called SphereModelVisual3D that I could instantiate Jupiter, for example, like this:

<mv3d:SphereModelVisual3D x:Name="Jupiter" >
<mv3d:SphereModelVisual3D.Material>
    <DiffuseMaterial>
      <DiffuseMaterial.Brush >
        <ImageBrush ImageSource="http://maps.jpl.nasa.gov/pix/jup0vss1.jpg%22/>
      </DiffuseMaterial.Brush>
    </DiffuseMaterial>
</mv3d:SphereModelVisual3D.Material>

      <mv3d:SphereModelVisual3D.Transform>
    <Transform3DGroup >
      <ScaleTransform3D ScaleX="2" ScaleY="2" ScaleZ="2" />
      <RotateTransform3D>
        <RotateTransform3D.Rotation>
          <AxisAngleRotation3D Angle="0" Axis="0 1 0" x:Name="Jupiter_rotation">
          </AxisAngleRotation3D>
        </RotateTransform3D.Rotation>
      </RotateTransform3D>
      <TranslateTransform3D OffsetX="0" OffsetY="0" OffsetZ="0" />
    </Transform3DGroup>
</mv3d:SphereModelVisual3D.Transform>
</mv3d:SphereModelVisual3D>

The animation that handles the elliptical orbits needs to transform the Z property the TranslateTransform3D. It then looks like this:

The result is in 06. It is not astronomically correct as far as scale -- I'll leave that for someone with some more time on their hands, but I liked the end result. I also threw in the TrackBall control from the 3d tools project so you can trackball the whole model.

The code is here.

Doninoken: WPF XBAP Piece by Bascule

karstenj — Thu, 25 Jan 2007 23:01:00 GMT

Check out Doninoken, an amazing WPF piece that is part of the Japanese Vista launch, done by the design agency Bascule. The aesthetic is amazing. I love how they use WPF 3D, mapping images on planes and animating the planes. (Watch for the small camera that pops up after the title screen that lets you interact with the app and zoom the camera around.) Still, how did they do it? Maya exports? Hand tweaking XAML? It is very impressive. And makes you want some sushi...

Woodgrove Finance Application Source Code Posted

karstenj — Wed, 06 Dec 2006 04:07:00 GMT

The Woodgrove Finance Application is a great demo of how WPF can be used to create better data visualization, in this case for financial data. I've posted the source code -- there are some good nuggets in here worth exploring.

Click Here To Run It

Using The Finance Application

The application provides a 3D visualization into a hypothetical, static porfolio. It is important to note that this application is not bound to live data. To the left is a 2D list of stocks, grouped by Small Cap, Mid Cap and Large Cap stocks. By clicking on a stock in this list, detailed information about the stock can be seen in the far right column. If you hover over the 2D stock chart, it will expand for an easier reading experience.

Hovering over a stock will group it with other stocks of the same sector within that market size. For example, hovering over ArvinMeritor will also highlight Men's Wearhouse, both part of the consumer segment. This becomes interesting in terms of the 3D chart, in the center of the application. You can see how the labels for the X and Y axis update when different stocks are hovered over. The hover action pinpoints that particular grouping of sector and market cap, aggregating the results. So, one can immediately get a sense of how Mid Cap stocks in the consumer sector are doing -- in this case, not well, as can seen from the long red bar.

The application is two way, in that you can also interact with the 3D bar chart and see the corresponding 2D areas become highlighted. If you leave the mouse over a given bar for 1 second, you will get information about that bar as well, letting you know what aggregate of stocks that bar represents as well as the market cap and sector.

If you click on the the Woodgrove logo, the 2D section will animate away, allowing you to focus on the 3D. Holding the right click button down of the mouse will allow you to trackball the graph. In addition, you can compare stocks against the DJIA if you click that button. (The other comparison buttons aren't wired up.) If you then move the slider, you will see an animation between the current data and a date in the past.

Lastly, by switching in the drop down from Day % Change to Dollar change, the bars turn to columns.

Decomposing The Finance Application

While all of the data is static, the application is designed to support databinding to live data and could be done with a nominal amount of effort. Right now, everything is databound to the static equity.xml file. However, changing the databinding to a webservice would allow for this application to show real data.

You'll notice that the project is factored into multiple components. The WoodgroveFinanceApplication doesn't really do anything but hold the WoodgroveFinanceHost, which sets up the layout and handles the interaction between the 2D and the 3D. The WoodgroveFinanceStockChartFrame then holds the 2D pieces and the WoodgroveFinanceStockChart3D holds the 3D pieces. By doing this componentization, all of the functionality is really contained in controls, such that they can be added to a different project quite easily. If just the 3D section were desired, it is already isolated from the rest of the application.

You can open the project in Expression Blend, which is very cool. One could customize the look and feel from within Blend. It also demonstrates how Expression Blend supports opening .sln files and working with multiple projects.

Lastly, it is worth commenting that the 3D graph is based on work done by Robert Hogue (http://www.therhogue.com/WinFX/). Some of the explanation in his download pack is germaine to the code in the 3D part of the application.

Enjoy!

WPF Vista Gadgets - Part 1: Using XBAP and IFRAME

karstenj — Thu, 05 Oct 2006 06:59:00 GMT

If you are following Vista, you are probably aware of the Sidebar, real estate on the desktop that can be used to host gadgets. And, if you are aware of Sidebar, you might be aware that the platform for gadgets is DHTML + Javascript. And, if you are a WPF designer/developer, you might be asking yourself if there are any ways to get WPF content into a gadget. It turns out that there are some workarounds that will allow you to get WPF into the Sidebar. However, there are drawbacks and limitations with using WPF in the Sidebar as the Sidebar does not officially support WPF for gadgets. In this post, I'm going to enumerate one way you could host WPF in a gadget which is to use XBAP and IFRAMEs. In a later post, I will talk about the other option, which is to use ActiveX controls.

Before even going down the path of writing a WPF gadget, it is to decide if the cost is worth it. Can you achieve the visual effect you are seeking without WPF? If the answer is no, read on and find out what you are getting yourself into if you choose to use an unsupported gadget technology.

One of the big limitations with WPF gadgets is that WPF doesn't "play nicely" with the rules of being a gadget, because it swallows mouse events and doesn't propagate them back up to the UI. As such, by default, WPF gadgets won't show the default gadget UI on right click. And, also by default, WPF gadgets won't display the gadget thumb and close icons which are displayed on mouse over. There are work arounds to these problems that I will discuss below, but you can already see that the Sidebar wasn't designed for WPF.

Another limitataion is that a WPF gadget can't get at any of the Sidebar specific APIs,. So, there is going to be some clunkiness to do things like getting the flyout window to display. Now, some of the system APIs have a .NET equivalent, although they require a certain permission level. When using loose XAML or XBAPs in an IFRAME, you will be sandboxed.

Another limitation has to do with performance and working set implications. The user is going to pay a start up cost for loading the WPF engine the first time the sidebar is instantiated, assuming that WPF hasn't been instantiated yet on the system, which is most likely the case since the Sidebar, by default, loads when a user logs in. Additionally, because of the working set required by WPF and the CLR, the working set of the sidebar itself is also going to creep up. Lastly, when the sidebar closes, either at log off or when closed by the user, it has to unload WPF and the CLR. I've seen some unsavory behavior here if your WPF has opened resources that the sidebar has trouble unloading, the result making for an icky user experience when the sidebar unloads. At this point, I haven't isolated exactly what the behaviors are that cause this problem, but I've seen it. Now, all of these problems are tractable, but they are costs that need to be known up front. You certainly don't want to write a gadget that causes problems or makes for a crummy experience.

With these problems in mind, let's look at the first technique: using IFRAMEs

All three of the gadgets pictured above are available w/ source. To install the gadgets, just double click the .gadget files.

Gadgets support the IFRAME tag, which means that you can reference loose xaml or XBAPs from within a gadget. There are a few downsides to this techniques. First, IE has to install the XBAP (or, in the case of loose XAML, the XAMLReader) into the IE application cache. There is no way to preload your XBAP and no way to override the default load UI. So, the user experience is a little funky. Second, if for some reason the IE application cache gets cleared, the XBAP will have to be reloaded the next time the gadget is run. The more likely scenario here is that the gadget's XBAP could be bumped out of the cache due to space limitataions by another XBAP getting installed. The moral of the story being that when using this technique you lose some control over the experience as a whole.

Here's a gadget that hosts a loose XAML file of a rotating 3D cube displaying different images:

<html>

<head>

<style>

body {

width:130;

height:130;

padding:5;

margin:0;

background:black;

}

</style>

</head>

<body>

width="130"

src="3d_animation.xaml" />

</body>

</html>

To use an XBAP, you simply replace the .xaml file with an .xbap file. The main difference between an XBAP and loose XAML is functionality. You'll notice that the XBAP supports a trackball control, allowing the user to rotate the cube and scale it with the mouse wheel. This was made possible by writing C# code, as can be seen in the source.

Remember early I mentioned some workarounds for the mouse propagation problem. You can see the workaround to the mouse hover problem where I set the padding of the gadget to 5 pixels. Another technique would be to put the IFRAME in an html table. I then make the background color of the padding identical to the background color of the WPF airspace. I lose some screen real estate, but at least I get the thumb and minimize UI to show up on the gadget, although if you move the mouse really fast, it doesn't work. I haven't figured out a workaround to the righ click problem yet. (If anyone does, let me know!)

One interesting technique that you could do is reference your loose XAML or XBAP on a server. However, this ties the gadget to the internet, which means you'd have to do some checking from Javascript to make sure the user was online before even showing the IFRAME. This is certainly doable: many of the gadgets that ship with Vista do this already. The appeal of this option is that the gadget could be auto-updated on a server and automatically the client would get the new version. Also, XBAPs deployed from a server are allowed to get back to that server for new data, incremental downloads, etc.

Another interesting fact about XBAP gadgets is that, if they are run from the local filesystem, they can be full trust. However, if they are deployed from a server, they would have to be partial trust unless the cert that signed the XBAP is registered in the user's trusted publishers certificate store.

[Source and Gadgets]

(Note: thanks to the artistry of Maureen Lanza for the images.)

3D Integration in Windows Presentation Foundation: Daniel Lehenbauer Does It Again

karstenj — Thu, 15 Jun 2006 22:29:00 GMT

How did I miss this? Daniel's show on 3D Integration in Windows Presentation Foundation is really nice. Even better, he shares some great code samples, which indirectly lead me to http://viewport3d.com which has a nifty article -- nice domain name snag, Daniel! I think I need a seperate 5 day course on 3D and WPF...

Thoughts On Video on 3D in WPF

karstenj — Thu, 15 Jun 2006 00:33:00 GMT

I have uploaded Sandbox3D into the WPF Gallery. I added back the X, Y and Z axes using ScreenSpaceLines3D from Daniel Lehenbauer. Most interestingly, I show two different techniques for mapping video on 3D. One is using the VideoDrawing with a MediaPlayer, like this:

private void DrawVideoOnMesh(VideoDrawing vd, GeometryModel3D gm3d, Uri uri)
{
    MediaPlayer mp = new MediaPlayer();
    mp.Open(uri);
    mp.MediaEnded += new EventHandler(mp_MediaEnded);
    vd.Player = mp;
    vd.Rect = new Rect(0, 0, 5, 10);
    DrawingBrush db = new DrawingBrush();
    db.Drawing = vd;
    Brush br = db as Brush;
    MaterialGroup mg = new MaterialGroup();
    mg.Children.Add(new DiffuseMaterial(br));
    gm3d.Material = mg;
    vd.Player.Play();
}

The other uses a VisualBrush with a MediaElement:

private void DrawVisualBrushOnMesh(GeometryModel3D gm3d, Uri uri)
{
    myMedia.Source = uri;
    myMedia.MediaEnded += new RoutedEventHandler(myMedia_MediaEnded);
    VisualBrush vb = new VisualBrush(myMedia);
    MaterialGroup mg = new MaterialGroup();
    mg.Children.Add(new DiffuseMaterial(vb));
    gm3d.Material = mg;
    myMedia.Play();
}

Because there are two ways to acheive the effect (gee, being able to do something more than one way never happens in WPF), you may be wondering which you should use. The answer is, of course, it depends.

From a performance perspective, there is very little difference between the two techiques because both techniques will require WPF to create an intermediary render surface to be able to correctly map the video to 3D. (This intermediary step always happens with a VisualBrush even in 2D, whereas it doesn't happen with the VideoDrawing in 2D, which may be worth noting for doing tricky things with video in 2D, but that is another topic.)

From a code manageability perspective, it is worth pointing out that VideoDrawing requires using code, whereas you could create and control (using Storyboards) a VisualBrush, MediaElement and all the necessary 3D gunk entirely in XAML -- in fact, EID does just this. However, there is the slight strangeness that you have to be rendering that MediaElement somewhere, even if it is offscreen or buried in z-space (which is what I did in Sandbox3D).

One other note: there are two bugs with using video on 3D in Beta2 to be aware of. First, looping is broken, Second, applying a MaterialGroup that has video a second time to the same model doesn't work. However, both of these issues are known and will be resolved for the next CTP.

Updated MSDN Article on Dynamic Animations in WPF

karstenj — Fri, 09 Jun 2006 01:40:00 GMT

I've updated an MSDN article that I wrote quite awhile back called Creating 2-D and 3-D Dynamic Animations in Windows Presentation Foundation. Basically, it is a visualization of CPU utilization, dynamically creating the animation on the fly using the WPF Animation engine. The article shows how to do simple scale animations in 3D, of which there aren't a ton of examples out there.

The most interesting update to the article is running the application on Vista. Because of User Account Control (UAC) in Vista, the application requires elevated permissions to get at the performance counter data. The article explains how to have your application display the standard elevated permission dialog using a manifest -- much more user friendly than having your users right-click and run as admin:

ScreenspaceLines3D

karstenj — Wed, 31 May 2006 02:24:00 GMT

Those lamenting the loss of ScreenSpaceLines3D -- count me as one of them as I used them in Sandbox3D which I need to post ASAP for beta 2 -- should check out Daniel Lehenbauer's community implementation which also includes some other helpful 3D classes.