Post
Ask Question

3D Graphics in WPF

Introduction

 
We learned about  2D graphics in the last article on 2D Graphics in WPF. But the world is full of 3D objects, hence we should be able to havea  3D experience in developing as well.
 
Every 3D object in the world is represented by 3 points: X, Y & Z. X & Y are the axis coordinates specifying the height & width of an object, where Z represents the depth of an object. We can draw, transform, and animate 3D graphics in WPF.
 
Let's get started. Following are the things we need:
 

Viewport3D

 
It functions as a window. We have to place our 3D object inside this window.
 
Camera
 
Every 3D image is different from a different angle. It depends on where the viewer is standing.
 
In order to specify that point of view. we can use CameraPerspective. CameraPerspective specifies which X,Y, & Z coordinate you are facing. 
  1. <Viewport3D.Camera>  
  2.                <PerspectiveCamera Position=" 6 5 4" LookDirection="-6 -5 -4"/>  
  3. </Viewport3D.Camera> 
ModelVisual3D
 
It specifies the look & feel of a 3D object. You can add lights (filling up objects with a brush) to a Model3DGroup.
  1. <ModelVisual3D>  
  2.              <ModelVisual3D.Content>  
  3.                  <DirectionalLight Direction="-1 -1 -1"/>  
  4.              </ModelVisual3D.Content>  
  5.  </ModelVisual3D> 
GeometryModel3D
 
Model3D is an abstract base class.

To build a 3D scene, you need some objects. We can achieve that with GeometryModel3D.

MeshGeometry3D
 
You need to specify a list of triangle vertices as its position property. This triangles define the clarity of the object. Each group of 3 numbers represents the coordinates of each point of the 3D object. 
  1. <ModelVisual3D>    
  2.                 <ModelVisual3D.Content>    
  3.                     <GeometryModel3D>    
  4.                         <GeometryModel3D.Geometry>    
  5.                             <MeshGeometry3D    
  6.                                  Positions = "0 0 0  1 0 0  0 1 0  1 1 0  0 0 1  1 0 1  0 1 1  0 1 1"      
  7.                         TriangleIndices = "2 3 1  3 1 0  7 1 3  7 5 1  6 5 7  6 4 5  6 2 0    
  8.                         2 0 4  2 7 3  2 6 7  0 1 5  0 5 4"/>    
  9.                         </GeometryModel3D.Geometry>    
  10.                     </GeometryModel3D>    
  11.                 </ModelVisual3D.Content>    
  12. </ModelVisual3D>    
GeometryModel3D.Material
 
We have created a  3D object so far, but without texture it will not have that 3D feel. We have seen how colors can be shiny or matte in real life, and we can achieve such an effect in 3D modelling.
 
Some of them are as follows,
  1. DiffuseMaterial: Matte in color.
  2. SpecularMaterial: Shiny color, colors could be reflective.  By setting up SpecularPower property we can define the intensity of texture.
  3. EmissiveMaterial: The intensity of emitting light is equal to the color of the brush.
It has a different form of DiffuseMaterial or SpecularMaterial in look & feel.
  1. <GeometryModel3D.Material>    
  2.     <DiffuseMaterial>    
  3.     <DiffuseMaterial.Brush>    
  4.         <SolidColorBrush Color = "Bisque"/>    
  5.         </DiffuseMaterial.Brush>    
  6.     </DiffuseMaterial>    
  7. </GeometryModel3D.Material>   
ModelVisual3D.Transform
 
You can transform light properties, position, color, direction etc. e.g. rotating.
  1. <ModelVisual3D.Transform>    
  2.                     <RotateTransform3D>    
  3.                         <RotateTransform3D.Rotation>    
  4.                             <AxisAngleRotation3D x:Name="Roate3DOjbect" Axis="1 2 1"/>    
  5.                         </RotateTransform3D.Rotation>    
  6.                     </RotateTransform3D>    
  7. </ModelVisual3D.Transform>     
Now let's see how our XAML would look with all of those elements mentioned above.
  1. <Window x:Class="A.MainWindow"    
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    
  6.         xmlns:local="clr-namespace:A"    
  7.         mc:Ignorable="d"    
  8.         Title="MainWindow" Height="200" Width="200">    
  9.     <Grid>    
  10.         <Viewport3D>    
  11.             <Viewport3D.Camera>    
  12.                 <PerspectiveCamera Position=" 6 5 4" LookDirection="-6 -5 -4"/>    
  13.             </Viewport3D.Camera>    
  14.             <ModelVisual3D>    
  15.                 <ModelVisual3D.Content>    
  16.                     <DirectionalLight Direction="-1 -1 -1"/>    
  17.                 </ModelVisual3D.Content>    
  18.             </ModelVisual3D>    
  19.             <ModelVisual3D>    
  20.                 <ModelVisual3D.Content>    
  21.                     <GeometryModel3D>    
  22.                         <GeometryModel3D.Geometry>    
  23.                             <MeshGeometry3D    
  24.                                  Positions = "0 0 0  1 0 0  0 1 0  1 1 0  0 0 1  1 0 1  0 1 1  0 1 1"      
  25.                         TriangleIndices = "2 3 1  3 1 0  7 1 3  7 5 1  6 5 7  6 4 5  6 2 0    
  26.                         2 0 4  2 7 3  2 6 7  0 1 5  0 5 4"/>    
  27.                         </GeometryModel3D.Geometry>    
  28.                         <GeometryModel3D.Material>    
  29.                             <DiffuseMaterial>    
  30.                             <DiffuseMaterial.Brush>    
  31.                                 <SolidColorBrush Color = "Yellow"/>    
  32.                                 </DiffuseMaterial.Brush>    
  33.                             </DiffuseMaterial>    
  34.                         </GeometryModel3D.Material>    
  35.                     </GeometryModel3D>    
  36.                 </ModelVisual3D.Content>    
  37.                 <ModelVisual3D.Transform>    
  38.                     <RotateTransform3D>    
  39.                         <RotateTransform3D.Rotation>    
  40.                             <AxisAngleRotation3D x:Name="Roate3DOjbect" Axis="1 2 1"/>    
  41.                         </RotateTransform3D.Rotation>    
  42.                     </RotateTransform3D>    
  43.                 </ModelVisual3D.Transform>    
  44.             </ModelVisual3D>    
  45.         </Viewport3D>    
  46.     
  47.         <Slider Minimum="0"    
  48.                 Maximum="360"    
  49.                 Height="20"    
  50.                 Width="100"    
  51.                 VerticalAlignment="Top"    
  52.                 Value="{Binding ElementName=Roate3DOjbect, Path=Angle}"/>    
  53.     </Grid>    
  54. </Window>     
The output would look something like this,
 
 
What a cute cube.
 
This is a small example of how to create 3D objects in WPF.
 

Conclusion

 
In this article, we learned how to create a 3D object in WPF, how we can perform the basic transformation of an object & how close  the relationship between these 3D objects in WPF & in real life is.
 
Use the same elements to create new 3D graphics in WPF,  because base classes never change or hardly change.
 
Thank you & happy coding!
 
Connect with me,
 References


Similar Articles