Introduction to WPF 3D Graphics


Isn't it fun,

to instantly listen to a blog on the go? PLAY !

 
 

graphics

WPF provides 3D functionality like draw, transfer, and animate 3D graphics to the developers. We can combine 2D and 3D graphics and create rich controls, the complex illustration of data, and also increase the user interface experience of an application.

In this blog, we will be going to discuss 3D graphics in Windows Presentation Foundation. In WPF, 3D graphics content is encapsulated in the element Viewport3D. Viewport3D can participate in a two-dimension element structure and, in three-dimension, it is a function as a window / a viewport. It is a surface where a 3D scene is projected. When the Viewport3D element is included in the layout content element, it specifies the size of Viewport3D by setting Height and width.

The coordinate system for the WPF is for 2D graphics origin is located in the upper left of the screen. Values of positive X-axis proceed to right side and values of positive Y-axis proceed to downward. The 3D object is represented by X, Y, and, Z-axis X and y represent the height and width of the object where Z represents a depth of an object. In 3D graphics, the origin is located in the center of the screen, and the values of the positive X-axis, positive Y-axis and, positive Z-axis are proceeded in Right, Upward, and Outward.

Image: Representation of 2D and 3D coordinate system

The stationary frame is a reference for a 3D object, this frame is a space that is defined by these axes. We can build the model in this space and create light and a camera for viewing them. It is helpful when we are using transformation.

Camera: When we are creating a 3D, object remember that we are creating a 2D representation of a 3D object, because the 3D object's look depending on the onlooker's point of view so we should specify the point of view for the 3D scene. The camera class is used to specify the 3D scene's point of view. We can use Perspective Camera to specify the coordinate we are facing. It specifies the projection of the 3D scene.

Model3D: Model3D is the abstract base class. It is used to represent 3D objects. For creating a 3D scene, we need some objects to view and the objects which make the scene graph. It is derived from Model3D. ModelVisual3D class provides services and properties that are common in all visual objects. It specifies the look and feel of a 3D object. GeometryModel3D class is used to achieve objects that are needed for a 3D scene. If we need to create Model3D that used multiple materials, we must use the Model3DGroup class to combine multiple GeometryModel3D. MessGeometry3D class allows us to specify any geometry. GeometryModel3D.Material is used to achieve various effects to the 3D scene. To apply shiny or Matte color to the object. These themes are used to achieve effects.

  1. DiffuseMaterial: For Matte color.
  2. SpecularMaterial: For Shiny colors, colors that could be reflective. We can define the intensity of texture by using the SpecularPower property.
  3. EmissiveMaterial: It is used for the intensity of emitting light that is equal to the color of the brush.
   

GeometryModel3D.Transform is used to transforming position, colors, directions, etc. We can perform translation, rotation, and scaling.

Now let's see examples using 3D graphics.

Here, we will create a 3D object and slider. Using a slider, we can rotate an object.
 


<window height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="_3DPractical.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:_3DPractical" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<viewport3d name="viewport3D1">

<viewport3d.camera>
<perspectivecamerax:name>

</perspectivecamerax:name></viewport3d.camera><perspectivecamerax:name>

<modelvisual3d>
<modelvisual3d.content>
<directionallightx:name>

</directionallightx:name></modelvisual3d.content><directionallightx:name>
</directionallightx:name></modelvisual3d><directionallightx:name>

<modelvisual3d x:name="MyModel">
<modelvisual3d.content>
<geometrymodel3d>

<geometrymodel3d.geometry>
<meshgeometry3d 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" triangleindices="2 3 1  3 1 0  7 1 3  7 5 1  6 5 7  6 4 5  6 2 0
                        2 0 4  2 7 3  2 6 7  0 1 5  0 5 4" x:name="meshMain">
</meshgeometry3d>
</geometrymodel3d.geometry>

<geometrymodel3d.material>
<diffusematerialx:name>
<diffusematerial.brush>
<solidcolorbrush color="White" />
</diffusematerial.brush>

</diffusematerialx:name></geometrymodel3d.material><diffusematerialx:name>

</diffusematerialx:name></geometrymodel3d><diffusematerialx:name>
</diffusematerialx:name></modelvisual3d.content><diffusematerialx:name>

<modelvisual3d.transform>
<rotatetransform3d>
<rotatetransform3d.rotation>
<axisanglerotation3d axis="1 2 1" x:name="rotate" />
</rotatetransform3d.rotation>
</rotatetransform3d>
</modelvisual3d.transform>

