Merge pull request #2449 from Spongman/per-pixel-lighting Phong Specular Lighting

webgl: Per pixel lighting
adds `setAttributes('perPixelLighting', boolean)` for Phong Specular-style lighting

Author: stalgiag

src/webgl/light.js

@@ -137,8 +137,8 @@ p5.prototype.ambientLight = function(v1, v2, v3, a) {
  *   background(0);
  *   //move your mouse to change light direction
  *   var dirX = (mouseX / width - 0.5) * 2;
- *   var dirY = (mouseY / height - 0.5) * -2;
- *   directionalLight(250, 250, 250, dirX, dirY, 0.25);
+ *   var dirY = (mouseY / height - 0.5) * 2;
+ *   directionalLight(250, 250, 250, -dirX, -dirY, 0.25);
  *   ambientMaterial(250);
  *   sphere(50);
  * }
@@ -170,7 +170,9 @@ p5.prototype.directionalLight = function(v1, v2, v3, x, y, z) {
   //in case there's no material color for the geometry
   shader.setUniform('uMaterialColor', this._renderer.curFillColor);
 
-  this._renderer.directionalLightDirections.push(_x, _y, _z);
+  // normalize direction
+  var l = Math.sqrt(_x * _x + _y * _y + _z * _z);
+  this._renderer.directionalLightDirections.push(_x / l, _y / l, _z / l);
   shader.setUniform(
     'uLightingDirection',
     this._renderer.directionalLightDirections

src/webgl/p5.RendererGL.js

@@ -31,6 +31,8 @@ var defaultShaders = {
     __dirname + '/shaders/light_texture.frag',
     'utf-8'
   ),
+  phongVert: fs.readFileSync(__dirname + '/shaders/phong.vert', 'utf-8'),
+  phongFrag: fs.readFileSync(__dirname + '/shaders/phong.frag', 'utf-8'),
   lineVert: fs.readFileSync(__dirname + '/shaders/line.vert', 'utf-8'),
   lineFrag: fs.readFileSync(__dirname + '/shaders/line.frag', 'utf-8')
 };
@@ -59,6 +61,8 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
     attr.preserveDrawingBuffer === undefined
       ? true
       : attr.preserveDrawingBuffer;
+  this.attributes.perPixelLighting =
+    attr.perPixelLighting === undefined ? false : attr.perPixelLighting;
   this._initContext();
   this.isP3D = true; //lets us know we're in 3d mode
   this.GL = this.drawingContext;
@@ -189,9 +193,12 @@ p5.RendererGL.prototype._resetContext = function(attr, options, callback) {
     }, 0);
   }
 };
