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 Normal Map: Vertex Shader and Normal Map: Fragment Shader 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, for each fragment.

Normal Maps

Upload a texture 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' extended primitives. Map, render to texture, and render normals. Upload vertices, the texture and normal maps, to the GPU.

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 Normal Map: Vertex Shader and Normal Map: Fragment Shader 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.

Tags
learn to code,Web GL, 3D Programming, 3D Development, 3D Media, 3D Web, 3 D Websites, 3D Development, 3D Web Design, 3D Web Development, Web Development, free tutorials, online learning, learn coding, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, create 3D website, 3D Media, JavaScript, html tutorial, how to code, programming websites, learn computer programming, learn to code for free, learning coding, stem, 3D images, webgl simple example, webgl basics, learning webgl, learn webgl
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.