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).
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.
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.
How to generate normal maps using Photoshop
STEP 1. Open your greyscale heightmap in Photoshop.
STEP 2. Select Filters > 3D > Generate Normal Map.
STEP 3. You may experiment with settings, but generally setting the following parameters produce good results:
- Blur: 0
- Detail Scale: 10-20%
- Contrast Details (Low, Medium, High): 20%
STEP 4. Save the normal map.
How to generate normal maps through an online tool
STEP 1. Go to https://cpetry.github.io/NormalMap-Online/
STEP 2. Drag and drop your heightmap to the heightmap swatch.
STEP 3. Adjust the Strength and Level. You may experiment with settings, but generally Blur is kept at 0.
STEP 4. Click Download and save the normal map.
Once you have your normal map, you can upload your file in IMVU Studio and watch your product come alive!