Category: 3D

Silverlight’s 3D True power – from 0 to hero in 40 min.

Today, Wednesday, I’ll be talking at TechEd Europe 2010 about Silverlight 3D Actual capabilities and how to use them with the session named “Silverlight’s 3D true power – from 0 to 100 in a practical way”,  the time is 1:20pm and it will be at Hall 7.1c, Paris 1.

 

Why 3D? Because it is important for all of us, first we are made to interact with our environment in 3D, our interfaces have 3D tactile capabilities, our vision is 3D and 3D is natural to us (even we have been educated for some years to use 2D interfaces). But.. this is changing, all the industry is switching to 3D, starting by the gaming industry that started with the Wii and now is taking a new step with Kinect as a full body 3D scanner that allows us to interact with our full body with the Xbox interface & games, The Movie industry is also moving to 3D and the display & TV industry is doing so as well… so, it is clear that 3D is important and also the point is that any User interface technology must support this evolution & provide 3D capabilities, for creating 3D interfaces and hopefully in short time, to interact in 3D with them without any device. (So.. when a Kinect for Pc, Microsoft? J – I`m already on the Queue…)

On the session that I am proposing you, we will see the actual status of Silverlight regarding 3D, I’ll show you the basics & ABC of Silverlight 3D capabilities, we will see how do their PlaneProjection properties get along & implement some simple effects and see how we can improve them with Blend so they can shine.

Next, we will get into implementing an intermediate Interaction Design pattern that I love, the Carousel – I’ll show you how to do it from scratch and in full 3D and provide a basic animation so it can spin. Next we will improve its interaction providing it mouse interaction so it spins quicker or slower depending on how far is the mouse cursor from the center. Also we will add some control for when the mouse gets out of the interaction area, so it does not start spinning like crazy (I can bet you have seen more than one of these in production websites…).

Regarding the Carousel, you curious people can read more about it here: http://developer.yahoo.com/ypatterns/selection/carousel.html, here: http://ui-patterns.com/patterns/Carousel and here: http://www.welie.com/patterns/showPattern.php?patternID=carrousel and some more… http://wiki.forum.nokia.com/index.php/Mobile_Design_Pattern:_Carousel , http://www.uipattern.com/carousel-design-examples.

Basically allows a user to select one item between a collection of items. This is good because it represents visualy the item (with picture, text & other iconic information) providing accurate understanding of the items to select & also a quick selection of them. This can be done in multiple ways, being one of the most famous the horizontal 2D carousel, the growing one that some OS have for its main function selection, the circular elliptic carousel is also very famous, but who does not know the “CoverFlow”? it is indeed a 3D representation of an horizontal Carousel – by the way, have you checked the Silverlight Booth Demo launcher? It is a nice implementation of this Interaction design Pattern, too! – you can see it at the Silverlight Booth or here: http://www.brainsiders.com//TEE2010/SLShowcase/default.html (note: it is meant to be run in full screen mode). I also implemented there an “auto” mode so I am happy with that, it is simple and efficient. Oh, and the full source code is here: http://showcaselauncher.codeplex.com/

Note that it uses some code from the Bouncing Plane Demo (Henry Han, Tim Heuer, see: http://blogs.msdn.com/b/henryh/archive/2009/03/20/mix09-the-gratuitous-graphics-demo.aspx ) and the for the Horizontal Carousel I’ve used the Flow Layouts Library, see http://slflow.codeplex.com/ from Simon Ferquel, awesome work both of them!!

Oops, almost forgot, For the circular animation I have used the smart technique conceived by John Bruin – http://www.johnbruin.net/index.php/category/silverlight/ – Thanks John!

 

Also, there’s still more, we will see what do we have apart from the core framework, showcasing two amazing components for providing full 3D, the first being Balder a pretty nice Open Source engine friendly with Blend & XAML based and the second, Silvermotion, a commercial component with awesome power, performance & ease of use.

And yes, all this in 40 minutes.

Sounds good? J

 

Session Code: WEB202-LNC

Session room: Hall 7.1c Paris 1

When: Today, 1:20pm

 



Don’t miss it!!  If you are interested in 3D, Silverlight and in learning how to implement 3D Interaction design patterns.. we will dedicate a whole 40 minutes to this!!

Speaking! MobilityDays!! TechEd Europe 2010!!!

Well this is one of the moments that one of you that loves to code, design, speak & share enjoys the most, when other fellows ask you to help them share knowledge 🙂

First of all, thanks to the magnificient team of professionals that is managing both events and I’m extremely glad to have been chosen as speaker for “first time” at these great events. My thanks!

First things first, MobilityDays is happening the Day after tomorrow.. on 23th of September, in Zagreb, Croatia, to the East of Europe. But do not worry, you can assist without having to book a flight! Sesssions will be broadcasted through live meeting :).

There, I’ll be speaking on two sessions : “Developing Windows Phone applications with Silverlight” and “Building games forWindows Phone with Silverlight”. Sessions will be in english.

So, what are you waiting for, go and register : www.mobilitydays.com (update: it’s free for MVP’s and INETA User Group Leaders) and well, there are a lot of very good speakers there – apart from me, the “newbie” I mean 😉 – Joking!!  I expect to make a pretty entertaining and insightful sessions and I hope you enjoy them :).

Also, I’ve been selected to speak at TechEd Europe 2010 conference, so can’t be happier.

I know this deserves a “post apart” and it will have it definitely – let me finish this week and I’ll be back with more details regarding the session that, for starters, will focus on the 3D (2.5D & 3D) capabilities of Silverlight, on a very intense practical session, going from the basis to creating awesome – and I mean that – 3D interactive interfaces in Silverlight. More about this later…

By now, if you haven’t registered, don’t think more, go to http://europe.msteched.com/registration and register before tickets run out!!

Have fun!

3D (2.5D) Interaction Experimental site

If you have followed me on my latest posts you should have seen some of my Behavior experiments for 3D interaction, trying to emulate already existing Real world & 2D interaction design patterns as MouseOver, Click, etc… in 3D (or Silverlight’s actual 2.5D, for Desktop & Windows Phone).

I have put the site www.bcndev.net as a sample or playground thinking on nothing but on providing a 3D interactive experience, with the points that I am not being paid for (it’s a volunteer work for promoting the Barcelona Developers User’s group event) and I have thought on nothing (I repeat myself but I want this clear) apart from the experience, so do not expect a great degree of indexability, accessibility, usability or even performance… the Matrix background effect is a killer of CPU resources …

Disclaimers: If I had the time, hopefully I will do it “when I can” I will implement a “effect adjuster” for adapting it to reduce depth layers & elements on each layer and, maybe, even the falling speed… to adapt it to get a decent framerate… I’ve got on mind other optimizations but sadly not the time, so sorry in advance if this is going too slow for you to appreciate the 3D interactions.
I have added GPU acceleration & left all the debugging on for you to be able to see the performance. It should not go very bad if you have a decent GPU so please leave me a message if it does not, and include the FPS. Thanks!!!

This site is using the 3D behaviors I have published at the Expression Gallery and some others that I have yet to polish before publishing, some of the new ones are part of an experiment of providing 3D effects to 2D elements (usercontrols in fact) and allowing them to nest their DataContexts and thus providing an interesting way of navigating the information. This has yet to be polished but you can see it working when you press the “+ Info” button and then the “Ver Detalles” button…” then just also press over a session or speaker…
As for the behaviors, you can see & get them here:
• http://gallery.expression.microsoft.com/en-us/Project3DToMouse
• http://gallery.expression.microsoft.com/en-us/Slide3DToMouse
• http://gallery.expression.microsoft.com/en-us/MouseOver3D
• http://gallery.expression.microsoft.com/en-us/Loop3d
• http://gallery.expression.microsoft.com/en-us/Animate3D

I would greatly appreciate any feedback you can provide, thanks!!

And, as always, have fun!

Note: The matrix effect is an evolved version of the original code from Terence Tsang, http://www.shinedraw.com – thanks Terence for all those great samples :).

Animate3D, another Silverlight behavior

Animate3D is a a Silverlight Design Interaction Pattern for making easier to implement 3D Interaction – In this case the effect provided is 3D animation that launches in response to a concrete event providing a PlaneTransform animation which can animate a target object with the three Axis, X, Y, Z and its Global and Local offsets. It also allows us to decide an initial and a final alpha for the animation.

We can also indicate if we want the actual state of the object to be the Final state of the animation, providing on the behavior only the first animation state. We can of course add both states, (initial and final). But, for the sake of displaying a not projected control with text (if it has any projection Silverlight 4.0 actually shows it blurred no matter what we do) this option has been added.
It is inspired trying to implement an easy way of defining & executing very quickly 3D animations  that respond to user actions.

It has been designed to be used together with the other 3D Behaviors, that have been published at the Expression Gallery, including this one:
• http://gallery.expression.microsoft.com/en-us/Project3DToMouse
• http://gallery.expression.microsoft.com/en-us/Slide3DToMouse
• http://gallery.expression.microsoft.com/en-us/MouseOver3D
• http://gallery.expression.microsoft.com/en-us/Loop3d
• http://gallery.expression.microsoft.com/en-us/Animate3D

You can also check how this and the other mentioned effects look used together here: http://www.bcndev.net (it is not published right now but will be in short…)
Also I would love to see places where this behavior(s) are being used or any design/implementation you might have done with them.

If you like the behavior, I’d be appreciated if you could vote some stars for this behavior, my thanks!

Have fun 🙂

Loop3D, a new Silverlight 3D Behavior

Loop3D is a a Silverlight Design Interaction Pattern for 3D Interaction – In this case the effect/behavior provided is a3D Loop – a continuous – animation  on the three Axis, X, Y, Z which enables us to turn an element on a certain speed and easing over a concrete axis.

It is inspired trying to implement a planet and its satellites movement which turn around the planet at different speeds and angles. Anyway it can be used to whatever effect you consider, a halo system, etc..

It has been designed to be used together with the other 3D Behaviors, that have been published at the Expression Gallery, including this one:

You can see how it helps implement different effects at the Expression gallery.

You can also check how this and the other mentioned effects look when used together in a consistent way here: http://www.bcndev.net

I’d like to see or hear if you do like this behavior(s) and if you have used them in any design/implementation or whatever you might have done with them 🙂

Also, if you like this behavior it would be appreciated if you give me some stars at the expression gallery. My thanks!

As for the code, you have it at the Expression Gallery, http://gallery.expression.microsoft.com/en-us/Loop3d

Slide3DToMouse

A Design Interaction Pattern for 3D Interaction – In this case the effect provided is a “companion effect” for the Project 3D to Mouse, this, enables us to slide horizontally and vertically a FrameworkElement regarding the calculated X & Y Angle variation based in a determined X & Y axis amplitude. Simply said moves a UIElement accordingly to how is it turning towards the mouse using the other effect.


 
Also you can use it to dynamically adjust the position of an element regarding another object angle, so please if you happen to think of another effect this behavior can be applied, let me know..
It has been designed to be used together with Project3DToMouse, behavior that can be located here: http://gallery.expression.microsoft.com/en-us/Project3DToMouse
The configuration is easy, and very similar to Project3DToMouse:


 
The only thing we add here is the amplitude  for the X & Y, named AmplitudeSlideX and AmplitudeSlideY
 This is good for faking reflections and flares, which you can look how it does look like at http://www.brainsiders.com/playground/slide3dtomouse/default.html.
You can also check how this and other effects look used together here: http://www.bcndev.net
And you can get this behavior here:  http://gallery.expression.microsoft.com/en-us/Slide3DToMouse

As for credits, the original idea of adjusting the position regarding the object’s angle to emulate a light effect is from my friend Edu Couchez, which by the way is a pretty good designer – hopefully he will get a blog soon – do you hear me, Edu? 😉 – and hopefully (again) you will see some work from him in short…

Hope you like  this one and, in short will publish some more 3D Behaviors, based on Interaction Design Patterns I have thought for 3D. By now you have seen three of them :).
To mention that I am pretty open to hear your suggestions on new interactions you might think of :).

Happy coding :)!

MouseOver3D – a 3D Silverlight Interaction Design Pattern

 MouseOver3D

A Design Interaction Pattern for 3D Interaction – In this case the effect provided is a 3D Mouse MouseOver that will make the object with the behavior attached to increase or decrease its Z axis if the mouse is over or outside it.

When the mouse is over, it will raise.

 

When the mouse goes out, it will lower down…

The configuration is easy:

The usual on a TargetedTriggerAction behavior, a general hover offset which indicates how much it will adjust over the Z axis to provide the hover effect and then two configurable animations, for when it goes up and when it goes down.

For having a funny test, I’ve added some logos of my user group inside a WrapPanel and – of course – an attached FluidMoveBehavior just because I love this new functionality and going to what matters here, one MouseOver3D behavior to each logo. i have toyed a bit with each one, so when you execute you can see the effect there, various Z offsets, 80, 120 and more.. and also I’ve applied some easings as Cubic, Bounce, Elastic… also, some of the logos have its axis a bit changed so you can see it respects their rotation and moves accordingly.

you can test it here: http://www.brainsiders.com/playground/mouseover3d/default.html

And you can get the code here: http://gallery.expression.microsoft.com/en-us/MouseOver3D

Hope you like it and, in short will publish more 3D Behaviors, based on Interaction Design Patterns I have thought for 3D.

If you want to see some of them applied together, please go see http://www.bcndev.net   and – I’d love to get your feedback… To note that I plan to release all of the behaviors implemented there and even some more that I still haven’t showed up there or even implemented… also I’m pretty open to hear your suggestions on new interactions you might think of :).

Ah, for the curious ones, the site http://www.bcndev.net is the Barcelona’s user group and now it is showing off an event for next month.. so if you want to come, this event will be for updating the developers firmware for the .net Framework 4.0, visual studio 2010, EF4.0, Silverlight 4.0 and ASP.NET 4.0… the only thing is it will be in Barcelona and in Spanish :P.

Happy coding :)!

Project3DToMouse, a mouse powered 3D projection behavior

Behaviors were a great addition for Silverlight 3 and just have become better for Silverlight 4. One of my playgrounds at home have been Projection animation experiments for providing  advanced – or crazy – interactions and effects… The main thing is this is not simple to implement and it’s hard to let it be “fine tuned” by a designer or even by yourself, as who wants to recode everything if you can get a great interface for personalizing your effects without much effort?

Thus I’ve made the 3D projection to mouse behavior.

You can try it out here:

http://www.brainsiders.com/playground/Project3DToMouse/default.html

What does it do?

  • It animates a the projection of a FrameworkElement on the X and Y axis in the proportion of the position of the mouse regarding another FrameworkElement, normally the main Canvas, LayoutRoot.
  • It calculates the projection and applies it with certain amplitude degrees for the X and Y axis. Why not only one amplitude? because you might want your content not to turn the same degrees horizontally as it does vertically, screens aren’t squared and maybe you want a concrete effect  (only horizontal, or only vertical).
  • Also, it does this as an animation on a configurable time and on a configurable EasingFunction, which is good for a designer, so you can make it move smoothly or in a funny elastic way :).
  • I have set up a flag to decide if you want to make the orientation of the projection towards the mouse, facing it or against it.
  • It also has a nice animation to go back to the starting position if the mouse gets out of the application.

Going to the code, everything is categorized and with descriptions to help it being used, adapts well to FrameworkElements that have a fixed or dynamic height and width and the storyboard is generated on the go in memory so it is not possible to step over other animation, this meaning that this behavior can be applied to more than one element in the same UserControl.

The wiring up is done on the OnAttached and OnDetaching events, the Invoke does nothing so it could be deleted.. I have used the TargetedTriggerAction because I need the pick up the behavior from a control that takes the whole screen and apply the projection effect to another control, preferably smaller to appreciate the effect. It would be good if we could deactivate the “invoke” so that designers would not get confused.. just my 5 cents.. 😉

On how to use it, this is easy, copy the Project2Mouse.cs file to your project and that’s it. At least it is easy for a developer, for a designer it would be cool if we could configure a behaviors folder and leave there all the behaviors encapsulated as “dll”, so Blend would load and show up the behaviors blend has, the ones on the project and the ones at the folder… then it would add references as needed at the project.

Other thing I am finding difficult is that the current Behaviors interface is good for having 10 to 20 Behaviors, it turns difficult to locate quickly a behavior. It would be good if they could be categorized or tagged (author, description, category and tags (1 .. n would be great).

To get it, it is published at the Microsoft Expression Behaviors Gallery, here: http://gallery.expression.microsoft.com/en-us/Project3DToMouse

I am thinking on publishing  some other interaction behaviors – after cleaning a bit the mess that happens when playing with different behaviors until you get the desired effect, that is..

If you happen to have an idea of an interesting behavior I’d be happy to hear it and try to implement it :).

A 3D control for a 3D world…

Well, this is a simple technique that will allow us to move a 3D mesh in a 3D environment.. ¡¡with a wiimote!!

Have to say that this is ideal to control models that represent high density data, like 3D graphs and it is very easy to adapt to other possibilities… maybe we are in a beautifully expanding world that unifies WPF with 3D in a growing virtual world??

I don’t have any other desire that being there… 😀 so do expect more similar entries…

And like sharing is the rule, , here is the code. It lacks some features I thought of and want to ad a lot more, but by now it Works :^) and that is something. For making it to work you will need a wiimote… – If anybody wants to give me a 3D mouse I’ll try to do the same with 3degrees of freedom (do you hear logitech?) And it would be great to have something more precise and with movemoents on the 3 edges…

Ah, it uses Brian Peek’s Managed wiimote library to talk with the wiimote, Thanks Brian!!!