The Usage and Definitions of Normal, Tangent, and Binormal Vectors

Normals are calculated based on the desired reflection of light at a vertex and its usage in shader calculations. Tangent and binormal vectors are perpendicular to the normal vector and describe the direction of texture coordinates on the surface being rendered. To ensure constant curvature of a plane, the binormal vector must be constant and is derived from the tangent and normal vectors through the formula $B=Ttimes N$.


I’m interested in discovering the subsequent details:

  • What are they?
  • The context in which they are employed in the field of game development.

About the following vector types:

  • Normal

  • Tangent

  • Binormal

An explanation centered around
simple game development
would be sufficient.

Solution 1:

In general, a
Normal vector
denotes the outward direction of a surface, which is perpendicular to any vector that lies in the same plane as the surface (in the case of
a flat surface
) or is tangent to the surface at a specific point (if the surface is not flat).

Tangent vector
is a vector that can be found on a flat surface within the
surface’s plane
, or on a curved surface tangent to a reference point. If a flat plane were created with the same normal from the reference point, the
tangent vector
would lie on the same plane.

In computer graphics, the idea of a
Binormal vector
can be a little intricate. It typically pertains to a Bitangent vector that acts as the “other” tangent vector for a surface. The said vector is orthogonal to the
normal vector
and the selected Tangent vector. This is depicted in
Normal, Tangent, Bitangent

The computation method for normals varies depending on the surface complexity and desired precision. In certain scenarios, like with smooth shaders, it may be preferable to approximate the surface normal when the actual data is not available. However, there are various general formulas provided here.

The answer to where
Normal vectors
occur is simply everywhere. They serve various purposes such as positioning cameras and objects in 3D space, determining trajectories and angles in physics calculations, mapping skins and textures to 3D models, providing aim trajectory offsets in AI programming, and giving hints to shaders about how to interact with color points on a surface. These pieces of information are highly useful in a 3D environment, but are also valuable in 2D applications.

Solution 2:

Normals serve as a crucial aspect of lighting calculations. These vectors must be perpendicular to the surface represented by the vertices of a mesh. While they are defined at each vertice position, their calculation may vary depending on the desired reflection of light or the specific requirements of the light calculations within the shader.

The Tangent and Binormal vectors are mutually perpendicular and orthogonal to the normal vector. These vectors indicate the orientation of the u,v
texture coordinates
relative to the surface being rendered. They can be combined with normal maps to add surface details and create a bumpy effect to your model.

Apart from the average utilization that I have described, there are numerous other ways to make use of these vectors. If you seek more technical details, I recommend you to refer to a computer graphics book or explore some articles available on the internet. There is a wealth of information accessible on this topic.

Solution 3:

The binormal and the tangent have a less clear difference on surfaces than on curves where the concept of binormal as a ‘normal’ makes more sense since it is orthogonal to the direction of movement. To be more specific, if a space curve is given by p = V(t) = (Vx(t),Vy(t),Vz(t)), then the tangent is a vector pointing in the direction of motion and is given by T_u = dp/dt = (dVx/dt, dVy/dt, dVz/dt). The length of the tangent vector, denoted by s = |T_u|, is the
instantaneous) speed
along the curve, and the normalized tangent vector, denoted by T = T_u/s, is the
normalized’ tangent

The normal vector N, which is perpendicular to the
curve Is the derivative
of the
normalized tangent
vector over time, is defined as the derivative of tangent T with respect to time (dT/dt), normalized to maintain the speed along the curve without affecting the normal vector. This normalization ensures that T.N is always equal to zero. Note that N is not necessarily a unit vector like T; its magnitude, |N|, is the instantaneous curvature of the curve at the given point, and the point p+N is the center of the osculating circle at that point. The normalized normal vector is defined as N=Nu/k, where k is the magnitude of Nu, and the bitangent B is the cross product of T and N, which is also a unit vector since T and N are orthogonal. Together, (T, N, B) forms an orthogonal frame.

It should be noted that according to this definition, the ‘binormal’ of a curve is similar to what we commonly refer to as the bi
tangent to a surface
as it represents the normal to the ‘local’ plane of the curve. On the other hand, the
normal to a curve
is more comparable to what we typically consider as the
normal to a surface

Regrettably, this picture fails to adequately portray the idea, but it’s the most suitable one I could locate on the internet since I don’t have the means to create my own at the moment.

Solution 4:

Although this may be outdated, I would still like to contribute some useful insights, particularly concerning graphical programming, which has already been mentioned by others.

  1. A


    aka (a
    surface normal
    ) is
    orthogonal to a flat
    plane our
    triangles surface
    (it sticks out from it)

  2. A


    can be considered to be a normal that lies along or on that plane (its co-planar) typically this is chosen from a quad on a mesh, (so a side of two triangles that form a square), is typically applied to two triangles to be the tangent for two or all of the vertices of the quad depending on how precise it needs to be.

  3. The


    or called a


    or called a


    . A vector on plane may give the notion of direction however, a complete matrix is comprised of 3 unit length vectors to describe a orientation so this is that.
    The BiTangent is computed via the

    Cross Product

    as it has the property of being orthonormal or perpendicular (at 90 degrees) to both the normal and the tangent.

    actually each of these are perpendicular to the others proper and so knowing any two gives the other with a cross product


  4. All these vectors, the normal, the tangent and the bi-tangent, are typically

    unit length

    to say they are


    when used in graphical programming.

  5. Care must be taken when performing a crossproduct on these vectors to ensure that the desired

    Winding Order

    is understood, be it if you are defining it or adhering to someone else’s mesh or
    model winding
    order (their intent). To say Cross(A,B) is the opposite of Cross(B,A) thus the direction would opposite.

    this can lead to, if placed into a matrix, to what amounts to a transposed matrix and or improperly defined matrix in the axis of the mistake


  6. The bi-tangent maybe calculated typically on the gpu or stored via pre-computation in the vertices data for a mesh or model.

Application of a 4×4 matrix in real life situations.

A frequently used 4×4 matrix, which is right handed, usually consists of three vectors that represent the forward direction, the upward direction, and the rightward direction. These three vectors, each having a unit length, are combined to form an orientation matrix represented by
matrix equates
. It is worth noting that this matrix is not standardized, and it may be related to the vectors in different ways. For example, m.Forward could be represented by normal, m.Up could be represented by tangent, and m.Right could be represented by bi-tangent.

The Orientation creates an Orthogonal matrix where each vector corresponds to a dimension (x, y, z) and is perpendicular to the other vectors.

Upon applying a different matrix, usually a rotation matrix, to the surface (which consists of triangles in the graphical scenario), the orientation of the surface will be appropriately rotated.

Thus, navigating a 2D triangle on the screen.

x = x + 1;

The premise of the formula below remains valid, even if the matrix m is rotated. This allows us to move across our surface in 3D in a direct and equivalent manner.

x = x + m.Right; 

Practical usage.

By applying complex rotations to a surface that is texture mapped, having all three values ensures that its forward, up, and right directions remain consistent, regardless of the surface’s orientation. The texture uv positions can be obtained from these values, or alternatively, the tangent and bi-
tangent vectors
of the surface’s triangles can be adjusted from one of the triangle’s vertices. This can be done just as easily in a three-dimensional space as in a two-dimensional space. With this knowledge, one can map from 3D to 2D screen space, or vice versa, for a variety of potential needs.

Concrete Application.

The technique of adding depth to a flat surface is commonly demonstrated through the use of Normal mapping or Bump mapping, which can be further researched for additional information.

Frequently Asked Questions