To me, output of bump mapping and normal mapping looks same. I am not able appreciate difference. Can anyone throw some light on this?

The idea is generally the same: adding extra lighting detail that doesn't exist in geometry. The main difference is the input data (texture).

Normal mapping takes a RGB texture, that makes up normals (ie, r=x, g=y, b=z), and is accessed directly by the pixel shader.

Bumpmapping takes a grey scale image, or 'Height Map', and the pixel shader computes the normals from that to calculate lighting.


The idea ispretty much the same, just shifting where the processing is getting done.
Normal mapping preprocces the data, usually making the output quicker, but uses more data to store the normal map (rgb).
Bump mapping is post processing, usually slower to output, but saves space storing bump maps (r).


Although, I find the 2 terms are interchanged often, I like to think of 'Normal Mapping' as the technical term, and 'Bump Mapping' as just the buzz word that designers use.

Any technique that fakes a relief on flat geometry is called bump mapping. This includes everything from good old fashioned grayscale bumpmaps to normal maps and parallax maps.

With a greyscale bumpmap (actually a heightmap) you lookup the corresponding texel, calculate the normal at that point, and use it to perturb the surface normal.

With an RGB normal map you can basically skip the normal calculation step since it's already calculated.

So in a way normal maps are computationally cheaper, but more memory/bandwidth* expensive, as you have to fetch store three floats (RGB) instead of just one.

If you're doing parallax/relief mapping you need both the heightmap and the normal map to get both slopes and offsets.

* I guess you'd have to fetch the neighboring texels as well to calc the normals, so heightmaps are in fact more bandwidth expensive than RGB normal maps, or even RGBA parallax maps