A couple of weeks ago, I spent a little time trying to get my finger on the pulse of 3D in Silverlight. As of today (version 2, beta 2) there’s no “official” support. That’s a bummer. Flash has Papervision and now Astro. WPF has, well, WPF. You might think that Silverlight is eating some dust right now.
Okay, so you’d be a little right in thinking that but, come on, it’s only one and a half versions old. Let’s cut Silverlight some slack and hope that we get some official support soon (but not before Triggers).
But you’re also a little bit wrong. Not only is there some really impressive work being done by our very own Silverlight community to get “real” 3D (i.e. geometries, lighting, cameras, etc.) working but there is plenty of potential for some sweet “fake” 3D (read “tricks”) that Silverlight is more than equipped to pull off.
This is not a comprehensive list or primer, but here are some thoughts, links and resources about creating sweet Silverlight 3D. If you know that I’ve missed something, then definitely let me know. I’m more than happy to let this post grow.
“Real” 3D Frameworks: Kit3D and Balder
Let’s start with “real” 3D. Go ahead purists. You can leave your comments about how there is no “real” 3D on 2D computer screens, etc. The rest of you know what I mean. It’s the kind of 3D that you get from Maya or 3D Studio Max or Blender.
From what I can tell, you have two pretty decent options for this kind of 3D in Silverlight today: Kit3D and Balder. In fairness, I have downloaded, browsed, executed, smelled and otherwise experienced Kit3D. Balder and I have not yet officially crossed paths.
I’m not sure if these two know that they are duking it out, but Kit3D does seem to have the upper hand with 515 Codeplex visits to Balder’s 338. Balder, on the other hand, comes to us via Einar Ingebrigsten (the more Norwegian spelling of Ingebretsen), so go Ingebretsens!
For now, my money is on Kit3D but it’s still anyone’s game. The feature sets of both of the platforms are really impressive. Both seem to have a strong mapping back to the WPF 3D namespace (System.Windows.Media3D). This is probably more good than bad, but that namespace is complex. Unfortunately, Silverlight doesn’t yet have the parser extensibility required to make these APIs markup friendly. For now, at least, the 3D API may be compatible with WPF in code, but there’s not a good markup story.
Nevertheless, you can pull off enough amazing stuff with either that you kind of can’t believe that it’s all Silverlight. Honestly, these are impressive frameworks. Texture mapping (think 3D images) is, at least for me, the standout feature and it’s supported by both.
Faking it: Flipbooks
The classic way to fake really sophisticated looking 3D is to render it as images (or even a video) and then play the images back flipbook style. A lot of great Flash work, game work, etc. gets done this way because it simply doesn’t make sense (or may not be possible) to do the rendering at runtime. The benefits of this kind of approach are obvious: easy to code, fast, lightweight, great tools for creating the content, high quality rendering, etc.
The tradeoffs are potential size issues (the 30 or 40 images you need to pull that off add up quickly) as well as the obvious lack of dynamic interaction. You pretty much get one path through the 3D motion and that’s that.
For smaller, intricate bits of UI (think something like an animated character or a leaf blowing through the wind), this can be a really powerful approach. It also may be worth the size tradeoffs for “hero” UI, important bits of UI that are worth a big download like 360 degree product previews, etc.
There’s a really great implementation of this kind of image sequencing available as part of the “nibbles” Silverlight/WPF tutorials. You can see it in action or get the code.
Incidentally, this is also the technique used by Swift3D for exporting to Silverlight, the same technique that they’ve been using all these years in Flash. If possible, it keeps your content in vectors.
Faking It: 2.5D
I’ve heard this term tossed around to refer to various things, but I’m going to use it like this: 2D + perspective transforms. Yeah, so Silverlight doesn’t directly support perspective transforms either (fist shake at 2×2 matrices). We’re not completely out of luck though. A lot of 2.5D techniques can be faked with good old 2D vector trickery. There are no magic bullets here and there are no great libraries (yet). But there is plenty of inspiration (make sure to check out the Corner Drag sample).
Faking It: Parallax
Parallax is the technique that old video games and starfield screensavers use to create depth within a group of 2D objects. It’s also the technique I use on the nerdplusart homepage or that Microsoft uses for the navigation on it’s hey-genius recruiting page. It turns up all over the place.
This one is really easy and in the right scenario can be really effective. The effect of 3D is created by the size and placement of objects relative to one another. It becomes particularly effective if the objects are moving because you see how the movement effects each object differently, and at different speeds. If you really want to step it up, you could even change the relative darkness of an item if it is further away to emphasize its distance.
The good news about this technique is that it’s really easy to pull off and you can do it with very simple transforms on the items. If you can scale and translate (move in x/y space) an item, then you can do this (and Silverlight can…go Silverlight!). Not only that, but the math isn’t tough either. Here’s the function that I use on the homepage to make the parallax magic happen.
public void CalculateParallax(
double x, double y, double z, double cameraX, double cameraY, double cameraZ,
double focallength, out double outX, out double outY, out double outScaler)
{
// account for x and y with a translate transform
outX = x - cameraX;
outY = y - cameraY;
// account for z with a scale transform
outScaler = focallength / Math.Max(focallength + z - cameraZ, 0.000000001);
}
The variables x, y and z are the coordinates of the item in the “scene.” You also provide the camera coordinates and the focalength of the imaginary “math” lens (I usually pass in a value of about 100) which will adjust the relative strength of the z component (just like the focal length of a camera) and…oila…you’ve got the values you need for your translate (outX and outY) and scale transforms (outScaler).
Faking it Other Ways: Great Design
I’m not a 3D junkie by any means. My foremost passion is experience design, and 3D in UI is hard to pull off at all let alone pull off well. There are technical reasons that make it complex, but it’s also just tough to design.
A lot of great 3D is tough to categorize by technique. A good designer can introduce a third dimensional component to an experience without us really noticing that it’s even there because it just feels right and many of the techniques that get us there are ad-hoc or just the product of clever art. So, in the end, much of the challenge of good 3D isn’t technical at all. It’s the challenge of a great design, well executed in the concept or art phases of the project and Silverlight is well equipped for great design.
As a community, let’s not wait for official paltform support to start building some sweet 3D. There’s already plenty of technology…we just need to step up and apply some great design.
Regardless of your politics, I’m pretty sure that you can get behind Scott Hansen (Mr.