<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" 
               "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd" [
  <!ENTITY mathml "http://www.w3.org/1998/Math/MathML">
]>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../../../comsci/css/s011.css"/>
<link rel='SHORTCUT ICON' href='../../../comsci/images/FrameHome.ico' />
<style type="text/css">
</style>
<title> Normal Generation </title>
</head>

<body>


<div class="message_right">
  <a href="http://validator.w3.org/check/referer">
    <img src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid
	XHTML 1.1!" height="31" width="88" />
  </a>

  <a href="http://jigsaw.w3.org/css-validator/">
    <img style="width:88px;height:31px"
       src="http://jigsaw.w3.org/css-validator/images/vcss" 
       alt="Valid CSS!" />
  </a>
  <br/>
  Created 2005-02-23 &nbsp; Modified 
<!--UPDATE_DATE_MODIFIED-->
<!--UPDATE_DATE_BEGIN-->
2007-01-01
<br/>
<a href="mailto:chelton.evans@yahoo.com">Chelton Evans</a>
<!--UPDATE_DATE_END-->
</div>

<h1> 
<a href="geom.html"> <img alt="proj" src="../../../comsci/images/compgeom.png" /></a>
Normal Generation
<a href="../../../../index.html">
<img alt="home" src="../../../comsci/images/Frame.gif" /> </a>
</h1>


<p>
<a href="#normals"> What Are Normals </a> <br/>
<a href="#faceted"> Faceted Normals </a> <br/>
<a href="#compvertexnormals"> Computing Vertex
  Normals from Facet Normals </a> <br/>
<a href="#Newell"> Newell </a> <br/>
<a href="#Central_Differences">Central Differences</a><br/>
<a href="#Tangent_in_3D">Tangent in 3D</a><br/>


</p>

<div class="spacer" />

<div class="float25">

<a id="normals"> </a>
<h2> What are Normals </h2>

<p>A normal describes the gradient because they are the same thing
 at right angles. Perhaps the light equation uses a first order
 approximation - the normal is the first order.
</p>

<p> Consider a surface as a smooth continuous sheet, the normal at a
 point completely describes the gradient at that point. The gradient
 is used in the lighting equation.
</p>

<p> Now consider a surface as a collection of continuous faceted triangles,
 joined together in a pattern.  If we do not know what the normal is
 then we will have to construct it from the surface. This is really
 a non-uniqueness issue as there are infinitely many different possibilities
 by choosing different normals at each of the points.
</p>

<p>We could even give points not unique normals. For example faceted
 triangles (bright shinny reflections) give the same normal for each
 of the triangles points. Since different triangles border the same
 points there is no unique normal for a point.
</p>

<p>Alternatively you could specify that the normal must be unique
 at each point, for a sphere this renders it much smoother and better
 looking.
</p>

</div>

<div class="float25">
<a id="faceted"> </a>
<h2> Faceted Normals </h2>

<p>
The normal perpendicular to each triangles plane is
 used to render the triangle's points.
</p>

<p>This is the most primitive normal generation. The facets
 are visually easy to see.
</p>

</div>


<div class="float25">

<a id="compvertexnormals"> </a> 
<h2>Computing Vertex Normals from Facet Normals </h2>

<p class="equ">

<math xmlns="&mathml;"> 
  <mi>Nml</mi>
  <mo>=</mo>
  
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mi>n</mi><mo>-</mo><mi>1</mi>
    </mrow>
  </munderover> 



  <mfrac>
    <mrow>

  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>&times;</mo>
  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>

    </mrow>
    <mrow>

  <mo>||</mo>
  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>||</mo>
  <msup>
    <mi></mi>
    <mrow><mi>2</mi></mrow>
  </msup>

  <mo>||</mo>
  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>||</mo>
  <msup>
    <mi></mi>
    <mrow><mi>2</mi></mrow>
  </msup>



    </mrow>
  </mfrac>

</math>


</p>

<img src="diagg02001.png" alt="diagg02001.png" />

<p> Real Time Rendering, page 453, Max Nelson. </p>




</div>

<div class="spacer" />

<div class="float25">

<a id="Newell"> </a>
<h2> Newell </h2>

<p class="equ">
<math xmlns="&mathml;">
  <mi>n</mi>
  <msub>
    <mi></mi>
    <mrow><mi>x</mi></mrow>
  </msub>
  <mo>=</mo>
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mi>N</mi><mo>-</mo><mi>1</mi>
    </mrow>
  </munderover>
  <mo>(</mo>
  <mi>y</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>-</mo>
  <mi>y</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>)</mo>
  <mo>(</mo>
  <mi>z</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>+</mo>
  <mi>z</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>)</mo>
</math>

<br/>

<math xmlns="&mathml;">
  <mi>n</mi>
  <msub>
    <mi></mi>
    <mrow><mi>y</mi></mrow>
  </msub>
  <mo>=</mo>
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mi>N</mi><mo>-</mo><mi>1</mi>
    </mrow>
  </munderover>
  <mo>(</mo>
  <mi>z</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>-</mo>
  <mi>z</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>)</mo>
  <mo>(</mo>
  <mi>x</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>+</mo>
  <mi>x</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>)</mo>
