WPF L03-3D Rendering and 3D Animation
-
Upload
mohammad-shaker -
Category
Software
-
view
748 -
download
5
Transcript of WPF L03-3D Rendering and 3D Animation
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
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/