WebGL Example: Phong / Blinn Phong Shading

This website is a part of the Graphics Programming lecture at the University of Marburg. The JavaScript source of this example is: renderer.js

There is also a newer WebGL 2.0 version available.

Information on Phong and Blinn Phong shading can be found in these lecture slides. Furthermore, there is a detailed video tutorial on Blinn Phong shading.

Edit the shader code below and click on the button to see the result:

Vertex shader:

precision highp float;

attribute vec3 position;
attribute vec2 texcoord;
attribute vec3 normal;

uniform mat4 projection;
uniform mat4 modelview;
uniform mat4 normalMat;


varying vec2 tc;
varying vec3 fn;
varying vec3 vertPos;

void main(){
  tc = texcoord;
  fn = vec3(normalMat * vec4(normal, 0.0));
  vec4 vertPos4 = modelview * vec4(position, 1.0);
  vertPos = vec3(vertPos4) / vertPos4.w;
  gl_Position = projection * modelview * vec4(position, 1.0);
}

Fragment shader:

precision highp float;

varying vec2 tc;
varying vec3 fn;
varying vec3 vertPos;

uniform int mode;
uniform vec3 lightDirection;


const vec4 ambientColor = vec4(0.01, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.25, 0.0, 0.0, 1.0);
const vec4 specularColor = vec4(1.0, 1.0, 1.0, 1.0);
const float shininess = 20.0;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);
const float irradiPerp = 1.0;

vec3 phongBRDF(vec3 lightDir, vec3 viewDir, vec3 normal, vec3 phongDiffuseCol, vec3 phongSpecularCol, float phongShininess) {
  vec3 color = phongDiffuseCol;
  vec3 reflectDir = reflect(-lightDir, normal);
  float specDot = max(dot(reflectDir, viewDir), 0.0);
  color += pow(specDot, phongShininess) * phongSpecularCol;
  return color;
}

void main() {
  vec3 lightDir = normalize(-lightDirection);
  vec3 viewDir = normalize(-vertPos);
  vec3 n = normalize(fn);

  vec3 radiance = ambientColor.rgb;
  
  float irradiance = max(dot(lightDir, n), 0.0) * irradiPerp;
  if(irradiance > 0.0) {
    vec3 brdf = phongBRDF(lightDir, viewDir, n, diffuseColor.rgb, specularColor.rgb, shininess);
    radiance += brdf * irradiance * lightColor.rgb;
  }

  radiance = pow(radiance, vec3(1.0 / 2.2) ); // gamma correction
  gl_FragColor = vec4(radiance.rgb, 1.0);
}

precision highp float;

attribute vec3 position;
attribute vec2 texcoord;
attribute vec3 normal;

uniform mat4 projection;
uniform mat4 modelview;
uniform mat4 normalMat;
uniform vec3 lightDirection;
uniform int mode;

varying vec4 forFragColor;

const vec4 ambientColor = vec4(0.01, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.25, 0.0, 0.0, 1.0);
const vec4 specularColor = vec4(1.0, 1.0, 1.0, 1.0);
const float shininess = 20.0;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);
const float irradiPerp = 1.0;

vec3 phongBRDF(vec3 lightDir, vec3 viewDir, vec3 normal, vec3 phongDiffuseCol, vec3 phongSpecularCol, float phongShininess) {
  vec3 color = phongDiffuseCol;
  vec3 reflectDir = reflect(-lightDir, normal);
  float specDot = max(dot(reflectDir, viewDir), 0.0);
  color += pow(specDot, phongShininess) * phongSpecularCol;
  return color;
}

void main(){
    
  // all following geometric computations are performed in the
  // camera coordinate system (aka eye coordinates)
  
  vec4 vertPos4 = modelview * vec4(position, 1.0);
  vec3 vertPos = vec3(vertPos4) / vertPos4.w;
  vec3 n = vec3(normalMat * vec4(normal, 0.0));

vec3 lightDir = normalize(-lightDirection);
  vec3 viewDir = normalize(-vertPos);

vec3 radiance = ambientColor.rgb;
  
  float irradiance = max(dot(lightDir, n), 0.0) * irradiPerp;
  if(irradiance > 0.0) {
    vec3 brdf = phongBRDF(lightDir, viewDir, n, diffuseColor.rgb, specularColor.rgb, shininess);
    radiance += brdf * irradiance * lightColor.rgb;
  }
  
  radiance = pow(radiance, vec3(1.0 / 2.2) ); // gamma correction
  forFragColor = vec4(radiance, 1.0);
  gl_Position = projection * modelview * vec4(position, 1.0);
}

