WebGL Box Maps

Normal Map and Texture Maps

Introduction Maps Baked Colors for Face Mapped Cube Colors for Cube Normals Summary

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

Face Mapped Cube Texture

Colors for Cube Normals

Face Mapped Box Normals Map

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.

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, create 3D website, 3D Media, JavaScript, html5, html 5, Web GL, 3D rendering software, GLSL, 3D Graphics Engine, 3D rendering software, 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,
Learn 3D Programming Learn 3D Programming
Copyright © 2015 Seven Thunder Software. All Rights Reserved.