Computing normals to achieve flat and smooth shading


This article demonstrates in practice how to compute face and vertex normals to achieve flat and smooth shading using OpenGL.


In geometry, a vector is an object which defines a direction and a norm. It is usually symbolized by an arrow pointing in the vector direction ; the length of the arrow giving the vector norm. When this norm is equal to 1 unit, the vector is normalized. A vector is normal to a surface when its direction is perpendicular to the plane which contains this surface:

In 3D computing, the normal vector of a surface defines the orientation of this surface in space. In particular, its orientation relative to light sources. As a result, OpenGL uses this vector to determine how much light each point of a given surface receives. Failing to give this vector alongside the surface definition itself make OpenGL renders a uniformly lighten object (no shading). When one normal is given alongside the surface, OpenGL enlighten all the surface points with the same color value. The result is much more realistic than without any shading and is known as flat shading rendering. To realize an even more aesthetic enlightenment, you must give to OpenGL, one normal vector per surface vertex. The result is good looking and is known as smooth shading rendering. Look at the figure below how each of these methods renders:

The sample project

You can download below the sample MFC project we used to illustrate this article. It has been created with Visual C++ 5 and tested on Windows NT4. This sample take a static object definition to draw through OpenGL the twisted torus you can see in the figure above. This object is defined by an array of triangular faces, each of them pointing in turn into an array of vertices. Hereafter is an excerpt of these definitions:

// Static definition of the object's vertices
struct GLpoint {
   GLfloat x, y, z;

   {(float)54.111641, (float)-0.007899, (float)37.141083}, 
   {(float)55.552414, (float)-5.571973, (float)41.828125}, 

   // ... //

