Shine Draw

It’s time for comparing 3D technology again! That’s the second application I implemented using Kit3D and PaperVision3D. 

The coding is very straight forward. It also includes a lot of useful references for modeling 3D objects like creating a texture mapped plane, transformation, rotation, alpha, double faced and camera moving.

Once again, I think Paper Vision 3D is better than Kit 3D. The main reason is that I think the coding in AS3 is much more easier to understand.

I am quite satisfied with the coding this time. It’s worth for you to keep a copy!!!

Images used in this sample are collected from Yuki Holland.

Comparison

Flash implementation: 45 minutes (Implemented First)
Silverlight implementation: 45 minutes
What’s the difference?

• Create Texture mapped plane [AS3] vs [C#]

Source codes

•   3D Image Cube [Flash 9, AS3] (908.3 KiB, 2,416 hits)
•   3D Image Cube [Silverlight 2, C#] (338 KiB, 2,182 hits)

Silverlight

Create Texture mapped plane [AS3] vs [C#]

Here I will show you how to create a textured mapped plane using PaperVision3D. You can also see how can I position the 3D object.

// AS3
// image is a exported image resources inside the fla
var bitmapData : BitmapData = new image(0, 0);
var bitmapMaterial : BitmapMaterial = new BitmapMaterial(bitmapData);
bitmapMaterial.doubleSided = true;
var plane : Plane = new Plane( bitmapMaterial, IMAGE_WIDTH, IMAGE_HEIGHT, SEGMENT, SEGMENT );

// position the plane
plane.rotationX = rotationX;
plane.rotationY = rotationY;
plane.rotationZ = rotationZ;
plane.x = newX;
plane.y = newY;
plane.z = newZ;

For Kit 3D, the coding is much more longer. Please let me know if you don’t understand what they are doing.

// C#

// create image brush resources
ImageBrush imageBrush = new ImageBrush();
imageBrush.ImageSource = new BitmapImage(new Uri(imagePath, UriKind.Relative));

// create bitmap material
GeometryModel3D model = new GeometryModel3D();
model.Geometry = generatePlaneMesh();
model.Material = new DiffuseMaterial(new Kit3DBrush(imageBrush, (int)IMAGE_WIDTH, (int)IMAGE_HEIGHT));
model.SeamSmoothing = 1;
model.BackMaterial = model.Material;

// Create the transform
Transform3DGroup tg = new Transform3DGroup();
tg.Children.Add(new TranslateTransform3D(x, y, z));
tg.Children.Add(new RotateTransform3D(new AxisAngleRotation3D(new Vector3D(rotationX, rotationY, rotationZ), 90), new Point3D(x, y, z)));
}

// create the model based on the material and transform
ModelVisual3D modvis = new ModelVisual3D();
modvis.Transform = tg;
modvis.Content = model;

// a standard texture mapping mesh
private MeshGeometry3D generatePlaneMesh()
{
        MeshGeometry3D mesh = new MeshGeometry3D();
        mesh.Positions = new Point3DCollection
        {
            new Point3D(-1, 1, 0),
            new Point3D(1, 1, 0),
            new Point3D(-1, -1, 0),
            new Point3D(1, -1, 0)
        };

        mesh.TriangleIndices = new Int32Collection
        {
            0, 2, 1,
            1, 2, 3
        };

        mesh.TextureCoordinates = new Kit3D.Windows.Media.PointCollection
        {
            new Point(0, 0),
            new Point(1, 0),
            new Point(0, 1),
            new Point(1, 1)
        };

        return mesh;
}

As promised before, I will make a Flash version after implementing the 3D Image Rotator in Silverlight.

The Silverlight version is implemented using Kit3D while the Flash version is made by Papervision3D. Personally, I love the Silverlight sample more since it looks smoother. However, I think Papervision3D is much more easy to understand and utilize.

By the way, the images used in the Flash version are taken from my graduated school - The Hong Kong University of Science and Technology. Hope you will like it~

Demo

Source codes

•   3D Image Rotator [Flash 9, AS3] (638.2 KiB, 1,393 hits)
•   3D Image Rotator [Silverlight 2, C#] (133.2 KiB, 5,658 hits)

Silverlight

Finally, I have completed the 3D Image Rotator using Kit3D. If you are looking for a quick way to make a real 3D flipping rotator, this must be your choice.

Well, this time, I only got the Silverlight sample only. That’s because it really takes a lot of time to deal with 3D Graphics. I am sure I will launch the Flash demo very soon.

Images used in the application below are collected from Smashing Magazine - Christmas Wallpapers.

Demo

Source codes

•   3D Image Rotator [Silverlight 2, C#] (133.2 KiB, 5,658 hits)

Silverlight

Initially, I want to make a 3D Image Rotator using Kit3D. However, after trial and error by couple of hours, I can only made a little demo. That’s why I call it beta.

Anyway, playing with 3D graphics is not that easy. Especially when it involves texture mapping. I will finish my work (probably tomorrow) and launch a complete 3D rotator application.

My first feeling on Kit3D is that it is quite difficult to use when compared with Papervision3D. It’s mainly because I have to manage a lot of coding and it caused a lot of trial and error effort.

For example, when I attempted to created a texture mapped plane on the stage, I have to deal with the Triangle Indices, Texture Coordinates and Positions.  Besides, that, the fieldOfView parameter is difficult to understand as well.

The tools may be powerful, but somehow, an easy learning path is important to developer.

Demo

Source codes

•   3D Image Rotator Beta [Silverlight 2, C#] (164.9 KiB, 1,187 hits)

Silverlight

Today, I try to upgrade my first sample in this blog to Silverlight 2. Out of my expectation, the code work perfectly and actually I can run the application directly after copy and paste the files.

Anyway, there are some interesting findings when updating the code. I will try to list them all during the upgrade.

Comparison

What’s the difference?

• DispatcherTimer vs CompositionTarget.Rendering

Source codes

•   3D Text Space [Silverlight 2, C#] (19.5 KiB, 4,258 hits)

Silverlight

DispatcherTimer vs CompositionTarget.Rendering

In Silverlight 2, it’s much simpler to simulate the  enter frame event by using CompositionTarget.Rednering. It enables you to modify the frame rate easily as well.

// C#
// New Method
Application.Current.Host.Settings.MaxFrameRate = fps;
CompositionTarget.Rendering += new EventHandler(CompositionTarget_Rendering);

void CompositionTarget_Rendering(object sender, EventArgs e)
{
	// do your stuff here
}

// Old Method
DispatcherTimer timer = new DispatcherTimer();
timer.Interval = new TimeSpan(0, 0, 0, 0, 1000/fps);
timer.Tick +=new EventHandler(_timer_Tick);
timer.Start();

void  timer_Tick(object sender, EventArgs e)
{
	// do your stuff here
}