the WPF way...: 3D

An improved water effect

Fri, 29 Sep 2006 02:02:08 GMT

Sometime back I posted a video of the Water ripple effect created using a 3D Mesh. In that I had only used a height-map to simulate the ripples which ofcourse wasn't the most convincing Water effect. This time around I have improved it with the some refraction effects happening to the texture. Refraction is the phenomenon where the light rays get bent when they change the medium of propagation; for example a change from air to water. Due to refraction the objects in the new medium appear displaced from their original positions. The amount of displacement is dependent on the Refraction Index of the medium. Water has a refractive index of 1.33. With this improvement the Water effect looks much better and closer to reality!

I will be making these effects reusable so that you can drop them on any control and apply the effect. The power of the VisualBrush will defintely come to aid

Genie Effect, the WPF way

Tue, 26 Sep 2006 01:46:59 GMT

I have been contemplating for many days about creating the Genie effect that you see in Mac OSX, when you minimize a window. It kind of creates a suction effect like a cloth being sucked into a vacuum cleaner. If you have a Mac, you would know. Unfortunately I don't have a Mac, well not yet! So what better can I do to fill the void...what about creating the Genie Effect in WPF?

Before we go onto the boring parts of how this was done, have a look at the Video (about 5 mins) so you know what you are up for! You can also download the Demo. You will need the RC1 of .Net Framework 3.0.

Dismantling the components

To understand what goes on here, let me show in XAML what the end result should look like.

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Grid>
<Path Stroke="Black" StrokeThickness="1"
Data="M 100,100 C 100,200 400,300 400,400
M 600,100 C 600,200 500,300 500,400
M 100,100 L 600,100

M 400,400 L 500,400">
</Path>

</Grid>
</Page>

You can copy+paste it in XAMLPad and it should look like:

We have to create a surface like this in 3D so that it can be deformed. In fact the reason we are going to 3D is for the better control over deformations. Now if you look closely, our mesh is going to be defined by a curvy left edge and a curvy right edge. In more technical terms we have a Bezier curve for the left edge and another Bezier for the right edge. The rest of the mesh points will be interpolations between these two Beziers.

The best way to use a Bezier curve is to use its parametric form. Since we are using a cubic Bezier, we will have 4 control points. Each control point contributes to the curvature based on the Basis functions, which are also called the Bernstein polynomials. Ok, those were some loaded terms but it suffices to say that our Bezier will be defined by 4 control points that give it curvature. Each control point contributes based on a function as shown below:

Since we have two Beziers we will use separate control points for each. So in all we will have 8 control points. The first and fourth control point of each Bezier are the start and end locations. The parameter t varies from 0 to 1 ( 0 <= t <= 1 ). At t=0, we are at the start of the curve and at t=1, we are the end of the curve. You can check that by substituting the values for t in the equations above. Using these equations we can get various points on the curve. Note that we need to apply these equations for each of the X, Y and Z components and get the Point3D that lies on the curve.

Once we have the curves, the rest of the mesh points are just a linear interpolation from one end of the curve to the other. With the mesh in place, we can now animate it by just manipulating the values of t for each Bezier

Links

Auto position a Viewport3D Camera for Full view

Sat, 23 Sep 2006 02:59:12 GMT

I have been spending a lot of time lately in developing 3D effects and some reusable controls for overlaying 3D effects on 2D controls (a subject of a forthcoming blog post). One of the core requirements is that the position of the PerspectiveCamera should be such that the 3D model is completely visible and has the same bounds as that of the Viewport3D. Now, what do I mean by that? A diagram should elucidate this concept.

What we really want!

Lets take the case where the model is positioned far in front of the camera, so we can see it completely. The camera position is (0, 0, 2.154)

However we want the model to be as big as the viewport and also completely visible, something like:

The camera position is (0, 0, 1.1525). This is how we want it positioned all the time. If we bring the camera forward a little more, we would be too close to the object, as in:

The camera position is (0, 0, 0.85).

What we want is that magic camera position that always seems to fit the model exactly as big as the viewport. Can we get that? Absolutely, but there is a little math involved in this.

Positioning the PerspectiveCamera

There are couple of quantities we need to fix to arrive at this camera position.

First of all we need the aspect ratio of the Viewport3D. This is simple: aspect = ActualWidth / ActualHeight of the Viewport3D instance.
Using this aspect ratio, we have to now define the mesh positions. Note that our mesh will always be positioned at Z=0, in the XY plane. Lets take a simple mesh of 4 points. These 4 points should be defined as:

mesh.Position[0] = new Point3D(-aspect / 2, 0.5, 0);
mesh.Position[1] = new Point3D(aspect / 2, 0.5, 0);
mesh.Position[2] = new Point3D(aspect / 2, -0.5, 0);
mesh.Position[3] = new Point3D(-aspect / 2, -0.5, 0);
Finally its time for the camera position. Since we are using a PerspectiveCamera we need to take the FieldOfView property into account. Lets fix the FieldOfView = 60. With this the camera configuration looks like:

What we are looking at is the top view. The FieldOfView angle spans horizontally. The distance of the camera from the Origin (0, 0, 0), along the Z-axis is e. Using some simple trigonometry we can see that:

tan(30) = (aspect / 2) / e
= aspect / 2e

Thus e = aspect / 2 * tan(30) = aspect * 0.866

e = aspect * 0.86655

Lets take an example. Let the ActualWidth / ActualHeight of the Viewport3D be 400 / 300. So our aspect = 1.33. Also our FieldOfView = 60. We have also defined our mesh as:

Therefore our camera Z-position should be at e = 1.33 * 0.86655 = 1.1525. Thus the position is (0, 0, 1.1525). If you recollect this is the same position from our discussion above (Figure 2). And ofcourse we will have our PerspectiveCamera defined as:

<Viewport3D.Camera>
<PerspectiveCamera
FieldOfView="60" Position="0,0,1.1525" LookDirection="0,0,-1"
UpDirection="0,1,0"/>
</Viewport3D.Camera>

In future posts I am going to build on this concept to create some reusable controls for overlaying 3D effects on 2D controls. Keep visiting!

Great tutorial on TextureCoordinates

Wed, 16 Aug 2006 01:54:06 GMT

I have been working on the 2D side of WPF for a long time now and its about time I added an extra dimension; 3D. I have worked with 3D before, just that I haven't done anything substantial. Its time now for me to ramp up. One of the tricky concepts of 3D is to understand how to map textures to 3D geometry. This, according to me is a fundamental concept that needs to be understood very well. Daniel Lehenbauer does a great job to explain TextureCoordinates.

Check it out here.