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 : https://github.com/SaschaWillems/webgl/tree/master/parallaxmapping

Continue reading “Parallax offset mapping with WebGL”

Parallax offset mapping with WebGL

Geometry instancing with WebGL 2

webgl-logoWebGL, based on OpenGL ES, brings hardware accelerated OpenGL to your browser, and version 2.0 is around the corner (specs). I’ve been playing around with WebGL (via JavaScript) for some time now (see my GitHub WebGL repo) and recently Google’s chrome (canary) got WebGL 2 support.

WebGL 2.0 adds some interesting new features, with geometry instancing being one of them, so I sat down and wrote a small demo that shows how to render the same instance of a single mesh with differing shader attributes using instancing and only one drawcall :

Continue reading “Geometry instancing with WebGL 2”

Geometry instancing with WebGL 2