Abstract Specular Lighting

Vertex and Fragment Shaders

Unique Specular Light Example Introduction Vertex Shader Fragment Shader Summary

Introduction

This Web page includes the vertex and fragment shaders which display the Abstract Specular Light Example.

The Abstract Specular Light Example might be called a happy accident. The unusual combination of colors, shapes, and lighting make the example unique and colorful.

Incorrectly aligned vertex attributes create this example of highlighted brightly colored triangles. Lighting helps define the shapes. Light location, light color, and ambient color are declared with constants in the fragment shader.

As the shapes spin and move, both a model matrix and a normal matrix are uploaded. The vertex shader uses the normal attributes and normal matrix to compute lighting per frame.

A number of initialization details were left out, to focus on the main topic. Most WebGL projects initialize as described in Seven Thunder Software's Learn WebGL Series. However information in this tutorial should apply to other WebGL projects, such as those that use Unity or Three.js, as well.

The free WebGL Earth Model & Texture, outlines array organization for each model.

Shaders

The following shaders prepare highlight and shadow for the Abstract Specular Light Example. Shaders process normals. Comments provide some explanation.

Vertex Shader

// Attributes for
// the vertex coordinates,
// normal coordinates,
// texel coordinates.
attribute vec3 a_position;
attribute vec3 a_normal;
attribute vec2 a_tex_coord0;

// Matrices for the
// model transformation,
// perspective,
// and normals.
uniform mat4 um4_matrix;
uniform mat4 um4_pmatrix;
uniform mat3 um3_nmatrix;

// Texel
varying vec2 v_tex_coord0;

// Normal
varying vec3 v_normal_transform;

// Vertex
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

precision mediump float;

// Texel
varying vec2 v_tex_coord0;

// Transformed normal
// coordinates.
varying vec3 v_normal_transform;

// Vertex.
varying vec4 v_position;

// Highlight
const float c_shine_amount = 32.0;

// Ambient color
const vec3 c_ambient = vec3(
 0.2,
 0.2,
 0.2
);

// Location of light.
const vec3 c_light_location = vec3(
 -10.0,
 -10.0,
 20.0
);

// Color of light.
const vec3 c_light_dcolor = vec3(
 0.8,
 0.8,
 0.8
);

// Specular color.
const vec3 c_light_scolor = vec3(
 0.8,
 0.8,
 0.8
);


// Texture
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
);

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 Web page included the vertex and fragment shaders which display the Abstract Specular Light Example.

The Abstract Specular Light Example might be called a happy accident. The unusual combination of colors, shapes, and lighting make the example unique and colorful.

As the shapes spin and move, both a model matrix and a normal matrix are uploaded. The vertex shader uses the normal attributes and normal matrix to compute lighting per frame.

The shaders prepare highlight and shadow for the Abstract Specular Light Example. Shaders process normals and include some comments for explanation.