WebGL Scenes: Responsive Web Design Screen Shots

Normal Map Short Tutorial

Normal Map and Shaders Provide Light and Shadow

Introduction Maps Normal Map Purpose Prism Color Prism Normals Summary

Introduction

This short tutorial discusses normal maps with WebGL.

The example Normal Map with Directional Light applies a directional light to a prism with a normal map rather than normal attributes. Upload a texture map, instead of normal coordinates, to the GPU. The red, green, and blue values represent X, Y, and Z normal coordinates.

Maps

The prism's baked texture is simply grey. The texture doesn't supply the appearance of light and shadow. The directional light applies a blue diffuse color in the fragment shader. Lighting defines the value for the surface of the prism. Value refers to the amount of light or dark which displays.

The fragment shader declares constants for light location, light color, and ambient color.

Normal Map Purpose

The prism's normal map defines red, green, and blue channels for use as X, Y, and Z normal attributes.

As the prism spins and moves JavaScript uploads a normal transformation matrix to the GPU. The model matrix represents rotation and translation for the prism. The normal matrix represents rotation and translation for the prism normals. The fragment shader uses the normal map and normal matrix to compute lighting per frame.

Seven Thunder Software created a prism in 3DS Max, rendered to texture and normals, then exported as a Collada DAE file. We used the free 3D Translator Windows app to convert DAE data for use with JavaScript and WebGL. The following graphic maps color for the prism.

Prism Color

Prism Colors

Prism Normals

The following graphic represents normals for the prism.

Normal Colors

Red represents X. Green represents Y. Blue represents Z. Therefore the more blue, the more direct the normal.

Summary

This short tutorial discussed normal maps with WebGL.

The example Normal Map with Directional Light applies a directional light to a prism with a normal map rather than normal attributes. Upload a texture map, rather than normal coordinates, to the GPU. The red, green, and blue values represent X, Y, and Z normal coordinates.

See other WebGL lighting examples for the e-book WebGL Lighting. See free WebGL light techniques.

WebGL Lighting E-Book Screen Shots
Copyright © 2015 Seven Thunder Software. All Rights Reserved.