</math>

<br/>

<math xmlns="&mathml;">
  <mi>n</mi>
  <msub>
    <mi></mi>
    <mrow><mi>z</mi></mrow>
  </msub>
  <mo>=</mo>
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mi>N</mi><mo>-</mo><mi>1</mi>
    </mrow>
  </munderover>
  <mo>(</mo>
  <mi>x</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>-</mo>
  <mi>x</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>)</mo>
  <mo>(</mo>
  <mi>y</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>+</mo>
  <mi>y</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>)</mo>
</math>



</p>

<p>
This works for convex polygons. For triangles the method generates
 faceted triangles. This is good because the algorithm is general - 
 its simplest behavior is the first order approximate - the faceted
 triangle method.
</p>

<p> To show their equivalence I computed the faceted normal in the
 x component using Newells method, then compared it with the 
 faceted normal and found they were the same.
</p>

<p>A computational advantage of Newells method is that its easy
 to write computation of the faceted normal. Rather than calculate
 the cross products, just plug in his formula.
</p>

</div>

<div class="float25">
<a id="Central_Differences"></a>
<h2>Central Differences</h2>

<p>The marching methods use central differences to calculate
 the tangent.</p>

<p class="equ">
Marching Squares <br/>
<math xmlns="&mathml;"> 
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>x</mi></mrow>
  </msub>
  <mo>=</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>+</mo>
  <mi>1</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>)</mo>
  <mo>-</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>-</mo>
  <mi>1</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>)</mo>
</math>

<br/>

<math xmlns="&mathml;"> 
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>y</mi></mrow>
  </msub>
  <mo>=</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>+</mo>
  <mi>1</mi>
  <mo>)</mo>
  <mo>-</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>-</mo>
  <mi>1</mi>
  <mo>)</mo>
</math>

<br/>

<math xmlns="&mathml;"> 
  <mfrac>
    <mrow><mi>df</mi></mrow>
    <mrow><mi>dX</mi></mrow>
  </mfrac>
  <mo>=</mo>
  <mo>(</mo>
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>x</mi></mrow>
  </msub>
  <mo>,</mo>
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>y</mi></mrow>
  </msub>
  <mo>)</mo>

</math>

<br/>

<math xmlns="&mathml;"> 
  <mi>Nml</mi>
  <mo>=</mo>
  <mo>(</mo>
  <mo>-</mo>
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>y</mi></mrow>
  </msub>

  <mo>,</mo>
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>x</mi></mrow>
  </msub>
  <mo>)</mo>
</math>


</p>

<p class="equ">
Marching Cubes <br/>

<math xmlns="&mathml;"> 
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>x</mi></mrow>
  </msub>
  <mo>=</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>+</mo>
  <mi>1</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>,</mo>
  <mi>k</mi>
  <mo>)</mo>
  <mo>-</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>-</mo>
  <mi>1</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>,</mo>
  <mi>k</mi>
  <mo>)</mo>
</math>

<br/>

<math xmlns="&mathml;"> 
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>y</mi></mrow>
  </msub>
  <mo>=</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>,</mo>
  <mi>j</mi>  
  <mo>+</mo>
  <mi>1</mi>
  <mo>,</mo>
  <mi>k</mi>
  <mo>)</mo>
  <mo>-</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>-</mo>
  <mi>1</mi>
  <mo>,</mo>
  <mi>k</mi>
  <mo>)</mo>
</math>

<br/>

<math xmlns="&mathml;"> 
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>z</mi></mrow>
  </msub>
  <mo>=</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>,</mo>
  <mi>k</mi>
  <mo>+</mo>
  <mi>1</mi>
  <mo>)</mo>
  <mo>-</mo>
  <mi>f</mi>
  <mo>(</mo>
  <mi>i</mi>
  <mo>,</mo>
  <mi>j</mi>
  <mo>,</mo>
  <mi>k</mi>
  <mo>-</mo>
  <mi>1</mi>
  <mo>)</mo>
</math>


<br/>

<math xmlns="&mathml;"> 
  <mfrac>
    <mrow><mi>df</mi></mrow>
    <mrow><mi>dX</mi></mrow>
  </mfrac>
  <mo>=</mo>
  <mo>(</mo>
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>x</mi></mrow>
  </msub>
  <mo>,</mo>
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>y</mi></mrow>
  </msub>
  <mo>,</mo>
  <mi>f</mi>
  <msub>
    <mi></mi>
    <mrow><mi>z</mi></mrow>
  </msub>
  <mo>)</mo>
</math>


</p>

<p>The central differences are for uniform meshes where all the points are equispaced or ordered
 in some way.  For general meshes this is not the case and other methods such as computing vector
 normals from facet normals could be used.
</p>

<p>Here is a more general way to calculate the gradient. Consider in 2D a special case where the mesh is of
 diamonds (square rotated 45 degrees and possibly streached) and each diamond is divided into four triangles by
 a central point. The following gradient calculation gives the same result as if central differences were used
 in this case.  This lends argument to this gradient calculation being general as a trivial case defaults 
 to a known and sucessful algorithm.
