I'm a gameplay programmer
focused on developing
engaging and unique experiences!

My Resume Learn more

Parallax Occlusion Mapping

As textures allow artists and programmers to make basic meshes appear to have more color detail, they can also be used to make basic meshes appear to have more geometric detail. The two common techniques used to achieve this are displacement maps and parallax occlusion maps. The former actually tessellates the geometry by creating more vertices while the latter performs an illusion with the texture itself. We'll be looking at parallax occlusion mapping.

Texture Coordinates

If we were to render a flat plane with a texture, each fragment a shader operated on would have their own texture coordinates to sample the texture with. These texture coordinates would be based on the point where a ray from the viewer intersects with the plane. However, if we were to imagine our plane wasn't flat and actually had geometry raising above its surface, the fragment's texture coordinates would be different than the flat plane's coordinates. Parallax Occlusion Mapping calculates these offset coordinates based on a height map.

Height Maps

As height maps store a value between 0 and 1 to indicate the height offset from the base surface level of a mesh, we need to determine what these values mean in the world. 0 is simple as we can say it's the surface level flat against the mesh, but we need to define what the upper limit 1 is. This can be determined by simply multiplying the values by a constant set by an artist. Below is an example of a height map for pebbles:

Ray Marching

Determining the point at which a ray from the viewer intersects with the height map can be calculated with ray marching. This is where we take incremental steps along the ray, checking every iteration if we've crossed the height map. Thus, we also need to define a sample count for Parallax Occlusion Mapping that makes the technique more or less accurate.


If we implement the above correctly, we should get an effect like the animation below:

Notice how this otherwise flat plane looks like it actually has geometry raising above its surface. This would normally require a finely detailed mesh, but is instead achieved with the illusion of Parallax Occlusion Mapping.

Adjusting Height

Another way to see Parallax Occlusion Mapping in action is to adjust the constant value that's used to scale the height map.

Notice how the individual pebbles of the texture seem to raise and reduce their heights from the surface of the plane.

No Comments Yet.

Leave a comment