aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
authorValerio Virgillito2012-04-30 14:49:49 -0700
committerValerio Virgillito2012-04-30 14:49:49 -0700
commit6b1a6994d98a18b45016b97ac8d81483109a586c (patch)
treecda8a39f8813fb5c0f9b4fb1d37007e6ec971128 /js/lib
parentc8fac64d4ad8ac18744a17a5e0f0d17204355fd6 (diff)
parent48e442977ef1630e0f664265a7142320b55d7d20 (diff)
downloadninja-6b1a6994d98a18b45016b97ac8d81483109a586c.tar.gz
Merge pull request #182 from ericmueller/Canvas-interaction
Canvas interaction
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/drawing/world.js11
-rwxr-xr-xjs/lib/geom/circle.js61
-rwxr-xr-xjs/lib/geom/geom-obj.js59
-rwxr-xr-xjs/lib/geom/rectangle.js40
4 files changed, 149 insertions, 22 deletions
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js
index 1a391338..7ce23921 100755
--- a/js/lib/drawing/world.js
+++ b/js/lib/drawing/world.js
@@ -362,9 +362,9 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) {
362 362
363 // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state 363 // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state
364 // in the case of a procedurally built scene an init state is not needed for loading data 364 // in the case of a procedurally built scene an init state is not needed for loading data
365 this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" );
365 if (this._useWebGL) { 366 if (this._useWebGL) {
366 rdgeStarted = true; 367 rdgeStarted = true;
367 this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" );
368 RDGE.globals.engine.unregisterCanvas( this._canvas ); 368 RDGE.globals.engine.unregisterCanvas( this._canvas );
369 RDGE.globals.engine.registerCanvas(this._canvas, this); 369 RDGE.globals.engine.registerCanvas(this._canvas, this);
370 RDGE.RDGEStart( this._canvas ); 370 RDGE.RDGEStart( this._canvas );
@@ -758,7 +758,7 @@ World.prototype.exportJSON = function () {
758 // would not be destructive of the data. You would be wrong... 758 // would not be destructive of the data. You would be wrong...
759 // We need to rebuild everything 759 // We need to rebuild everything
760 if (this._useWebGL) { 760 if (this._useWebGL) {
761 if (worldObj.children && (worldObj.children.length === 1)) { 761 if (worldObj.children && (worldObj.children.length >= 1)) {
762 this.rebuildTree(this._geomRoot); 762 this.rebuildTree(this._geomRoot);
763 this.restartRenderLoop(); 763 this.restartRenderLoop();
764 } 764 }
@@ -835,8 +835,11 @@ World.prototype.importJSON = function (jObj) {
835 835
836 // import the objects 836 // import the objects
837 // there should be exactly one child of the parent object 837 // there should be exactly one child of the parent object
838 if (jObj.children && (jObj.children.length === 1)) 838 if (jObj.children)
839 this.importObjectsJSON( jObj.children[0] ); 839 {
840 for (var i=0; i<jObj.children.length; i++)
841 this.importObjectsJSON( jObj.children[i] );
842 }
840 else 843 else
841 throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children ); 844 throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children );
842 845
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 218dcfa6..0f1f49a9 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -4,9 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. 4(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5</copyright> */ 5</copyright> */
6 6
7var GeomObj = require("js/lib/geom/geom-obj").GeomObj; 7var GeomObj = require("js/lib/geom/geom-obj").GeomObj;
8var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; 8var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive;
9var MaterialsModel = require("js/models/materials-model").MaterialsModel; 9var MaterialsModel = require("js/models/materials-model").MaterialsModel;
10var drawUtils = require("js/helper-classes/3D/draw-utils").DrawUtils;
11var vecUtils = require("js/helper-classes/3D/vec-utils").VecUtils;
12
10/////////////////////////////////////////////////////////////////////// 13///////////////////////////////////////////////////////////////////////
11// Class GLCircle 14// Class GLCircle
12// GL representation of a circle. 15// GL representation of a circle.
@@ -46,6 +49,10 @@ var Circle = function GLCircle() {
46 this._fillColor = fillColor; 49 this._fillColor = fillColor;
47 50
48 this._strokeStyle = strokeStyle; 51 this._strokeStyle = strokeStyle;
52
53 this._matrix = Matrix.I(4);
54 //this._matrix[12] = xOffset;
55 //this._matrix[13] = yOffset;
49 } 56 }
50 57
51 this.m_world = world; 58 this.m_world = world;
@@ -187,7 +194,7 @@ var Circle = function GLCircle() {
187 // get the normalized device coordinates (NDC) for 194 // get the normalized device coordinates (NDC) for
188 // all position and dimensions. 195 // all position and dimensions.
189 var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); 196 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
190 var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, 197 var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph,
191 xRadNDC = this._width/vpw, yRadNDC = this._height/vph, 198 xRadNDC = this._width/vpw, yRadNDC = this._height/vph,
192 xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph, 199 xStrokeNDC = 2*this._strokeWidth/vpw, yStrokeNDC = 2*this._strokeWidth/vph,
193 xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC; 200 xInnRadNDC = this._innerRadius*xRadNDC, yInnRadNDC = this._innerRadius*yRadNDC;
@@ -706,6 +713,49 @@ var Circle = function GLCircle() {
706 return (MathUtils.fpCmp(distToPt,distToBoundary) <= 0); 713 return (MathUtils.fpCmp(distToPt,distToBoundary) <= 0);
707 }; 714 };
708 715
716 this.getNearPoint = function( pt, dir )
717 {
718 var world = this.getWorld();
719 if (!world) throw( "null world in getNearPoint" );
720
721 // the input point and direction are in GL space
722 // project to the z == 0 plane
723 var mat = this.getMatrix();
724 var plane = [0,0,1,0];
725 plane = MathUtils.transformPlane( plane, mat );
726 var projPt = MathUtils.vecIntersectPlane ( pt, dir, plane );
727
728 // get the center of the circle in GL space
729 var ctr = this.getGLCenter();
730
731 // transform the projected point to the plane of the circle
732 var planePt = MathUtils.transformPoint( projPt, mat );
733
734 // get a matrix mapping the circle to a 2D coordinate system
735 var normal = [ mat[8], mat[9], mat[10] ];
736 var planeMat = drawUtils.getPlaneToWorldMatrix(normal, ctr);
737 var planeMatInv = glmat4.inverse( planeMat, [] );
738 var planePt2D = MathUtils.transformPoint( planePt, planeMatInv );
739
740 // get 2 points on the axes of the oval
741 var wPt = this.preViewToGL( [this._xOffset + 0.5*this.getWidth(), this._yOffset, 0] ),
742 hPt = this.preViewToGL( [this._xOffset, this._yOffset + 0.5*this.getHeight(), 0] );
743 var w = vecUtils.vecDist( 2, wPt, ctr ),
744 h = vecUtils.vecDist( 2, hPt, ctr );
745 var aspect = w/h;
746
747 // get the angle of the projected point relative to the circle
748 var angle = Math.atan2( planePt2D[1], planePt2D[0]/aspect );
749 var degrees = angle*180.0/Math.PI;
750
751 // get the corresponding point on the object
752 var pt = [ Math.cos(angle)*w, Math.sin(angle)*h, 0 ];
753 var glPt = MathUtils.transformPoint( pt, planeMat );
754
755 return glPt;
756 }
757
758 /*
709 this.getNearPoint = function( pt, dir ) { 759 this.getNearPoint = function( pt, dir ) {
710 var world = this.getWorld(); 760 var world = this.getWorld();
711 if (!world) throw( "null world in getNearPoint" ); 761 if (!world) throw( "null world in getNearPoint" );
@@ -725,7 +775,7 @@ var Circle = function GLCircle() {
725 // get the normalized device coordinates (NDC) for 775 // get the normalized device coordinates (NDC) for
726 // the position and radii. 776 // the position and radii.
727 var vpw = world.getViewportWidth(), vph = world.getViewportHeight(); 777 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
728 var xNDC = 2*this._xOffset/vpw, yNDC = 2*this._yOffset/vph, 778 var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph,
729 xRadNDC = this._width/vpw, yRadNDC = this._height/vph; 779 xRadNDC = this._width/vpw, yRadNDC = this._height/vph;
730 var projMat = world.makePerspectiveMatrix(); 780 var projMat = world.makePerspectiveMatrix();
731 var z = -world.getViewDistance(); 781 var z = -world.getViewDistance();
@@ -755,6 +805,7 @@ var Circle = function GLCircle() {
755 805
756 return objPt; 806 return objPt;
757 }; 807 };
808 */
758 809
759 this.recalcTexMapCoords = function( vrts, uvs ) { 810 this.recalcTexMapCoords = function( vrts, uvs ) {
760 var n = vrts.length/3; 811 var n = vrts.length/3;
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index f2991bdb..7cb9b80f 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -375,6 +375,65 @@ var GeomObj = function GLGeomObj() {
375 } 375 }
376 }; 376 };
377 377
378
379 this.getGLCenter = function()
380 {
381 // get the normalized device coordinates (NDC) for
382 // all position and dimensions.
383 var world = this.getWorld();
384 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
385 var xNDC = 2*this._xOffset/vpw, yNDC = -2*this._yOffset/vph;
386
387 var aspect = world.getAspect();
388 var zn = world.getZNear(), zf = world.getZFar();
389 var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
390 b = -t,
391 r = aspect*t,
392 l = -r;
393
394 // calculate the object coordinates from their NDC coordinates
395 var z = -world.getViewDistance();
396
397 // unproject to get the position of the origin in GL
398 var x = -z*(r-l)/(2.0*zn)*xNDC,
399 y = -z*(t-b)/(2.0*zn)*yNDC;
400 z = 0.0;
401
402 // transform by the object's transformation matrix
403 var ctr = MathUtils.transformPoint( [x, y, z], this.getMatrix() );
404
405 return ctr;
406 };
407
408 this.preViewToGL = function( preViewPt )
409 {
410 // get the normalized device coordinates (NDC) for
411 // all position and dimensions.
412 var world = this.getWorld();
413 var vpw = world.getViewportWidth(), vph = world.getViewportHeight();
414 var xNDC = 2*preViewPt[0]/vpw, yNDC = -2*preViewPt[1]/vph;
415
416 var aspect = world.getAspect();
417 var zn = world.getZNear(), zf = world.getZFar();
418 var t = zn * Math.tan(world.getFOV() * Math.PI / 360.0),
419 b = -t,
420 r = aspect*t,
421 l = -r;
422
423 // calculate the object coordinates from their NDC coordinates
424 var z = -world.getViewDistance();
425
426 // unproject to get the position of the origin in GL
427 var x = -z*(r-l)/(2.0*zn)*xNDC,
428 y = -z*(t-b)/(2.0*zn)*yNDC;
429 z = 0.0;
430
431 // transform by the object's transformation matrix
432 var glPt = MathUtils.transformPoint( [x, y, z], this.getMatrix() );
433
434 return glPt;