Mohammad Shakermohammadshaker.com

WPF Starter Course@ZGTRShaker

2011, 2012, 2013, 2014

WPF ShowcaseL03 – 3D Rendering and 3D Animations

3D Rendering

3D Rendering

3D Models

3D Models

3D Models

3D Models

3D Models

3D Models

3D Models

• With Texturing!

3D Models

• Visual Hit!

3D Models

Tools to fire up a 3D Area!

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

3D Rendering

3D Rendering

The Craziness of Code Behind!

3D RenderingWhat do u need to create a cuboid?!

So, Let’s start!

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

3D Rendering

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

– Our Cuboid!

3D Rendering

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

– Our Cuboid!

<Viewport3D Name="viewport3D">

<ModelVisual3D>

<ModelVisual3D.Content>

<DirectionalLight Color="White" Direction="-2,-3,-1" />

</ModelVisual3D.Content>

</ModelVisual3D>

</Viewport3D>

3D Rendering

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

– Our Cuboid!

3D Rendering

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

– Our Cuboid!

Set a camera to look around!

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

– 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!

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

– Our Cuboid!

public partial class MainWindow : Window{

public MainWindow(){

InitializeComponent();CameraManagement cameraManagement = new CameraManagement(viewport3D);

}}

3D Rendering

• Set the desired area

• Light the area with a DirectionalLight!

• Set a camera to look around!

• Draw whatever u want!

– Our Cuboid!

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.Positions.Add(p1);mesh.Positions.Add(p2);mesh.TriangleIndices.Add(0);mesh.TriangleIndices.Add(1);mesh.TriangleIndices.Add(2);

Material material = new DiffuseMaterial(new SolidColorBrush(myColor));GeometryModel3D model = new GeometryModel3D(mesh, material);Model3DGroup group = new Model3DGroup();group.Children.Add(model);return group;

}}

3D Renderingclass 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){

Model3DGroup group = new Model3DGroup();// *HERE* //return group;

}

public static Point3D GetSummedPoint(Point3D p1, Point3D p2){

Point3D myPoint = new Point3D();// Manipulate CoordinatesmyPoint.X = p1.X + p2.X;myPoint.Y = p1.Y + p2.Y;myPoint.Z = p1.Z + p2.Z;return myPoint;

}}

3D Renderingclass 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){

Model3DGroup group = new Model3DGroup();// *HERE* //return group;

}

public static Point3D GetSummedPoint(Point3D p1, Point3D p2){

Point3D myPoint = new Point3D();// Manipulate CoordinatesmyPoint.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 trianglesgroup.Children.Add(Triangle.CreateTriangleModelGroup(p3, p2, p6, color));group.Children.Add(Triangle.CreateTriangleModelGroup(p3, p6, p7, color));//right side trianglesgroup.Children.Add(Triangle.CreateTriangleModelGroup(p2, p1, p5, color));group.Children.Add(Triangle.CreateTriangleModelGroup(p2, p5, p6, color));//back side trianglesgroup.Children.Add(Triangle.CreateTriangleModelGroup(p1, p0, p4, color));group.Children.Add(Triangle.CreateTriangleModelGroup(p1, p4, p5, color));//left side trianglesgroup.Children.Add(Triangle.CreateTriangleModelGroup(p0, p3, p7, color));group.Children.Add(Triangle.CreateTriangleModelGroup(p0, p7, p4, color));//top side trianglesgroup.Children.Add(Triangle.CreateTriangleModelGroup(p7, p6, p5, color));group.Children.Add(Triangle.CreateTriangleModelGroup(p7, p5, p4, color));//bottom side trianglesgroup.Children.Add(Triangle.CreateTriangleModelGroup(p2, p3, p0, color));group.Children.Add(Triangle.CreateTriangleModelGroup(p2, p0, p1, color));

3D Renderingclass 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){

Model3DGroup group = new Model3DGroup();// *HERE* //return group;

}

public static Point3D GetSummedPoint(Point3D p1, Point3D p2){

Point3D myPoint = new Point3D();// Manipulate CoordinatesmyPoint.X = p1.X + p2.X;myPoint.Y = p1.Y + p2.Y;myPoint.Z = p1.Z + p2.Z;return myPoint;

}}

3D Rendering

• Now just call and play! :D

public partial class MainWindow : Window{

public MainWindow(){

InitializeComponent();CameraManagement cameraManagement = new CameraManagement(viewport3D);Cuboid myFirstCuboid = new Cuboid(viewport3D, new Point3D(0, 0, 0), 40, 40, 40, Colors.Red);

}}

3D Rendering

3D Rendering

public partial class MainWindow : Window{

public MainWindow(){

InitializeComponent();CameraManagement cameraManagement = new CameraManagement(viewport3D);Cuboid myFirstCuboid = new Cuboid(viewport3D, new Point3D(0, 0, 0), 50, 60, 10, Colors.Red);

}}

3D Rendering

3D Rendering

Hit Testing

Project “Track-Ball”Provided by the WPF team 3-D toolsVisit: 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

Viewport2DVisual3D awesome Control!

Viewport2DVisual3D!

Viewport2DVisual3D!

Viewport2DVisual3D!

Viewport2DVisual3D

• We’ll do this!

Viewport2DVisual3D

Viewport2DVisual3DViewport2DVisual3D From Code Behind!

Viewport2DVisual3D

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

Viewport2DVisual3D

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

Viewport2DVisual3D

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

Viewport2DVisual3Dprivate 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;

}

Viewport2DVisual3Dprivate 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;

}

Viewport2DVisual3Dprivate 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 how can we add 2D Components?!

– So easy!

Viewport2DVisual3D

• So how can we add 2D Components?!

– 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 how can we add 2D Components?!

– 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;}

}

Viewport2DVisual3DSee the attached project

Animating Viewport2DVisual3D!Constant Rotation

Animating Viewport2DVisual3D!

• Just a Rotation

public static void CreateViewportConstantRotationAnimationAroundX(Viewport2DVisual3D viewport2DVisual3D){

// Create Animation Around X Axisvar 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 animateviewport2DVisual3D.Transform.BeginAnimation(RotateTransform3D.RotationProperty, rotationAnimationAroundXAxis);

}

Animating Viewport2DVisual3D!Flipping

Animating Viewport2DVisual3D

public static void CreateViewportFlipAnimation(Viewport2DVisual3D viewport2DVisual3D, Point3D position){

// Create AnimationRotation3DAnimation 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 animateRotateTransform3D rotateTransform3D = new RotateTransform3D();rotateTransform3D.CenterZ = - position.Z;rotateTransform3D.BeginAnimation(RotateTransform3D.RotationProperty, FlipAnimation);viewport2DVisual3D.Transform = rotateTransform3D;

}

Animating Viewport2DVisual3D

public static void CreateViewportFlipAnimation(Viewport2DVisual3D viewport2DVisual3D, Point3D position){

// Create AnimationRotation3DAnimation 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 animateRotateTransform3D rotateTransform3D = new RotateTransform3D();

rotateTransform3D.CenterZ = - position.Z;rotateTransform3D.BeginAnimation(RotateTransform3D.RotationProperty, FlipAnimation);viewport2DVisual3D.Transform = rotateTransform3D;

}

Animating Camera Movement

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!

Happy end of course!

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/