Difference between revisions of "Silhouette Edges"

From Math Images
Jump to: navigation, search
 
(15 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
|ImageDescElem=If you have a 3D object, either surface or solid, a silhouette edge is the collection of points where the surface normal is orthogonal to the view vector. <br /> <br />
 
|ImageDescElem=If you have a 3D object, either surface or solid, a silhouette edge is the collection of points where the surface normal is orthogonal to the view vector. <br /> <br />
  
If the object is composed of facets, a silhouette edge is comprised of the common edges between a facet whose surface normal points toward the viewer and a facet whose surface normal points away from the viewer.  This is then an algorithm for finding silhouette edges: <br />
+
If the object is composed of triangles, a silhouette edge is comprised of the common edges between a triangle whose surface normal points toward the viewer and a triangle whose surface normal points away from the viewer.  The silhouette edge is a collection of these 'corner' edges, each between one triangle that faces toward and another that faces away from the viewer.  This is then an algorithm for finding silhouette edges: <br />
:For every facet in the object
+
:For every triangle in the object
::Compute the surface normal of the facet
+
::Compute the surface normal of the triangle
 
::If the surface normal points toward the viewer
 
::If the surface normal points toward the viewer
:::For every edge of the facet
+
:::For every edge of the triangle
::::Identify the facet that shares this edge
+
::::Identify the triangle that shares this edge
::::Compute the surface normal for that facet
+
::::Compute the surface normal for that triangle
 
::::If this surface normal points away from the viewer
 
::::If this surface normal points away from the viewer
 
:::::Add the edge to the collection of silhouette edges
 
:::::Add the edge to the collection of silhouette edges
Line 19: Line 19:
 
:endfor <br /><br />
 
:endfor <br /><br />
  
Implementing this algorithm requires some vector arithmetic, as described in the pages on [[Vector|vectors]] and [[Matrix|matrices]].  This includes computing and comparing the normal vectors for adjacent facets, as described in the More Mathematical Explanation below.<br /><br />
+
Implementing this algorithm requires some vector arithmetic, as described in the pages on [[Vector|vectors]] and [[Matrix|matrices]].  This includes computing and comparing the normal vectors for adjacent triangles, as described in the More Mathematical Explanation below.<br /><br />
 
|ImageDesc=
 
|ImageDesc=
==Computing the surface normal of a facet==
+
==Computing the surface normal of a triangle==
 
This is discussed in the page on [[Surface Normals]], but it involves the cross product of two vectors.  These vectors may be <br />
 
This is discussed in the page on [[Surface Normals]], but it involves the cross product of two vectors.  These vectors may be <br />
::(a) two adjacent edge vectors from a facet, or <br />
+
::(a) two adjacent edge vectors from a triangle, or <br />
::(b) two tangent vectors at a point in the facet computed by partial <br />
+
::(b) two tangent vectors at a point in the triangle computed by partial derivatives. <br />
derivatives. <br />
+
Cross products are order-sensitive, so you need to arrange these two vectors so that the angle between the first E1 and second E2 is positive in the usual sense, that is, that the second is counterclockwise from the first.  Then the surface normal to the triangle is the cross product <math> N = E1 \times E2 </math>.  This is shown in the figure below: <br />
Cross products are order-sensitive, so you need to arrange these two vectors so that the angle between the first E1 and second E2 is positive in the usual sense, that is, that the second is counterclockwise from the first.  Then the surface normal to the facet is the cross product <math> N = E1 \times E2 </math>.  This is shown in the figure below: <br />
 
 
[[Image:Computingsurfacenormal.jpg|400px|center]] <br />
 
[[Image:Computingsurfacenormal.jpg|400px|center]] <br />
==Determining whether a surface facet normal points toward the viewer==
+
==Determining whether a surface triangle normal points toward the viewer==
Once you have the facet surface normal N, compute the view vector as the vector from the eyepoint to the point on the facet you used in computing the normal; this is the view vector V.  For this question we are more interested in the vector from the facet to the eyepoint, but this is simply V’= –V.  Then the surface normal points toward the eye if the angle between N and V’ is positive; this is true if the dot product  N•V’ is positive, as shown in the figure below: <br />
+
Once you have the triangle surface normal N, compute the view vector as the vector from the eyepoint to the point on the triangle you used in computing the normal; this is the view vector V.  For this question we are more interested in the vector from the triangle to the eyepoint, but this is simply V’= –V.  Then the surface normal points toward the eye if the angle between N and V’ is acute; this is true if the dot product  N•V’ is positive, as shown in the figure below: <br />
 
[[Image:Silhouettefacing.jpg|400px|center]] <br />
 
[[Image:Silhouettefacing.jpg|400px|center]] <br />
 +
The reason this is useful is to find the edges between triangles that are pointing toward the viewer and triangles that are pointing away from the viewer.  This is where the silhouette edge is drawn.
 
==Example of a surface==
 
==Example of a surface==
 
Consider a surface such as this trig function surface shown in the figure below, given by the formula  <math> f(x,y) = 0.3 \times \cos(x^2 +y^2 +t) </math>, with the parameter t intended to be varied continually giving an animation to the surface:<br />
 
Consider a surface such as this trig function surface shown in the figure below, given by the formula  <math> f(x,y) = 0.3 \times \cos(x^2 +y^2 +t) </math>, with the parameter t intended to be varied continually giving an animation to the surface:<br />
 
[[Image:Silhouettesurface.jpg|400px|center]] <br />
 
[[Image:Silhouettesurface.jpg|400px|center]] <br />
If you use the technique of constructing a grid for the function domain, as described in the discussion of surfaces, for each facet you can identify the adjacent grid triangles and thus the adjacent facets, and so you can compute the facet surface normals from either the geometric or analytic approach, as described above. <br />
+
If you use the technique of constructing a grid for the function domain (as described in the discussion of surfaces) you can identify the adjacent grid triangles for each triangle. Thus you can also get the adjacent triangles.  Using these, you can compute the triangle surface normals with either approach described above. <br />
 
==Example for an object==
 
==Example for an object==
 +
{{hide|1=
 
Building an interesting graphical object is probably not an easy job, so you might look for other sources of examples.  A good source might come from the might come from the publicly-available .obj files at sources named at
 
Building an interesting graphical object is probably not an easy job, so you might look for other sources of examples.  A good source might come from the might come from the publicly-available .obj files at sources named at
::[http://www.hongkiat.com/blog/60-excellent-free-3d-model-websites/ http://www.hongkiat.com/blog/60-excellent-free-3d-model-websites/] <br />
+
::[http://www.hongkiat.com/blog/60-excellent-free-3d-model-websites/ 3D Model Sites] <br />
 
Below is an example:  the Stanford bunny from
 
Below is an example:  the Stanford bunny from
::[http://graphics.stanford.edu/~mdfisher/Data/Meshes/bunny.obj http://graphics.stanford.edu/~mdfisher/Data/Meshes/bunny.obj] <br />
+
::[http://graphics.stanford.edu/~mdfisher/Data/Meshes/bunny.obj Stanford's Bunny Data] <br />
 
The figure shows this with silhouette edges in green on top of a very restricted lighting, so you can tell what a silhouette edge might look like.  Two other “canonical” .obj files for computer graphics, both having lots of interesting shapes, are the dragon and the happy Buddha you can find at
 
The figure shows this with silhouette edges in green on top of a very restricted lighting, so you can tell what a silhouette edge might look like.  Two other “canonical” .obj files for computer graphics, both having lots of interesting shapes, are the dragon and the happy Buddha you can find at
::[http://www.d.umn.edu/~ddunham/cs5721f07/schedule/resources/lab_opengl07.html http://www.d.umn.edu/~ddunham/cs5721f07/schedule/resources/lab_opengl07.html] <br />
+
::[http://www.d.umn.edu/~ddunham/cs5721f07/schedule/resources/lab_opengl07.html University of Minnesota Duluth Computer Graphics] <br />
 
[[Image:Silhouettebunny.png|200px|center]] <br />
 
[[Image:Silhouettebunny.png|200px|center]] <br />
If you use a source such as the usual .obj files, you may have difficulty in figuring out which facets are adjacent to one you are considering.  However, some .obj files use triangles with adjacency rather than simple triangles.  In this case, the primitives with adjacency we described in the section on [[Graphics Primitives|geometric primitives]] may help.  As described there, a triangle with adjacency actually includes six points, as described by the figure below: <br />
+
If you use a source such as the usual .obj files, you may have difficulty in figuring out which triangles are adjacent to one you are considering.  However, some .obj files use triangles with adjacency rather than simple triangles.  In this case, the primitives with adjacency we described in the section on [[Graphics Primitives|geometric primitives]] may help.  As described there, a triangle with adjacency actually includes six points, as described by the figure below: <br />
 
::[[Image:Silhouettetriangles.png|200px|center]] <br />
 
::[[Image:Silhouettetriangles.png|200px|center]] <br />
So for any edge of the facet with vertices 0, 2, and 4, you have the adjacent triangle, letting you compute all the facet normals you need for the silhouette computation. The bunny figure above was computed from an .obj file that included this kind of adjacency.
+
So for any edge of the triangle with vertices 0, 2, and 4, you have the adjacent triangle, letting you compute all the triangle normals you need for the silhouette computation. The bunny figure above was computed from an .obj file that included this kind of adjacency.
 
+
}}
  
  
Line 52: Line 53:
 
|AuthorName=Steve Cunningham
 
|AuthorName=Steve Cunningham
 
|Field=Geometry
 
|Field=Geometry
|References=references
+
 
 +
|WhyInteresting=
 +
Silhouette Edges are useful in graphics for more than just looking nice.  They are sometimes an unseen step in a process to create something else.  An example of this is line drawing.  If you take a 3D model and find its silhouette edges, this can help create a 2D line drawing of the model.
 +
==Shadow Volumes==
 +
Shadow volumes are used, not surprisingly, to create shadows.  Instead of using the viewer (where the camera is) in this case we use the light source to find which triangles point toward and away.  An example of a shadow volume can be seen below.<ref name=ACG> Cutler, B. (2011). Advanced Computer Graphics.</ref>  Note how the silhouette edges in red are the edges that would be silhouettes if you were viewing the scene from where the yellow dot (light source) is.  The green volume is contained in the space bounded by rays coming from the light source, and passing through the silhouette edge.<br />
 +
<center> [[Image:Edges_and_shadow_polygons_a.png]] [[Image:Edges_and_shadow_polygons_b.png]]</center><br />
 +
The image sequence bellow shows the steps in creating a shadow using silhouette edges.  In the first picture it almost looks like there are already shadows.  This is only due to light reflected off the surface due to the surface normal; it isn't actually a shadow.  This light is drawn as if each triangle was the only one in the scene with the light.  The second image shows a shadow volume from a light source to the upper left that isn't shown.  An important thing to notice is that the volume is not just for tracing a shadow on the ground behind the bunny.  You can see the it covers some of the bunny itself, and if anything went behind the bunny, the shadow volume would intersect with it.  This is realistic, because in both of those cases, the other things should be in shadow.  The third image shows how the shadows are defined by the shadow volume.  The last picture is the final product.  The portions of the bunny that are blocked by the head, ear, and other parts, are in shadow, as well as the floor behind the bunny. <br />
 +
<center>[[Image:Bunny_no_shadows.png]] [[Image:Bunny_shadow_polygons.png]] [[Image:Bunny_shadow_polygons_and_shadows.png]] [[Image:Bunny_shadows.png]] </center> <br />
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
|References=Page written by Steve Cunningham.<br />
 +
<references />
 
|Pre-K=No
 
|Pre-K=No
 
|Elementary=No
 
|Elementary=No

Latest revision as of 09:36, 9 August 2011

Inprogress.png
Silhouette Edges
Silhouettebunny.png
Field: Geometry
Image Created By: Steve Cunningham

Silhouette Edges

This bunny is made up of a group a faces that are adjacent to one another. A program has been run on the object that has found the silhouette edges and they are highlighted in green. This is done by finding which faces have their normals facing towards versus away from the viewer.


Basic Description

If you have a 3D object, either surface or solid, a silhouette edge is the collection of points where the surface normal is orthogonal to the view vector.

If the object is composed of triangles, a silhouette edge is comprised of the common edges between a triangle whose surface normal points toward the viewer and a triangle whose surface normal points away from the viewer. The silhouette edge is a collection of these 'corner' edges, each between one triangle that faces toward and another that faces away from the viewer. This is then an algorithm for finding silhouette edges:

For every triangle in the object
Compute the surface normal of the triangle
If the surface normal points toward the viewer
For every edge of the triangle
Identify the triangle that shares this edge
Compute the surface normal for that triangle
If this surface normal points away from the viewer
Add the edge to the collection of silhouette edges
endif
endfor
endif
endfor

Implementing this algorithm requires some vector arithmetic, as described in the pages on vectors and matrices. This includes computing and comparing the normal vectors for adjacent triangles, as described in the More Mathematical Explanation below.


A More Mathematical Explanation

Note: understanding of this explanation requires: *Graphics

Computing the surface normal of a triangle

This is discussed in the page on Surface Normals, [...]

Computing the surface normal of a triangle

This is discussed in the page on Surface Normals, but it involves the cross product of two vectors. These vectors may be

(a) two adjacent edge vectors from a triangle, or
(b) two tangent vectors at a point in the triangle computed by partial derivatives.

Cross products are order-sensitive, so you need to arrange these two vectors so that the angle between the first E1 and second E2 is positive in the usual sense, that is, that the second is counterclockwise from the first. Then the surface normal to the triangle is the cross product  N = E1 \times E2 . This is shown in the figure below:

Computingsurfacenormal.jpg

Determining whether a surface triangle normal points toward the viewer

Once you have the triangle surface normal N, compute the view vector as the vector from the eyepoint to the point on the triangle you used in computing the normal; this is the view vector V. For this question we are more interested in the vector from the triangle to the eyepoint, but this is simply V’= –V. Then the surface normal points toward the eye if the angle between N and V’ is acute; this is true if the dot product N•V’ is positive, as shown in the figure below:

Silhouettefacing.jpg

The reason this is useful is to find the edges between triangles that are pointing toward the viewer and triangles that are pointing away from the viewer. This is where the silhouette edge is drawn.

Example of a surface

Consider a surface such as this trig function surface shown in the figure below, given by the formula  f(x,y) = 0.3 \times \cos(x^2 +y^2 +t) , with the parameter t intended to be varied continually giving an animation to the surface:

Silhouettesurface.jpg

If you use the technique of constructing a grid for the function domain (as described in the discussion of surfaces) you can identify the adjacent grid triangles for each triangle. Thus you can also get the adjacent triangles. Using these, you can compute the triangle surface normals with either approach described above.

Example for an object

Building an interesting graphical object is probably not an easy job, so you might look for other sources of examples. A good source might come from the might come from the publicly-available .obj files at sources named at

3D Model Sites

Below is an example: the Stanford bunny from

Stanford's Bunny Data

The figure shows this with silhouette edges in green on top of a very restricted lighting, so you can tell what a silhouette edge might look like. Two other “canonical” .obj files for computer graphics, both having lots of interesting shapes, are the dragon and the happy Buddha you can find at

University of Minnesota Duluth Computer Graphics
Silhouettebunny.png

If you use a source such as the usual .obj files, you may have difficulty in figuring out which triangles are adjacent to one you are considering. However, some .obj files use triangles with adjacency rather than simple triangles. In this case, the primitives with adjacency we described in the section on geometric primitives may help. As described there, a triangle with adjacency actually includes six points, as described by the figure below:

Silhouettetriangles.png

So for any edge of the triangle with vertices 0, 2, and 4, you have the adjacent triangle, letting you compute all the triangle normals you need for the silhouette computation. The bunny figure above was computed from an .obj file that included this kind of adjacency.


Why It's Interesting

Silhouette Edges are useful in graphics for more than just looking nice. They are sometimes an unseen step in a process to create something else. An example of this is line drawing. If you take a 3D model and find its silhouette edges, this can help create a 2D line drawing of the model.

Shadow Volumes

Shadow volumes are used, not surprisingly, to create shadows. Instead of using the viewer (where the camera is) in this case we use the light source to find which triangles point toward and away. An example of a shadow volume can be seen below.[1] Note how the silhouette edges in red are the edges that would be silhouettes if you were viewing the scene from where the yellow dot (light source) is. The green volume is contained in the space bounded by rays coming from the light source, and passing through the silhouette edge.

Edges and shadow polygons a.png Edges and shadow polygons b.png


The image sequence bellow shows the steps in creating a shadow using silhouette edges. In the first picture it almost looks like there are already shadows. This is only due to light reflected off the surface due to the surface normal; it isn't actually a shadow. This light is drawn as if each triangle was the only one in the scene with the light. The second image shows a shadow volume from a light source to the upper left that isn't shown. An important thing to notice is that the volume is not just for tracing a shadow on the ground behind the bunny. You can see the it covers some of the bunny itself, and if anything went behind the bunny, the shadow volume would intersect with it. This is realistic, because in both of those cases, the other things should be in shadow. The third image shows how the shadows are defined by the shadow volume. The last picture is the final product. The portions of the bunny that are blocked by the head, ear, and other parts, are in shadow, as well as the floor behind the bunny.

Bunny no shadows.png Bunny shadow polygons.png Bunny shadow polygons and shadows.png Bunny shadows.png




Teaching Materials

There are currently no teaching materials for this page. Add teaching materials.




References

Page written by Steve Cunningham.

  1. Cutler, B. (2011). Advanced Computer Graphics.





If you are able, please consider adding to or editing this page!


Have questions about the image or the explanations on this page?
Leave a message on the discussion page by clicking the 'discussion' tab at the top of this image page.


  [[Description::This bunny is made up of a group a faces that are adjacent to one another.  A program has been run on the object that has found the silhouette edges and they are highlighted in green.  This is done by finding which faces have their normals facing towards versus away from the viewer.|]]