wpf 3d solid wireframe transform

8/2/2019 WPF 3D Solid Wireframe Transform

1/16

WPF 3D Solid Wireframe Transform

Introduction

I have just completed my Graduation in IT and at the very beginning of my career I am facing the projects or

problems related to 3D Graphics, Rendering of 3D objects in computer screen and perform some basic operation over3D object. The result of this was I have done some R&D related to this topics and I found that WPF will help me inRendering of 3D object and Transformation of 3D objects.

In the very beginning I decided to make a project that (1) renders 3D objects (2) Wireframe object and (3) does basic

operations for 3D objects. And this article is the result of this process.

One thing that shocked me was that WPF does not render wireframe objects but thank God that the 3DTool providesthe ScreenSpaceLine3D class that allows us to render wireframe objects.

Requirements

1. VS 2008 or onwards version.

2. 3DTool DLL.


2/16

3. Basic Mathematical and WPF knowledge.

Now I am starting the explanation.

INDEX

1. Read Important Definitions

2. Set Camera and Light

3. Draw solid cube

4. Draw Wireframe cube

5. Transform above cube's that is Solid and Wire frame cube.

1. Read Important Definition

This section contains the important definitions. You should have to come back

here another time also when you will draw the solid and wireframe cube.

The following image shows the hierarchy which we have to follow to render 3Dobject.

VIEWPORT3D:

The Viewport3D provides a rendering surface for 3-D visual content.

CAMERA:

Camera used to see the object's in the Viewport3D and it also Projects the 3-D contents to

the 2-D surface of the Viewport3D.


3/16

MODELVISUAL3D:

It contains the 3D models.

LIGHT:

It illuminates the scene or more elaborately than in 3-D graphics lights do the same as what

lights do in the real world; they make surfaces visible.

MODEL3DGROUP:

It contains a collection of 3-D models. And it allows operations such as transformation,

animation etc. to groups of 3-D models as if they were a single model.

GeometryModel3D:

What we will see in ViewPort3D is 3Dmodels or 3Dobjects and they are created using theGeometryModel3D class.

Two very basic properties of this class will help us in creating 3D objects. And bothproperties are as below. You can also see the hierarchy in the preceding image

1. Geometry and2. Material.

1. Geometry

MeshGeometry3D:

Geometry property ofGeometryModel3D class contains the instance of

the MeshGeometry3D class.

MeshGeometry3D is used to create a mesh.

Now what is the mesh and what is the use of it?

You can compare the mesh with the skeleton of our body.

Mesh is skeleton of 3D models.

It is used to create the surface of the 3D models.

And to create a surface it uses a very basic geometry shape and as we all know it isa TRIANGLE.

So MESH will use TRIANGLE as the basic building blocks to represent Surface.

The Reason for using a TRIANGLE is that it can represent more information than any other

geometrical shape such as square, pentagon, hexagon or any polygon.


4/16

Mesh is consisting of Points and Lines.

Points represent the positions in 3d world space and line connects those positions toestablish the surface area. The MeshGeometry3D class contains three very basic

properties that are frequently used in creating 3D objects and these are as below

1.Position2.TriangleIndices3.Normal

1. Position

Position represents the location of a single point in 3D world space.

2. TriangleIndices

The mesh position only describes the three points of the triangle (very basic shape to createmesh) in mesh.

In order to create the mesh, after adding the position we need to define the points of the

triangles and that can be done through TriangleIndices.

In WPF, the order in which you add triangle indices is very important.

Because it affects the visibility of triangle represent by triangleindices.

Let's say,

Suppose, we are looking at the triangular surface.

If we define the triangle's indices in a clock-wise direction then the side we are looking at

will be invisible or we can say that what we see are the back side of that triangular surface.

If we define triangle indices in a counter-clockwise direction, then the side we are looking at

will be visible or what we are seeing is the front face of that triangular surface.

NOTE: in the above case though you give the triangle indices in a clock-wise direction so

you can see the surface if you have provided background material.

3. NORMAL:

Mathematically, a vector is normally perpendicular to the surface.

To clarify the idea.

See the image below.


5/16

In order to get the best edge discrimination of a 3D-Object we have to add Normals for each

position in the mesh.

Triangleindices decides visibility and invisibility (Front or Back side of Triangle)

Whereas Normals are used by the light sources to decide how much light will take each

triangle (in mesh).I have added 24 normals for 8 positions of the cube because each point of position will be

used by 3 triangles. So, each position has 3 normals in our case.

2. Material

Material represents the texture of the 3D Geometries. Combined with a light source.

There are four basic materials used in WPF as below.

Diffuse,Specular,emissive,Combined

For more detailed explanation on material go here

