WPF L03-3D Rendering and 3D Animation

Mohammad Shaker
mohammadshaker.com
WPF Starter Course
@ZGTRShaker
2011, 2012, 2013, 2014
WPF Showcase
L03 – 3D Rendering and 3D Animations

Tools to fire up a 3D Area!
• Set the desired area
– Viewport3D
• Light the area with a DirectionalLight!
– new ModelVisual3D
{
Content = new DirectionalLight
{
Color = Colors.White,
Direction = new Vector3D(0, 0, -1)
}
});
• Set a camera to look around!
– PerspectiveCamera

3D Rendering
What do u need to create a cuboid?!

So, Let’s start!
• Draw whatever u want!

3D Rendering
– Our Cuboid!

3D Rendering
– Our Cuboid!
<Viewport3D Name="viewport3D">
<ModelVisual3D>
<ModelVisual3D.Content>
<DirectionalLight Color="White" Direction="-2,-3,-1" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>

Set a camera to look around!
– Our Cuboid!
class CameraManagement
{
public PerspectiveCamera Camera { set; get; }
public CameraManagement(Viewport3D viewport3D)
{
this.Camera = new PerspectiveCamera();
this.Camera.FarPlaneDistance = 500;
this.Camera.NearPlaneDistance = 1;
// LookDirection
this.Camera.LookDirection = new Vector3D(-10, -15, -25);
// UpDirection
this.Camera.UpDirection = new Vector3D(0, 1, 0);
// Position
this.Camera.Position = new Point3D(50, 100, 150);
this.Camera.FieldOfView = 70;
this.Camera.Transform = new Transform3DGroup();
viewport3D.Camera = this.Camera;
}
}

Set a camera to look around!
– Our Cuboid!
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
CameraManagement cameraManagement = new CameraManagement(viewport3D);
}
}

3D Rendering
1. Set the desired area
2. Light the area with a DirectionalLight!
3. Set a camera to look around!
4. Draw whatever u want!
– Our Cuboid!
• What do u need to create a Cuboid?!
• Bunch of Triangles!

3D Rendering
1. Set the desired area
2. Light the area with a DirectionalLight!
3. Set a camera to look around!
4. Draw whatever u want!
– Our Cuboid!
• What do u need to create a Cuboid?!
• Bunch of 16 Triangles!

3D Rendering
class Triangle
{
public static Model3DGroup CreateTriangleModelGroup(Point3D p0,
Point3D p1,
Point3D p2,
Color myColor)
{
MeshGeometry3D mesh = new MeshGeometry3D();
mesh.Positions.Add(p0);
mesh.TriangleIndices.Add(0);
Material material = new DiffuseMaterial(new SolidColorBrush(myColor));
GeometryModel3D model = new GeometryModel3D(mesh, material);
Model3DGroup group = new Model3DGroup();
group.Children.Add(model);
return group;
}
}

3D Rendering
class Cuboid
{
public Cuboid(Viewport3D viewport3D, Point3D initialPosition, double length, double width, double height, Color color)
{
Model3D model = CreateModelGroup(initialPosition, length, width, height, color);
ModelVisual3D visualModel = new ModelVisual3D();
visualModel.Content = model;
viewport3D.Children.Add(visualModel);
}
private Model3D CreateModelGroup(Point3D initialPosition,double length, double width, double height, Color color)
{
// *HERE* //
return group;
}
public static Point3D GetSummedPoint(Point3D p1, Point3D p2)
{
Point3D myPoint = new Point3D();
// Manipulate Coordinates
myPoint.X = p1.X + p2.X;
myPoint.Y = p1.Y + p2.Y;
myPoint.Z = p1.Z + p2.Z;
return myPoint;
}
}

