WebGL Scenes: Responsive Web Design Screen Shots

WebGL Box Maps

Normal Map and Texture Maps

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

Introduction

Swipe to rotate the Cube with Directional Light. 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 light up 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 indicate the 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 spins 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.

Seven Thunder Software created a cube in 3DS Max, then rendered to texture and normals. The cube was exported as a Collada DAE file. The free 3D DAE Translator Windows app converted DAE data for use with JavaScript and WebGL.

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

Swipe to rotate the Cube with Directional Light. 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 light up 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 indicate the normal vectors accessed by shaders to calculate lighting.

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.