From 07c48708a99b94a220c043ad5951a331bbd4fc2d Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 29 Feb 2012 15:23:28 -0800 Subject: WebGL file I/O --- .../RDGE/runtime/CanvasDataManager.js | 10 ++- js/helper-classes/RDGE/runtime/GLRuntime.js | 87 ++++++++++++++-------- 2 files changed, 62 insertions(+), 35 deletions(-) (limited to 'js/helper-classes/RDGE/runtime') diff --git a/js/helper-classes/RDGE/runtime/CanvasDataManager.js b/js/helper-classes/RDGE/runtime/CanvasDataManager.js index 4985fc9a..46d944a1 100644 --- a/js/helper-classes/RDGE/runtime/CanvasDataManager.js +++ b/js/helper-classes/RDGE/runtime/CanvasDataManager.js @@ -29,9 +29,10 @@ function CanvasDataManager() var canvas = this.findCanvasWithID( id, root ); if (canvas) { - var loadForAuthoring = true; + //var loadForAuthoring = true; var index = importStr.indexOf( "scenedata: " ); - if (index >= 0) loadForAuthoring = false; + //if (index >= 0) loadForAuthoring = false; + var loadForAuthoring = false; if (loadForAuthoring) { @@ -64,7 +65,7 @@ function CanvasDataManager() { if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) { - var data = elt.elementModel.shapeModel.GLWorld.export(); + var data = elt.elementModel.shapeModel.GLWorld.export( true ); dataArray.push( data ); } @@ -90,7 +91,8 @@ function CanvasDataManager() for (var i=0; i= 0) + { + // update the string to the current object + importStr = importStr.substr( index+7 ); + + // read the next object + var obj = this.importObject( importStr, parent ); + + // determine if we have children + var endIndex = importStr.indexOf( "ENDOBJECT\n" ), + childIndex = importStr.indexOf( "OBJECT\n" ); + if (endIndex < 0) throw new Error( "ill-formed object data" ); + if ((childIndex >= 0) && (childIndex < endIndex)) + { + importStr = importStr.substr( childIndex + 7 ); + importStr = this.importObjects( importStr, obj ); + endIndex = importStr.indexOf( "ENDOBJECT\n" ) + } + + // remove the string for the object(s) just created + importStr = importStr.substr( endIndex ); + + // get the location of the next object + index = importStr.indexOf( "OBJECT\n", endIndex ); + } + + return importStr; + } + + this.importObject = function( objStr, parent ) + { + var type = Number( getPropertyFromString( "type: ", objStr ) ); + + var obj; + switch (type) + { + case 1: + obj = new RuntimeRectangle(); + obj.import( objStr, parent ); + break; + + case 2: // circle + obj = new RuntimeOval(); + obj.import( objStr, parent ); + break; + + case 3: // line + obj = new RuntimeLine(); + obj.import( objStr, parent ); + break; + + default: + throw new Error( "Attempting to load unrecognized object type: " + type ); + break; + } + + if (obj) + this.addObject( obj ); + + return obj; + } + + this.addObject = function( obj, parent ) + { + if (!obj) return; + + if (parent == null) + this._geomRoot = obj; + else + parent.addChild( obj ); + } + + this.linkMaterials = function( obj ) + { + if (!obj) return; + + // get the array of materials from the object + var matArray = obj._materials; + var nMats = matArray.length; + for (var i=0; i +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. + */ + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeGeomObj +// Super class for all geometry classes +/////////////////////////////////////////////////////////////////////// +function RuntimeGeomObj() +{ + /////////////////////////////////////////////////////////////////////// + // Constants + /////////////////////////////////////////////////////////////////////// + this.GEOM_TYPE_RECTANGLE = 1; + this.GEOM_TYPE_CIRCLE = 2; + this.GEOM_TYPE_LINE = 3; + this.GEOM_TYPE_PATH = 4; + this.GEOM_TYPE_CUBIC_BEZIER = 5; + this.GEOM_TYPE_UNDEFINED = -1; + + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._children; + + // stroke and fill colors + this._strokeColor = [0,0,0,0]; + this._fillColor = [0,0,0,0]; + + // array of materials + this._materials = []; + + /////////////////////////////////////////////////////////////////////// + // Property accessors + /////////////////////////////////////////////////////////////////////// + + this.geomType = function() { return this.GEOM_TYPE_UNDEFINED; } + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + this.makeStrokeMaterial = function() + { + } + + this.makeFillMaterial = function() + { + } + + + this.render = function() + { + } + + this.addChild = function( child ) + { + if (!this._children) this._children = []; + this._children.push( child ); + } + + this.import = function() + { + } + + this.importMaterials = function(importStr) + { + var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr ) ); + for (var i=0; i= 0) + rtnStr = rtnStr.substr(0, index); + + return rtnStr; +} + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeRectangle +/////////////////////////////////////////////////////////////////////// +function RuntimeRectangle() +{ + // inherit the members of RuntimeGeomObj + this.inheritedFrom = RuntimeGeomObj; + this.inheritedFrom(); + + this.import = function( importStr ) + { + this._xOffset = Number( getPropertyFromString( "xoff: ", importStr ) ); + this._yOffset = Number( getPropertyFromString( "yoff: ", importStr ) ); + this._width = Number( getPropertyFromString( "width: ", importStr ) ); + this._height = Number( getPropertyFromString( "height: ", importStr ) ); + this._strokeWidth = Number( getPropertyFromString( "strokeWidth: ", importStr ) ); + this._innerRadius = Number( getPropertyFromString( "innerRadius: ", importStr ) ); + this._strokeStyle = Number( getPropertyFromString( "strokeStyle: ", importStr ) ); + var strokeMaterialName = getPropertyFromString( "strokeMat: ", importStr ); + var fillMaterialName = getPropertyFromString( "fillMat: ", importStr ); + this._strokeStyle = getPropertyFromString( "strokeStyle: ", importStr ); + this._fillColor = eval( "[" + getPropertyFromString( "fillColor: ", importStr ) + "]" ); + this._strokeColor = eval( "[" + getPropertyFromString( "strokeColor: ", importStr ) + "]" ); + this._tlRadius = Number( getPropertyFromString( "tlRadius: ", importStr ) ); + this._trRadius = Number( getPropertyFromString( "trRadius: ", importStr ) ); + this._blRadius = Number( getPropertyFromString( "blRadius: ", importStr ) ); + this._brRadius = Number( getPropertyFromString( "brRadius: ", importStr ) ); + + this.importMaterials( importStr ); + } + + this.renderPath = function( inset, ctx ) + { + // various declarations + var pt, rad, ctr, startPt, bPts; + var width = Math.round(this.getWidth()), + height = Math.round(this.getHeight()); + + pt = [inset, inset]; // top left corner + + var tlRad = this._tlRadius; //top-left radius + var trRad = this._trRadius; + var blRad = this._blRadius; + var brRad = this._brRadius; + + if ((tlRad <= 0) && (blRad <= 0) && (brRad <= 0) && (trRad <= 0)) + { + ctx.rect(pt[0], pt[1], width - 2*inset, height - 2*inset); + } + else + { + // get the top left point + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + if (MathUtils.fpSign(rad) == 0) pt[1] = inset; + ctx.moveTo( pt[0], pt[1] ); + + // get the bottom left point + pt = [inset, height - inset]; + rad = blRad - inset; + if (rad < 0) rad = 0; + pt[1] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom left curve + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); + + // do the bottom of the rectangle + pt = [width - inset, height - inset]; + rad = brRad - inset; + if (rad < 0) rad = 0; + pt[0] -= rad; + ctx.lineTo( pt[0], pt[1] ); + + // get the bottom right arc + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); + + // get the right of the rectangle + pt = [width - inset, inset]; + rad = trRad - inset; + if (rad < 0) rad = 0; + pt[1] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top right corner + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); + + // do the top of the rectangle + pt = [inset, inset] + rad = tlRad - inset; + if (rad < 0) rad = 0; + pt[0] += rad; + ctx.lineTo( pt[0], pt[1] ); + + // do the top left corner + if (MathUtils.fpSign(rad) > 0) + ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); + else + ctx.lineTo( inset, 2*inset ); + } + } + + this.render = function() + { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in rectangle render" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // get some dimensions + var lw = this._strokeWidth; + var w = world.getViewportWidth(), + h = world.getViewportHeight(); + + // render the fill + ctx.beginPath(); + if (this._fillColor) + { + var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; + ctx.fillStyle = c; + + ctx.lineWidth = lw; + var inset = Math.ceil( lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.fill(); + ctx.closePath(); + } + + // render the stroke + ctx.beginPath(); + if (this._strokeColor) + { + var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; + ctx.strokeStyle = c; + + ctx.lineWidth = lw; + var inset = Math.ceil( 0.5*lw ) + 0.5; + this.renderPath( inset, ctx ); + ctx.stroke(); + ctx.closePath(); + } + } +} + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeOval +/////////////////////////////////////////////////////////////////////// +function RuntimeOval() +{ + // inherit the members of RuntimeGeomObj + this.inheritedFrom = RuntimeGeomObj; + this.inheritedFrom(); +} + diff --git a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js new file mode 100644 index 00000000..2ba3006e --- /dev/null +++ b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js @@ -0,0 +1,140 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
+No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
+(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +
*/ + +/////////////////////////////////////////////////////////////////////// +// Class RuntimeMaterial +// Runtime representation of a material. +/////////////////////////////////////////////////////////////////////// +function RuntimeMaterial( world ) +{ + /////////////////////////////////////////////////////////////////////// + // Instance variables + /////////////////////////////////////////////////////////////////////// + this._name = "GLMaterial"; + this._shaderName = "undefined"; + + // variables for animation speed + this._time = 0.0; + this._dTime = 0.01; + + // RDGE variables + this._shader; + this._materialNode; + + /////////////////////////////////////////////////////////////////////// + // Property Accessors + /////////////////////////////////////////////////////////////////////// + + // a material can be animated or not. default is not. + // Any material needing continuous rendering should override this method + this.isAnimated = function() { return false; } + + /////////////////////////////////////////////////////////////////////// + // Methods + /////////////////////////////////////////////////////////////////////// + this.init = function() + { + } + + this.update = function( time ) + { + } +} + + +function RuntimeFlatMaterial() +{ + // inherit the members of RuntimeMaterial + this.inheritedFrom = RuntimeMaterial; + this.inheritedFrom(); + + this._name = "FlatMaterial"; + this._shaderName = "flat"; + + // assign a default color + this._color = [1,0,0,1]; + + this.import = function( importStr ) + { + var colorStr = getPropertyFromString( "color: ", importStr ); + if (colorStr) + this._color = eval( "[" + colorStr + "]" ); + }; + + + this.init = function() + { + if (this._shader) + { + this._shader.colorMe["color"].set( this._color ); + } + } +} + +function RuntimePulseMaterial() +{ + // inherit the members of RuntimeMaterial + this.inheritedFrom = RuntimeMaterial; + this.inheritedFrom(); + + this._name = "PulseMaterial"; + this._shaderName = "pulse"; + + this._texMap = 'assets/images/cubelight.png'; + + this.isAnimated = function() { return true; } + + + this.import = function( importStr ) + { + } + + this.init = function() + { + var material = this._materialNode; + if (material) + { + var technique = material.shaderProgram.default; + var renderer = g_Engine.getContext().renderer; + if (renderer && technique) + { + if (this._shader && this._shader.default) + { + var res = [ renderer.vpWidth, renderer.vpHeight ]; + technique.u_resolution.set( res ); + + var wrap = 'REPEAT', mips = true; + var tex = renderer.getTextureByName(this._texMap, wrap, mips ); + if (tex) + technique.u_tex0.set( tex ); + + this._shader.default.u_time.set( [this._time] ); + } + } + } + } + + // several materials inherit from pulse. + // they may share this update method + this.update = function( time ) + { + var material = this._materialNode; + if (material) + { + var technique = material.shaderProgram.default; + var renderer = g_Engine.getContext().renderer; + if (renderer && technique) + { + if (this._shader && this._shader.default) + this._shader.default.u_time.set( [this._time] ); + this._time += this._dTime; + if (this._time > 200.0) this._time = 0.0; + } + } + } +} + + -- cgit v1.2.3 From cad4d6cb3f667f6174ec05cecead675b244285b9 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 5 Mar 2012 04:51:31 -0800 Subject: Added more materials/canvas2D drawing to runtime. --- js/helper-classes/RDGE/runtime/GLRuntime.js | 54 +++++++++++++++-- js/helper-classes/RDGE/runtime/RuntimeGeomObj.js | 27 +++++++-- js/helper-classes/RDGE/runtime/RuntimeMaterial.js | 74 +++++++++++++++++++++++ 3 files changed, 145 insertions(+), 10 deletions(-) (limited to 'js/helper-classes/RDGE/runtime') diff --git a/js/helper-classes/RDGE/runtime/GLRuntime.js b/js/helper-classes/RDGE/runtime/GLRuntime.js index d86506ad..e0fff4a8 100644 --- a/js/helper-classes/RDGE/runtime/GLRuntime.js +++ b/js/helper-classes/RDGE/runtime/GLRuntime.js @@ -16,6 +16,7 @@ function GLRuntime( canvas, importStr ) // Instance variables /////////////////////////////////////////////////////////////////////// this._canvas = canvas; + this._context = null; this._importStr = importStr; this.renderer = null; @@ -27,6 +28,8 @@ function GLRuntime( canvas, importStr ) this._firstRender = true; this._initialized = false; + this._useWebGL = false; + // view parameters this._fov = 45.0; this._zNear = 0.1; @@ -49,6 +52,14 @@ function GLRuntime( canvas, importStr ) this.getAspect = function() { return this._aspect; } this.getViewDistance = function() { return this._viewDist; } + this.get2DContext = function() { return this._context; } + + this.getViewportWidth = function() { return this._canvas.width; } + this.getViewportHeight = function() { return this._canvas.height; } + + /////////////////////////////////////////////////////////////////////// + // accessors + /////////////////////////////////////////////////////////////////////// this.loadScene = function() { // parse the data @@ -56,6 +67,8 @@ function GLRuntime( canvas, importStr ) var index = importStr.indexOf( "scenedata: " ); if (index >= 0) { + this._useWebGL = true; + var rdgeStr = importStr.substr( index+11 ); var endIndex = rdgeStr.indexOf( "endscene\n" ); if (endIndex < 0) throw new Error( "ill-formed WebGL data" ); @@ -67,6 +80,12 @@ function GLRuntime( canvas, importStr ) this.linkMaterials( this._geomRoot ); this.initMaterials(); } + else + { + this._context = this._canvas.getContext( "2d" ); + this.importObjects( importStr ); + this.render(); + } } this.init = function() @@ -230,6 +249,7 @@ function GLRuntime( canvas, importStr ) this.addObject = function( obj, parent ) { if (!obj) return; + obj.setWorld( this ); if (parent == null) this._geomRoot = obj; @@ -290,11 +310,35 @@ function GLRuntime( canvas, importStr ) } } - // start RDGE - var id = canvas.getAttribute( "data-RDGE-id" ); - canvas.rdgeid = id; - g_Engine.registerCanvas(canvas, this); - RDGEStart( canvas ); + this.render = function( obj ) + { + if (!obj) obj = this._geomRoot; + obj.render(); + + if (obj.children) + { + var nKids = obj.children.length; + for (var i=0; i= 0); if (this._useWebGL) { var id = canvas.getAttribute( "data-RDGE-id" ); diff --git a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js index 2539abc1..253154f9 100644 --- a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js +++ b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js @@ -80,9 +80,9 @@ function RuntimeGeomObj() switch (materialType) { case "flat": mat = new RuntimeFlatMaterial(); break; - - case "radialGradient": + case "radialGradient": mat = new RuntimeRadialGradientMaterial(); break; case "linearGradient": mat = new RuntimeLinearGradientMaterial(); break; + case "bumpMetal": mat = new RuntimeBumpMetalMaterial(); break; case "water": case "tunnel": @@ -113,6 +113,101 @@ function RuntimeGeomObj() importStr = importStr.substr( endIndex ); } } + + //////////////////////////////////////////////////////////////////// + // vector function + + this.vecAdd = function( dimen, a, b ) + { + var rtnVec; + if ((a.length < dimen) || (b.length < dimen)) + { + throw new Error( "dimension error in vecAdd" ); + } + + rtnVec = []; + for (var i=0; i= 0.001) + { + var scale = len/sum; + rtnVec = []; + for (var i=0; i 0) + if (rad > 0.001) ctx.quadraticCurveTo( inset, height-inset, inset+rad, height-inset ); // do the bottom of the rectangle @@ -205,7 +300,7 @@ function RuntimeRectangle() ctx.lineTo( pt[0], pt[1] ); // get the bottom right arc - if (MathUtils.fpSign(rad) > 0) + if (rad > 0.001) ctx.quadraticCurveTo( width-inset, height-inset, width-inset, height-inset-rad ); // get the right of the rectangle @@ -216,7 +311,7 @@ function RuntimeRectangle() ctx.lineTo( pt[0], pt[1] ); // do the top right corner - if (MathUtils.fpSign(rad) > 0) + if (rad > 0.001) ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); // do the top of the rectangle @@ -227,7 +322,7 @@ function RuntimeRectangle() ctx.lineTo( pt[0], pt[1] ); // do the top left corner - if (MathUtils.fpSign(rad) > 0) + if (rad > 0.001) ctx.quadraticCurveTo( inset, inset, inset, inset+rad ); else ctx.lineTo( inset, 2*inset ); @@ -287,5 +382,227 @@ function RuntimeOval() // inherit the members of RuntimeGeomObj this.inheritedFrom = RuntimeGeomObj; this.inheritedFrom(); + + this.import = function( importStr ) + { + this._xOffset = Number( getPropertyFromString( "xoff: ", importStr ) ); + this._yOffset = Number( getPropertyFromString( "yoff: ", importStr ) ); + this._width = Number( getPropertyFromString( "width: ", importStr ) ); + this._height = Number( getPropertyFromString( "height: ", importStr ) ); + this._strokeWidth = Number( getPropertyFromString( "strokeWidth: ", importStr ) ); + this._innerRadius = Number( getPropertyFromString( "innerRadius: ", importStr ) ); + this._strokeStyle = getPropertyFromString( "strokeStyle: ", importStr ); + var strokeMaterialName = getPropertyFromString( "strokeMat: ", importStr ); + var fillMaterialName = getPropertyFromString( "fillMat: ", importStr ); + this._fillColor = eval( "[" + getPropertyFromString( "fillColor: ", importStr ) + "]" ); + this._strokeColor = eval( "[" + getPropertyFromString( "strokeColor: ", importStr ) + "]" ); + + this.importMaterials( importStr ); + } + + this.render = function() + { + // get the world + var world = this.getWorld(); + if (!world) throw( "null world in buildBuffers" ); + + // get the context + var ctx = world.get2DContext(); + if (!ctx) return; + + // declare some variables + var p0, p1; + var x0, y1, x1, y1; + + // create the matrix + var lineWidth = this._strokeWidth; + var innerRad = this._innerRadius; + var xScale = 0.5*this._width - lineWidth, + yScale = 0.5*this._height - lineWidth; + + // translate + var xCtr = 0.5*world.getViewportWidth() + this._xOffset, + yCtr = 0.5*world.getViewportHeight() + this._yOffset; + var mat = Matrix.create( [ + [ xScale, 0.0, 0.0, xCtr], + [ 0.0, yScale, 0.0, yCtr], + [ 0.0, 0.0, 1.0, 0.0], + [ 0.0, 0.0, 0.0, 1.0] + ] ); + + // get a bezier representation of the circle + var bezPts = this.circularArcToBezier( [0,0,0], [1,0,0], 2.0*Math.PI ); + if (bezPts) + { + var n = bezPts.length; + + // set up the fill style + ctx.beginPath(); + ctx.lineWidth = 0; + if (this._fillColor) + { + var c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; + ctx.fillStyle = c; + + // draw the fill + ctx.beginPath(); + var p = this.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + var index = 1; + while (index < n) + { + p0 = this.transformPoint( bezPts[index], mat ); + p1 = this.transformPoint( bezPts[index+1], mat ); + + x0 = p0[0]; y0 = p0[1]; + x1 = p1[0]; y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + + if ( innerRad > 0.001) + { + xScale = 0.5*innerRad*this._width; + yScale = 0.5*innerRad*this._height; + mat[0] = xScale; + mat[5] = yScale; + + // get the bezier points + var bezPts = this.circularArcToBezier( Vector.create([0,0,0]), Vector.create([1,0,0]), -2.0*Math.PI ); + if (bezPts) + { + var n = bezPts.length; + p = this.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + p0 = this.transformPoint( bezPts[index], mat ); + p1 = this.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } + } + + // fill the path + ctx.fill(); + } + + // calculate the stroke matrix + xScale = 0.5*this._width - 0.5*lineWidth; + yScale = 0.5*this._height - 0.5*lineWidth; + mat[0] = xScale; + mat[5] = yScale; + + // set up the stroke style + ctx.beginPath(); + ctx.lineWidth = lineWidth; + if (this._strokeColor) + { + var c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; + ctx.strokeStyle = c; + + // draw the stroke + p = this.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + var p0 = this.transformPoint( bezPts[index], mat ); + var p1 = this.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + + if (innerRad > 0.01) + { + // calculate the stroke matrix + xScale = 0.5*innerRad*this._width - 0.5*lineWidth; + yScale = 0.5*innerRad*this._height - 0.5*lineWidth; + mat[0] = xScale; + mat[5] = yScale; + + // draw the stroke + p = this.transformPoint( bezPts[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) + { + var p0 = this.transformPoint( bezPts[index], mat ); + var p1 = this.transformPoint( bezPts[index+1], mat ); + + var x0 = p0[0], y0 = p0[1], + x1 = p1[0], y1 = p1[1]; + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } + + // render the stroke + ctx.stroke(); + } + } + } + + /////////////////////////////////////////////////////////////////////// + // this function returns the quadratic Bezier approximation to the specified + // circular arc. The input can be 2D or 3D, determined by the minimum dimension + // of the center and start point. + // includedAngle is in radians, can be positiveor negative + this.circularArcToBezier= function( ctr_, startPt_, includedAngle ) + { + var dimen = 3; + var ctr = ctr_.slice(); + var startPt = startPt_.slice(); + + // make sure the start point is good + var pt = this.vecSubtract(dimen, startPt, ctr); + var rad = this.vecMag(dimen, pt); + + if ((dimen != 3) || (rad <= 0) || (includedAngle === 0)) + { + if (dimen != 3) console.log( "circularArcToBezier works for 3 dimensional points only. Was " + dimen ); + return [ startPt.slice(0), startPt.slice(0), startPt.slice(0) ]; + } + + // determine the number of segments. 45 degree span maximum. + var nSegs = Math.ceil( Math.abs(includedAngle)/(0.25*Math.PI) ); + if (nSegs <= 0) return [ startPt.slice(0), startPt.slice(0), startPt.slice(0) ]; + var dAngle = includedAngle/nSegs; + + // determine the length of the center control point from the circle center + var cs = Math.cos( 0.5*Math.abs(dAngle) ), sn = Math.sin( 0.5*Math.abs(dAngle) ); + var c = rad*sn; + var h = c*sn/cs; + var d = rad*cs + h; + + var rtnPts = [ this.vecAdd(dimen, pt, ctr) ]; + var rotMat = Matrix.RotationZ( dAngle ); + for ( var i=0; i 200.0) this._time = 0.0; + } + } + } + */ +} + + -- cgit v1.2.3 From 232784ffafe834f75a46ca7fc311e8ca2ff5eec9 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Mon, 5 Mar 2012 16:33:51 -0800 Subject: Corrections for canvas file IO --- .../RDGE/runtime/CanvasDataManager.js | 29 ++-------------------- js/helper-classes/RDGE/runtime/RuntimeGeomObj.js | 3 +++ js/helper-classes/RDGE/runtime/RuntimeMaterial.js | 22 +++------------- 3 files changed, 8 insertions(+), 46 deletions(-) (limited to 'js/helper-classes/RDGE/runtime') diff --git a/js/helper-classes/RDGE/runtime/CanvasDataManager.js b/js/helper-classes/RDGE/runtime/CanvasDataManager.js index 46d944a1..efbfe4db 100644 --- a/js/helper-classes/RDGE/runtime/CanvasDataManager.js +++ b/js/helper-classes/RDGE/runtime/CanvasDataManager.js @@ -12,7 +12,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot /////////////////////////////////////////////////////////////////////// function CanvasDataManager() { - this.loadGLData = function(root, valueArray) + this.loadGLData = function(root, valueArray, NinjaUtils) { var value = valueArray; var nWorlds = value.length; @@ -29,32 +29,7 @@ function CanvasDataManager() var canvas = this.findCanvasWithID( id, root ); if (canvas) { - //var loadForAuthoring = true; - var index = importStr.indexOf( "scenedata: " ); - //if (index >= 0) loadForAuthoring = false; - var loadForAuthoring = false; - - if (loadForAuthoring) - { - if (!canvas.elementModel) - { - NJUtils.makeElementModel(canvas, "Canvas", "shape", true); - } - - if (canvas.elementModel) - { - if (canvas.elementModel.shapeModel.GLWorld) - canvas.elementModel.shapeModel.GLWorld.clearTree(); - - var world = new GLWorld( canvas ); - canvas.elementModel.shapeModel.GLWorld = world; - world.import( importStr ); - } - } - else - { - var rt = new GLRuntime( canvas, importStr ); - } + var rt = new GLRuntime( canvas, importStr ); } } } diff --git a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js index 253154f9..fd5bf3aa 100644 --- a/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js +++ b/js/helper-classes/RDGE/runtime/RuntimeGeomObj.js @@ -83,7 +83,9 @@ function RuntimeGeomObj() case "radialGradient": mat = new RuntimeRadialGradientMaterial(); break; case "linearGradient": mat = new RuntimeLinearGradientMaterial(); break; case "bumpMetal": mat = new RuntimeBumpMetalMaterial(); break; + case "uber": mat = new RuntimeUberMaterial(); break; + case "deform": case "water": case "tunnel": case "reliefTunnel": @@ -94,6 +96,7 @@ function RuntimeGeomObj() case "mandel": case "star": case "zinvert": + case "keleidoscope": case "pulse": mat = new RuntimePulseMaterial(); break; default: diff --git a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js index ceabbaa5..0f10cfbe 100644 --- a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js +++ b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js @@ -274,26 +274,10 @@ function RuntimeBumpMetalMaterial() } } } - - /* - this.update = function( time ) - { - var material = this._materialNode; - if (material) - { - var technique = material.shaderProgram.default; - var renderer = g_Engine.getContext().renderer; - if (renderer && technique) - { - if (this._shader && this._shader.default) - this._shader.default.u_time.set( [this._time] ); - this._time += this._dTime; - if (this._time > 200.0) this._time = 0.0; - } - } - } - */ } +function RuntimeUberMaterial() +{ +} -- cgit v1.2.3 From 182f05f2f7a8f43f1589c9b8c15bf00d6e983676 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 6 Mar 2012 11:41:09 -0800 Subject: File IO --- js/helper-classes/RDGE/runtime/RuntimeMaterial.js | 1 - 1 file changed, 1 deletion(-) (limited to 'js/helper-classes/RDGE/runtime') diff --git a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js index 0f10cfbe..6c57d102 100644 --- a/js/helper-classes/RDGE/runtime/RuntimeMaterial.js +++ b/js/helper-classes/RDGE/runtime/RuntimeMaterial.js @@ -44,7 +44,6 @@ function RuntimeMaterial( world ) } } - function RuntimeFlatMaterial() { // inherit the members of RuntimeMaterial -- cgit v1.2.3 From 818582d389f504c915be0c9052fafa33e3e76c92 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 7 Mar 2012 16:48:48 -0800 Subject: File IO --- .../RDGE/runtime/CanvasDataManager.js | 75 --- js/helper-classes/RDGE/runtime/GLRuntime.js | 348 ------------ js/helper-classes/RDGE/runtime/RuntimeGeomObj.js | 611 --------------------- js/helper-classes/RDGE/runtime/RuntimeMaterial.js | 282 ---------- 4 files changed, 1316 deletions(-) delete mode 100644 js/helper-classes/RDGE/runtime/CanvasDataManager.js delete mode 100644 js/helper-classes/RDGE/runtime/GLRuntime.js delete mode 100644 js/helper-classes/RDGE/runtime/RuntimeGeomObj.js delete mode 100644 js/helper-classes/RDGE/runtime/RuntimeMaterial.js (limited to 'js/helper-classes/RDGE/runtime') diff --git a/js/helper-classes/RDGE/runtime/CanvasDataManager.js b/js/helper-classes/RDGE/runtime/CanvasDataManager.js deleted file mode 100644 index efbfe4db..00000000 --- a/js/helper-classes/RDGE/runtime/CanvasDataManager.js +++ /dev/null @@ -1,75 +0,0 @@ -/* -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. -
*/ - - - -/////////////////////////////////////////////////////////////////////// -// Class ShapeRuntime -// Manages runtime shape display -/////////////////////////////////////////////////////////////////////// -function CanvasDataManager() -{ - this.loadGLData = function(root, valueArray, NinjaUtils) - { - var value = valueArray; - var nWorlds = value.length; - for (var i=0; i= 0) - { - var endIndex = importStr.indexOf( "\n", startIndex ); - if (endIndex > 0) - { - var id = importStr.substring( startIndex+4, endIndex ); - var canvas = this.findCanvasWithID( id, root ); - if (canvas) - { - var rt = new GLRuntime( canvas, importStr ); - } - } - } - } - } - - this.collectGLData = function( elt, dataArray ) - { - if (elt.elementModel && elt.elementModel.shapeModel && elt.elementModel.shapeModel.GLWorld) - { - var data = elt.elementModel.shapeModel.GLWorld.export( true ); - dataArray.push( data ); - } - - if (elt.children) - { - var nKids = elt.children.length; - for (var i=0; i -This file contains proprietary software owned by Motorola Mobility, Inc.
-No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
-(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. - */ - - - -/////////////////////////////////////////////////////////////////////// -// Class GLRuntime -// Manages runtime fora WebGL canvas -/////////////////////////////////////////////////////////////////////// -function GLRuntime( canvas, importStr ) -{ - /////////////////////////////////////////////////////////////////////// - // Instance variables - /////////////////////////////////////////////////////////////////////// - this._canvas = canvas; - this._context = null; - this._importStr = importStr; - - this.renderer = null; - this.myScene = null; - this.light = null; - this.light2 = null; - this._rootNode = null; - - this._firstRender = true; - this._initialized = false; - - this._useWebGL = false; - - // view parameters - this._fov = 45.0; - this._zNear = 0.1; - this._zFar = 100.0; - this._viewDist = 5.0; - - this._aspect = canvas.width/canvas.height; - - this._geomRoot; - - // all "live" materials - this._materials = []; - - /////////////////////////////////////////////////////////////////////// - // accessors - /////////////////////////////////////////////////////////////////////// - this.getZNear = function() { return this._zNear; } - this.getZFar = function() { return this._zFar; } - this.getFOV = function() { return this._fov; } - this.getAspect = function() { return this._aspect; } - this.getViewDistance = function() { return this._viewDist; } - - this.get2DContext = function() { return this._context; } - - this.getViewportWidth = function() { return this._canvas.width; } - this.getViewportHeight = function() { return this._canvas.height; } - - /////////////////////////////////////////////////////////////////////// - // accessors - /////////////////////////////////////////////////////////////////////// - this.loadScene = function() - { - // parse the data - // the GL runtime must start with a "sceneData: " - var index = importStr.indexOf( "scenedata: " ); - if (index >= 0) - { - this._useWebGL = true; - - var rdgeStr = importStr.substr( index+11 ); - var endIndex = rdgeStr.indexOf( "endscene\n" ); - if (endIndex < 0) throw new Error( "ill-formed WebGL data" ); - var len = endIndex - index + 11; - rdgeStr = rdgeStr.substr( 0, endIndex ); - - this.myScene.importJSON( rdgeStr ); - this.importObjects( importStr ); - this.linkMaterials( this._geomRoot ); - this.initMaterials(); - } - else - { - this._context = this._canvas.getContext( "2d" ); - this.importObjects( importStr ); - this.render(); - } - } - - this.init = function() - { - var ctx1 = g_Engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle), - ctx2 = g_Engine.getContext(); - if (ctx1 != ctx2) console.log( "***** different contexts *****" ); - this.renderer = ctx1.renderer; - - // create a camera, set its perspective, and then point it at the origin - var cam = new camera(); - this._camera = cam; - cam.setPerspective(this.getFOV(), this.getAspect(), this.getZNear(), this.getZFar()); - cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], vec3.up()); - - // make this camera the active camera - this.renderer.cameraManager().setActiveCamera(cam); - - // change clear color - this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]); - - // create an empty scene graph - this.myScene = new SceneGraph(); - - // load the scene graph data - this.loadScene(); - - // Add the scene to the engine - necessary if you want the engine to draw for you - var name = "myScene" + this._canvas.getAttribute( "data-RDGE-id" ); - g_Engine.AddScene(name, this.myScene); - - this._initialized = true; - } - - // main code for handling user interaction and updating the scene - this.update = function(dt) - { - if (this._initialized) - { - if (!dt) dt = 0.2; - - dt = 0.01; // use our own internal throttle - this.elapsed += dt; - - // changed the global position uniform of light 0, another way to change behavior of a light - rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]); - - // orbit the light nodes around the boxes - //this.light.setPosition([1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), 1.2*Math.cos(this.elapsed*2.0)]); - //this.light2.setPosition([-1.2*Math.cos(this.elapsed*2.0), 1.2*Math.sin(this.elapsed*2.0), -1.2*Math.cos(this.elapsed)]); - - this.updateMaterials(); - - // now update all the nodes in the scene - this.myScene.update(dt); - } - } - - this.updateMaterials = function() - { - var nMats =