Shading Visualization using WebGL

Ambient Reflection (ka):	1	Ambient color:
Diffuse Reflection (kd):	1	Diffuse color:
Specular Reflection (ks):	1	Specular color:
Shininess:	80	Background Color:
Light Position X:	1
Light Position Y:	1
Light Position Z:	-1

Vertex Shader

Fragment Shader

#version 300 es
precision highp float;

in vec3 normalInterp;  // Surface normal
in vec3 vertPos;       // Vertex position

uniform int mode;
uniform float ka;   // Ambient reflection coefficient
uniform float kd;   // Diffuse reflection coefficient
uniform float ks;   // Specular reflection coefficient
uniform float shininess; // Shininess coefficient

uniform vec3 ambientColor; // Ambient color
uniform vec3 diffuseColor; // Diffuse color
uniform vec3 specularColor; // Specular color

uniform vec3 lightPos; // Light position

out vec4 fragColor;

void main() {
  vec3 N = normalize(normalInterp);
  vec3 L = normalize(lightPos - vertPos);

// Lambert's cosine law
  float lambertian = max(dot(N, L), 0.0);
  float specular = 0.0;
  if(lambertian > 0.0) {
    vec3 R = reflect(-L, N);      // Reflected light vector
    vec3 V = normalize(-vertPos); // Vector to viewer
    // Compute the specular term
    float specAngle = max(dot(R, V), 0.0);
    specular = pow(specAngle, shininess);
  }
  fragColor = vec4(ka * ambientColor +
                      kd * lambertian * diffuseColor +
                      ks * specular * specularColor, 1.0);

// only ambient
  if(mode == 2) fragColor = vec4(ka * ambientColor, 1.0);
  // only diffuse
  if(mode == 3) fragColor = vec4(kd * lambertian * diffuseColor, 1.0);
  // only specular
  if(mode == 4) fragColor = vec4(ks * specular * specularColor, 1.0);
}

#version 300 es
precision highp float;

in vec3 position;
in vec3 normal;

uniform mat4 projection;
uniform mat4 view;
uniform mat4 normalMatrix;

uniform int mode;
uniform float ka; // Ambient reflection coefficient
uniform float kd; // Diffuse reflection coefficient
uniform float ks; // Specular reflection coefficient
uniform float shininess; // Shininess coefficient

uniform vec3 ambientColor; // Ambient color
uniform vec3 diffuseColor; // Diffuse color
uniform vec3 specularColor; // Specular color

uniform vec3 lightPos; // Light position

out vec4 vColor;

void main() {
    // Transform position to View Space
    vec4 viewVertVec4 = view * vec4(position, 1.0);
    vec3 viewVertPos = vec3(viewVertVec4) / viewVertVec4.w;
    
    // Transform normal to View Space
    vec3 normalView = vec3(normalMatrix * vec4(normal, 0.0));

// Standard transformation to clip space
    gl_Position = projection * viewVertVec4;

vec3 N = normalize(normalView); // The Surface Normal 
    vec3 L = normalize(lightPos - viewVertPos); // The Light Direction From Shading Point -> Light Source

float lambertian = max(dot(N,L), 0.0);
    float specular = 0.0;
    if (lambertian > 0.0) {
        vec3 R = reflect(-L, N);
        vec3 V = normalize(-viewVertPos);

float specAngle = max(dot(R, V), 0.0);
        specular = pow(specAngle, shininess);
    }

vColor = vec4(ka * ambientColor +
                    kd * lambertian * diffuseColor +
                    ks * specular * specularColor, 1.0);

// only ambient
    if(mode == 1) vColor = vec4(ka * ambientColor, 1.0);
    // only diffuse
    if(mode == 2) vColor = vec4(kd * lambertian * diffuseColor, 1.0);
    // only specular
    if(mode == 3) vColor = vec4(ks * specular * specularColor, 1.0);
}

#version 300 es
precision highp float;

in vec3 vViewPos;

uniform int mode;
uniform vec3 lightPos;
uniform vec3 ambientColor;
uniform vec3 diffuseColor;
uniform vec3 specularColor;

uniform float ka;
uniform float kd;
uniform float ks;
uniform float shininess;

out vec4 fragColor;

void main() {
    vec3 dx = dFdx(vViewPos);
    vec3 dy = dFdy(vViewPos);
    vec3 N = normalize(cross(dx, dy));
    if (!gl_FrontFacing) N = -N;

vec3 L = normalize(lightPos - vViewPos);
    float lambertian = max(dot(N,L), 0.0);
    float specular = 0.0;
    if (lambertian > 0.0) {
        vec3 V = normalize(-vViewPos);
        vec3 R = reflect(-L, N);
        float specAngle = max(dot(R, V), 0.0);
        specular = pow(specAngle, shininess);
    }

fragColor = vec4(
        ka * ambientColor +
        kd * lambertian * diffuseColor +
        ks * specular * specularColor,
        1.0
    );

// only ambient
    if(mode == 1) fragColor = vec4(ka * ambientColor, 1.0);
    // only diffuse
    if(mode == 2) fragColor = vec4(kd * lambertian * diffuseColor, 1.0);
    // only specular
    if(mode == 3) fragColor = vec4(ks * specular * specularColor, 1.0);
}