WebGL Scenes: Responsive Web Design Screen Shots

3D Skylab Implementation

Introduction Preparation Steps Highlights Texture Maps Vertex Shader Fragment Shader Animation Summary

Introduction

This tutorial includes some optimization tips with steps to prepare a 3D model for display online with WebGL. The end of the lesson covers the vertex and fragment shaders which render the 3D Highlighted Skylab, along with some information regarding preparing the Skylab 3D Animation.

The 3D Highlighted Skylab and Simple 3D Skylab examples are used for comparison. The 3D Highlighted Skylab uses a Simple 8 bit Skylab Texture Map but requires shader data with highlight processing. The Simple 3D Skylab uses a more complex Baked Skylab Texture Map without shader highlights.

Preparation Steps

NASA created the original Skylab model. Seven Thunder Software prepared the Skylab for display online with WebGL. The level of detail was reduced carefully with an attempt to preserve the original shape of the Skylab. The fewer the vertices, the faster a model displays online.

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 Skylab.

However the 3D Highlighted Skylab uses a very simple Simple 8 bit Skylab Texture Map. The Simple 3D Skylab uses a more complex Baked Skylab Texture Map map which includes prepared highlights.

Seven Thunder Software exported the model to DAE format then ran the DAE file through the free 3D DAE Translator. 3D DAE Translator extracts vertices and texels from a Collada DAE file, then saves a set of arrays for upload to the GPU with WebGL.

Highlights

The 3D Highlighted Skylab displays interactive highlights as users swipe and rotate the model. The highlights are generated with vertex normals which require extra initialization time. However the Skylab loads a lightweight simple texture map which can speed download time. The texture map is composed of solid blocks of color and saved as an eight bit GIF image. Shader highlighting provides interactive light to display the Skylab 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.

the Simple 3D Skylab uses a baked texture map which includes lighting. The Simple Skylab doesn't use shader lighting but instead uses pre baked texture lighting. Rotate the Simple 3D Skylab. Lighting appears to move with the skylab. However rotate the 3D Highlighted Skylab. Lighting remains stationary and glints off of different areas of the skylab. See the Baked Skylab Texture Map.

Texture Maps

The following graphic displays the texture mapped to the 3D Highlighted Skylab.

Simple 8 bit Skylab Texture Map

Simple Skylab Texture

The following graphic displays the texture mapped to the Simple 3D Skylab.

Baked Skylab Texture Map

Baked Skylab Texture

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.

Please see the Point Light Tutorial for details regarding point light shaders. The following vertex shader processes highlights for the 3D Highlighted Skylab.

attribute vec3 a_position;
attribute vec3 a_normal;
attribute vec2 a_tex_coord0;

uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix;
uniform mat3 um3_nmatrix;

varying vec2 v_tex_coord0;
varying vec3 v_normal_transform;
varying vec4 v_position;

void main(void) {
v_position = um4_matrix * vec4(a_position, 1.0);

gl_Position = um4_pmatrix * v_position;

v_tex_coord0 = a_tex_coord0;
        
// Vertex normal times
// transposed inverted model matrix.
v_normal_transform = um3_nmatrix * a_normal;
}

Fragment Shader

Please see the Point Light Tutorial for details regarding point light shading. The following fragment shader completes processing highlights for the 3D Highlighted Skylab.

precision mediump float;

varying vec2 v_tex_coord0;
varying vec3 v_normal_transform;
varying vec4 v_position;

const float c_shine_amount = 16.0;
const vec3 c_ambient = vec3(0.35,0.35,0.35);

const vec3 c_light_location = vec3(0.5,-2.0,-1.0);
const vec3 c_light_dcolor = vec3(0.6,0.6,0.9);
const vec3 c_light_scolor = vec3(1.2,0.8,0.9);

uniform sampler2D u_sampler0;

void main(void) {
 
// Difference between the light's position
// and the current vertex position.  
vec3 v3_light_vector = normalize(
 c_light_location - v_position.xyz
);
 
// Normal times transposed inverted model matrix.
vec3 v3_normalized_normal = normalize(
 v_normal_transform
);

// Will receive the
// amount of highlight.
float f_specular_weight = 0.0;
 
// Line between view point 
// and current vertex           
vec3 v3_direction_eye = normalize(
 -v_position.xyz
);
 
// Reflection of the opposite 
// of the light vector
// and the normal.
vec3 v3_direction_reflection = reflect(
 -v3_light_vector, 
 v3_normalized_normal
);

f_specular_weight = pow(
max(
 dot(
   v3_direction_reflection, 
   v3_direction_eye
 ), 
  0.0
 ), 
 c_shine_amount
);       

float f_diffuse_weight = max(
 dot(v3_normalized_normal, v3_light_vector), 
 0.0
);

vec3 v3_light_weight = c_ambient
 + c_light_scolor * f_specular_weight
 + c_light_dcolor * f_diffuse_weight;

vec4 color0 = texture2D(
 u_sampler0, 
 vec2(v_tex_coord0.s, v_tex_coord0.t)
);

gl_FragColor = vec4(
 color0.rgb * v3_light_weight, 
 color0.a
);
}

Animation

The Skylab 3D Animation was prepared from the 3D Highlighted Skylab. Skylab animation frames were captured from the WebGL 3D Highlighted Skylab. JavaScript was modified to rotate and translate the Skylab after individual taps on the canvas. Screen captures were saved and combined into layers with Photoshop. The layers were cropped then exported to video. The animation was created with After Effects. Audio was modified from a prepared audio file with Sound Booth.

Summary

This tutorial included some optimization tips with steps to prepare a 3D model for display online with WebGL. The end of the lesson covered the vertex and fragment shaders which render the 3D Highlighted Skylab, along with some information regarding preparing the Skylab 3D Animation.

The 3D Highlighted Skylab and Simple 3D Skylab examples are used for comparison. The 3D Highlighted Skylab uses a Simple 8 bit Skylab Texture Map but requires shader data with highlight processing. The Simple 3D Skylab uses a more complex Baked Skylab Texture Map without shader highlights.

Seven Simple Shaders: WebGL Tutorial
Copyright © 2015 Seven Thunder Software. All Rights Reserved.