fixes xy bug in camera orbit control; updates texture to handle video; wraps generic rotate(angle,axis) in webgl

Author: indefinit

src/3d/camera.js

@@ -10,7 +10,7 @@
 var p5 = require('../core/core');
 
 /**
- * set camera position
+ * sets camera position
  * @method camera
  * @param  {Number} x  camera postion value on x axis
  * @param  {Number} y  camera postion value on y axis
@@ -19,7 +19,6 @@ var p5 = require('../core/core');
  * @example
  * <div>
  * <code>
- * //please call this function before doing any transformation
  * function setup(){
  *   createCanvas(windowWidth, windowHeight, 'webgl');
  * }
@@ -41,14 +40,13 @@ p5.prototype.camera = function(x, y, z){
 };
 
 /**
- * setup perspective camera
+ * sets perspective camera
  * @method  perspective
  * @param  {Number} fovy   camera frustum vertical field of view,
  *                         from bottom to top of view, in degrees
- * @param  {Number} aspect camera frustum aspect ratio,
- *                         window width divided by window height
- * @param  {Number} near   camera frustum near plane
- * @param  {Number} far    camera frustum far plane
+ * @param  {Number} aspect camera frustum aspect ratio
+ * @param  {Number} near   frustum near plane length
+ * @param  {Number} far    frustum far plane length
  * @return {p5}
  * @example
  * <div>
@@ -98,8 +96,6 @@ p5.prototype.perspective = function(fovy,aspect,near,far) {
  * @example
  * <div>
  * <code>
- * //drag mouse to toggle the world
- * //you will see there's no vanish point
  * function setup(){
  *   createCanvas(windowWidth, windowHeight, 'webgl');
  *   ortho(-width/2, width/2, height/2, -height/2, 0.1, 100);

src/3d/interaction.js

@@ -2,11 +2,12 @@
 
 var p5 = require('../core/core');
 
-//@TODO: fix this fake orbitControl
+//@TODO: implement full orbit controls including
+//pan, zoom, quaternion rotation, etc.
 p5.prototype.orbitControl = function(){
   if(this.mouseIsPressed){
-    this.rotateX((this.mouseX - this.width / 2) / (this.width / 2));
-    this.rotateY((this.mouseY - this.height / 2) / (this.width / 2));
+    this.rotateY((this.mouseX - this.width / 2) / (this.width / 2));
+    this.rotateX((this.mouseY - this.height / 2) / (this.width / 2));
   }
   return this;
 };

src/3d/material.js

@@ -89,7 +89,6 @@ p5.prototype.texture = function(image){
     //@TODO handle following cases:
     //- 2D canvas (p5 inst)
   }
-  
   if (_isPowerOf2(image.width) && _isPowerOf2(image.height)) {
     gl.generateMipmap(gl.TEXTURE_2D);
   } else {

src/3d/p5.Renderer3D.js

@@ -243,7 +243,7 @@ p5.Renderer3D.prototype.resetStack = function(){
   shaderStack = [];
   //holding colors declaration, like [0, 120, 0]
   this.colorStack = [];
-  //holding mode, like TIANGLE or 'LINES'
+  //holding mode, like TRIANGLE or 'LINES'
   this.modeStack = [];
   //holding 'fill' or 'stroke'
   this.drawModeStack = [];
@@ -367,9 +367,20 @@ p5.Renderer3D.prototype.scale = function(x, y, z) {
   return this;
 };
 
+/**
+ * [rotate description]
+ * @param  {Number} rad  angle in radians
+ * @param  {p5.Vector | Array} axis axis to rotate around
+ * @return {p5.Renderer3D}      [description]
+ */
+p5.Renderer3D.prototype.rotate = function(rad, axis){
+  this.uMVMatrix.rotate(rad, axis);
+  return this;
+};
+
 /**
  * [rotateX description]
- * @param  {[type]} rad [description]
+ * @param  {Number} rad radians to rotate
  * @return {[type]}     [description]
  */
 p5.Renderer3D.prototype.rotateX = function(rad) {
@@ -379,7 +390,7 @@ p5.Renderer3D.prototype.rotateX = function(rad) {
 
 /**
  * [rotateY description]
- * @param  {[type]} rad [description]
+ * @param  {Number} rad rad radians to rotate
  * @return {[type]}     [description]
  */
 p5.Renderer3D.prototype.rotateY = function(rad) {
@@ -389,7 +400,7 @@ p5.Renderer3D.prototype.rotateY = function(rad) {
 
 /**
  * [rotateZ description]
- * @param  {[type]} rad [description]
+ * @param  {Number} rad rad radians to rotate
  * @return {[type]}     [description]
  */
 p5.Renderer3D.prototype.rotateZ = function(rad) {

src/core/transform.js

@@ -95,11 +95,18 @@ p5.prototype.resetMatrix = function() {
  * </code>
  * </div>
  */
-p5.prototype.rotate = function(r) {
+p5.prototype.rotate = function() {
+  var r = arguments[0];
   if (this._angleMode === constants.DEGREES) {
     r = this.radians(r);
   }
-  this._graphics.rotate(r);
+  //in webgl mode
+  if(arguments.length > 1){
+    this._graphics.rotate(r, arguments[1]);
+  }
+  else {
+    this._graphics.rotate(r);
+  }
   return this;
 };