precision highp float;

varying vec2 tc;
varying vec3 fn;
varying vec3 vertPos;

uniform int mode;
uniform vec3 lightDirection;

void main() {
  vec3 lightDir = normalize(-lightDirection);
  vec3 viewDir = normalize(-vertPos);
  vec3 n = normalize(fn);

radiance = pow(radiance, vec3(1.0 / 2.2) ); // gamma correction
  gl_FragColor = vec4(radiance.rgb, 1.0);
}

precision highp float;

varying vec2 tc;
varying vec3 wfn;
varying vec3 vertPos;

uniform int mode;
uniform vec3 cameraPosition;

const vec3 lightDirection = vec3(0.0, -1.0, -1.0);
const vec4 ambientColor = vec4(0.01, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.25, 0.0, 0.0, 1.0);
const vec4 specularColor = vec4(1.0, 1.0, 1.0, 1.0);
const float shininess = 20.0;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);
const float irradiPerp = 1.0;

void main() {
  vec3 lightDir = normalize(-lightDirection);
  vec3 viewDir = normalize(cameraPosition - vertPos);
  vec3 n = normalize(wfn);

radiance = pow(radiance, vec3(1.0 / 2.2) ); // gamma correction
  gl_FragColor = vec4(radiance, 1.0);
}

precision highp float;

varying vec2 tc;
varying vec3 fn;
varying vec3 vertPos;

uniform int mode;
uniform vec3 lightDirection;

const vec4 ambientColor = vec4(0.01, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.25, 0.0, 0.0, 1.0);
const vec4 specularColor = vec4(1.0, 1.0, 1.0, 1.0);
const float shininess = 40.0;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);
const float irradiPerp = 1.0;

vec3 blinnPhongBRDF(vec3 lightDir, vec3 viewDir, vec3 normal, vec3 phongDiffuseCol, vec3 phongSpecularCol, float phongShininess) {
  vec3 color = phongDiffuseCol;
  vec3 halfDir = normalize(viewDir + lightDir);
  float specDot = max(dot(halfDir, normal), 0.0);
  color += pow(specDot, phongShininess) * phongSpecularCol;
  return color;
}

void main() {
  vec3 lightDir = normalize(-lightDirection);
  vec3 viewDir = normalize(-vertPos);
  vec3 n = normalize(fn);

vec3 radiance = ambientColor.rgb;
  
  float irradiance = max(dot(lightDir, n), 0.0) * irradiPerp;
  if(irradiance > 0.0) {
    vec3 brdf = blinnPhongBRDF(lightDir, viewDir, n, diffuseColor.rgb, specularColor.rgb, shininess);
    radiance += brdf * irradiance * lightColor.rgb;
  }

radiance = pow(radiance, vec3(1.0 / 2.2) ); // gamma correction
  gl_FragColor = vec4(radiance, 1.0);
}

precision highp float;

varying vec2 tc;
varying vec3 wfn;
varying vec3 vertPos;

uniform int mode;
uniform vec3 cameraPosition;

const vec3 lightDirection = vec3(0.0, -1.0, -1.0);
const vec4 ambientColor = vec4(0.01, 0.0, 0.0, 1.0);
const vec4 diffuseColor = vec4(0.25, 0.0, 0.0, 1.0);
const vec4 specularColor = vec4(1.0, 1.0, 1.0, 1.0);
const float shininess = 40.0;
const vec4 lightColor = vec4(1.0, 1.0, 1.0, 1.0);
const float irradiPerp = 1.0;

void main() {
  vec3 lightDir = normalize(-lightDirection);
  vec3 viewDir = normalize(cameraPosition - vertPos);
  vec3 n = normalize(wfn);

radiance = pow(radiance, vec3(1.0 / 2.2) ); // gamma correction
  gl_FragColor = vec4(radiance, 1.0);
}

Note: The interface on this website is kept very simple. If you are looking for a more advanced online GLSL editor that allows uploading own 3D meshes and can handle custom uniform variables, the GSN Composer might be of interest.
Blinn-Phong Shading: Open example in the GSN Composer