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;n1) { - 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/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 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 */ var MaterialsModel = require("js/models/materials-model").MaterialsModel; -var FlatMaterial = require("js/lib/rdge/materials/flat-material").FlatMaterial; -var LinearGradientMaterial = require("js/lib/rdge/materials/linear-gradient-material").LinearGradientMaterial; -var RadialGradientMaterial = require("js/lib/rdge/materials/radial-gradient-material").RadialGradientMaterial; -var BumpMetalMaterial = require("js/lib/rdge/materials/bump-metal-material").BumpMetalMaterial; -var UberMaterial = require("js/lib/rdge/materials/uber-material").UberMaterial; -var RadialBlurMaterial = require("js/lib/rdge/materials/radial-blur-material").RadialBlurMaterial; -var PlasmaMaterial = require("js/lib/rdge/materials/plasma-material").PlasmaMaterial; -var PulseMaterial = require("js/lib/rdge/materials/pulse-material").PulseMaterial; -var TunnelMaterial = require("js/lib/rdge/materials/tunnel-material").TunnelMaterial; -var ReliefTunnelMaterial = require("js/lib/rdge/materials/relief-tunnel-material").ReliefTunnelMaterial; -var SquareTunnelMaterial = require("js/lib/rdge/materials/square-tunnel-material").SquareTunnelMaterial; -var FlyMaterial = require("js/lib/rdge/materials/fly-material").FlyMaterial; -var WaterMaterial = require("js/lib/rdge/materials/water-material").WaterMaterial; -var ZInvertMaterial = require("js/lib/rdge/materials/z-invert-material").ZInvertMaterial; -var DeformMaterial = require("js/lib/rdge/materials/deform-material").DeformMaterial; -var StarMaterial = require("js/lib/rdge/materials/star-material").StarMaterial; -var TwistMaterial = require("js/lib/rdge/materials/twist-material").TwistMaterial; -var JuliaMaterial = require("js/lib/rdge/materials/julia-material").JuliaMaterial; -var KeleidoscopeMaterial = require("js/lib/rdge/materials/keleidoscope-material").KeleidoscopeMaterial; -var MandelMaterial = require("js/lib/rdge/materials/mandel-material").MandelMaterial; /////////////////////////////////////////////////////////////////////// // Class GLGeomObj @@ -265,6 +245,96 @@ var GeomObj = function GLGeomObj() { return fillMaterial; }; + this.exportMaterialsJSON = function() + { + var jObj; + if (this._materialArray && this._materialNodeArray) + { + var nMats = this._materialArray.length; + if (nMats > 0) + { + var arr = []; + + for (var i=0; i