updates all webgl examples to use WEBGL global variable; removes orbitcontrol from camera examples temporarily; modifies example text in lights examples for clarity

indefinit · indefinit · commit 8676f796a092 · 2015-09-04T09:15:26.000-04:00
diff --git a/examples/3d/camera/ortho/index.html b/examples/3d/camera/ortho/index.html
@@ -12,7 +12,7 @@
   </style> 
 </head>
 <body>
-<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Press mouse to toggle the world</p>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Orthographic camera</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>
diff --git a/examples/3d/camera/ortho/sketch.js b/examples/3d/camera/ortho/sketch.js
@@ -1,16 +1,18 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
   ortho(-width/2, width/2, height/2, -height/2, 0.1, 100);
 }
 
 function draw(){
   background(0);
-  orbitControl();
+  rotateX(map(mouseY, 0, height, 0, TWO_PI));
+  rotateY(map(mouseX, 0, width, 0, TWO_PI));
+  
   for(var i = -5; i < 6; i++){
     for(var j = -5; j < 6; j++){
       push();
       translate(i*100, 0, j*100);
-      sphere(20);
+      box(20);
       pop();
     }
   }
diff --git a/examples/3d/camera/perspective/index.html b/examples/3d/camera/perspective/index.html
@@ -12,7 +12,7 @@
   </style> 
 </head>
 <body>
-<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Press mouse to toggle the world</p>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Perspective camera</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>
diff --git a/examples/3d/camera/perspective/sketch.js b/examples/3d/camera/perspective/sketch.js
@@ -1,11 +1,12 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
   perspective(60 / 180 * PI, width/height, 0.1, 100);
 }
 
 function draw(){
   background(0);
-  orbitControl();
+  rotateX(map(mouseY, 0, height, 0, TWO_PI));
+  rotateY(map(mouseX, 0, width, 0, TWO_PI));
   for(var i = -5; i < 6; i++){
     for(var j = -5; j < 6; j++){
       push();
diff --git a/examples/3d/geometry/sketch.js b/examples/3d/geometry/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 var theta = 0;
diff --git a/examples/3d/immediateMode/sketch.js b/examples/3d/immediateMode/sketch.js
@@ -1,7 +1,7 @@
 var theta = 0;
 
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/interaction/sketch.js b/examples/3d/interaction/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/lights/ambientLight/sketch.js b/examples/3d/lights/ambientLight/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/lights/directionalLight/index.html b/examples/3d/lights/directionalLight/index.html
@@ -12,6 +12,7 @@
   </style> 
 </head>
 <body>
+  <p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Move mouse to change light position</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>
diff --git a/examples/3d/lights/directionalLight/sketch.js b/examples/3d/lights/directionalLight/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/lights/multipleLights/index.html b/examples/3d/lights/multipleLights/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;">Move mouse to change light position</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>
diff --git a/examples/3d/lights/multipleLights/sketch.js b/examples/3d/lights/multipleLights/sketch.js
@@ -0,0 +1,28 @@
+function setup(){
+  createCanvas(windowWidth, windowHeight, WEBGL);
+}
+
+function draw(){
+  background(0);
+
+  var locY = (mouseY / height - 0.5) * (-2);
+  var locX = (mouseX / width - 0.5) *2;
+
+  ambientLight(50);
+  directionalLight(200, 0, 0, 0.25, 0.25, 0.25);
+  pointLight(0, 0, 200, locX, locY, 0);
+  pointLight(200, 200, 0, -locX, -locY, 0);
+
+  push();
+  translate(-150, 0, 0);
+  rotateZ(frameCount * 0.02);
+  rotateX(frameCount * 0.02);
+  specularMaterial(250);
+  box(50);
+  pop();
+
+  push();
+  translate(150, 0, 0);
+  ambientMaterial(250);
+  sphere(60, 64);
+}
diff --git a/examples/3d/lights/pointLight/index.html b/examples/3d/lights/pointLight/index.html
@@ -12,6 +12,7 @@
   </style> 
 </head>
 <body>
+  <p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Move mouse to change light position</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>
diff --git a/examples/3d/lights/pointLight/sketch.js b/examples/3d/lights/pointLight/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/material/simple/sketch.js b/examples/3d/material/simple/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/material/specular:ambient/sketch.js b/examples/3d/material/specular:ambient/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/material/texture/sketch.js b/examples/3d/material/texture/sketch.js
@@ -7,7 +7,7 @@ var vid;
 var theta = 0;
 
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
   
   //2D renderer
   // createCanvas(windowWidth, windowHeight);
diff --git a/examples/3d/mixedMode/sketch.js b/examples/3d/mixedMode/sketch.js
@@ -1,7 +1,7 @@
 var theta = 0;
 
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/mobile/sketch.js b/examples/3d/mobile/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/origin/center_origin/sketch.js b/examples/3d/origin/center_origin/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/origin/topleft_origin/sketch.js b/examples/3d/origin/topleft_origin/sketch.js
@@ -1,5 +1,5 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/examples/3d/performance/sketch.js b/examples/3d/performance/sketch.js
@@ -1,7 +1,7 @@
 var theta = 0;
 
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
diff --git a/src/3d/immediateMode3D.js b/src/3d/immediateMode3D.js
@@ -75,7 +75,7 @@ p5.Renderer3D.prototype.quad = function
 };
 
 p5.Renderer3D.prototype.beginShape = function(mode){
-  this.modeStack.push(mode);
+  this.shapeMode = mode;
   this.verticeStack = [];
   return this;
 };
@@ -89,9 +89,8 @@ p5.Renderer3D.prototype.endShape = function(){
   var gl = this.GL;
   this._primitives2D(this.verticeStack);
   this.verticeStack = [];
-  var mode = this.modeStack.pop();
 
-  switch(mode){
+  switch(this.shapeMode){
     case 'POINTS':
       gl.drawArrays(gl.POINTS, 0, 1);
       break;
@@ -116,8 +115,7 @@ p5.Renderer3D.prototype.endShape = function(){
 
 //@TODO: figure out how to actually do stroke on shapes in 3D
 p5.Renderer3D.prototype._strokeCheck = function(){
-  var drawMode = this.drawModeStack[this.drawModeStack.length-1];
-  if(drawMode === 'stroke'){
+  if(this.drawMode === 'stroke'){
     throw new Error(
       'stroke for shapes in 3D not yet implemented, use fill for now :('
     );
@@ -136,20 +134,16 @@ p5.Renderer3D.prototype.strokeWeight = function() {
 p5.Renderer3D.prototype.fill = function(r, g, b, a) {
   var color = this._pInst.color.apply(this._pInst, arguments);
   var colorNormalized = color._normalize();
-  if( colorNormalized !== this._getCurColor()){
-    this.colorStack.push(colorNormalized);
-  }
-  this.drawModeStack.push('fill');
+  this.curColor = colorNormalized;
+  this.drawMode = 'fill';
   return this;
 };
 
 p5.Renderer3D.prototype.stroke = function(r, g, b, a) {
   var color = this._pInst.color.apply(this._pInst, arguments);
   var colorNormalized = color._normalize();
-  if( colorNormalized !== this._getCurColor()){
-    this.colorStack.push(colorNormalized);
-  }
-  this.drawModeStack.push('stroke');
+  this.curColor = colorNormalized;
+  this.drawMode = 'stroke';
   return this;
 };
 
@@ -161,7 +155,7 @@ p5.Renderer3D.prototype._getColorVertexShader = function(){
   if(!this.materialInHash(mId)){
     shaderProgram =
       this.initShaders('vertexColorVert', 'vertexColorFrag', true);
-    this._saveShaderInHash(mId, shaderProgram);
+    this.mHash[mId] = shaderProgram;
     shaderProgram.vertexColorAttribute =
     gl.getAttribLocation(shaderProgram, 'aVertexColor');
     gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
diff --git a/src/3d/light.js b/src/3d/light.js
@@ -137,19 +137,34 @@ p5.prototype.directionalLight = function(v1, v2, v3, a, x, y, z) {
 
   //@TODO: check parameters number
   var color = this._graphics._pInst.color.apply(
-    this._graphics._pInst, [v1,[v2],[v3]]);
+    this._graphics._pInst, [v1, v2, v3]);
   var colors = color._normalize();
 
   gl.uniform3f( shaderProgram.uDirectionalColor,
     colors[0], colors[1], colors[2]);
 
+  var _x, _y, _z;
+
+  if(typeof arguments[arguments.length-1] === 'number'){
+    _x = arguments[arguments.length-3];
+    _y = arguments[arguments.length-2];
+    _z = arguments[arguments.length-1];
+
+  }else{
+    try{
+      _x = arguments[arguments.length-1].x;
+      _y = arguments[arguments.length-1].y;
+      _z = arguments[arguments.length-1].z;
+    }
+    catch(error){
+      throw error;
+    }
+  }
+
   shaderProgram.uLightingDirection = gl.getUniformLocation(
     shaderProgram,
     'uLightingDirection[' + this._graphics.directionalLightCount + ']');
-  gl.uniform3f( shaderProgram.uLightingDirection,
-    arguments[arguments.length-3],
-    arguments[arguments.length-2],
-    arguments[arguments.length-1]);
+  gl.uniform3f( shaderProgram.uLightingDirection, _x, _y, _z);
 
   //in case there's no material color for the geometry
   shaderProgram.uMaterialColor = gl.getUniformLocation(
@@ -250,13 +265,28 @@ p5.prototype.pointLight = function(v1, v2, v3, a, x, y, z) {
   gl.uniform3f( shaderProgram.uPointLightColor,
     colors[0], colors[1], colors[2]);
 
+  var _x, _y, _z;
+
+  if(typeof arguments[arguments.length-1] === 'number'){
+    _x = arguments[arguments.length-3];
+    _y = arguments[arguments.length-2];
+    _z = arguments[arguments.length-1];
+
+  }else{
+    try{
+      _x = arguments[arguments.length-1].x;
+      _y = arguments[arguments.length-1].y;
+      _z = arguments[arguments.length-1].z;
+    }
+    catch(error){
+      throw error;
+    }
+  }
+
   shaderProgram.uPointLightLocation = gl.getUniformLocation(
     shaderProgram,
     'uPointLightLocation[' + this._graphics.pointLightCount + ']');
-  gl.uniform3f( shaderProgram.uPointLightLocation,
-    arguments[arguments.length-3],
-    arguments[arguments.length-2],
-    arguments[arguments.length-1]);
+  gl.uniform3f( shaderProgram.uPointLightLocation, _x, _y, _z);
 
   //in case there's no material color for the geometry
   shaderProgram.uMaterialColor = gl.getUniformLocation(
diff --git a/src/3d/p5.Renderer3D.js b/src/3d/p5.Renderer3D.js

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`function setup(){`
`2`		`- createCanvas(windowWidth, windowHeight, 'webgl');`
	`2`	`+ createCanvas(windowWidth, windowHeight, WEBGL);`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`var theta = 0;`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`var theta = 0;`
`2`	`2`
`3`	`3`	`function setup(){`
`4`		`- createCanvas(windowWidth, windowHeight, 'webgl');`
	`4`	`+ createCanvas(windowWidth, windowHeight, WEBGL);`
`5`	`5`	`}`
`6`	`6`
`7`	`7`	`function draw(){`