-
 /**
- *
+ * @module Rendering
+ * @submodule Rendering
+ * @for p5
+ */
+/**
  * Set attributes for the WebGL Drawing context.
  * This is a way of adjusting ways that the WebGL
  * renderer works to fine-tune the display and performance.
@@ -219,6 +226,10 @@ p5.RendererGL.prototype._resetContext = function(attr, options, callback) {
  * (note that p5 clears automatically on draw loop)
  * default is true
  * <br><br>
+ * perPixelLighting - if true, per-pixel lighting will be used in the
+ * lighting shader.
+ * default is false
+ * <br><br>
  * @method setAttributes
  * @for p5
  * @param  {String}  key Name of attribute
@@ -227,7 +238,7 @@ p5.RendererGL.prototype._resetContext = function(attr, options, callback) {
  * <div>
  * <code>
  * function setup() {
- *   createCanvas(150, 150, WEBGL);
+ *   createCanvas(100, 100, WEBGL);
  * }
  *
  * function draw() {
@@ -248,7 +259,7 @@ p5.RendererGL.prototype._resetContext = function(attr, options, callback) {
  * <div>
  * <code>
  * function setup() {
- *   createCanvas(150, 150, WEBGL);
+ *   createCanvas(100, 100, WEBGL);
  *   setAttributes('antialias', true);
  * }
  *
@@ -265,6 +276,59 @@ p5.RendererGL.prototype._resetContext = function(attr, options, callback) {
  * </code>
  * </div>
  *
+ * <div>
+ * <code>
+ * // press the mouse button to enable perPixelLighting
+ * function setup() {
+ *   createCanvas(100, 100, WEBGL);
+ *   noStroke();
+ *   fill(255);
+ * }
+ *
+ * var lights = [
+ *   { c: '#f00', t: 1.12, p: 1.91, r: 0.2 },
+ *   { c: '#0f0', t: 1.21, p: 1.31, r: 0.2 },
+ *   { c: '#00f', t: 1.37, p: 1.57, r: 0.2 },
+ *   { c: '#ff0', t: 1.12, p: 1.91, r: 0.7 },
+ *   { c: '#0ff', t: 1.21, p: 1.31, r: 0.7 },
+ *   { c: '#f0f', t: 1.37, p: 1.57, r: 0.7 }
+ * ];
+ *
+ * function draw() {
+ *   var t = millis() / 1000 + 1000;
+ *   background(0);
+ *   directionalLight(color('#222'), 1, 1, 1);
+ *
+ *   for (var i = 0; i < lights.length; i++) {
+ *     var light = lights[i];
+ *     pointLight(
+ *       color(light.c),
+ *       p5.Vector.fromAngles(t * light.t, t * light.p, width * light.r)
+ *     );
+ *   }
+ *
+ *   specularMaterial(255);
+ *   sphere(width * 0.1);
+ *
+ *   rotateX(t * 0.77);
+ *   rotateY(t * 0.83);
+ *   rotateZ(t * 0.91);
+ *   torus(width * 0.3, width * 0.07, 30, 10);
+ * }
+ *
+ * function mousePressed() {
+ *   setAttributes('perPixelLighting', true);
+ *   noStroke();
+ *   fill(255);
+ * }
+ * function mouseReleased() {
+ *   setAttributes('perPixelLighting', false);
+ *   noStroke();
+ *   fill(255);
+ * }
+ * </code>
+ * </div>
+ *
  * @alt a rotating cube with smoother edges
  */
 /**
@@ -278,13 +342,17 @@ p5.prototype.setAttributes = function(key, value) {
   var attr;
   if (typeof value !== 'undefined') {
     attr = {};
-    attr.key = value;
+    attr[key] = value;
   } else if (key instanceof Object) {
     attr = key;
   }
   this._renderer._resetContext(attr);
 };
 
+/**
+ * @class p5.RendererGL
+ */
+
 p5.RendererGL.prototype._computeCameraDefaultSettings = function() {
   this.defaultCameraFOV = 60 / 180 * Math.PI;
   this.defaultCameraAspect = this.width / this.height;
@@ -879,11 +947,19 @@ p5.RendererGL.prototype._useImmediateModeShader = function() {
 
 p5.RendererGL.prototype._getLightShader = function() {
   if (!this._defaultLightShader) {
-    this._defaultLightShader = new p5.Shader(
-      this,
-      defaultShaders.lightVert,
-      defaultShaders.lightTextureFrag
-    );
+    if (this.attributes.perPixelLighting) {
+      this._defaultLightShader = new p5.Shader(
+        this,
+        defaultShaders.phongVert,
+        defaultShaders.phongFrag
+      );
+    } else {
+      this._defaultLightShader = new p5.Shader(
+        this,
+        defaultShaders.lightVert,
+        defaultShaders.lightTextureFrag
+      );
+    }
   }
   //this.drawMode = constants.FILL;
   return this._defaultLightShader;

src/webgl/shaders/light.vert

@@ -50,7 +50,7 @@ void main(void){
   for (int j = 0; j < 8; j++) {
     if (uDirectionalLightCount == j) break;
     vec3 dir = uLightingDirection[j];
-    float directionalLightWeighting = max(dot(vertexNormal, dir), 0.0);
+    float directionalLightWeighting = max(dot(vertexNormal, -dir), 0.0);
     directionalLightFactor += uDirectionalColor[j] * directionalLightWeighting;
   }
 

src/webgl/shaders/phong.frag

@@ -0,0 +1,98 @@
+precision mediump float;
+
+//uniform mat4 uModelViewMatrix;
+uniform mat4 uViewMatrix;
+
+uniform vec4 uMaterialColor;
+uniform sampler2D uSampler;
+uniform bool isTexture;
+uniform bool uUseLighting;
+
+uniform vec3 uLightingDirection[8];
+uniform vec3 uDirectionalColor[8];
+uniform vec3 uPointLightLocation[8];
+uniform vec3 uPointLightColor[8];
+uniform bool uSpecular;
+
+uniform int uDirectionalLightCount;
+uniform int uPointLightCount;
+
+varying vec3 vNormal;
+varying vec2 vTexCoord;
+varying vec3 vViewPosition;
+varying vec3 vAmbientColor;
+
+vec3 V;
+vec3 N;
+
+const float shininess = 32.0;
+const float specularFactor = 2.0;
+const float diffuseFactor = 0.73;
+
+struct LightResult {
+	float specular;
+	float diffuse;
+};
+
+float phongSpecular(
+  vec3 lightDirection,
+  vec3 viewDirection,
+  vec3 surfaceNormal,
+  float shininess) {
+
+  vec3 R = normalize(reflect(-lightDirection, surfaceNormal));  
+  return pow(max(0.0, dot(R, viewDirection)), shininess);
+}
+
+float lambertDiffuse(
+  vec3 lightDirection,
+  vec3 surfaceNormal) {
+  return max(0.0, dot(-lightDirection, surfaceNormal));
+}
+
+LightResult light(vec3 lightVector) {
+
+  vec3 L = normalize(lightVector);
+
+  //compute our diffuse & specular terms
+  LightResult lr;
+  if (uSpecular)
+    lr.specular = phongSpecular(L, V, N, shininess);
+  lr.diffuse = lambertDiffuse(L, N);
+  return lr;
+}
+
+void main(void) {
+
+  V = normalize(vViewPosition);
+  N = vNormal;
+
+  vec3 diffuse = vec3(0.0);
+  float specular = 0.0;
+
+  for (int j = 0; j < 8; j++) {
+    if (uDirectionalLightCount == j) break;
+
+    LightResult result = light(uLightingDirection[j]);
+    diffuse += result.diffuse * uDirectionalColor[j];
+    specular += result.specular;
+  }
+
+  for (int k = 0; k < 8; k++) {
+    if (uPointLightCount == k) break;
+
+    vec3 lightPosition = (uViewMatrix * vec4(uPointLightLocation[k], 1.0)).xyz;
+    vec3 lightVector = vViewPosition - lightPosition;
+	
+    //calculate attenuation
+    float lightDistance = length(lightVector);
+    float falloff = 500.0 / (lightDistance + 500.0);
+
+    LightResult result = light(lightVector);
+    diffuse += result.diffuse * falloff * uPointLightColor[k];
+    specular += result.specular * falloff;
+  }
+
+  gl_FragColor = isTexture ? texture2D(uSampler, vTexCoord) : uMaterialColor;
+  gl_FragColor.rgb = gl_FragColor.rgb * (diffuse * diffuseFactor + vAmbientColor) + specular * specularFactor;
+}

src/webgl/shaders/phong.vert

@@ -0,0 +1,35 @@
+precision mediump float;
+
+attribute vec3 aPosition;
+attribute vec3 aNormal;
+attribute vec2 aTexCoord;
+
+uniform vec3 uAmbientColor[8];
+
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+uniform mat3 uNormalMatrix;
+uniform int uAmbientLightCount;
+
+varying vec3 vNormal;
+varying vec2 vTexCoord;
+varying vec3 vViewPosition;
+varying vec3 vAmbientColor;
+
+void main(void){
+
+  vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0);
+
+  // Pass varyings to fragment shader
+  vViewPosition = viewModelPosition.xyz;
+  gl_Position = uProjectionMatrix * viewModelPosition;  
+
+  vNormal = normalize(uNormalMatrix * normalize(aNormal));
+  vTexCoord = aTexCoord;
+
+  vAmbientColor = vec3(0.0);
+  for (int i = 0; i < 8; i++) {
+    if (uAmbientLightCount == i) break;
+    vAmbientColor += uAmbientColor[i];
+  }
+}

test/manual-test-examples/webgl/customShader/toonShader/sketch.js

@@ -17,7 +17,7 @@ function draw () {
   background(0);
   var dirY = (mouseY / height - 0.5) * 2;
   var dirX = (mouseX / width - 0.5) * 2;
-  directionalLight(255, 204, 204, -dirX, dirY, -1);
+  directionalLight(255, 204, 204, -dirX, -dirY, -1);
   ambientMaterial(0, 255, 255);
   sphere(120);
 }

test/manual-test-examples/webgl/lights/directionalLight/sketch.js

@@ -1,5 +1,6 @@
 function setup(){
   createCanvas(windowWidth, windowHeight, WEBGL);
+  //setAttributes('perPixelLighting', true);
 }
 
 function draw(){
@@ -9,7 +10,7 @@ function draw(){
   var dirX = (mouseX / width - 0.5) *2;
 
   ambientLight(50);
-  directionalLight(250, 250, 250, dirX, -dirY, 0.25);
+  directionalLight(250, 250, 250, -dirX, -dirY, 0);
 
   ambientMaterial(250);
   sphere(50, 64);

test/manual-test-examples/webgl/material/perPixelLighting/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title></title>
+  <link rel="stylesheet" href="">
+  <script language="javascript" type="text/javascript" src="../../../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="sketch.js"></script>
+  <style>
+    html, body {margin:0; padding:0;}
+  </style> 
+</head>
+<body>
+  <p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Press mouse to enable per-pixel-lighting</p>
+<script>
+(function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
+</script>
+  
+</body>
+</html>