2. Set Camera and Light

To set camera and light see the code below and image I think I don't need to write any

thing for explaining definitions.

You can also see the same code in demo projects .xaml file


6/16

Position="9,8,21"

FieldOfView="70" />

See the image below to make the definition clear.

3. Draw Solid Cube

In order to draw solid cube follow the steps below.

EXPLANATION:


7/16

I will explain from bottom to top, which means from GeometryModel3D to Viewport3D

FIRST: At very first create MeshGeometry3D(meshGeo) with its three basic properties.

After creating the mesh (meshGeo), add MeshGeometry3D(meshGeo) and

Material(material) in the GeometryModel3D(geoModel).

See the code below.

GeometryModel3D geoModel;MeshGeometry3D meshGeo;

Material material;

//Create MESH

meshGeo = newMeshGeometry3D();

// Add Position in MESH

meshGeo.Positions.Add(p0);meshGeo.Positions.Add(p1);

meshGeo.Positions.Add(p2);

// Add triangleIndices in MESH

meshGeo.TriangleIndices.Add(0);meshGeo.TriangleIndices.Add(1);

meshGeo.TriangleIndices.Add(2);

// Add normal in MESH

Vector3D normal = CalculateNormal(p0, p1, p2);

meshGeo.Normals.Add(normal);meshGeo.Normals.Add(normal);

meshGeo.Normals.Add(normal);

// Create MATERIAL

material = newDiffuseMaterial(newSolidColorBrush(Colors.LawnGreen));

// Create GEOMETRYMODEL3D wich tackes MESH adn MATERIAL as arguments

geoModel = newGeometryModel3D(meshGeo, material);



8/16

SECOND: Add GeometryModel3D(geoModel) inModel3DGroup(modelGroup)

See the below code.

Model3DGroup modelGroup;

...//Create MODEL3DGROUP

modelGroup = newModel3DGroup();

//Add GEOMETRYMODEL3D in MODEL3DGROUP

modelGroup.Children.Add(geoModel);


THIRD: Add collection ofModel3DGroup(cubeM3DGroup) inModelVisual3D(solidCubeMV3D).

See the code below.solidCubeMV3D = newModelVisual3D();

Model3DGroup cubeM3DGroup = newModel3DGroup();

//front side trianglescubeM3DGroup.Children.Add(CreateTriangleFacet(p3, p2, p6));

cubeM3DGroup.Children.Add(CreateTriangleFacet(p3, p6, p7));

//right side trianglescubeM3DGroup.Children.Add(CreateTriangleFacet(p2, p1, p5));

cubeM3DGroup.Children.Add(CreateTriangleFacet(p2, p5, p6)); //back side triangles

cubeM3DGroup.Children.Add(CreateTriangleFacet(p1, p0, p4));cubeM3DGroup.Children.Add(CreateTriangleFacet(p1, p4, p5));


9/16

//left side triangles


//top side trianglescubeM3DGroup.Children.Add(CreateTriangleFacet(p7, p6, p5));

cubeM3DGroup.Children.Add(CreateTriangleFacet(p7, p5, p4)); //bottom side triangles


//Add MODEL3DGROUP in MODELVISUAL3DsolidCubeMV3D.Content = cubeM3DGroup;

// Store the instance of Transform3DGroup class in Transform Propertyof "solidCubeMV3D"

// it will later use to rotate the objectsolidCubeMV3D.Transform = newTransform3DGroup();

NOTE: Assign transform property of (solidCubeMV3D) to later use in rotation of object.

See the below image.

FOURTH:Add ModelVisual3D(solidCubeMV3D) in the Viewport3D(mainViewPort)

See the code below.

//Add MODELVISUAL3D in VIEWPORT3D

this.mainViewPort.Children.Add(solidCube);


4. Draw Wireframe Cube

In order to draw wireframe object you need 3DTool.dll.

I have added it in my DemoProject "3DTOOL DLL" folder.

So, just add reference to that .dll if you don't have.


10/16

To add reference of 3DTool in your project Following the steps:

1.Go to the Solution Explorer

2.Right Click on References

3.Select: Add References will open new dialogue box

4.Click on Browse

5.Navigate to 3DTool.dll

6.Click on OK. That's it

Now, how to draw wireframe cube.

FIRST:Create the instance ofScreenSpaceLines3D(wireFrameCube) and set it's three propertiesand that is "Thickness", "Color", "Points".

And also set the "Transform" property to later use in Rotation of "wireFrameCube".See the code below.

wireFrameCube = newScreenSpaceLines3D();

Color c = Colors.Orange;

int width = 5;

wireFrameCube.Thickness = width;wireFrameCube.Color = c;