</diffusematerialx:name></modelvisual3d><diffusematerialx:name>
</diffusematerialx:name></directionallightx:name></perspectivecamerax:name></viewport3d><perspectivecamerax:name><directionallightx:name><diffusematerialx:name>


<slider height="23" horizontalalignment="Center" margin="0,356,0,0" maximum="360" name="slider1" value="{Binding ElementName = rotate, Path=Angle}" verticalalignment="Top" width="268" />

</diffusematerialx:name></directionallightx:name></perspectivecamerax:name></grid><perspectivecamerax:name><directionallightx:name><diffusematerialx:name>
</diffusematerialx:name></directionallightx:name></perspectivecamerax:name></window><perspectivecamerax:name><directionallightx:name><diffusematerialx:name>

</diffusematerialx:name></directionallightx:name></perspectivecamerax:name>

Image: 3D object

Image: 3D object (rotating object with slider)

In the next example, we will rotate the object by 90 degrees around the Y-axis.
 

 

Planning to Hire Dedicated WPF Developer ?

Your Search ends here.

 
<perspectivecamerax:name><directionallightx:name><diffusematerialx:name>
<window height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="_3DPractical.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:_3DPractical" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<viewport3d cliptobounds="True" height="150" name="MyAnimatedObject" width="150">

<viewport3d.camera>

</viewport3d.camera>

<viewport3d.children>


<modelvisual3d>
<modelvisual3d.content>
<directionallight color="White" direction="-0.612372,-0.5,-0.612372" />
</modelvisual3d.content>
</modelvisual3d>
<modelvisual3d>
<modelvisual3d.content>
<directionallight color="White" direction="0.612372,-0.5,-0.612372" />
</modelvisual3d.content>
</modelvisual3d>
<modelvisual3d>
<modelvisual3d.content>
<geometrymodel3d>


<geometrymodel3d.geometry>
<meshgeometry3d normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 " positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5 " texturecoordinates="0,0 1,0 1,1 1,1 0,1 0,0 " triangleindices="0,1,2 3,4,5 " />
</geometrymodel3d.geometry>

<geometrymodel3d.material>
<materialgroup>
<diffusematerial>
<diffusematerial.brush>

<lineargradientbrush.gradientstops>

<gradientstop color="Yellow" offset="0" />

<gradientstop color="Red" offset="0.20" />

<gradientstop color="Blue" offset="0.70" />

<gradientstop color="Pink" offset="1" />
</lineargradientbrush.gradientstops>

</diffusematerial.brush>
</diffusematerial>
</materialgroup>
</geometrymodel3d.material>

<geometrymodel3d.transform>
<rotatetransform3d>
<rotatetransform3d.rotation>
<axisanglerotation3d angle="40" axis="0,3,0" x:name="myAngleRotation" />
</rotatetransform3d.rotation>
</rotatetransform3d>
</geometrymodel3d.transform>
</geometrymodel3d>
</modelvisual3d.content>
</modelvisual3d>
</viewport3d.children>

<viewport3d.triggers>

<beginstoryboard>
<storyboard>


<doubleanimation autoreverse="True" duration="0:0:4" from="-90" repeatbehavior="Forever" storyboard.targetname="myAngleRotation" storyboard.targetproperty="Angle" to="90" />


<vector3danimation autoreverse="True" duration="0:0:4" from="0,3,0" repeatbehavior="Forever" storyboard.targetname="myAngleRotation" storyboard.targetproperty="Axis" to="1,0,1" />

</storyboard>
</beginstoryboard>

</viewport3d.triggers>
</viewport3d>

</grid>
</window>

</diffusematerialx:name></directionallightx:name></perspectivecamerax:name>

Image:3D object rotating at 90 degrees around Y-axis

Image:3D object rotating at 90 degrees around Y-axis

Conclusion

WPF provides 3D functionality like draw, transfer, and animate 3D graphics. In this blog, we have seen how to use 3D graphics. WPF provides Viewport3D elements for creating 2D and 3D graphics. 3D graphics have three-dimensional models of the object, every object is represented by X, Y, and Z-axis. These coordinates provide the height, width, and depth of an object. Here, we have discussed Model3D and GeomatryModel3D and create examples using Viewport3D.

Introduction to WPF 3D Graphics

graphics

