Parallax Occlusion Mapping without Tangent Space

After reading the blog posts from Rory and Mikkelsen, I have done an small WebGL demo on the derivative maps and extends it with the parallax occlusion maps effect.
The demo can be found here

The basic derivative map shader

The above shader does the following tasks:

1. Fetch the pre-computed dhdv and dhdv from the gradient map.
2. Compute the dudx, dvdx, dudy and dvdy using the dFdx() and dFdy() instruction, and use these values to transform the dhdu and dhdv to dhdx and dhdy respectively by applying chain rule.
3. Compute the dpdx, dpdy where p is the interpolated world-space position of the current fragment.
4. Compute the surface gradient by using dpdx, dpdy, dhdx, dhdy and the interpolated world-space normal
5. Compute the perturbed world space normal with the surface gradient.

For the gradient maps, they are generated from a height map using this Paint.NET CodeLab script.

Parallax Occlusion Mapping

Then we add the POM support by inserting the following code to offset the texture coordinate before we fetch the pre-computed dhdv and dhdv. Since WebGL does not support texture2DGrad() nor texture2DLod() in fragment shader, we can not improvment the performance with dynamic branching.
Interestingly, currBound can be used for computing the ambient occlusion factor.
ParallaxDirection() transform the world space view vector to tangent space.

References

• CodeItNow - Derivative Maps
• Mikkelsen and 3D Graphics - Parallax/POM mapping and no tangent space
• AMD - Practical Parallax Occlusion Mapping For Highly Detailed Surface Rendering