An Action-Arcade Experience in Your Browser. Play it now!
Site & Content © 2014-2015 by Mike Linkovich

Normal Mapped Sprites

2D Sprites that Look 3D

While there are plenty of tools and tutorials out there for creating 3D apps and games with Web/OpenGL, making 2D-style games is a bit more niche, and some of the techniques that can be used to really enhance the look of your 2D graphics aren't documented quite as well.

One really cool technique that OpenGL ES 2 (i.e. WebGL in the browser) allows us to implement is normal mapping (i.e., normal-mapped textures) to create the illusion of 3D on a 2D surface. This has been used for over a decade already in PC and console games to add convincing-looking detail to 3D models, and we can use it today in WebGL to dramatically improve the look of 2D sprites.

The basic idea is that we can render bitmap sprites (which only require 4 vertices, AKA a 'quad') very efficiently, and add insane amounts of "relief" detail that can be lit dynamically in-game. This is very cheap and easy to do even on low-end mobile hardware, and it looks great. Additionally, because we're rendering 32-bit RGBA bitmaps rather than models with polygon edges, we don't have to worry about antialiasing (or the lack thereof) due to browser or hardware limitations. In short, we get antialiasing guaranteed, for free!

View the Demo »

view source / download

Part 1: Creating Normal Mapped Sprites with Blender »

Part 2: Normal Mapped Sprites in WebGL »

© Mike Linkovich. Last updated Feb 9 2014.