wireFrameCube.Points.Add(p0);wireFrameCube.Points.Add(p1);


11/16

wireFrameCube.Points.Add(p1);






















wireFrameCube.Transform = newTransform3DGroup();


SECOND: Simply and directly add the ScreenSpaceLines3D(wireFrameCube) to the

Viewport3D(mainViewPort).

See the code below.

this.mainViewPort.Children.Add(wireFrameCube);


12/16

That's it you have created wireframe cube.


NOTE: Suppose a line is being drawn using four points then two intermediate points willbe used two times or we add intermediate points twice.

See the below image to clsrify the idea.

Code to draw this line in viewport is as below.

NOTE: after using the code below you just see straight line in ViewPort3D.

You will not see Red points and labels of points.

ScreenSpaceLines3D wireFrameCube = new ScreenSpaceLines3D();

ScreenSpaceLines3D wireFrameCube = newScreenSpaceLines3D();

Color c = Colors.Orange; int width = 5;

wireFrameCube.Thickness = width;wireFrameCube.Color = c;

wireFrameCube.Points.Add(P1);wireFrameCube.Points.Add(P2);

wireFrameCube.Points.Add(P2);wireFrameCube.Points.Add(P3);

wireFrameCube.Points.Add(P3);

wireFrameCube.Points.Add(P4);

this.mainViewPort.Children.Add(wireFrameCube);

You can see that points P3 and P4 are used twise. To represent straight line.

5.TRANSFORM


13/16

To transform objects in Viewport3D we have two options.

5.1. Transformation of object or

5.2. Transformation of camera.

To make it clear let's take one example.

Suppose,

a. One cube is in your hand and you are rotating it with your fingers.

Then that is the first one---> [Transformation of object]

b. One cube is on table and you are rotating around the cube or table,

Then that this is the second one ---> [Transformation of camera]

Here, you can compare yourself as a camera.

5.1 Transformation of object

In order to transform an object you have to decide two things

1.Rotation Axis and

2.Angle to rotate around specified axis.

We can decide Rotation Axis and angle using the mouse movement and some calculations.

See the image below...


14/16

RotationAxis:

In ordert to calculate rotationAxis we will first calculate mouseMoveAngle after adding 90

degree in it; that will give us rotationAxisAngle and then as shown in the image below usingsome basic mathematics we can find rotationAxis.

Angle of Rotation or StepAngle:


15/16

You can give any constant value to Angle of Rotation (stepAngle).

Or you can also use the following formula.

double stepAngle = 0.01 * Math.Sqrt(Math.Pow(dx, 2) + Math.Pow(dy, 2));

Now, we have Axis and Angle so we can now rotate the object using any one ofCode Block below.

A. Transform using QuaternionRotation3D:Transform3DGroup group = solidCubeMV3D.Transform asTransform3DGroup;QuaternionRotation3D qr = newQuaternionRotation3D(newQuaternion(axisArg,

stepAngleArg* 180 Math.PI));

RotateTransform3D r = newRotateTransform3D(qr);

group.Children.Add(r);

B. Transform Using AxisAngleRotation3D:Transform3DGroup group = solidCubeMV3D.Transform asTransform3DGroup;AxisAngleRotation3D a = newAxisAngleRotation3D();

a.Axis = axisArg;a.Angle = stepAngleArg *(180 / Math.PI);

RotateTransform3D r1 = newRotateTransform3D(a);

group.Children.Add(r1);

5.2 Transformation of camera.

We can transform objects using camera's position and up direction also.

I have put one button in my demo project for transforming an object using camera.

And as above you can use QuaternionRotation3D or AxisAngleRotation3D.

Vector3D rotationAxis = Vector3D.CrossProduct((Vector3D)camera.Position,camera.UpDirection);

#region - QuaternionRotation3D -

//RotateTransform3D rotationTransform = new RotateTransform3D(newQuaternionRotation3D(new Quaternion(rotationAxis, 1.0)));


16/16

#endregion

#region - AxisAngleRotation3D - RotateTransform3D rotationTransform

= newRotateTransform3D(newAxisAngleRotation3D(rotationAxis, 1.0));#endregion

camera.Position = rotationTransform.Transform(camera.Position);camera.UpDirection = rotationTransform.Transform(camera.UpDirection);

Comment Request!Thank you for reading this post. Please post your feedback, question, or comments about this postHere.
http://www.c-sharpcorner.com/UploadFile/23197a/5221/#ReadAndPostCommenthttp://www.c-sharpcorner.com/UploadFile/23197a/5221/#ReadAndPostCommenthttp://www.c-sharpcorner.com/UploadFile/23197a/5221/#ReadAndPostComment

wpf 3d solid wireframe transform

Documents