Parallax offset mapping with WebGL

webgl-logo

Years ago I wrote a demo showcasing different normal mapping techniques with Delphi, but never got around cleaning up the source and releasing it. While working on my WebGL dungeon crawler prototype I dug out the old code, cleaned it up and ported it over to WebGL, so you don’t need a compiler to see it in action and play around with it.

Parallax mapping uses an additional heightmap (together with a normal map) to add more depth to flat surfaces depending on the current camera angle. It’s currently lacking shadowing, but that’s something I might add in the future.

01 03

(Left : Normal mapping , right : Parallax offset mapping)

You can get the sources from my GitHub repository at https://github.com/SaschaWillems/webgl/tree/master/parallaxmapping

I also captureed a small video to show off : the differences between normal and parallax offset mapping. Quality isn’t great but the difference is still easily visible.

webgl