|
|
|
Introduction to WPF 3D
3D Graphic Basics
The basic idea of creating 3D graphics is to have a three dimensional model of an object. Because our screen is only two dimensional, we define a camera that takes a picture of the object. The picture is a projection of the object to a planar surface. This projection is rendered into an bitmap by the 3D rendering engine. The engine determines the color for every pixel by calculating the amount of light that is reflected by any light sources to the projection surface by the objects in the 3D space.
All surfaces of objects have a material and a brush. The material defines how much light is reflected for a specific angle and the brush defines the color. A brush can either be a simple color or a gradient or even an image called texture.
A world of triangles
In the world of 3D graphics, all objects are described by a set of triangles. But why triangles? The reason for this is that a triangle is the most granular geometry to describe a planar surface. The rendering engine can calculate the color of each triangle depending on its material and angle to the lights in the scene. If we would build our world on rectangles, the points don't need to be plane. The surface will be a lot more complex to calculate and render.
A surface of a 3D object is called a mesh. A mesh is defined by a number of 3D points. These points are called vertices. The vertices are joined together by a winding pattern to define the triangles. Every triangle has a front and a back side. Only the front side is rendered. The front side is defined by the winding order of the points. WPF uses a counter clockwise winding pattern. You can remember this with a simple mnemonic called the "right hand rule". This means if you close your right hand to a thumb-up gesture, your finger make a counter clockwise move while the thumb shows up. The fingers show the winding order, while the thumb indicates the upper-side of the triangle.
A right handed coordinate system
WPF uses a right-handed coordinate system. This means that if you hold the fingers of your right hand as shown on the picture, the fingers indicate the positive direction of the tree axes.
Elements of a 3D scene
- Viewport3D
The viewport is the control that builds the gate between the 2D and the 3D world.
- Camera
Every 3D scene has excactly one camera. The camera defines the Position and the LookDirection and the UpDirection of the viewer. WPF supports orthographical and perspective cameras.
- 3D Models
A 3D model defines an object in the scene. It has a Geometry that is the mesh and a Material that can be a diffuse, specular or emmisive material. The material itself has a brush.
- Lights
Without any lights you see nothing. So we need to place at least one light in our scene to illuminate our models. WPF supports different kind of lights, like:
AmbientLight
DirectionalLight
PointLight
SpotLight
Hello 3D-World - A Simple Cube
The following example shows how to create a basic cube mesh with 8 vertices that are wired up in 12 triangles that form the shape of the cube.
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="-40,40,40" LookDirection="40,-40,-40 "
UpDirection="0,0,1" />
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<DirectionalLight Color="White" Direction="-1,-1,-3" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 10,0,0 10,10,0 0,10,0 0,0,10
10,0,10 10,10,10 0,10,10"
TriangleIndices="0 1 3 1 2 3 0 4 3 4 7 3 4 6 7 4 5 6
0 4 1 1 4 5 1 2 6 6 5 1 2 3 7 7 6 2"/>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="Red"/>
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
Last modified: 2009-07-04 16:21:17
Copyright (c) by Christian Moser, 2011.
Comments on this article
Show all comments
|
Debug | |
|
Commented on 20.October 2010 |
You have a special web-Site....And thank about the perfect information.
how now how to paint Star or polygon in the code (in WPF) and I have only
the width and height of the star or polygon.
It very important me and I need it S-O-S.
Thank
Debug.....
|
|
|
|
Shekhar | |
|
Commented on 21.October 2010 |
This is good i think this help to all developer who want to work on WPF
|
|
|
|
Achilles | |
|
Commented on 23.November 2010 |
Great work !!
|
|
|
|
tsingroo | |
|
Commented on 1.December 2010 |
need more, plz continue
|
|
|
|
Jawahar | |
|
Commented on 28.December 2010 |
This is good. But I like to know how to design 3D objects using Expression Blend.
|
|
|
|
Saurabh | |
|
Commented on 28.December 2010 |
Hey, good tutorial....well i developed a browser with this 3D cube concept but currently only single phase of the browser is active to show the single URL and all other phases shows its screen shot....pls. tell me how to enable or load different URL's on each phase...is it ur area of working or not...
|
|
|
|
rer | |
|
Commented on 12.January 2011 |
232
|
|
|
|
simran | |
|
Commented on 11.February 2011 |
Very good article
|
|
|
|
Mega | |
|
Commented on 15.February 2011 |
Ok so how about events, multiple geometries in the same viewport, storyboards and different lighting types? a lil disappointed with this extremely limited example of what wpf 3d can do. guess this is not the place to find out how to trigger an event when a mouse is clicked on a face of a mesh or another mesh within the viewport
|
|
|
|
Rafael | |
|
Commented on 2.March 2011 |
Caro,
podes me ajudar?
tenho uma serie de pontos e preciso plotar uma superfÃcie e rotaciona-la e aplicar zoom.
No aguardo.
|
|
|
|
Rafael | |
|
Commented on 2.March 2011 |
Friend,
can you help me?
I have a series of plot points and need a surface and rotate it and zoom.
Waiting in the wings.
|
|
|
|
Rahul | |
|
Commented on 2.March 2011 |
Very Very Good And Esay To DO.
|
|
|
|
Rajendra | |
|
Commented on 8.March 2011 |
I'll try this and after i will lets you know.
|
|
|
|
Chetan | |
|
Commented on 9.March 2011 |
i want to write the PROPEQUITY in 3d and import XAML, can you tell me wht is the xaml code. pls ....
|
|
|
|
free adult... | |
|
Commented on 20.March 2011 |
xxgk wwprs <a href="http://www.gabbysporn.com">free adult videos</a> zgehnu g pe q cnr
scbu ysyey [URL=http://www.gabbysporn.com - porno[/URL - eoetve e ts y fgd
|
|
|
|
Johnson | |
|
Commented on 27.June 2011 |
Supa nice
|
|
|
|
kondsreddy | |
|
Commented on 7.July 2011 |
<Viewport3D>
<Viewport3D.Camera>
<PerspectiveCamera Position="-40,40,40" LookDirection="40,-40,-40 "
UpDirection="0,0,1" />
</Viewport3D.Camera>
<ModelVisual3D>
<ModelVisual3D.Content>
<Model3DGroup>
<DirectionalLight Color="White" Direction="-1,-1,-3" />
<GeometryModel3D>
<GeometryModel3D.Geometry>
<MeshGeometry3D Positions="0,0,0 10,0,0 10,10,0 0,10,0 0,0,10
10,0,10 10,10,10 0,10,10"
TriangleIndices="0 1 3 1 2 3 0 4 3 4 7 3 4 6 7 4 5 6
0 4 1 1 4 5 1 2 6 6 5 1 2 3 7 7 6 2"/>
</GeometryModel3D.Geometry>
<GeometryModel3D.Material>
<DiffuseMaterial Brush="Red"/>
</GeometryModel3D.Material>
</GeometryModel3D>
</Model3DGroup>
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D>
|
|
|
|
at | |
|
Commented on 9.August 2011 |
hmm
|
|
|
|
Onur | |
|
Commented on 9.August 2011 |
very nice it's impressive
|
|
|
|
Md. Nasim Uddin | |
|
Commented on 14.August 2011 |
nice document
|
|
|
|
jenny | |
|
Commented on 28.August 2011 |
hello, I am new to 3D and WPF together,
i tried to create simple 2 buttons in Viewport3D, like this:
--------------------------------------------------------------
<Viewport3D Width="300" Height="300" >
<Viewport3D.Children>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"
TextureCoordinates="0,1 1,1 1,0 0,0"
TriangleIndices="0,1,2 2,3,0"
/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="Red"/>
</Viewport2DVisual3D.Material>
<Canvas Height="300" Width="300">
<Button Canvas.Left="0" Canvas.Top="0" Height="60" Width="60" Content="one" />
<Button Canvas.Left="65" Canvas.Top="60" Height="100" Width="40" Content="two" />
</Canvas>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<SpotLight Color="White" Position="0,0,3" Direction="0,0,-1" Range="50"
OuterConeAngle="59" InnerConeAngle="0" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
<!-- Camera. -->
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="20"
LookDirection="0,0,-1"
UpDirection="0,1,1"
NearPlaneDistance="1"
Position="0,0,5"
FieldOfView="45"
/>
</Viewport3D.Camera>
</Viewport3D>
----------------------------------------------------------------------
i can't understand why when i change the properties of one button its affecting how i see the other button, for example when i change button's "two" height from 60 to 100 , button "one" becomes smaller???
please help me understand,
tnx jenny
|
|
|
|
jenny | |
|
Commented on 28.August 2011 |
hello, I am new to 3D and WPF together,
i tried to create simple 2 buttons in Viewport3D, like this:
--------------------------------------------------------------
<Viewport3D Width="300" Height="300" >
<Viewport3D.Children>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"
TextureCoordinates="0,1 1,1 1,0 0,0"
TriangleIndices="0,1,2 2,3,0"
/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="Red"/>
</Viewport2DVisual3D.Material>
<Canvas Height="300" Width="300">
<Button Canvas.Left="0" Canvas.Top="0" Height="60" Width="60" Content="one" />
<Button Canvas.Left="65" Canvas.Top="60" Height="100" Width="40" Content="two" />
</Canvas>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<SpotLight Color="White" Position="0,0,3" Direction="0,0,-1" Range="50"
OuterConeAngle="59" InnerConeAngle="0" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
<!-- Camera. -->
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="20"
LookDirection="0,0,-1"
UpDirection="0,1,1"
NearPlaneDistance="1"
Position="0,0,5"
FieldOfView="45"
/>
</Viewport3D.Camera>
</Viewport3D>
----------------------------------------------------------------------
i can't understand why when i change the properties of one button its affecting how i see the other button, for example when i change button's "two" height from 60 to 100 , button "one" becomes smaller???
please help me understand,
tnx jenny
|
|
|
|
jenny | |
|
Commented on 28.August 2011 |
hello, I am new to 3D and WPF together,
i tried to create simple 2 buttons in Viewport3D, like this:
--------------------------------------------------------------
<Viewport3D Width="300" Height="300" >
<Viewport3D.Children>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"
TextureCoordinates="0,1 1,1 1,0 0,0"
TriangleIndices="0,1,2 2,3,0"
/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="Red"/>
</Viewport2DVisual3D.Material>
<Canvas Height="300" Width="300">
<Button Canvas.Left="0" Canvas.Top="0" Height="60" Width="60" Content="one" />
<Button Canvas.Left="65" Canvas.Top="60" Height="100" Width="40" Content="two" />
</Canvas>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<SpotLight Color="White" Position="0,0,3" Direction="0,0,-1" Range="50"
OuterConeAngle="59" InnerConeAngle="0" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
<!-- Camera. -->
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="20"
LookDirection="0,0,-1"
UpDirection="0,1,1"
NearPlaneDistance="1"
Position="0,0,5"
FieldOfView="45"
/>
</Viewport3D.Camera>
</Viewport3D>
----------------------------------------------------------------------
i can't understand why when i change the properties of one button its affecting how i see the other button, for example when i change button's "two" height from 60 to 100 , button "one" becomes smaller???
please help me understand,
tnx jenny
|
|
|
|
jenny | |
|
Commented on 28.August 2011 |
hello, I am new to 3D and WPF together,
i tried to create simple 2 buttons in Viewport3D, like this:
--------------------------------------------------------------
<Viewport3D Width="300" Height="300" >
<Viewport3D.Children>
<Viewport2DVisual3D>
<Viewport2DVisual3D.Geometry>
<MeshGeometry3D
Positions="-1,-1,0 1,-1,0 1,1,0 -1,1,0"
TextureCoordinates="0,1 1,1 1,0 0,0"
TriangleIndices="0,1,2 2,3,0"
/>
</Viewport2DVisual3D.Geometry>
<Viewport2DVisual3D.Material>
<DiffuseMaterial Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="Red"/>
</Viewport2DVisual3D.Material>
<Canvas Height="300" Width="300">
<Button Canvas.Left="0" Canvas.Top="0" Height="60" Width="60" Content="one" />
<Button Canvas.Left="65" Canvas.Top="60" Height="100" Width="40" Content="two" />
</Canvas>
</Viewport2DVisual3D>
<ModelVisual3D>
<ModelVisual3D.Content>
<SpotLight Color="White" Position="0,0,3" Direction="0,0,-1" Range="50"
OuterConeAngle="59" InnerConeAngle="0" />
</ModelVisual3D.Content>
</ModelVisual3D>
</Viewport3D.Children>
<!-- Camera. -->
<Viewport3D.Camera>
<PerspectiveCamera FarPlaneDistance="20"
LookDirection="0,0,-1"
UpDirection="0,1,1"
NearPlaneDistance="1"
Position="0,0,5"
FieldOfView="45"
/>
</Viewport3D.Camera>
</Viewport3D>
----------------------------------------------------------------------
i can't understand why when i change the properties of one button its affecting how i see the other button, for example when i change button's "two" height from 60 to 100 , button "one" becomes smaller???
please help me understand,
tnx jenny
|
|
|
|
BindraBindu | |
|
Commented on 16.September 2011 |
Hi Everyone,
Really! this is very nice article.
Here I have also another example, how to create 3D shape in WPF. Please check out the following links for more details .............
http://www.mindstick.com/Articles/fdec9740-4e4c-49c2-8395-6e610950f3c4/?Create%203-D%20cube%20in%20WPF
Thanks !!!!!!!
|
|
|
|
|
|