WPF L03-3D Rendering and 3D Animation

1,871 views

Published on

Published in: Software, Business
3 Comments
2 Likes
Statistics
Notes
  • 3D Animation for the Raw Beginner Using Maya (Chapman & Hall/CRC Computer Graphics, Geometric Modeling, and Animation) --- http://amzn.to/22qF7ke
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The Art of 3D Computer Animation and Effects --- http://amzn.to/1pUUPCV
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 3D Animation 1 - Kids Ages 8-14 Learn To Animate Their Own Movie (PC & Mac) --- http://amzn.to/25dnK5e
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,871
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
139
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide

WPF L03-3D Rendering and 3D Animation

  1. 1. Mohammad Shaker mohammadshaker.com WPF Starter Course @ZGTRShaker 2011, 2012, 2013, 2014 WPF Showcase L03 – 3D Rendering and 3D Animations
  2. 2. 3D Rendering
  3. 3. 3D Rendering
  4. 4. 3D Models
  5. 5. 3D Models
  6. 6. 3D Models
  7. 7. 3D Models
  8. 8. 3D Models
  9. 9. 3D Models
  10. 10. 3D Models • With Texturing!
  11. 11. 3D Models • Visual Hit!
  12. 12. 3D Models
  13. 13. Tools to fire up a 3D Area!
  14. 14. 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
  15. 15. 3D Rendering
  16. 16. 3D Rendering
  17. 17. 3D Rendering
  18. 18. The Craziness of Code Behind!
  19. 19. 3D Rendering What do u need to create a cuboid?!
  20. 20. So, Let’s start! • Set the desired area • Light the area with a DirectionalLight! • Set a camera to look around! • Draw whatever u want!
  21. 21. 3D Rendering • Set the desired area • Light the area with a DirectionalLight! • Set a camera to look around! • Draw whatever u want! – Our Cuboid!
  22. 22. 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>
  23. 23. 3D Rendering • Set the desired area • Light the area with a DirectionalLight! • Set a camera to look around! • Draw whatever u want! – Our Cuboid!
  24. 24. 3D Rendering • Set the desired area • Light the area with a DirectionalLight! • Set a camera to look around! • Draw whatever u want! – Our Cuboid!
  25. 25. 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; } }
  26. 26. 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); } }
  27. 27. 3D Rendering • Set the desired area • Light the area with a DirectionalLight! • Set a camera to look around! • Draw whatever u want! – Our Cuboid!
  28. 28. 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!
  29. 29. 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!
  30. 30. 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; } }
  31. 31. 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) { Model3DGroup group = new Model3DGroup(); // *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; } }
  32. 32. 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) { Model3DGroup group = new Model3DGroup(); // *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)); group.Children.Add(Triangle.CreateTriangleModelGroup(p3, p6, p7, color)); //right side triangles group.Children.Add(Triangle.CreateTriangleModelGroup(p2, p1, p5, color)); group.Children.Add(Triangle.CreateTriangleModelGroup(p2, p5, p6, color)); //back side triangles group.Children.Add(Triangle.CreateTriangleModelGroup(p1, p0, p4, color)); group.Children.Add(Triangle.CreateTriangleModelGroup(p1, p4, p5, color)); //left side triangles group.Children.Add(Triangle.CreateTriangleModelGroup(p0, p3, p7, color)); group.Children.Add(Triangle.CreateTriangleModelGroup(p0, p7, p4, color)); //top side triangles group.Children.Add(Triangle.CreateTriangleModelGroup(p7, p6, p5, color)); group.Children.Add(Triangle.CreateTriangleModelGroup(p7, p5, p4, color)); //bottom side triangles group.Children.Add(Triangle.CreateTriangleModelGroup(p2, p3, p0, color)); group.Children.Add(Triangle.CreateTriangleModelGroup(p2, p0, p1, color));
  33. 33. 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) { Model3DGroup group = new Model3DGroup(); // *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; } }
  34. 34. 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); } }
  35. 35. 3D Rendering
  36. 36. 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); } }
  37. 37. 3D Rendering
  38. 38. 3D Rendering
  39. 39. Hit Testing
  40. 40. 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
  41. 41. Viewport2DVisual3D
  42. 42. Viewport2DVisual3D awesome Control!
  43. 43. Viewport2DVisual3D!
  44. 44. Viewport2DVisual3D!
  45. 45. Viewport2DVisual3D!
  46. 46. Viewport2DVisual3D • We’ll do this!
  47. 47. Viewport2DVisual3D
  48. 48. Viewport2DVisual3D Viewport2DVisual3D From Code Behind!
  49. 49. Viewport2DVisual3D • What’s needed to show 2D components in 3D environment?!
  50. 50. Viewport2DVisual3D • What’s needed to show 2D components in 3D environment?!
  51. 51. Viewport2DVisual3D • What’s needed to show 2D components in 3D environment?!
  52. 52. 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; }
  53. 53. 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; }
  54. 54. 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; }
  55. 55. Viewport2DVisual3D • So how can we add 2D Components?!
  56. 56. Viewport2DVisual3D • So how can we add 2D Components?! – So easy!
  57. 57. 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; }
  58. 58. 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;} }
  59. 59. Viewport2DVisual3D See the attached project
  60. 60. Animating Viewport2DVisual3D! Constant Rotation
  61. 61. Animating Viewport2DVisual3D! • 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); }
  62. 62. Animating Viewport2DVisual3D! Flipping
  63. 63. 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; }
  64. 64. 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; }
  65. 65. Animating Camera Movement
  66. 66. 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); } }
  67. 67. Now test it and see what you got!
  68. 68. Happy end of course!
  69. 69. I really had so much fun! Hope you are too!
  70. 70. 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
  71. 71. 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/

×