Capsules with Normal Maps
Shader Efficiency
Introduction
This short article discusses the difference between vertex and fragment shader processing, with normal maps.
The Normal Map: Vertex Shader and Normal Map: Fragment Shader examples, demonstrate a striking difference between vertex shader versus fragment shader processing. The fragment shaded capsule appears smoother.
Each WebGL example applies a normal map to a capsule. Swipe to rotate the capsule. One example processes lighting in the vertex shader. The other example processes lighting in the fragment shader.
Vertex Versus Fragment Shader Processing
Processing within the vertex shader usually runs faster than processing within the fragment shader. However the fragment shader appears smoother. Both examples use the same texture, normal map, vertex, and texel coordinates.
The vertex shader runs once for each vertex used to display the capsule. The fragment shader usually runs more often, providing a higher level of detail, for each fragment.
Normal Maps
Upload a texture map to the GPU, instead of normal X,Y,Z attributes. Red, green, and blue values, in the normal map's image, represent X, Y, and Z normal coordinates. Normal maps offer an easier method to provide normal coordinates than normal attributes.
The capsule was created with 3ds Max' extended primitives. Map, render to texture, and render normals. Upload vertices, the texture and normal maps, to the GPU.
The texture and normal maps follow.
Baked Texture Color for the Capsules
The following image is the baked texture for both example projects.
Colors for Capsule Normals
The following image is the normal map for both example projects. Red represents X. Green represents Y. Blue represents Z. The more blue the more the normal points in the Z direction.
Summary
This short article discussed the difference between vertex and fragment shader processing, with normal maps.
The Normal Map: Vertex Shader and Normal Map: Fragment Shader examples, demonstrate a striking difference between vertex shader versus fragment shader processing. The fragment shaded capsule appears smoother.
Each WebGL example applies a normal map to a capsule. Swipe to rotate the capsule. One example processes lighting in the vertex shader. The other example processes lighting in the fragment shader.
