3D Skylab Implementation

GLSL Lighting Versus Baked Texture Map

Skylab Render to Texture Skylab Shader Highlights

Introduction

This tutorial includes some optimization tips for 3D rendering online with WebGL. Learn about the tradeoff between GLSL shader lighting versus baked lighting, in a texture map. The 3D highlighted Skylab uses a simple texture map. The simple 3D Skylab uses a baked texture map.

The end of the article includes the vertex and fragment shaders which render the 3D highlighted Skylab. The 3D highlighted Skylab applies lighting to the simple texture, with GLSL shaders, for interactive metallic highlights. 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.

The highlighted Skylab's texture map was greatly simplified into solid blocks of color. The simple Skylab's texture map was used

Seven Thunder Software exported the model to DAE format, then ran the DAE file through the free WebGL Translator Windows app. WebGL 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. Highlight and shadow are part of the image which maps the Skylab. Rotate the simple 3D Skylab. Lighting appears to move with the Skylab. However rotate the 3D highlighted Skylab. Lighting remains stationary. Lighting glints as you rotate and move 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

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

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

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
 );
 
}

Summary

This tutorial included some optimization tips for 3D rendering online with WebGL. Learn about the tradeoff between GLSL shader lighting versus baked lighting, in a texture map. The 3D highlighted Skylab uses a simple texture map. The simple 3D Skylab uses a baked texture map.

The end of the article included the vertex and fragment shaders which render the 3D highlighted Skylab. The 3D highlighted Skylab applies lighting to the simple texture, with GLSL shaders, for interactive metallic highlights. 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.

Tags