3D Rendering
class Cuboid
{
public Cuboid(Viewport3D viewport3D, Point3D initialPosition, double length, double width, double height, Color color)
{
Model3D model = CreateModelGroup(initialPosition, length, width, height, color);
ModelVisual3D visualModel = new ModelVisual3D();
visualModel.Content = model;
viewport3D.Children.Add(visualModel);
}
private Model3D CreateModelGroup(Point3D initialPosition,double length, double width, double height, Color color)
{
// *HERE* //
return group;
}
public static Point3D GetSummedPoint(Point3D p1, Point3D p2)
{
Point3D myPoint = new Point3D();
// Manipulate Coordinates
myPoint.X = p1.X + p2.X;
myPoint.Y = p1.Y + p2.Y;
myPoint.Z = p1.Z + p2.Z;
return myPoint;
}
}
//* HERE *//
Point3D p0 = initialPosition;
Point3D p1 = GetSummedPoint(initialPosition, new Point3D(width, 0, 0));
Point3D p2 = GetSummedPoint(initialPosition, new Point3D(width, 0, length));
Point3D p3 = GetSummedPoint(initialPosition, new Point3D(0, 0, length));
Point3D p4 = GetSummedPoint(initialPosition, new Point3D(0, height, 0));
Point3D p5 = GetSummedPoint(initialPosition, new Point3D(width, height, 0));
Point3D p6 = GetSummedPoint(initialPosition, new Point3D(width, height, length));
Point3D p7 = GetSummedPoint(initialPosition, new Point3D(0, height, length));
//front side triangles
group.Children.Add(Triangle.CreateTriangleModelGroup(p3, p2, p6, color));
//right side triangles
//back side triangles
//left side triangles
//top side triangles
//bottom side triangles

3D Rendering
• Now just call and play! :D
{
public MainWindow()
{
Cuboid myFirstCuboid = new Cuboid(viewport3D, new Point3D(0, 0, 0), 40, 40, 40, Colors.Red);
}
}

3D Rendering
{
public MainWindow()
{
Cuboid myFirstCuboid = new Cuboid(viewport3D, new Point3D(0, 0, 0), 50, 60, 10, Colors.Red);
}
}

Project “Track-Ball”
Provided by the WPF team 3-D tools
Visit: http://www.codeplex.com/3DTools/
<Window xmlns:tools="clr-namespace:_3DTools;assembly=3DTools"... >
Then you can easily add the TrackballDecorator to your markup:
<tools:TrackballDecorator>
<Viewport3D>
...
</Viewport3D>
</tools:TrackballDecorator>
Hit Testing

Viewport2DVisual3D
awesome Control!

Viewport2DVisual3D
• We’ll do this!

Viewport2DVisual3D
Viewport2DVisual3D From Code Behind!

Viewport2DVisual3D
• What’s needed to show 2D components in 3D environment?!

Viewport2DVisual3D
private void CreateMeshGeometry(Point3D initialPoint)
{
double pointParam = 0.5;
initialPoint.X = -initialPoint.X;
initialPoint.Y = -initialPoint.Y;
initialPoint.Z = -initialPoint.Z;
MeshGeometry3D mesh = new MeshGeometry3D();
mesh.Positions = new Point3DCollection
{
HelperClass.GetSummedPoint(new Point3D(-pointParam, pointParam, 0),initialPoint),
HelperClass.GetSummedPoint(new Point3D(-pointParam, -pointParam, 0),initialPoint ),
HelperClass.GetSummedPoint(new Point3D(pointParam, -pointParam, 0), initialPoint),
HelperClass.GetSummedPoint(new Point3D(pointParam, pointParam, 0),initialPoint)
};
mesh.TriangleIndices = new Int32Collection(new int[] { 0, 1, 2, 0, 2, 3 });
mesh.TextureCoordinates = new PointCollection(new Point[]
{
new Point(0, 0),
new Point(0, 1),
new Point(1, 1),
new Point(1, 0)
});
this._viewport2DVisual3D.Geometry = mesh;
var material = new DiffuseMaterial
{
Brush = Brushes.White
};
Viewport2DVisual3D.SetIsVisualHostMaterial(material, true);
this._viewport2DVisual3D.Material = material;
}

Viewport2DVisual3D
• So how can we add 2D Components?!

Viewport2DVisual3D
– So easy!

Viewport2DVisual3D
– So easy!
_viewport2DVisual3D.Visual = InitializeVisualArea();
private StackPanel InitializeVisualArea()
{
StackPanel stackPanel = new StackPanel();
TextBlock textBlock = new TextBlock();
textBlock.Text = "Name: " + StudentInfo.Name + Environment.NewLine + "ID: "+ StudentInfo.Id;
Button button = new Button();
button.Content = "Rotate Me!";
button.Click += new RoutedEventHandler(button_Click);
stackPanel.Children.Add(textBlock);
stackPanel.Children.Add(button);
return stackPanel;
}