</p>

<p class="equ">
Let n be the dimension of the space<br/>
Let 
<math xmlns="&mathml;"> 
  <mi>p</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
</math>
 be the point about which the gradient is being calculated and associated with
 the edge with the same index. <br/>
<math xmlns="&mathml;"> 
  <mi>k</mi>
  <mo>=</mo>
  <mi>0</mi>
  <mo>...</mo>
  <mi>n</mi>
  <mo>-</mo>
  <mi>1</mi>
</math>
<br/>
 &nbsp; &nbsp;
 
<math xmlns="&mathml;"> 
  <mfrac>
    <mrow><mi>df</mi></mrow>
    <mrow><mi>dX</mi></mrow>
  </mfrac>
  <mo>[</mo>
  <mi>k</mi>
  <mo>]</mo>
  <mo>=</mo>
  <mi>max</mi>
  <mo>(</mo>
  <mi>p</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>[</mo>
  <mi>k</mi>
  <mo>]</mo>
  <mo>)</mo>
  <mo>-</mo>
  <mi>min</mi>
  <mo>(</mo>
  <mi>p</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>[</mo>
  <mi>k</mi>
  <mo>]</mo>
  <mo>)</mo>
</math>


</p>

</div>

<div class="spacer" />

<div class="float25">
<a id="Tangent_in_3D"></a>
<h2>Tangent in 3D</h2>

<p>
Computing the vertex normal from the facet normals is very general as it approximates
 the normal by averaging the cross products of the points surrounding facets.
</p>

<p>However the gradient methods calculate the tangent at a point in space.
 In 3D there is then the issue of obtaining the normal from the tangent, as the
 cross product of two tangents generates the normal.
</p>

<p>Consider a particle moving across a surface. The tangent can be used to calculate the
 surface by estimating the next surface point. But each particle is on its own path and
 does not know of other particles which together make the surface.
</p>

<img src="diagg02002.png" alt="diagg02002.png" />

</div>

<div class="float25">

<p>Consider now the problem of knowing one of the tangents to the normal and having
 surrounding points on the surface of the mesh.  How can the normal be calculated?
</p>

<img src="diagg02003.png" alt="diagg02003.png" />

<p>Here are some ideas I have cooked up. </p>

<p class="equ">

<math xmlns="&mathml;"> 
  <mi>Nml</mi>
  <mo>=</mo>
  
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>0</mn>
    </mrow>
    <mrow>
      <mi>n</mi><mo>-</mo><mi>1</mi>
    </mrow>
  </munderover> 



  <mfrac>
    <mrow>

  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>&times;</mo>

  <mfrac>
    <mrow><mi>df</mi></mrow>
    <mrow><mi>dX</mi></mrow>
  </mfrac>

    </mrow>
    <mrow>

  <mo>||</mo>
  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>||</mo>
  <msup>
    <mi></mi>
    <mrow><mi>2</mi></mrow>
  </msup>

  <mo>||</mo>
  <mfrac>
    <mrow><mi>df</mi></mrow>
    <mrow><mi>dX</mi></mrow>
  </mfrac>
  <mo>||</mo>
  <msup>
    <mi></mi>
    <mrow><mi>2</mi></mrow>
  </msup>



    </mrow>
  </mfrac>

</math>



</p>

<p class="equ">
Let 
<math xmlns="&mathml;"> 
  <mi>A</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
</math>
 be the area between the edges i and i+1.  Let 
<math xmlns="&mathml;"> 
  <mi>A</mi>
  <msub>
    <mi></mi>
    <mrow><mi>T</mi></mrow>
  </msub>
</math>
 be the total area of the triangles surrounding the point. <br/>

<math xmlns="&mathml;"> 
  <mi>Nml</mi>
  <mo>=</mo>
  <munderover>
    <mo>&Sum;</mo>
    <mrow>
      <mi>i</mi>
      <mo>=</mo>
      <mn>1</mn>
    </mrow>
    <mrow>
      <mi>n</mi><mo>-</mo><mi>1</mi>
    </mrow>
  </munderover> 

  <mfrac>
    <mrow>
  <mi>A</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
    </mrow>
    <mrow>
  <mi>A</mi>
  <msub>
    <mi></mi>
    <mrow><mi>T</mi></mrow>
  </msub>

    </mrow>
  </mfrac>


  <mfrac>
    <mrow>

  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>+</mo>
  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>

    </mrow>
    <mrow>

  <mo>||</mo>
  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi></mrow>
  </msub>
  <mo>+</mo>
  <mi>e</mi>
  <msub>
    <mi></mi>
    <mrow><mi>i</mi><mo>+</mo><mi>1</mi></mrow>
  </msub>
  <mo>||</mo>
  <msup>
    <mi></mi>
    <mrow><mi>2</mi></mrow>
  </msup>



    </mrow>
  </mfrac>
  <mo>&times;</mo>

  <mfrac>
    <mrow><mi>df</mi></mrow>
    <mrow><mi>dX</mi></mrow>
  </mfrac>


</math>

</p>



</div>





</body>
</html>




