3D Compass Implementation

Compass Rotations

Introduction

This tutorial includes some optimization
tips with steps to prepare a 3D model for
display online with WebGL lighting.
A trade off exists between loading small indexed files
with normal data for lighting.
Indexed, eight bit files, are often simple with small
file sizes.
Normal data increases overall initialization size and time.
Yet normal data's required for shader highlights.

Indexed Image Files

Indexed files may appear bland with minimal lighting and shadows.
Normal data with shader lighting provides form and highlights, even
with eight bit texture maps.
This lesson covers model preparation,
vertex and fragment shaders, which process highlights and
rendering for the Virtual Compass.
The
Virtual Compass
uses an
eight bit indexed texture map
but requires normal data to display lighting with the shaders.
The lightweight texture map comes alive with shader lighting.

Preparation Steps

The original compass model was provided
by a third party.
However the model required some repairs to render well.
Seven Thunder Software filled holes in the geometry with 3ds Max Cap Holes,
Border and Cap features.

With 3ds Max, Seven Thunder Software
combined all textures into one texture.
Most 3D modeling and rendering applications include
a render to texture feature which
prepares one image map to cover the entire
model. In other words render to texture
combines a set of maps, including lighting, into
one image.
It takes less time to download and initialize
one texture than multiple textures.
The faster the initialization the
more likely visitors will stay to see the compass.

The compass was mapped with diffuse colors,
rendered to texture, then exported as a DAE file.
The baked texture was modified with Photoshop
and saved as an eight bit GIF file.

Seven Thunder Software exported the model to DAE format then ran the DAE file
through the free
WebGL Translator.
WebGL Translator extracts vertices, texels, and normals, from a Collada DAE file,
then saves a set of arrays for upload to the GPU with WebGL.
Normals are required to render highlights with WebGL shaders.

Highlights

The Virtual Compass
displays interactive highlights as users swipe to rotate the model.
The highlights are generated with vertex
normals which require extra initialization time.
However the compass loads a lightweight texture map
which can speed download time.
Shader highlighting provides interactive light to display the compass with shiny metal.
In other words, highlighting and other shader features allow the use of very simple texture maps.
Lightweight texture maps download and initialize faster than complex images.

Additional processing for normal data might offset download and initialization
time with the eight bit graphic.
Upload vertex normals once to a vertex buffer object, during initialization.
Prepare and upload a normal matrix for every animation frame.
Prepare the normal matrix from the inverted and transposed
model view matrix.

the
Virtual Compass
uses a baked texture map which includes some lighting.
Rotate the
Virtual Compass.
For the most part, lighting remains stationary and glints off
the compass' metal.
In other words, the compass rotates, but the lighting location remains the same,
as we might expect in the real world.

Texture Map

Compass Eight Bit Indexed Texture Map

Vertex Shader

The following vertex shader processes as
much as possible.
It's better to process values in the
vertex shader, than the fragment
shader.
The fragment shader runs many times
more often than the vertex shader.

The following three values, within the vertex
shader, process normal data.
Attribute a_normal represents a vertex normal, uniform um3_nmatrix
represents a normal matrix,
and varying v_normal_transform
passes normal data through the GPU to the fragment shader.

Summary

This tutorial included some optimization
tips with steps to prepare a 3D model for
display online with WebGL lighting.
A trade off exists between loading small indexed files
with normal data for lighting.
Indexed, eight bit files, are often simple with small
file sizes.
Normal data increases overall initialization size and time.
Yet normal data's required for shader highlights.

Indexed files may appear bland with minimal lighting and shadows.
Normal data with shader lighting provides form and highlights, even
with eight bit texture maps.
The lesson covered model preparation,
vertex and fragment shaders, which process highlights and
rendering for the Virtual Compass.
The
Virtual Compass
uses an
eight bit indexed texture map
but requires normal data to display lighting with the shaders.
The lightweight texture map comes alive with shader lighting.