WPF 3D Knowledge points Daquan and examples

Original: WPF 3D knowledge point Daquan and examples

Introduction

Now the concept of the Internet of things so fire, if the monitoring information can be real-time in the mobile phone's customer service to show us in the form of a, that experience you can play their own imagination.

We still have a lot of places to use in our life, such as the use of Kinect in medical applications, and of course, somatosensory games and so on.

3D is used to increase visual effects, giving people a more intuitive, authentic feel.

3D is so wonderful, where do we start our 3D programming journey in WPF?

The basics of 3D development technology in WPF should have the following points:

• Basic knowledge of 3D development
• Basic elements of 3D development in WPF (Elements)
• 3D transformations and animations in WPF
• Common auxiliary Classes

3D developing the basic knowledge coordinate system coodinate system

The coordinate system of a two-dimensional graphic in WPF locates the origin in the upper-left corner of the rendering area (usually the screen). In a two-dimensional system, positive values on the x-axis are on the right, and positive values on the y-axis are downward. In a three-dimensional coordinate system, the origin is at the center of the rendering area, the positive value on the x-axis is to the right, but the positive value on the y-axis is upward, and the positive value on the z-axis is outward from the origin toward the observer. Traditional two-and three-dimensional coordinate system representations such as

The space defined by these axes is a fixed reference frame for three-dimensional objects in WPF.

When you generate models in this space and create lights and cameras to view these models, be sure to separate the fixed reference frame or global space from the local reference frame you created for the model when you apply a transform to each model.

Also keep in mind that, depending on the light source and camera settings, objects in the global space may look completely different or invisible at all, but the location of the camera does not change the position of the object in the global space.

The world of 3D is a kingdom of triangles.

Such as:

In the 3D world, everything is described by a "triangle" of columns. So you're going to ask why it's a "triangle"?

The reason is that the triangle is used to describe the smallest geometry of a plane, and the rendering engine can calculate its color based on the material of each triangle and the angle of light in the scene .

In fact, three points to determine a plane, in a plane to do the simplest calculation, the least factor to consider. If you use a three-dimensional space greater than three points to render the basic unit, then if these points are not on the same plane, rendering calculation is quite complex.

The surface of a 3D object is calleda mesh, and a mesh is defined by many 3D points, which are called vertices (vertices). These vertices are joined together by the winding pattern (winding pattern) to form a single triangle (facet) (as shown by the arrows).

The triangle (facet) is divided into "front" and "after" two sides, can see the part of the front, see the part of the back.

How do you judge the front or the back?

If the triangle consists of three points clockwise, the face is the front. Such as

In accordance with the order of the 0,1,2 three points made up of this face is the above we can see

The current mainstream (Direct3D and/or OpenGL) divides the triangles into two faces (front and rear).

To help you remember the"front" three-dimensional coordinates, the thumb is the direction of the z+ is facing us (and the previous illustration in the up direction), the index finger is y+ direction, and the middle finger is y+ direction. (+ indicates the direction of positive numbers)

Key elements of WPF 3D (Elements)

3D Canvas

There is always a canvas for drawing, and 3D in WPF requires something similar. Viewport3D (the plane of the projection 3D scene) is a 3D canvas in WPF, which is class in the canvas in 2D. In fact, WPF also has a name similar to the East Viewbox, but with 3D does not matter, it deals with 2D.

<Viewport3D>Children...</Viewport3D>

The graphics system treats Viewport3D as a two-dimensional visual element like many other elements in WPF. Viewport3D acts as a window in a three-dimensional scene (that is, a viewport). To be more precise, it is the surface to which the three-dimensional scene is projected.

Camera

Developers working on two-dimensional objects are accustomed to placing drawing primitives on a two-dimensional screen. When you create a three-dimensional scene, be sure to remember that you are actually creating a two-dimensional representation of the three-dimensional object. because the appearance of the three-dimensional scene will vary depending on the observer's position, you must specify the viewing position. The position of the observer is specified by the camera (cameras class) for the three-dimensional scene.

Another way to understand how three-dimensional scenes are depicted on a two-dimensional map is to project a 2D plane into a surface. Such as:

From the perspective of the coordinate system, the position of our Projectioncamera (Perspective camera) and the 3D model, and the position relationship of the 2D projection screen:

A more detailed illustration is as follows:

The Projectioncamera nearplanedistance and Farplanedistance properties limit the camera's projection range. Because the camera can be anywhere in the scene, the camera may actually be inside the model or close to the model, making it difficult to distinguish objects correctly. With Nearplanedistance, you can specify a minimum distance from the camera, and the object is not drawn after that distance. Conversely, using farplanedistance, you can specify a distance from the camera (that is, the object will not be drawn after that distance), ensuring that objects that are too far away to be recognized will not be included in the scene.

