2.5D UserControl for Silverlight 2
2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided an implementation that has no lighting, materials, lines or polygons. But it does enable you to locate 2D (that is, flat) objects at x,y,z coordinates and place the camera where you want it. The implementation then projects the objects onto the camera, scaling and translating them appropriately, and handles mouse input to move the camera.
You can see a small example demonstrating this below:
Holding the left mouse button and moving the mouse rotates the camera; holding down Ctrl zooms; holding down Shift adjusts the field of view.
Often, rotation causes an object to come in front of another, in terms of their distance from the camera. So each time it draws the scene, the implementation calculates the distance of each object from the camera and then sorts and draws them from back to front. It also culls (that is, removes from the scene) any object behind the camera. Other frills this implementation has are a kind of depth-of-field effect and a fog effect. The depth-of-field effect can be seen whenever an object gets very close to the camera: in this case its opacity falls off exponentially. The fog effect causes the saturation of distant objects to reduce, and their brightness to increase, so that they appear to be melting into fog or haze.
Anyway, you can download the source for the above project from the following location:
 |
Download 2.5D User Control Source |
You can use Expression Blend 2 SP1 and Visual Studio 2008 to dive into the app and see how
TwoAndAHalfDUC (the first class in the file TwoAndAHalfDUC.cs) is a UserControl base class from which you can derive your own classes. In that same file you will find the CubeUC class that derives from TwoAndAHalfDUC to provide an example of what to do. All you need to do is provide an override of the InitializeSprites method that creates and initializes a number of TwoAndAHalfDSprite objects.
The base class always draws the sprites as colored circles (and of course it does this from any viewing angle so the objects behave as spheres would) but you can amend that behavior so that other 2D objects are used. I tried TextBlocks (and scaled them via their RenderTransform) and the result was very interesting.
Enjoy!
Steve
Comments
Anonymous
November 17, 2008
PingBack from http://www.tmao.info/25d-usercontrol-for-silverlight-2/Anonymous
November 17, 2008
Real nice! Any 2.5D effect u can provide for the SL toolkit Charts? Thanks, GopiAnonymous
November 17, 2008
2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve providedAnonymous
November 17, 2008
Meine Kollegen aus dem Expression Blend/Design-Team in den USA haben gestern ein schniekes Control fürAnonymous
November 18, 2008
In this issue: Justin Angel, Shemesh, Albert Eyal, Steve, Ruurd Boeke, Mike Snow, Mehdi Slaoui AndaloussiAnonymous
November 19, 2008
  ok, Silverlight ainda não suporta 3D de verdade, mas aqui está uma bela solução que emula perspectiva,Anonymous
November 20, 2008
http://www.domaindotnet.com/clientbin/DeepZoom3d.html Click the link above to see how we implemented 3D in deep zoom. This is part of a much larger 'taxonomy navigation' view in Sharepoint, but is usable with just about anything. These are just fun images for the internet facing demo. Stuff from my past, and even some ghosts! For our product, we have an automated process which traverses and exports documents based on heuristics to get the images we need, then automatically generate a collection per document. This all is cataloged via matrix/hierarchical keywords and regular expression style search. Enjoy. Damon Wilder Carr domain.dot.net team labsAnonymous
November 25, 2008
L’équipe produit d’Expression Blend & Design a publié la semaine dernière un usercontrol sympa quiAnonymous
January 21, 2009
2.5D (two-and-a-half D) is a way of using 2D objects to give a very convincing illusion of 3D. I’ve provided