Difference between revisions of "Silhouette Edges"
(21 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
{{Image Description | {{Image Description | ||
|ImageName=Silhouette Edges | |ImageName=Silhouette Edges | ||
− | |Image= | + | |Image=Silhouettebunny.png |
− | |ImageIntro= | + | |ImageIntro=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 [[Surface Normals|normals]] facing towards versus away from the viewer. |
|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 | + | 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 | + | :For every triangle in the object |
− | ::Compute the surface normal of the | + | ::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 | + | :::For every edge of the triangle |
− | ::::Identify the | + | ::::Identify the triangle that shares this edge |
− | ::::Compute the surface normal for that | + | ::::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]]. | + | 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 | + | ==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 | + | ::(a) two adjacent edge vectors from a triangle, or <br /> |
− | ::(b) two tangent vectors at a point in the | + | ::(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 | ||
[[Image:Computingsurfacenormal.jpg|400px|center]] <br /> | [[Image:Computingsurfacenormal.jpg|400px|center]] <br /> | ||
− | ==Determining whether a surface | + | ==Determining whether a surface triangle normal points toward the viewer== |
− | Once you have the | + | 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 | + | 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/ 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 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 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 | + | 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 | + | 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 | ||
− | |WhyInteresting= | + | |
− | | | + | |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 | ||
+ | |Elementary=No | ||
+ | |MiddleSchool=No | ||
+ | |HighSchool=Yes | ||
+ | |HigherEd=Yes | ||
|InProgress=Yes | |InProgress=Yes | ||
}} | }} |
Latest revision as of 09:36, 9 August 2011
Silhouette Edges |
---|
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.
Contents
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
- For every edge of the triangle
- 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, 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.
- (a) two adjacent edge vectors from a triangle, or
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 . This is shown in the figure below:
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:
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 , with the parameter t intended to be varied continually giving an animation to the surface:
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
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.
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.
Teaching Materials
- There are currently no teaching materials for this page. Add teaching materials.
References
Page written by Steve Cunningham.
- ↑ Cutler, B. (2011). Advanced Computer Graphics.
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.|]]