Compare two camera types in WPF

• Perspectivecamera can specify different projections and their properties to change how viewers view the three-dimensional model.
• Orthographiccamera specifies that a positive projection on a three-dimensional model to a two-dimensional visual surface, like other cameras, specifies the position, the viewing direction, and the "Up" direction. However, unlike Perspectivecamera, Orthographiccamera describes projections that do not include perspective shrinkage. Or Orthographiccamera describes a viewfinder that is parallel to the side, not the viewfinder of the side that gathers in the scene.

Demonstrates different effects when viewing the same model using Perspectivecamera and Orthographiccamera.

Light

As in real life, if there is no light we will see nothing. So we need to put at least one light in our scene to illuminate the model in our scene.

Different types of light sources are supported in WPF, as follows:

• AmbientLight(环境光)The ambient light It provides illuminates all objects, regardless of the position or orientation of the object.
• DirectionalLight(平行光)Illuminate like a light source in the distance (such as the sun Light). The Direction of the directional light is specified as Vector3D, but no position is specified for the directional light.
• PointLight(点光源)Illuminate like a light source near you. The pointlight has a position and casts light from that position. Objects in a scene are illuminated based on the position and distance of the object relative to the light source. Pointlightbase exposes the Range property, which determines the distance beyond which the model cannot be illuminated by the light source. Pointlight also exposes a number of attenuation properties that determine how the light's brightness decreases with increasing distance. You can specify a constant, linear, or two interpolation algorithm for the attenuation of the light source.
• SpotLight(聚光灯)Inherit from Pointlight. Spotlight is illuminated in a similar way to pointlight, but it has both a position and a direction. They cast light in the tapered area (specified in degrees) set by the Innerconeangle and Outerconeangle properties.

Shows the situation of various light sources:

The light source is a Model3D object, so you can convert the light object and animate the light properties, including position, color, orientation, and extent.

Effects of combined lights

• Ambient color:red
• Difusse color:red

3D Models

Said for a long while, how the protagonist has not appeared??

Yes, everything is in the service of our 3D Model.

Model3D is an abstract base class for three-dimensional objects. To build a three-dimensional scene, you need some objects to view, and the objects that make up the scene graph must derive from Model3D. Currently, WPF supports modeling geometric shapes with GeometryModel3D. The Geometry property of this model takes a mesh primitive.

To generate a model, first generate a primitive or grid. A Sanviki is a series of vertices that make up a single three-dimensional entity. Most three-dimensional systems provide primitives modeled on the simplest closed graphs (triangles defined by three vertices). Since the three points of the triangle are on a flat surface, you can continue to add triangles to model more complex shapes such as meshes.

The WPF three-dimensional system currently provides the MeshGeometry3D class, which allows you to specify any geometry; It currently does not support predefined three-dimensional primitives such as spheres and cubes. The MeshGeometry3D is created first by specifying the list of triangle vertices as its positions property. Each vertex is specified as Point3D. (in Extensible Application Markup Language (XAML), this property is specified as a three-group list of numbers, and three numbers in each group represent the coordinates of each vertex). Depending on the geometric shape of the mesh, the mesh may consist of multiple triangles, some of which share the same angle (vertex). To draw the grid correctly, WPF needs information about which vertices are shared by which triangles. You can provide this information by specifying a triangular index list with the Triangleindices property. This list specifies the order in which the triangles are determined by the points specified in the positions list.

Material (Material)

We live in a colorful world and can't make our 3D models so monotonous, when we use materials.

In two dimensions, you can use the Brush class to apply colors, patterns, gradients, or other visualizations to areas in your screen. However, the appearance of three-dimensional objects is the function of the lighting model, not just the color or pattern applied to them. The actual objects have different surface qualities, and they reflect light differently: the glossy surface looks different from the rough or smooth surface, and some objects seem to absorb light, while some objects appear to glow. You can apply the exact same brush to a three-dimensional object as it applies to a two-dimensional object, but you cannot apply them directly.

The specific subclasses of the Material are used to determine some of the appearance features of the model surface, and each subclass also provides a Brush property that can be passed SolidColorBrush, TileBrush, or VisualBrush to it.

• DiffuseMaterial using DiffuseMaterial is very similar to using brushes directly for two-dimensional models; the model surface does not reflect light as if it were self-illuminated. Using DiffuseMaterial is very similar to using brushes directly for two-dimensional models; the model surface does not reflect light, as if it were self-luminous.
• Specularmaterial can set the number of degrees that the system will recommend for the reflection trait (or "glow") of the texture by specifying a value for the Specularpower property.
• EmissiveMaterial can specify that the texture will be applied as if the light emitted by the model is the same as the color of the brush. This does not make the Model a light source, but the way it participates in shadow settings is different when you set the texture with diffusematerial or specularmaterial.

