From 46defc9bd11bf077efd672c72787a3b67da1a178 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 12 Mar 2012 14:59:08 -0700 Subject: Uber material changes for IO --- js/lib/geom/geom-obj.js | 6 +- js/lib/rdge/materials/flat-material.js | 6 -- js/lib/rdge/materials/uber-material.js | 122 +++++++++++++++++++++++++++++---- 3 files changed, 112 insertions(+), 22 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 1a197832..35ebadb9 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js @@ -285,9 +285,11 @@ var GeomObj = function GLGeomObj() { if (mat) mat.import( importStr ); - var endIndex = importStr.indexOf( "endMaterial\n" ); + // pull off the end of the material + var endMat = "endMaterial\n"; + var endIndex = importStr.indexOf( endMat ); if (endIndex < 0) break; - importStr = importStr.substr( endIndex ); + importStr = importStr.substr( endIndex + endMat.length ); } } diff --git a/js/lib/rdge/materials/flat-material.js b/js/lib/rdge/materials/flat-material.js index 97e4f646..fff0e68e 100755 --- a/js/lib/rdge/materials/flat-material.js +++ b/js/lib/rdge/materials/flat-material.js @@ -102,13 +102,7 @@ var FlatMaterial = function FlatMaterial() { try { var color = eval( "[" + pu.nextValue( "color: " ) + "]" ); - this.setProperty( "color", color); - - var endKey = "endMaterial\n"; - var index = importStr.indexOf( endKey ); - index += endKey.length; - rtnStr = importStr.substr( index ); } catch (e) { diff --git a/js/lib/rdge/materials/uber-material.js b/js/lib/rdge/materials/uber-material.js index 655d8e2a..8ec5b05c 100755 --- a/js/lib/rdge/materials/uber-material.js +++ b/js/lib/rdge/materials/uber-material.js @@ -4,6 +4,7 @@ (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ +var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; var UberMaterial = function UberMaterial() { @@ -375,19 +376,111 @@ var UberMaterial = function UberMaterial() { var endKey = "endMaterial\n"; var index = importStr.indexOf( endKey ); index += endKey.length; - importStr = importStr.substr( index ); + importStr = importStr.slice( 0, index ); var pu = new MaterialParser( importStr ); var matProps = pu.nextValue( "materialProps: " ); if (matProps) { - var ambientColor = Number( pu.nextValue( "ambientColor: " )); this.setProperty( "ambientColor", ambientColor ); - var diffuseColor = Number( pu.nextValue( "diffuseColor: " )); this.setProperty( "diffuseColor", diffuseColor ); - var specularColor = Number( pu.nextValue( "specularColor: " )); this.setProperty( "specularColor", specularColor ); - var specularPower = Number( pu.nextValue( "specularPower: " )); this.setProperty( "specularPower", specularPower ); + var ambientColor = eval( "[" + pu.nextValue("ambientColor: ") + ']' ); this.setProperty( "ambientColor", ambientColor ); + var diffuseColor = eval( "[" + pu.nextValue( "diffuseColor: ") + ']' ); this.setProperty( "diffuseColor", diffuseColor ); + var specularColor = eval( "[" + pu.nextValue( "specularColor: ") + ']' ); this.setProperty( "specularColor", specularColor ); + var specularPower = eval( "[" + pu.nextValue( "specularPower: ") + ']' ); this.setProperty( "specularPower", specularPower ); } - var lightProps = pu.nextValue( "theLights" ); + var lightProps = pu.nextValue( "lightProps: " ); + if (lightProps) + { + this._lights = []; + var lightStr; + for (var i=0; i 0) + { + this._ubershaderCaps.lighting = + { + 'light0' : this._lights[0], + 'light1' : this._lights[1], + 'light2' : this._lights[2], + 'light3' : this._lights[3] + } + } + } + + var diffuseMap = pu.nextValue( "diffuseMap: " ) + if(diffuseMap) + this.setProperty( "diffuseMap", diffuseMap ); + + var normalMap = pu.nextValue( "normalMap: " ); + if(normalMap) + this.setProperty( "normalMap", normalMap ); + + var specularMap = pu.nextValue( "specularMap: " ); + if(specularMap) + this.setProperty( "specularMap", specularMap ); + + var environmentMap = pu.nextValue( "environmentMap: " ); + if(environmentMap) + { + this.setProperty( "environmentMap", environmentMap ); + this.setProperty( "environmentAmount", Number( pu.nextValue( "envReflection" ) ) ); + } + + this.rebuildShader(); } this.export = function() @@ -428,20 +521,18 @@ var UberMaterial = function UberMaterial() { else if (light.type === 'spot') { exportStr += 'light' + i + 'Pos: ' + light['position'] + '\n'; - - var deg2Rad = Math.PI / 180; - exportStr += 'light' + i + 'Spot: ' + [ Math.cos( ( light['spotInnerCutoff'] || 45.0 ) * deg2Rad ), - Math.cos( ( light['spotOuterCutoff'] || 90.0 ) * deg2Rad )] + '\n'; + exportStr += 'light' + i + 'SpotInnerCutoff: ' + light['spotInnerCutoff'] + '\n'; + exportStr += 'light' + i + 'SpotOuterCutoff: ' + light['spotOuterCutoff'] + '\n'; } else // light.type === 'point' { - exportStr += 'light' + i + 'Pos: ' + (light['position'] || [ 0, 0, 0 ]) ; - exportStr += 'light' + i + 'Attenuation: ' + (light['attenuation'] || [ 1, 0, 0 ]) ; + exportStr += 'light' + i + 'Pos: ' + (light['position'] || [ 0, 0, 0 ]) + '\n'; + exportStr += 'light' + i + 'Attenuation: ' + (light['attenuation'] || [ 1, 0, 0 ]) + '\n'; } // common to all lights - exportStr += 'light' + i + 'Color: ' + light['diffuseColor'] || [ 1,1,1,1 ] + '\n'; - exportStr += 'light' + i + 'SpecularColor: ' + light['specularColor'] || [ 1, 1, 1, 1 ] + '\n'; + exportStr += 'light' + i + 'Color: ' + (light['diffuseColor'] || [ 1,1,1,1 ]) + '\n'; + exportStr += 'light' + i + 'SpecularColor: ' + (light['specularColor'] || [ 1, 1, 1, 1 ]) + '\n'; exportStr += "endlight\n"; } @@ -466,7 +557,10 @@ var UberMaterial = function UberMaterial() { exportStr += "specularMap: " + caps.specularMap.texture + "\n"; if(typeof caps.environmentMap != 'undefined') + { exportStr += "environmentMap: " + caps.environmentMap.texture + "\n"; + exportStr += "envReflection: " + caps.environmentMap.envReflection + "\n"; + } // every material needs to terminate like this exportStr += "endMaterial\n"; -- cgit v1.2.3 From 76f2021618c0a6a99a1b855233e353e84ca99467 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Tue, 13 Mar 2012 11:23:32 -0700 Subject: Add a smoothing amount parameter, and hide options based on checkboxes --- js/lib/geom/brush-stroke.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 4c42539a..52f81ffe 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -39,10 +39,7 @@ var BrushStroke = function GLBrushStroke() { this._strokeDoSmoothing = false; this._strokeUseCalligraphic = false; this._strokeAngle = 0; - - //the wetness of the brush (currently this is multiplied to the square of the stroke width, but todo should be changed to not depend on stroke width entirely - //smaller value means more samples for the path - this._WETNESS_FACTOR = 0.25; + this._strokeAmountSmoothing = 0; //threshold that tells us whether two samples are too far apart this._MAX_SAMPLE_DISTANCE_THRESHOLD = 5; @@ -125,7 +122,7 @@ var BrushStroke = function GLBrushStroke() { //add the point only if it is some epsilon away from the previous point var numPoints = this._Points.length; if (numPoints>0) { - var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD;//this._WETNESS_FACTOR*this._strokeWidth; + var threshold = this._MIN_SAMPLE_DISTANCE_THRESHOLD; var prevPt = this._Points[numPoints-1]; var diffPt = [prevPt[0]-pt[0], prevPt[1]-pt[1]]; var diffPtMag = Math.sqrt(diffPt[0]*diffPt[0] + diffPt[1]*diffPt[1]); @@ -196,6 +193,10 @@ var BrushStroke = function GLBrushStroke() { this._strokeDoSmoothing = s; } + this.setSmoothingAmount = function(a){ + this._strokeAmountSmoothing = a; + } + this.setStrokeUseCalligraphic = function(c){ this._strokeUseCalligraphic = c; } @@ -252,7 +253,7 @@ var BrushStroke = function GLBrushStroke() { //**** add samples to the path if needed...linear interpolation for now //if (numPoints>1) { if (0){ - var threshold = this._WETNESS_FACTOR*this._strokeWidth; + var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD; var prevPt = this._Points[0]; var prevIndex = 0; for (var i=1;i1) { @@ -330,7 +331,7 @@ var BrushStroke = function GLBrushStroke() { console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) - var numLaplacianIterations = 3; //todo figure out the proper number of Laplacian iterations (perhaps as a function of stroke width) + var numLaplacianIterations = this._strokeAmountSmoothing; for (var n=0;n --- js/lib/drawing/world.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) (limited to 'js/lib') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index df24f556..049145ce 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -351,20 +351,18 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { return false; }; - this.generateUniqueNodeID = function() - { + this.generateUniqueNodeID = function() { var str = "" + this._nodeCounter; this._nodeCounter++; return str; - } + }; // start RDGE passing your runtime object, and false to indicate we don't need a an initialization state // in the case of a procedurally built scene an init state is not needed for loading data if (this._useWebGL) { rdgeStarted = true; - var id = this._canvas.getAttribute( "data-RDGE-id" ); - this._canvas.rdgeid = id; + this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" ); g_Engine.registerCanvas(this._canvas, this); RDGEStart( this._canvas ); this._canvas.task.stop() -- cgit v1.2.3 From 23baa44e0bc7bfb24e42702c1ef58bf62da083d8 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Wed, 14 Mar 2012 15:37:09 -0700 Subject: PI for pen and brush strokes --- js/lib/geom/brush-stroke.js | 196 ++++++++++++++++++++------------------------ 1 file changed, 89 insertions(+), 107 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 52f81ffe..0278e49c 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -18,9 +18,12 @@ var BrushStroke = function GLBrushStroke() { // Instance variables /////////////////////////////////////////////////// this._Points = []; + this._OrigPoints = []; this._BBoxMin = [0, 0, 0]; this._BBoxMax = [0, 0, 0]; this._dirty = true; + this._addedSamples = false; + this._storedOrigPoints = false; //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; @@ -137,7 +140,8 @@ var BrushStroke = function GLBrushStroke() { }; this.insertPoint = function(pt, index){ - this._Points.splice(index, 0, pt); this._dirty=true; + this._Points.splice(index, 0, pt); + this._dirty=true; }; this.isDirty = function(){ @@ -170,7 +174,7 @@ var BrushStroke = function GLBrushStroke() { }; this.setStrokeMaterial = function (m) { - this._strokeMaterial = m; + this._strokeMaterial = m; this._dirty = true; }; this.getStrokeColor = function () { @@ -178,31 +182,47 @@ var BrushStroke = function GLBrushStroke() { }; this.setStrokeColor = function (c) { - this._strokeColor = c; + this._strokeColor = c; this._dirty = true; }; this.setSecondStrokeColor = function(c){ - this._secondStrokeColor=c; + this._secondStrokeColor=c; this._dirty = true; } this.setStrokeHardness = function(h){ - this._strokeHardness=h; + if (this._strokeHardness!==h){ + this._strokeHardness=h; + this._dirty = true; + } } this.setDoSmoothing = function(s){ - this._strokeDoSmoothing = s; + if (this._strokeDoSmoothing!==s) { + this._strokeDoSmoothing = s; + this._dirty = true; + } } this.setSmoothingAmount = function(a){ - this._strokeAmountSmoothing = a; + if (this._strokeAmountSmoothing!==a) { + this._strokeAmountSmoothing = a; + this._dirty = true; + } + } this.setStrokeUseCalligraphic = function(c){ - this._strokeUseCalligraphic = c; + if (this._strokeUseCalligraphic!==c){ + this._strokeUseCalligraphic = c; + this._dirty = true; + } } this.setStrokeAngle = function(a){ - this._strokeAngle = a; + if (this._strokeAngle!==a){ + this._strokeAngle = a; + this._dirty = true; + }; } this.getStrokeStyle = function () { @@ -221,133 +241,95 @@ var BrushStroke = function GLBrushStroke() { };//NO-OP for now - - //remove and return anchor at specified index, return null on error - this.removePoint = function (index) { - var retAnchor = null; - if (index < this._Points.length) { - retPt = this._Points.splice(index, 1); - this._dirty=true; - } - return retPoint; - }; - //remove all the points this.clear = function () { this._Points = []; + this._OrigPoints = []; this._dirty=true; } - this.translate = function (tx, ty, tz) { + /*this.translate = function (tx, ty, tz) { for (var i=0;i1) { - if (0){ - var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD; - var prevPt = this._Points[0]; - var prevIndex = 0; - for (var i=1;ithreshold){ - //insert points along the prev. to current point - var numNewPoints = Math.floor(distance/threshold); - for (var j=0;j this._MAX_ALLOWED_SAMPLES){ - console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); - break; + var numPoints = this._Points.length; + if (this._addedSamples === false){ + //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation ***** + // instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments + // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula + + var numInsertedPoints = 0; + var newSampledPoints = []; + var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle + var prevPt = this._Points[0]; + newSampledPoints.push(this._Points[0]); + for (var i=1;ithreshold){ + //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) + var prev = (i===1) ? i-1 : i-2; + var next = (i===numPoints-1) ? i : i+1; + var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; + //insert points along the prev. to current point + var numNewPoints = Math.floor(distance/threshold); + for (var j=0;j this._MAX_ALLOWED_SAMPLES){ + // console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); + // break; + //} } + this._Points = newSampledPoints.slice(0); + newSampledPoints = []; + console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); + this._addedSamples = true; + this._dirty=true; + } + //build a copy of the original points...this should be done only once + if (this._storedOrigPoints === false) { + this._OrigPoints = this._Points.slice(0); + this._storedOrigPoints = true; + } - //instead of the following, may use 4-point subdivision iterations over continuous regions of 'long' segments - // look at http://www.gvu.gatech.edu/~jarek/Split&Tweak/ for formula - //**** add samples to the long sections of the path --- Catmull-Rom spline interpolation + if (this._dirty) { + this._Points = this._OrigPoints.slice(0); + numPoints = this._Points.length; if (this._strokeDoSmoothing && numPoints>1) { - var numInsertedPoints = 0; - var newPoints = []; - var threshold = this._MAX_SAMPLE_DISTANCE_THRESHOLD;//this determines whether a segment between two sample is long enough to warrant checking for angle - var prevPt = this._Points[0]; - newPoints.push(this._Points[0]); - for (var i=1;ithreshold){ - //build the control polygon for the Catmull-Rom spline (prev. 2 points and next 2 points) - var prev = (i===1) ? i-1 : i-2; - var next = (i===numPoints-1) ? i : i+1; - var ctrlPts = [this._Points[prev], this._Points[i-1], this._Points[i], this._Points[next]]; - //insert points along the prev. to current point - var numNewPoints = Math.floor(distance/threshold); - for (var j=0;j this._MAX_ALLOWED_SAMPLES){ - console.log("leaving the resampling because numPoints is greater than limit:"+this._MAX_ALLOWED_SAMPLES); - break; - } - } - this._Points = newPoints; - numPoints = this._Points.length; - console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); - - //now do 3-4 iterations of Laplacian smoothing (setting the points to the average of their neighbors) - var numLaplacianIterations = this._strokeAmountSmoothing; + //iterations of Laplacian smoothing (setting the points to the average of their neighbors) + var numLaplacianIterations = this._strokeAmountSmoothing; for (var n=0;n */ -// Todo: This entire class should be converted to a module var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; + +// Todo: This entire class should be converted to a module /////////////////////////////////////////////////////////////////////// // Class GLBrushStroke @@ -28,7 +30,10 @@ var BrushStroke = function GLBrushStroke() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; - //the X and Y location of this subpath's canvas in stage world space of Ninja + //the HTML5 canvas that holds this brush stroke + this._canvas = null; + + //the X and Y location of this brush stroke canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -65,6 +70,10 @@ var BrushStroke = function GLBrushStroke() { ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// + this.setCanvas = function(c) { + this._canvas = c; + } + this.setWorld = function (world) { this._world = world; }; @@ -195,6 +204,9 @@ var BrushStroke = function GLBrushStroke() { this._dirty = true; } } + this.getStrokeHardness = function(){ + return this._strokeHardness; + } this.setDoSmoothing = function(s){ if (this._strokeDoSmoothing!==s) { @@ -203,12 +215,19 @@ var BrushStroke = function GLBrushStroke() { } } + this.getDoSmoothing = function(){ + return this._strokeDoSmoothing; + } + this.setSmoothingAmount = function(a){ if (this._strokeAmountSmoothing!==a) { this._strokeAmountSmoothing = a; this._dirty = true; } + } + this.getSmoothingAmount = function(){ + return this._strokeAmountSmoothing; } this.setStrokeUseCalligraphic = function(c){ @@ -225,6 +244,14 @@ var BrushStroke = function GLBrushStroke() { }; } + this.getStrokeUseCalligraphic = function(){ + return this._strokeUseCalligraphic; + } + + this.getStrokeAngle = function(){ + this._strokeAngle = a; + } + this.getStrokeStyle = function () { return this._strokeStyle; }; @@ -301,12 +328,13 @@ var BrushStroke = function GLBrushStroke() { console.log("Inserted "+numInsertedPoints+" additional CatmullRom points"); this._addedSamples = true; this._dirty=true; - } + } //if we need to add samples to this curve (done only once) + //build a copy of the original points...this should be done only once if (this._storedOrigPoints === false) { this._OrigPoints = this._Points.slice(0); this._storedOrigPoints = true; - } + } //if we need to store a copy of the original points (done only once) if (this._dirty) { this._Points = this._OrigPoints.slice(0); @@ -377,7 +405,7 @@ var BrushStroke = function GLBrushStroke() { // get the context var ctx = world.get2DContext(); - if (!ctx) throw ("null context in brushstroke render") + if (!ctx) throw ("null context in brushstroke render"); var numPoints = this.getNumPoints(); if (numPoints === 0) { @@ -391,6 +419,14 @@ var BrushStroke = function GLBrushStroke() { var bboxMax = this.getBBoxMax(); var bboxWidth = bboxMax[0] - bboxMin[0]; var bboxHeight = bboxMax[1] - bboxMin[1]; + + //assign the new width and height as the canvas dimensions through the canvas controller + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } + ctx.clearRect(0, 0, bboxWidth, bboxHeight); if (this._strokeUseCalligraphic) { diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 017cca92..e95be0e7 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js @@ -6,7 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var VecUtils = require("js/helper-classes/3D/vec-utils").VecUtils; - +var CanvasController = require("js/controllers/elements/canvas-controller").CanvasController; var GeomObj = require("js/lib/geom/geom-obj").GeomObj; var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint; var MaterialsModel = require("js/models/materials-model").MaterialsModel; @@ -61,6 +61,9 @@ var GLSubpath = function GLSubpath() { //whether or not to use the canvas drawing to stroke/fill this._useCanvasDrawing = true; + //the canvas that will draw this subpath + this._canvas = null; + //the X and Y location of this subpath's canvas in stage world space of Ninja this._canvasX = 0; this._canvasY = 0; @@ -131,6 +134,11 @@ var GLSubpath = function GLSubpath() { var bboxHeight = bboxMax[1] - bboxMin[1]; var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])]; + if (this._canvas) { + CanvasController.setProperty(this._canvas, "width", bboxWidth+"px"); + CanvasController.setProperty(this._canvas, "height", bboxHeight+"px"); + this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas); + } ctx.clearRect(0, 0, bboxWidth, bboxHeight); ctx.lineWidth = this._strokeWidth; @@ -144,6 +152,7 @@ var GLSubpath = function GLSubpath() { //ctx.fillStyle = MathUtils.colorToHex( this._fillColor ); var fillColorStr = "rgba("+parseInt(255*this._fillColor[0])+","+parseInt(255*this._fillColor[1])+","+parseInt(255*this._fillColor[2])+","+this._fillColor[3]+")"; ctx.fillStyle = fillColorStr; + console.log("Fill color:" + fillColorStr); } var lineCap = ['butt','round','square']; ctx.lineCap = lineCap[1]; @@ -256,6 +265,10 @@ GLSubpath.prototype = new GeomObj(); ///////////////////////////////////////////////////////// // Property Accessors/Setters ///////////////////////////////////////////////////////// +GLSubpath.prototype.setCanvas = function (c) { + this._canvas = c; +}; + GLSubpath.prototype.setWorld = function (world) { this._world = world; }; @@ -773,6 +786,7 @@ GLSubpath.prototype.getStrokeWidth = function () { GLSubpath.prototype.setStrokeWidth = function (w) { this._strokeWidth = w; + this._dirty=true; }; GLSubpath.prototype.getStrokeMaterial = function () { -- cgit v1.2.3 From 8e29172990126b3d3857be5d18bb6985d4cf57ca Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 19 Mar 2012 10:07:47 -0700 Subject: first pass for file IO of brush strokes --- js/lib/geom/brush-stroke.js | 50 ++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 47 insertions(+), 3 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 02a39ccd..ec2521ab 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -388,7 +388,8 @@ var BrushStroke = function GLBrushStroke() { this._BBoxMax[d]+= bboxPadding; }//for every dimension d from 0 to 2 } - } + + } //if this was dirty this._dirty = false; }; @@ -512,12 +513,55 @@ var BrushStroke = function GLBrushStroke() { }; //render() + this.exportJSON = function(){ + var retObject= new Object(); + retObject.geomType = this.geomType(); + retObject.points = this._Points; + retObject.planeCenter = this._planeCenter; + retObject.planeMat = this._planeMat; + retObject.planeMatInv = this._planeMatInv; + retObject.strokeWidth = this._strokeWidth; + retObject.strokeColor = this._strokeColor; + retObject.secondStrokeColor = this._secondStrokeColor; + retObject.strokeHardness = this._strokeHardness; + retObject.strokeDoSmoothing = this._strokeDoSmoothing; + retObject.strokeUseCalligraphic = this._strokeUseCalligraphic; + retObject.strokeAngle = this._strokeAngle; + retObject.strokeAmountSmoothing = this._strokeAmountSmoothing; + return retObject; + }; + + this.importJSON = function(jo){ + if (this.geomType()!== jo.geomType){ + return; + } + this._Points = jo.points.splice(0); //todo is this splice necessary? + this._planeCenter = jo.planeCenter; + this._planeMat = jo.planeMat; + this._planeMatInv = jo.planeMatInv ; + this._strokeWidth = jo.strokeWidth; + this._strokeColor = jo.strokeColor; + this._secondStrokeColor = jo.secondStrokeColor; + this._strokeHardness = jo.strokeHardness; + this._strokeDoSmoothing = jo.strokeDoSmoothing; + this._strokeUseCalligraphic = jo.strokeUseCalligraphic; + this._strokeAngle = jo.strokeAngle; + this._strokeAmountSmoothing = jo.strokeAmountSmoothing; + + //force a re-computation of meta-geometry before rendering + this._isDirty = true; + }; + + this.export = function() { - return "type: " + this.geomType() + "\n"; + var jsonObject = this.exportJSON(); + var stringified = JSON.stringify(jsonObject); + return "type: " + this.geomType() + "\n" + stringified; }; this.import = function( importStr ) { - + var jsonObject = JSON.parse(importStr); + this.importJSON(jsonObject); } this.collidesWithPoint = function (x, y, z) { -- cgit v1.2.3 From c0bd8d8efcc501d4efa116a7cc0e802fd4e9f3e9 Mon Sep 17 00:00:00 2001 From: Pushkar Joshi Date: Mon, 19 Mar 2012 11:05:05 -0700 Subject: draw the brush stroke in realtime --- js/lib/geom/brush-stroke.js | 31 ++++++++++++++++--------------- 1 file changed, 16 insertions(+), 15 deletions(-) (limited to 'js/lib') diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index ec2521ab..68b9110f 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js @@ -249,7 +249,7 @@ var BrushStroke = function GLBrushStroke() { } this.getStrokeAngle = function(){ - this._strokeAngle = a; + return this._strokeAngle; } this.getStrokeStyle = function () { @@ -429,7 +429,12 @@ var BrushStroke = function GLBrushStroke() { } ctx.clearRect(0, 0, bboxWidth, bboxHeight); + this.drawToContext(ctx, bboxMin[0], bboxMin[1]); + ctx.restore(); + } //this.render() + this.drawToContext = function(ctx, origX, origY){ + var numPoints = this.getNumPoints(); if (this._strokeUseCalligraphic) { //build the stamp for the brush stroke var t=0; @@ -453,13 +458,11 @@ var BrushStroke = function GLBrushStroke() { ctx.lineCap="butt"; ctx.globalCompositeOperation = 'source-over'; ctx.globalAlpha = this._strokeColor[3]; - //ctx.lineWidth=this._strokeWidth/10;//todo figure out the correct formula for the line width - //if (ctx.lineWidth<2) + //todo figure out the correct formula for the line width ctx.lineWidth=2; if (t===numTraces-1){ ctx.lineWidth = 1; } - for (t=0;t --- js/lib/drawing/world.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'js/lib') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 049145ce..c1ee0cd0 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -810,14 +810,17 @@ World.prototype.findTransformNodeByMaterial = function( materialNode, trNode ) return rtnNode; }; -World.prototype.import = function( importStr ) { +World.prototype.import = function( importStr, fromToggle ) { // import the worldattributes - not currently used // determine if the data was written for export (no Ninja objects) // or for save/restore //var index = importStr.indexOf( "scenedata: " ); - var index = importStr.indexOf( "webGL: " ); - this._useWebGL = (index >= 0) + // Skip if we are toggling between canvas2d and WebGL since importStr doesn't have the correct webGL value yet + if(!fromToggle) { + var index = importStr.indexOf( "webGL: " ); + this._useWebGL = (index >= 0) + } if (this._useWebGL) { // start RDGE -- cgit v1.2.3 From c0a1164b5e84098e005f076de5eddd0e60387286 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 20 Mar 2012 14:21:29 -0700 Subject: Fixing the selection issues Signed-off-by: Valerio Virgillito --- js/lib/NJUtils.js | 32 +++++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) (limited to 'js/lib') diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 4f1082f9..904aa41e 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -96,15 +96,45 @@ exports.NJUtils = Object.create(Object.prototype, { value: function(el, selection, controller, isShape) { var p3d = Montage.create(Properties3D).init(el); var shapeProps = null; + var pi = controller + "Pi"; + if(isShape) { shapeProps = Montage.create(ShapeModel); } + if(el.controller) { + + var componentInfo = Montage.getInfoForObject(el.controller); + var componentName = componentInfo.objectName.toLowerCase(); + + controller = "component"; + isShape = false; + + switch(componentName) { + case "feedreader": + selection = "Feed Reader"; + pi = "FeedReaderPi"; + break; + case "map": + selection = "Map"; + pi = "MapPi"; + break; + case "youtubechannel": + selection = "Youtube Channel"; + pi = "YoutubeChannelPi"; + break; + case "picasacarousel": + selection = "Picasa Carousel"; + pi = "PicasaCarouselPi"; + break; + } + } + el.elementModel = Montage.create(ElementModel, { type: { value: el.nodeName}, selection: { value: selection}, controller: { value: ControllerFactory.getController(controller)}, - pi: { value: controller + "Pi"}, + pi: { value: pi}, props3D: { value: p3d}, shapeModel: { value: shapeProps} }); -- cgit v1.2.3 From 52fac825174d16e3ff6875fc497d3f3cfaf4812c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 12:02:36 -0700 Subject: Get matrix and perspective distance from styles controller. Signed-off-by: Nivesh Rajbhandari --- js/lib/NJUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/lib') diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 4f1082f9..f611052b 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -94,7 +94,7 @@ exports.NJUtils = Object.create(Object.prototype, { ///// TODO: find a different place for this function makeElementModel: { value: function(el, selection, controller, isShape) { - var p3d = Montage.create(Properties3D).init(el); + var p3d = Montage.create(Properties3D).init(el, (selection === "Stage")); var shapeProps = null; if(isShape) { shapeProps = Montage.create(ShapeModel); -- cgit v1.2.3 From 3987b73569e58843f2a91c0c6c4e4132f51ac247 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 17:13:56 -0700 Subject: Do not set webkit-transform styles on elements unless 3d is used on them. Signed-off-by: Nivesh Rajbhandari --- js/lib/NJUtils.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'js/lib') diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index f611052b..cb877591 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -94,7 +94,10 @@ exports.NJUtils = Object.create(Object.prototype, { ///// TODO: find a different place for this function makeElementModel: { value: function(el, selection, controller, isShape) { - var p3d = Montage.create(Properties3D).init(el, (selection === "Stage")); + var p3d = Montage.create(Properties3D); + if(selection === "Stage") { + p3d.init(el, true); + } var shapeProps = null; if(isShape) { shapeProps = Montage.create(ShapeModel); -- cgit v1.2.3 From fdeed8051c3af538d28ca3bc599121cea483c22c Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Thu, 22 Mar 2012 15:47:56 -0700 Subject: Squashed commit of the following GL integration Signed-off-by: Valerio Virgillito --- js/lib/drawing/world.js | 147 +++++++++++ js/lib/geom/circle.js | 54 +++- js/lib/geom/geom-obj.js | 154 ++++++++--- js/lib/geom/line.js | 44 +++- js/lib/geom/rectangle.js | 63 ++++- js/lib/rdge/materials/bump-metal-material.js | 40 +++ js/lib/rdge/materials/cloud-material.js | 300 ++++++++++++++++++++++ js/lib/rdge/materials/flat-material.js | 21 ++ js/lib/rdge/materials/julia-material.js | 6 +- js/lib/rdge/materials/linear-gradient-material.js | 53 ++++ js/lib/rdge/materials/mandel-material.js | 6 +- js/lib/rdge/materials/plasma-material.js | 18 ++ js/lib/rdge/materials/pulse-material.js | 44 +++- js/lib/rdge/materials/radial-blur-material.js | 57 +++- js/lib/rdge/materials/radial-gradient-material.js | 54 +++- js/lib/rdge/materials/taper-material.js | 27 ++ js/lib/rdge/materials/twist-vert-material.js | 28 ++ js/lib/rdge/materials/uber-material.js | 180 ++++++++++++- js/lib/rdge/materials/water-material.js | 103 ++++++++ 19 files changed, 1310 insertions(+), 89 deletions(-) create mode 100644 js/lib/rdge/materials/cloud-material.js (limited to 'js/lib') diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index 049145ce..07a2c3ae 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js @@ -363,6 +363,7 @@ var World = function GLWorld( canvas, use3D, preserveDrawingBuffer ) { if (this._useWebGL) { rdgeStarted = true; this._canvas.rdgeid = this._canvas.getAttribute( "data-RDGE-id" ); + g_Engine.unregisterCanvas( this._canvas ) g_Engine.registerCanvas(this._canvas, this); RDGEStart( this._canvas ); this._canvas.task.stop() @@ -729,6 +730,72 @@ World.prototype.getShapeFromPoint = function( offsetX, offsetY ) { } }; +World.prototype.exportJSON = function() +{ + // world properties + var worldObj = + { + 'version' : 1.1, + 'id' : this.getCanvas().getAttribute( "data-RDGE-id" ), + 'fov' : this._fov, + 'zNear' : this._zNear, + 'zFar' : this._zFar, + 'viewDist' : this._viewDist, + 'webGL' : this._useWebGL + }; + + // RDGE scenegraph + if (this._useWebGL) + worldObj.scenedata = this.myScene.exportJSON(); + + // object data + var strArray = []; + this.exportObjectsJSON( this._geomRoot, worldObj ); + + // You would think that the RDGE export function + // would not be destructive of the data. You would be wrong... + // We need to rebuild everything + if (this._useWebGL) + { + var root = this._rootNode; + root.children = new Array(); + if (worldObj.children && (worldObj.children.length === 1)) + { + this.init(); + this._geomRoot = undefined; + this.importObjectsJSON( worldObj.children[0] ); + } + } + + // convert the object to a string + var jStr = JSON.stringify( worldObj ); + + // prepend some version information to the string. + // this string is also used to differentiate between JSON + // and pre-JSON versions of fileIO. + // the ending ';' in the version string is necessary + jStr = "v1.0;" + jStr; + + return jStr; +} + +World.prototype.exportObjectsJSON = function( obj, parentObj ) +{ + if (!obj) return; + + var jObj = obj.exportJSON(); + if (!parentObj.children) parentObj.children = []; + parentObj.children.push( jObj ); + + if (obj.getChild()) { + this.exportObjectsJSON( obj.getChild (), jObj ); + } + + if (obj.getNext()) + this.exportObjectsJSON( obj.getNext(), parentObj ); +} + +/* World.prototype.export = function() { var exportStr = "GLWorld 1.0\n"; @@ -791,6 +858,7 @@ World.prototype.exportObjects = function( obj ) { return rtnStr; }; +*/ World.prototype.findTransformNodeByMaterial = function( materialNode, trNode ) { //if (trNode == null) trNode = this._ctrNode; @@ -810,6 +878,85 @@ World.prototype.findTransformNodeByMaterial = function( materialNode, trNode ) return rtnNode; }; +World.prototype.importJSON = function( jObj ) +{ + if (jObj.webGL) + { + // start RDGE + rdgeStarted = true; + var id = this._canvas.getAttribute( "data-RDGE-id" ); + this._canvas.rdgeid = id; + g_Engine.registerCanvas(this._canvas, this); + RDGEStart( this._canvas ); + this._canvas.task.stop() + } + + // import the objects + // there should be exactly one child of the parent object + if (jObj.children && (jObj.children.length === 1)) + this.importObjectsJSON( jObj.children[0] ); + else + throw new Error ("unrecoverable canvas import error - inconsistent root object: " + jObj.children ); + + if (!this._useWebGL) + { + // render using canvas 2D + this.render(); + } + else + this.restartRenderLoop(); +} + +World.prototype.importObjectsJSON = function( jObj, parentGeomObj ) +{ + // read the next object + var gObj = this.importObjectJSON( jObj, parentGeomObj ); + + // determine if we have children + if (jObj.children) + { + var nKids = ojObjbj.chilodren.length; + for (var i=0; i