O'Reilly logo

WebGL Beginner's Guide by Brandon Jones, Diego Cantor

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action — normal mapping in action

  1. Open the file ch10_NormalMap.html in an HTML5 browser.
    Time for action — normal mapping in action
  2. Rotate the cube to see the effect that the normal map has on how the cube is lit. Also observe how the profile of the cube has not changed. Let's examine how this effect is achieved.
  3. First, we need to add a new attribute to our vertex buffers. There are actually three vectors that are needed to calculate the tangent space coordinates that the lighting is calculated in: the normal, the tangent, and bitangent.
    Time for action — normal mapping in action

    We already know what the normal represents, so ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required