WPF provides 3D functionality like draw, transfer, and animate 3D graphics to the developers. We can combine 2D and 3D graphics and create rich controls, the complex illustration of data, and also increase the user interface experience of an application.

In this blog, we will be going to discuss 3D graphics in Windows Presentation Foundation. In WPF, 3D graphics content is encapsulated in the element Viewport3D. Viewport3D can participate in a two-dimension element structure and, in three-dimension, it is a function as a window / a viewport. It is a surface where a 3D scene is projected. When the Viewport3D element is included in the layout content element, it specifies the size of Viewport3D by setting Height and width.

The coordinate system for the WPF is for 2D graphics origin is located in the upper left of the screen. Values of positive X-axis proceed to right side and values of positive Y-axis proceed to downward. The 3D object is represented by X, Y, and, Z-axis X and y represent the height and width of the object where Z represents a depth of an object. In 3D graphics, the origin is located in the center of the screen, and the values of the positive X-axis, positive Y-axis and, positive Z-axis are proceeded in Right, Upward, and Outward.

Image: Representation of 2D and 3D coordinate system

The stationary frame is a reference for a 3D object, this frame is a space that is defined by these axes. We can build the model in this space and create light and a camera for viewing them. It is helpful when we are using transformation.

Camera: When we are creating a 3D, object remember that we are creating a 2D representation of a 3D object, because the 3D object's look depending on the onlooker's point of view so we should specify the point of view for the 3D scene. The camera class is used to specify the 3D scene's point of view. We can use Perspective Camera to specify the coordinate we are facing. It specifies the projection of the 3D scene.

Model3D: Model3D is the abstract base class. It is used to represent 3D objects. For creating a 3D scene, we need some objects to view and the objects which make the scene graph. It is derived from Model3D. ModelVisual3D class provides services and properties that are common in all visual objects. It specifies the look and feel of a 3D object. GeometryModel3D class is used to achieve objects that are needed for a 3D scene. If we need to create Model3D that used multiple materials, we must use the Model3DGroup class to combine multiple GeometryModel3D. MessGeometry3D class allows us to specify any geometry. GeometryModel3D.Material is used to achieve various effects to the 3D scene. To apply shiny or Matte color to the object. These themes are used to achieve effects.

  1. DiffuseMaterial: For Matte color.
  2. SpecularMaterial: For Shiny colors, colors that could be reflective. We can define the intensity of texture by using the SpecularPower property.
  3. EmissiveMaterial: It is used for the intensity of emitting light that is equal to the color of the brush.
   

GeometryModel3D.Transform is used to transforming position, colors, directions, etc. We can perform translation, rotation, and scaling.

Now let's see examples using 3D graphics.

Here, we will create a 3D object and slider. Using a slider, we can rotate an object.
 


<window height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="_3DPractical.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:_3DPractical" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<viewport3d name="viewport3D1">

<viewport3d.camera>
<perspectivecamerax:name>

</perspectivecamerax:name></viewport3d.camera><perspectivecamerax:name>

<modelvisual3d>
<modelvisual3d.content>
<directionallightx:name>

</directionallightx:name></modelvisual3d.content><directionallightx:name>
</directionallightx:name></modelvisual3d><directionallightx:name>

<modelvisual3d x:name="MyModel">
<modelvisual3d.content>
<geometrymodel3d>

<geometrymodel3d.geometry>
<meshgeometry3d 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" triangleindices="2 3 1  3 1 0  7 1 3  7 5 1  6 5 7  6 4 5  6 2 0
                        2 0 4  2 7 3  2 6 7  0 1 5  0 5 4" x:name="meshMain">
</meshgeometry3d>
</geometrymodel3d.geometry>

<geometrymodel3d.material>
<diffusematerialx:name>
<diffusematerial.brush>
<solidcolorbrush color="White" />
</diffusematerial.brush>

</diffusematerialx:name></geometrymodel3d.material><diffusematerialx:name>

</diffusematerialx:name></geometrymodel3d><diffusematerialx:name>
</diffusematerialx:name></modelvisual3d.content><diffusematerialx:name>

<modelvisual3d.transform>
<rotatetransform3d>
<rotatetransform3d.rotation>
<axisanglerotation3d axis="1 2 1" x:name="rotate" />
</rotatetransform3d.rotation>
</rotatetransform3d>
</modelvisual3d.transform>

</diffusematerialx:name></modelvisual3d><diffusematerialx:name>
</diffusematerialx:name></directionallightx:name></perspectivecamerax:name></viewport3d><perspectivecamerax:name><directionallightx:name><diffusematerialx:name>