To further improve performance, you can select the back of the GeometryModel3D from the scene (because they are located on the back of the model relative to the camera, so you will not see these faces). To specify the material to apply to the back of a model, such as an airplane, set the Backmaterial property of the model.

To achieve some surface quality, such as glow or emission effects, you might want to apply several different brushes to the model consecutively. You can use the Materialgroup class to apply and reuse multiple Material. The children of the Materialgroup are applied in multiple rendering processes in the order they are presented from beginning to end.

3D transformations and animations in WPF

Transform

When you create a model, they have a fixed position in the scene. It is impractical to change the vertices used to define the model itself in order to move, rotate, or change the size of these models in a scene. Instead, you can apply transformations just as you would in a two-dimensional model.

Each model object has a Transform property that can be used to move, redirect, or resize the model. When you apply a transform, you are actually offsetting all points of the model by the vector or value specified by the Transform property.

In other words, the coordinate system ("model space") that defines the model is changed, and the system ("Global Space") of the whole scene of the model does not change, thus realizing the transformation of the 3D model.

Animation

WPF Three-dimensional implementation and two-dimensional graphics participate in the same timing and animation system. In other words, the three-dimensional scene is animated, that is, the properties of its model is animated. You can animate primitive properties directly, but it is often easy to animate the transformation of the model's location or appearance. Because you can apply transformations to Model3DGroup objects and their individual models, you can apply a set of animations to an object in Model3DGroup, or you can apply a set of animations to this set of sub-objects. You can also animate the lighting properties of a scene to achieve a variety of visualizations. Finally, you can choose to animate the projection itself by animating the camera's position or field of view.

To animate objects in WPF, you can create timelines, define animations (which actually change an attribute value over time), and specify the properties to which you want to apply the animation. Because all objects in a three-dimensional scene are Viewport3D child nodes, any animations that you want to apply to the scene are properties that are Viewport3D.

Common auxiliary Classes

1. Helixtoolkit
2. 3DTool
3. Slimdx

Instance

