Normal Map Technical Tutorial

Contents

How do you make the surface of your products look realistically 3D? IMVU Studio gives you a way to add dimension to your products through the use of Normal Maps! In this tutorial we will explore the technical details of what a normal map is and how it works.

What is a normal map?

A normal map is a specially-generated texture that alters the way light reacts with the surface of an object. This makes it different from textures that are essentially 2D images plastered onto a mesh to make it look 3D. With a normal map, you can create fine details that react to light and make your product stand out!

A normal map uses the red, green, and blue channels of an image to store mathematical data used to alter how light interacts with the surface of an object.

To see how a normal map works we must first understand what a normal is. A “normal” is a vector; a group of three numbers that describes a direction in 3D space (designated by the letters X, Y, and Z).

Details of a mesh normal vector

Mesh normals describe the direction the polygons are facing and therefore how light is reflected off of them.

Normal maps describe this direction using the red, green, and blue channels of a texture. This means when a normal map is applied to a mesh the normal map alters how light is reflected off the mesh for each pixel in the texture.

Imagine a texture mapped to a plane laying flat in 3d space, where the width of the texture lies along the X axis, and the height of the texture is on the Y axis.

Red Channel represents the X axis.

A value of 255 (100% white), equivalent to +1, points all the way to the right.
A value of 0 (100% black), equivalent to -1, points all the way to the left.
A value of 128 (50% gray), equivalent to 0, points neither left nor right.

Green Channel represents the Y axis.

A value of 255 (100% white), equivalent to +1, points all the way up.
A value of 0 (100% black), equivalent to -1, points all the way down.
A value of 128 (50% gray), equivalent to 0, points neither up nor down.

Blue Channel represents the Z axis.

A value of 255 (100% white), equivalent to +1, points all the way out from the surface.
A value of 128 (50% gray), equivalent to 0, does not point out from the surface.

The Z axis always points one direction

The Z value will never be negative because it is always assumed that the normal will be pointing out from the surface and never in.

When the channels are combined you have a normal map that describes the direction of surface normals.

When assigned to the normal map texture slot in IMVU Studio the mesh will respond to lights in the scene.

How to make a normal map?

There are two simple ways to make a normal map. One using Photoshop and another an online normal map generator.

Either way, you start your normal map with a grayscale image known as a “heightmap”. In a heightmap, 100% white represents the highest point and 100% black represents the lowest point. The various shades of gray are the variations in between.

Bumps and Slopes

High-contrast changes in value will appear as abrupt jumps in the height of your normal map, and smooth gradients will appear as gradual transitions in height.