WebGL Lighting E-Book Screen Shots

Capsules with Normal Maps Details

Directional Light Light & Shadow

Introduction Vertex Versus Fragment Shader Processing Normal Maps Baked Texture Color for Capsules Colors for Capsule Normals Summary

Introduction

This short article discusses the difference between vertex and fragment shader processing with normal maps.

The Capsule: Normal Map & Vertex Shader Highlights and Capsule: Normal Map & Fragment Shader Highlights examples demonstrate a striking difference between vertex shader versus fragment shader processing. The fragment shaded capsule appears smoother.

Each WebGL example applies a normal map to a capsule. Swipe to rotate the capsule. One example processes lighting in the vertex shader. The other example processes lighting in the fragment shader.

Vertex Versus Fragment Shader Processing

Processing within the vertex shader usually runs faster than processing within the fragment shader. However the fragment shader appears smoother. Both examples use the same texture, normal map, vertex, and texel coordinates.

The vertex shader runs once for each vertex used to display the capsule. The fragment shader usually runs more often, providing a higher level of detail.

Normal Maps

Upload a map to the GPU, instead of normal X,Y,Z attributes. Red, green, and blue values, in the normal map's image, represent X, Y, and Z normal coordinates. Normal maps offer an easier method to provide normal coordinates than normal attributes.

The capsule was created with 3DS Max's extended primitives. Map, render to texture, and render normals. Save the texture and normal images. Export the 3DS Max mesh as a Collada DAE file. Translate from DAE format to WebGL arrays. We use the free 3D Translator Windows app, to convert DAE data for use with JavaScript and WebGL.

The texture and normal maps follow.

Baked Texture Color for the Capsules

The following image is the baked texture for both example projects.

Capsule Colors

Colors for Capsule Normals

The following image is the normal map for both example projects. Red represents X. Green represents Y. Blue represents Z. The more blue the more the normal points in the Z direction.

Normal Colors for the Capsule

Summary

This short article discussed the difference between vertex and fragment shader processing with normal maps.

The Capsule: Normal Map & Vertex Shader Highlights and Capsule: Normal Map & Fragment Shader Highlights examples demonstrate a striking difference between vertex shader versus fragment shader processing. The fragment shaded capsule appears smoother.

Each WebGL example applies a normal map to a capsule. Swipe to rotate the capsule. One example processes lighting in the vertex shader. The other example processes lighting in the fragment shader.

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

3D Graphics Run with WebGL! Read the E-Book

WebGL Scenes: Responsive Web Design

Copyright © 2015 Seven Thunder Software. All Rights Reserved.