WebGL Box Maps
Normal Map and Texture Maps
Introduction
This page includes the texture and normal maps applied to a cube, with an example project and brief overview.
Swipe to rotate the Cube with Normal Maps. The example displays highlight and shadow based on directional light and a normal map. The cube rotates into the distance and back again. Faces of the cube show more light, when near the viewport, and darken when far from the viewport. The vertex shader declares a constant which indicates light direction. The Colors for Cube Normals texture map, provides normal vectors, accessed by shaders to calculate lighting.
Maps
The cube's baked texture applies different colors to each face of the cube. The cube's normal map supplies normal vectors. Red represents the X coordinate. Green represents the Y coordinate. Blue represents the Z coordinate. The fragment shader declares constants for light location, light color, and ambient color.
As the cube rotates and moves, JavaScript uploads a normal transformation matrix to the GPU. The normal matrix represents rotation and translation for the cube's normals. The fragment shader uses the normal map and normal matrix to compute lighting per frame.
The cube, texture map and normal map were prepared with 3ds Max.
Baked Colors for Face Mapped Cube
Colors for Cube Normals
Red represents X. Green represents Y. Blue represents Z.
Summary
This page included the texture and normal maps applied to a cube, with an example project and brief overview.
Swipe to rotate the Cube with Normal Maps. The example displays highlight and shadow based on directional light and a normal map. The cube rotates into the distance and back again. Faces of the cube show more light, when near the viewport, and darken when far from the viewport. The vertex shader declares a constant which indicates light direction. The Colors for Cube Normals texture map, provides normal vectors, accessed by shaders to calculate lighting.