Viewport2DVisual3D
– So easy!
_viewport2DVisual3D.Visual = InitializeVisualArea();
private StackPanel InitializeVisualArea()
{
StackPanel stackPanel = new StackPanel();
TextBlock textBlock = new TextBlock();
textBlock.Text = "Name: " + StudentInfo.Name + Environment.NewLine + "ID: "+ StudentInfo.Id;
Button button = new Button();
button.Content = "Rotate Me!";
button.Click += new RoutedEventHandler(button_Click);
stackPanel.Children.Add(textBlock);
stackPanel.Children.Add(button);
return stackPanel;
}
public StudentInfo StudentInfo
{
get{return _studentInfo;}
set{_studentInfo = value;}
}

Viewport2DVisual3D
See the attached project

Animating Viewport2DVisual3D!
Constant Rotation

• Just a Rotation
public static void CreateViewportConstantRotationAnimationAroundX(Viewport2DVisual3D viewport2DVisual3D)
{
// Create Animation Around X Axis
var rotationAnimationAroundXAxis = new Rotation3DAnimation();
rotationAnimationAroundXAxis.From = new AxisAngleRotation3D
{
Angle = 0,
Axis = new Vector3D(0, 1, 0) // Y Axis
};
rotationAnimationAroundXAxis.To = new AxisAngleRotation3D
{
Angle = 20,
Axis = new Vector3D(0, 1, 0) // Y Axis
};
rotationAnimationAroundXAxis.Duration = new Duration(TimeSpan.FromSeconds(2));
rotationAnimationAroundXAxis.AutoReverse = true;
rotationAnimationAroundXAxis.RepeatBehavior = RepeatBehavior.Forever;
// Define Property to animate
viewport2DVisual3D.Transform.BeginAnimation(RotateTransform3D.RotationProperty, rotationAnimationAroundXAxis);
}

Flipping

Animating Viewport2DVisual3D
public static void CreateViewportFlipAnimation(Viewport2DVisual3D viewport2DVisual3D, Point3D position)
{
// Create Animation
Rotation3DAnimation FlipAnimation = new Rotation3DAnimation();
FlipAnimation.From = new AxisAngleRotation3D
{
Angle = 0,
Axis = new Vector3D(1, 0, 0) // X Axis
};
FlipAnimation.To = new AxisAngleRotation3D
{
Angle = 180,
Axis = new Vector3D(1, 0, 0) // X Axis
};
FlipAnimation.Duration = new Duration(TimeSpan.FromSeconds(1));
FlipAnimation.AutoReverse = true;
// Define Property to animate
RotateTransform3D rotateTransform3D = new RotateTransform3D();
rotateTransform3D.CenterZ = - position.Z;
rotateTransform3D.BeginAnimation(RotateTransform3D.RotationProperty, FlipAnimation);
viewport2DVisual3D.Transform = rotateTransform3D;
}

Animating Camera!
• Just a Point3DAnimation
public static void MoveCameraDynamicallyWithUserInput(PerspectiveCamera camera, Point3D targettedPosition)
{
if (camera.Position!= targettedPosition)
{
Point3DAnimation animation = new Point3DAnimation();
animation.From = camera.Position;
animation.To = targettedPosition;
animation.Duration = new Duration(TimeSpan.FromSeconds(1.5));
camera.BeginAnimation(PerspectiveCamera.PositionProperty,animation);
}
}

Now test it and
see what you got!

I really had so much fun!
Hope you are too!

Take a Look on my other courses
@ http://www.slideshare.net/ZGTRZGTR
Available courses to the date of this slide:
C# Starter, C# Advanced, WPF, C++.NET, XNA, OpenGL, Delphi

http://www.mohammadshaker.com
mohammadshakergtr@gmail.com
https://twitter.com/ZGTRShaker @ZGTRShaker
https://de.linkedin.com/pub/mohammad-shaker/30/122/128/
http://www.slideshare.net/ZGTRZGTR
https://www.goodreads.com/user/show/11193121-mohammad-shaker
https://plus.google.com/u/0/+MohammadShaker/
https://www.youtube.com/channel/UCvJUfadMoEaZNWdagdMyCRA
http://mohammadshakergtr.wordpress.com/

WPF L03-3D Rendering and 3D Animation

WPF L03-3D Rendering and 3D Animation

Recommended

More Related Content

What's hot (16)

Viewers also liked (18)

Similar to WPF L03-3D Rendering and 3D Animation (20)

More from Mohammad Shaker (20)

Recently uploaded (20)

WPF L03-3D Rendering and 3D Animation