From d044b6d9755d8ca686501fc3dd5644180e2ffbf0 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 2 Mar 2012 09:36:31 -0800 Subject: WebGL File IO --- js/helper-classes/RDGE/GLGeomObj.js | 46 ++++ js/helper-classes/RDGE/GLRectangle.js | 10 +- js/helper-classes/RDGE/GLWorld.js | 33 ++- .../RDGE/Materials/BumpMetalMaterial.js | 37 +-- js/helper-classes/RDGE/Materials/DeformMaterial.js | 2 +- js/helper-classes/RDGE/Materials/FlatMaterial.js | 34 +-- js/helper-classes/RDGE/Materials/FlyMaterial.js | 2 +- js/helper-classes/RDGE/Materials/JuliaMaterial.js | 2 +- .../RDGE/Materials/KeleidoscopeMaterial.js | 2 +- .../RDGE/Materials/LinearGradientMaterial.js | 2 +- js/helper-classes/RDGE/Materials/MandelMaterial.js | 2 +- js/helper-classes/RDGE/Materials/PlasmaMaterial.js | 2 +- js/helper-classes/RDGE/Materials/PulseMaterial.js | 2 +- .../RDGE/Materials/RadialBlurMaterial.js | 2 +- .../RDGE/Materials/RadialGradientMaterial.js | 2 +- .../RDGE/Materials/ReliefTunnelMaterial.js | 2 +- .../RDGE/Materials/SquareTunnelMaterial.js | 2 +- js/helper-classes/RDGE/Materials/StarMaterial.js | 2 +- js/helper-classes/RDGE/Materials/TaperMaterial.js | 4 +- js/helper-classes/RDGE/Materials/TunnelMaterial.js | 2 +- js/helper-classes/RDGE/Materials/TwistMaterial.js | 2 +- .../RDGE/Materials/TwistVertMaterial.js | 2 +- js/helper-classes/RDGE/Materials/UberMaterial.js | 2 +- js/helper-classes/RDGE/Materials/WaterMaterial.js | 2 +- .../RDGE/Materials/ZInvertMaterial.js | 2 +- js/helper-classes/RDGE/runtime/GLRuntime.js | 182 +++++++++++--- js/helper-classes/RDGE/runtime/RuntimeGeomObj.js | 274 +++++++++++++++++++++ js/helper-classes/RDGE/runtime/RuntimeMaterial.js | 140 +++++++++++ js/preloader/Preloader.js | 2 + 29 files changed, 705 insertions(+), 95 deletions(-) create mode 100644 js/helper-classes/RDGE/runtime/RuntimeGeomObj.js create mode 100644 js/helper-classes/RDGE/runtime/RuntimeMaterial.js diff --git a/js/helper-classes/RDGE/GLGeomObj.js b/js/helper-classes/RDGE/GLGeomObj.js index c1ee01ba..955f0f39 100755 --- a/js/helper-classes/RDGE/GLGeomObj.js +++ b/js/helper-classes/RDGE/GLGeomObj.js @@ -158,6 +158,52 @@ function GLGeomObj() return fillMaterial; } + this.exportMaterials = function() + { + var rtnStr = ""; + if (this._materialArray && this._materialNodeArray) + { + var nMats = this._materialArray.length; + rtnStr += "nMaterials: " + nMats + "\n"; + 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; + } + } + } +} + + diff --git a/js/preloader/Preloader.js b/js/preloader/Preloader.js index 5b806909..63db0a93 100755 --- a/js/preloader/Preloader.js +++ b/js/preloader/Preloader.js @@ -67,6 +67,8 @@ exports.Preloader = Montage.create(Component, { {"type":"js", "url":"js/helper-classes/RDGE/runtime/CanvasDataManager.js"}, {"type":"js", "url":"js/helper-classes/RDGE/runtime/GLRuntime.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/runtime/RuntimeGeomObj.js"}, + {"type":"js", "url":"js/helper-classes/RDGE/runtime/RuntimeMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/Materials/FlatMaterial.js"}, {"type":"js", "url":"js/helper-classes/RDGE/Materials/TaperMaterial.js"}, -- cgit v1.2.3