<usercontrol x:class= "Hostingwpfusercontrolinwf.usercontrol1" xmlns= "http://schemas.microsoft.com/winfx/2006/ Xaml/presentation "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "> <Grid> <!--Place a Label control at the top of the view. --<label horizontalalignment= "center" textblock.textalignment= "center" fontsize= "+" foreground= "Red" Conten t= "Model:cone"/> <!--Viewport3D is the rendering surface. --<viewport3d name= "Myviewport" > <!--Add a camera. -<Viewport3D.Camera> <perspectivecamera farplanedistance= "lookdirection=" 0,0,1 "Updirec tion= "0,1,0" nearplanedistance= "1" position= "0,0,-3" fieldofview= "$"/> </Viewport3D.Camera> <! --ADD models.              -<Viewport3D.Children> <ModelVisual3D> <ModelVisual3D.Content>  <model3dgroup > <Model3DGroup.Children>                <!--Lights, MeshGeometry3D and DiffuseMaterial objects is added to the ModelVisual3D. --<directionallight color= "#FFFFFFFF" direction= "3,-4,5"/> <!--Define A Red Cone. -<GeometryModel3D> <GeometryModel3D.Geometry> & Lt MeshGeometry3D positions= "0.293893-0.5 0.404509 0.475528-0.5 0.154509 0 0.5 0 0.475528-0.5 0.154509 0 0.5 0 0 0.5 0 0.475528-0.5 0.154509 0.475528-0.5-0.154509 0 0.5 0 0.475528-0.5-0.154509 0 0.5 0 0 0.5 0 0.475528-0.5 -0.154509 0.293893-0.5-0.404509 0 0.5 0 0.293893-0.5-0.404509 0 0.5 0 0 0.5 0 0.293893-0.5-0.404509 0-0.5-0 .5 0 0.5 0 0-0.5-0.5 0 0.5 0 0 0.5 0 0-0.5-0.5-0.293893-0.5-0.404509 0 0.5 0-0.293893-0.5-0.404509 0 0. 5 0 0 0.5 0-0.293893-0.5-0.404509-0.475528-0.5-0.154509 0 0.5 0-0.475528-0.5-0.154509 0 0.5 0 0 0.5 0-0. 475528-0.5-0.154509-0.475528-0.5 0.154509 0 0.5 0-0.475528-0.5 0.154509 0 0.5 0 0 0.5 0-0.475528-0.5 0.154509-0.293892-0.5 0.404509  0 0.5 0-0.293892-0.5 0.404509 0 0.5 0 0 0.5 0-0.293892-0.5 0.404509 0-0.5 0.5 0 0.5 0 0-0.5 0.5 0 0.5 0 0 0.5 0 0-0.5 0.5 0.293893-0.5 0.404509 0 0.5 0 0.293893-0.5 0.404509 0 0.5 0 0 0.5 0 "normals=" 0.7236065,0.  4472139,0.5257313 0.2763934,0.4472138,0.8506507 0.5308242,0.4294462,0.7306172 0.2763934,0.4472138,0.8506507  0,0.4294458,0.9030925 0.5308242,0.4294462,0.7306172 0.2763934,0.4472138,0.8506507-0.2763934,0.4472138,0.8506507 0,0.4294458,0.9030925-0.2763934,0.4472138,0.8506507-0.5308242,0.4294462,0.7306172 0,0.4294458,0.9030925- 0.2763934,0.4472138,0.8506507-0.7236065,0.4472139,0.5257313-0.5308242,0.4294462,0.7306172- 0.7236065,0.4472139,0.5257313-0.858892,0.429446,0.279071-0.5308242,0.4294462,0.7306172- 0.7236065,0.4472139,0.5257313-0.8944269,0.4472139,0-0.858892,0.429446,0.279071-0.8944269,0.4472139,0-0.858892,0.429446,-0.279071-0.858892,0.429446,0.279071-0.8944269,0.4472139,0-0.7236065,0.4472139,-0.5257313- 0.858892,0.429446,-0.279071-0.7236065,0.4472139,-0.5257313-0.5308242,0.4294462,-0.7306172-0.858892,0.429446,- 0.279071-0.7236065,0.4472139,-0.5257313-0.2763934,0.4472138,-0.8506507-0.5308242,0.4294462,-0.7306172- 0.2763934,0.4472138,-0.8506507 0,0.4294458,-0.9030925-0.5308242,0.4294462,-0.7306172-0.2763934,0.4472138,- 0.8506507 0.2763934,0.4472138,-0.8506507 0,0.4294458,-0.9030925 0.2763934,0.4472138,-0.8506507 0.5308249,0.4294459  ,-0.7306169 0,0.4294458,-0.9030925 0.2763934,0.4472138,-0.8506507 0.7236068,0.4472141,-0.5257306 0.5308249,0.4294459,-0.7306169 0.7236068,0.4472141,-0.5257306 0.8588922,0.4294461,-0.27907 0.5308249,0.4294459,-  0.7306169 0.7236068,0.4472141,-0.5257306 0.8944269,0.4472139,0 0.8588922,0.4294461,-0.27907 0.8944269,0.4472139,0 0.858892,0.429446,0.279071 0.8588922,0.4294461,-0.27907 0.8944269,0.4472139,0 0.7236065,0.4472139,0.5257313 0.858892,0.429446,0.279071 0.7236065,0.4472139,0.5257313 0.5308242,0.4294462,0.7306172 0.858892,0.429446,0.279071 "triangleindices=" 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 2                    2-A-si-a-si-v-A-v-A-v-A-v-A-si                      </GeometryModel3D.Geometry> <GeometryModel3D.Material> <DiffuseMaterial> <DiffuseMaterial.Brush> <solidcolorbru SH color= "Red" opacity= "1.0"/> </diff                  Usematerial.brush> </DiffuseMaterial> </GeometryModel3D.Material>            </GeometryModel3D> </Model3DGroup.Children> </Model3DGroup> </modelvisual3d.content> </ModelVisual3D> </Viewport3D.Children> </Viewport3D> </grid></u Sercontrol>

Make a 3D cube with pictures on it sides with XAML and C # source code

Summarize

3D development of the first three-dimensional coordinate system to make clear, in order to build a desired 3D model, in order to light a reasonable illumination on the 3D models (except ambient light) to get different lighting effects, to specify the appropriate camera location so that you want to see the 3D projection.

All the geometry in 3D development is ultimately made up of a series of triangles. So in the case of your three-dimensional coordinate system HD, you also need to consider splitting your 3D model into triangles. It's tedious to hear, fortunately there are now some helper classes to help you deal with the decomposition of these triangles, and all you have to do is provide the coordinates of the key points.

Because WPF 3D is rendered directly from the graphics card based on direct, and WPF 2D, and has panoramic anti-aliasing turned on by default (a condition that requires your graphics card to support compatible wddm-compliant).

3D Development and 2D development is a lot more complicated, and there are a lot of things to consider. But for that more real, more cool effect, it's all worth learning.

I wish you all a pleasant journey in the 3D development!

Reference

WPF 3D article, Tutorial with Chart Graphics C # Code

Wpf-3d-primer

Getting started with 3D in WPF

Three-dimensional graphics overview

Rendering Transparent 3D surfaces in WPF with C #

Ambient, diffuse, emissive and specular colors:some examples

Voreenve

WPF 3D Knowledge points Daquan and examples