   {(float)49.429958, (float)5.559381, (float)35.695301}, 
   {(float)54.111732, (float)-0.007808, (float)37.141174}

// Static definition of the object's faces
struct GLFace {
   unsigned short v1, v2, v3;
} OBJ_FACES[] = {

   {0, 11, 12}, 
   {0, 12, 1},
   // ... //

   {878, 9, 0}, 
   {878, 0, 869}

Computing face normals

To achieve flat shading in our example, each face normal is computed using the ComputeFaceNormal() function at the end of the listing below. Using the three vertices of the face, the function constructs two vectors a and b, which share the middle vextex p2 at their origin. Those vectors are transmitted to the VectorGetNormal() function which uses the determinant method to cross product the two arguments. The resulting vector is normal to the surface defined by a and b. The last step consists to normalize it to avoid additional computation in OpenGL.

// Offset pIn by pOffset into pOut
void VectorOffset (GLpoint *pIn, GLpoint *pOffset, GLpoint *pOut)
   pOut->x = pIn->x - pOffset->x;
   pOut->y = pIn->y - pOffset->y;
   pOut->z = pIn->z - pOffset->z;

// Compute the cross product a X b into pOut
void VectorGetNormal (GLpoint *a, GLpoint *b, GLpoint *pOut)
   pOut->x = a->y * b->z - a->z * b->y;
   pOut->y = a->z * b->x - a->x * b->z;
   pOut->z = a->x * b->y - a->y * b->x;

// Normalize pIn vector into pOut
bool VectorNormalize (GLpoint *pIn, GLpoint *pOut)
   GLfloat len = (GLfloat)(sqrt(sqr(pIn->x) + sqr(pIn->y) + sqr(pIn->z)));
   if (len)
      pOut->x = pIn->x / len;
      pOut->y = pIn->y / len;
      pOut->z = pIn->z / len;
      return true;
   return false;

// Compute p1,p2,p3 face normal into pOut
bool ComputeFaceNormal (GLpoint *p1, GLpoint *p2, GLpoint *p3, GLpoint *pOut)
   // Uses p2 as a new origin for p1,p3
   GLpoint a;
   VectorOffset(p3, p2, &a);
   GLpoint b;
   VectorOffset(p1, p2, &b);
   // Compute the cross product a X b to get the face normal
   GLpoint pn;
   VectorGetNormal(&a, &b, &pn);
   // Return a normalized vector
   return VectorNormalize(&pn, pOut);

Computing vertex normals

Computing each vertex normal is straightforward when you already have all face normals. Take a look at the ComputeVerticeNormal() function below:

void GLSObject::ComputeVerticeNormal (int ixVertice)
   // Allocate a temporary storage to store adjacent faces indexes
   if (!m_pStorage)
      m_pStorage = new int[m_nbFaces];
      if (!m_pStorage)

   // Store each face which has an intersection with the ixVertice'th vertex
   int nbAdjFaces = 0;
   GLFace * pFace = (GLFace *)&OBJ_FACES;
   for (int ix = 0; ix < m_nbFaces; ix++, pFace++)
      if (pFace->v1 == ixVertice)
         m_pStorage[nbAdjFaces++] = ix;
         if (pFace->v2 == ixVertice)
            m_pStorage[nbAdjFaces++] = ix;
            if (pFace->v3 == ixVertice)
               m_pStorage[nbAdjFaces++] = ix;

   // Average all adjacent faces normals to get the vertex normal
   GLpoint pn;
   pn.x = pn.y = pn.z = 0;
   for (int jx = 0; jx < nbAdjFaces; jx++) 
      int ixFace= m_pStorage[jx];
      pn.x += m_pFaceNormals[ixFace].x;
      pn.y += m_pFaceNormals[ixFace].y;
      pn.z += m_pFaceNormals[ixFace].z;
   pn.x /= nbAdjFaces;
   pn.y /= nbAdjFaces; 
   pn.z /= nbAdjFaces; 
   // Normalize the vertex normal 
   VectorNormalize(&pn, &m_pVertNormals[ixVertice]); 

To compute the normal at vertex ixVertice, this function search all faces which share the vertex. The normal of all those adjacent faces are then averaged to get the vertex normal, as shown on the following picture:

The result is finally normalized into a previously allocated array of vectors; a member of this.

Exploitation with OpenGL

The current normal vector is set by calling glNormal3*(). OpenGL assigns this normal to any subsequent vertex definition invoked by glVertex3*(). To achieve flat shading, the principle is to call glNormal3*() before the first glVextex3*() call for the surface. For smooth shading, each call to glVextex3*() must be preceded by a corresponding call to glNormal3*():

void GLSObject::Draw (WORD wFlags)
   // ... //

   // Draw mesh
   GLFace * pFace = (GLFace *)&OBJ_FACES;
   for (int ix = 0; ix < m_nbFaces; ix++, pFace++)
      if (m_pFaceNormals)
         if (wFlags & DF_FLAT)
            // Flat shading 
            glNormal3fv((float *)&m_pFaceNormals[ix]); 
            if (m_pVertNormals && (wFlags & DF_SMOOTH)) 
               // Smooth shading
               glNormal3fv((float *)&m_pVertNormals[pFace->v1]);

      glVertex3fv((float *)&OBJ_VERTICES[pFace->v1]);

      if (m_pVertNormals && (wFlags & DF_SMOOTH))
         // Smooth shading
         glNormal3fv((float *)&m_pVertNormals[pFace->v2]);

      glVertex3fv((float *)&OBJ_VERTICES[pFace->v2]);

      if (m_pVertNormals && (wFlags & DF_SMOOTH))
         // Smooth shading
         glNormal3fv((float *)&m_pVertNormals[pFace->v3]);

      glVertex3fv((float *)&OBJ_VERTICES[pFace->v3]);	

   // ... //

Download demo project - 65 KB


  • There are no comments yet. Be the first to comment!

Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • As all sorts of data becomes available for storage, analysis and retrieval - so called 'Big Data' - there are potentially huge benefits, but equally huge challenges...
  • The agile organization needs knowledge to act on, quickly and effectively. Though many organizations are clamouring for "Big Data", not nearly as many know what to do with it...
  • Cloud-based integration solutions can be confusing. Adding to the confusion are the multiple ways IT departments can deliver such integration...

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date