<slider height="23" horizontalalignment="Center" margin="0,356,0,0" maximum="360" name="slider1" value="{Binding ElementName = rotate, Path=Angle}" verticalalignment="Top" width="268" />

</diffusematerialx:name></directionallightx:name></perspectivecamerax:name></grid><perspectivecamerax:name><directionallightx:name><diffusematerialx:name>
</diffusematerialx:name></directionallightx:name></perspectivecamerax:name></window><perspectivecamerax:name><directionallightx:name><diffusematerialx:name>

</diffusematerialx:name></directionallightx:name></perspectivecamerax:name>

Image: 3D object

Image: 3D object (rotating object with slider)

In the next example, we will rotate the object by 90 degrees around the Y-axis.
 

 

Planning to Hire Dedicated WPF Developer ?

Your Search ends here.

 
<perspectivecamerax:name><directionallightx:name><diffusematerialx:name>
<window height="450" mc:ignorable="d" title="MainWindow" width="800" x:class="_3DPractical.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:local="clr-namespace:_3DPractical" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<grid>
<viewport3d cliptobounds="True" height="150" name="MyAnimatedObject" width="150">

<viewport3d.camera>

</viewport3d.camera>

<viewport3d.children>


<modelvisual3d>
<modelvisual3d.content>
<directionallight color="White" direction="-0.612372,-0.5,-0.612372" />
</modelvisual3d.content>
</modelvisual3d>
<modelvisual3d>
<modelvisual3d.content>
<directionallight color="White" direction="0.612372,-0.5,-0.612372" />
</modelvisual3d.content>
</modelvisual3d>
<modelvisual3d>
<modelvisual3d.content>
<geometrymodel3d>


<geometrymodel3d.geometry>
<meshgeometry3d normals="0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 0,0,1 " positions="-0.5,-0.5,0.5 0.5,-0.5,0.5 0.5,0.5,0.5 0.5,0.5,0.5 -0.5,0.5,0.5 -0.5,-0.5,0.5 " texturecoordinates="0,0 1,0 1,1 1,1 0,1 0,0 " triangleindices="0,1,2 3,4,5 " />
</geometrymodel3d.geometry>

<geometrymodel3d.material>
<materialgroup>
<diffusematerial>
<diffusematerial.brush>

<lineargradientbrush.gradientstops>

<gradientstop color="Yellow" offset="0" />

<gradientstop color="Red" offset="0.20" />

<gradientstop color="Blue" offset="0.70" />

<gradientstop color="Pink" offset="1" />
</lineargradientbrush.gradientstops>

</diffusematerial.brush>
</diffusematerial>
</materialgroup>
</geometrymodel3d.material>

<geometrymodel3d.transform>
<rotatetransform3d>
<rotatetransform3d.rotation>
<axisanglerotation3d angle="40" axis="0,3,0" x:name="myAngleRotation" />
</rotatetransform3d.rotation>
</rotatetransform3d>
</geometrymodel3d.transform>
</geometrymodel3d>
</modelvisual3d.content>
</modelvisual3d>
</viewport3d.children>

<viewport3d.triggers>

<beginstoryboard>
<storyboard>


<doubleanimation autoreverse="True" duration="0:0:4" from="-90" repeatbehavior="Forever" storyboard.targetname="myAngleRotation" storyboard.targetproperty="Angle" to="90" />


<vector3danimation autoreverse="True" duration="0:0:4" from="0,3,0" repeatbehavior="Forever" storyboard.targetname="myAngleRotation" storyboard.targetproperty="Axis" to="1,0,1" />

</storyboard>
</beginstoryboard>

</viewport3d.triggers>
</viewport3d>

</grid>
</window>

</diffusematerialx:name></directionallightx:name></perspectivecamerax:name>

Image:3D object rotating at 90 degrees around Y-axis

Image:3D object rotating at 90 degrees around Y-axis

Conclusion

WPF provides 3D functionality like draw, transfer, and animate 3D graphics. In this blog, we have seen how to use 3D graphics. WPF provides Viewport3D elements for creating 2D and 3D graphics. 3D graphics have three-dimensional models of the object, every object is represented by X, Y, and Z-axis. These coordinates provide the height, width, and depth of an object. Here, we have discussed Model3D and GeomatryModel3D and create examples using Viewport3D.