Challenge: Add Parallax Mapping

Phew, that was a lot of reading. I hope you still have some energy left for your little task here. This chapter talked a lot about Normal Mapping and parallax mapping, but you only saw how Normal Maps were implemented. It is now your turn to implement parallax mapping. Don’t worry; it is not very hard once you get the basic idea.

First of all you have to understand that each pixel produced by the Pixel Shader shows the interpolated texture coordinates you passed in through the vertices. But if you are able to interpolate and scale the texture coordinates, you should also be able to move them around depending on the location you are looking from. This is already the basic idea of parallax mapping, as shown in Figure 7-25.

Figure 7-25

To get this effect in your shader you have to define a height-texture first (the black curvy line in the figure represents the height for each pixel). Just add it after the Normal Map and use the default sampler values (linear interpolation). Now you can access the height map data in the Pixel Shader with the following code:

  float height = tex2D(heightTextureSampler, In.texCoord); 

Only a float value is used because you only need the height value, not the real color in the height map (which is gray anyway). Now you have to calculate the offset this height value produces. Then use very small values here, or else parallax mapping will look very bad if the effect is too strong. This is the basic code for that:

  // Calculate parallax offset, parallaxAmount should be 0.05 or less. float2 offsetTexCoord = In.texCoord +   (height*parallaxAmount - parallaxAmount*0.6f) * normalize(In.viewVec); 

The last thing you have to do now is to use this offsetTexCoord for the diffuse and Normal Map instead of In.texCoord and your parallax mapping effect should work. Fine-tune it a little and use a variable in FX Composer for the parallaxAmount for easier testing. Good luck. If you don’t get it to work right away or run into troubles please take a look at the ParallaxMapping.fx shader in the content directory for additional assistance.