From a0d23354802ebc6b437698acb4b18d3395d47cd1 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 16 Mar 2012 12:26:30 -0700 Subject: Conversion to JSON based file IO for canvas2D and WebGL rendering --- assets/canvas-runtime.js | 388 +++++++++++++++++++---------------------------- 1 file changed, 152 insertions(+), 236 deletions(-) (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index fd823f35..dd4ad6f9 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -37,18 +37,15 @@ function CanvasDataManager() for (var i=0; i= 0) + var jObj = JSON.parse( importStr ); + + var id = jObj.id; + if (id) { - var endIndex = importStr.indexOf( "\n", startIndex ); - if (endIndex > 0) + var canvas = this.findCanvasWithID( id, root ); + if (canvas) { - var id = importStr.substring( startIndex+4, endIndex ); - var canvas = this.findCanvasWithID( id, root ); - if (canvas) - { - var rt = new GLRuntime( canvas, importStr, assetPath ); - } + new GLRuntime( canvas, jObj, assetPath ); } } } @@ -95,14 +92,15 @@ function CanvasDataManager() // Class GLRuntime // Manages runtime fora WebGL canvas /////////////////////////////////////////////////////////////////////// -function GLRuntime( canvas, importStr, assetPath ) +function GLRuntime( canvas, jObj, assetPath ) { /////////////////////////////////////////////////////////////////////// // Instance variables /////////////////////////////////////////////////////////////////////// this._canvas = canvas; this._context = null; - this._importStr = importStr; + //this._importStr = importStr; + this._jObj = jObj; this.renderer = null; this.myScene = null; @@ -157,21 +155,19 @@ function GLRuntime( canvas, importStr, assetPath ) /////////////////////////////////////////////////////////////////////// this.loadScene = function() { + var jObj = this._jObj; + if (!jObj.children || (jObj.children.length != 1)) + throw new Error( "ill-formed JSON for runtime load: " + jObj ); + var root = jObj.children[0]; + // parse the data - // the GL runtime must start with a "sceneData: " - var index = importStr.indexOf( "scenedata: " ); - if (index >= 0) + if (jObj.scenedata) { 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 ); - + var rdgeStr = jObj.scenedata; this.myScene.importJSON( rdgeStr ); - this.importObjects( importStr ); + this.importObjects( root ); this.linkMaterials( this._geomRoot ); this.initMaterials(); this.linkLights(); @@ -179,7 +175,7 @@ function GLRuntime( canvas, importStr, assetPath ) else { this._context = this._canvas.getContext( "2d" ); - this.importObjects( importStr ); + this.importObjects( root ); this.render(); } } @@ -277,58 +273,42 @@ function GLRuntime( canvas, importStr, assetPath ) } } - this.importObjects = function( importStr, parent ) + this.importObjects = function( jObj, parent ) { - var index = importStr.indexOf( "OBJECT\n", 0 ); - while (index >= 0) - { - // update the string to the current object - importStr = importStr.substr( index+7 ); + // read the next object + var gObj = this.importObject( jObj, parent ); - // 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)) + // load the children + if (jObj.children) + { + var nKids = jObj.children.length; + for (var i=0; i= 0) - { - rtnPath = url.substr( index + searchStr.length ); - rtnPath = this._assetPath + rtnPath; - } - return rtnPath; - */ +// var searchStr = "assets/"; +// var index = url.indexOf( searchStr ); +// var rtnPath = url; +// if (index >= 0) +// { +// rtnPath = url.substr( index + searchStr.length ); +// rtnPath = this._assetPath + rtnPath; +// } +// return rtnPath; + return url; } @@ -450,8 +429,7 @@ function GLRuntime( canvas, importStr, assetPath ) } // start RDGE or load Canvas 2D objects - var index = importStr.indexOf( "scenedata: " ); - this._useWebGL = (index >= 0); + if (jObj.scenedata) this._useWebGL = true; if (this._useWebGL) { var id = canvas.getAttribute( "data-RDGE-id" ); @@ -515,16 +493,17 @@ function RuntimeGeomObj() { } - this.importMaterials = function(importStr) + this.importMaterials = function(jObj) { - var nMaterials = Number( getPropertyFromString( "nMaterials: ", importStr ) ); + var nMaterials = jObj.nMaterials; + var matArray = jObj.materials; for (var i=0; i= 0) - rtnStr = rtnStr.substr(0, index); - - return rtnStr; -} - /////////////////////////////////////////////////////////////////////// // Class RuntimeRectangle /////////////////////////////////////////////////////////////////////// @@ -685,26 +646,24 @@ function RuntimeRectangle() this.inheritedFrom = RuntimeGeomObj; this.inheritedFrom(); - this.import = function( importStr ) + this.import = function( jObj ) { - 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._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._tlRadius = jObj.tlRadius; + this._trRadius = jObj.trRadius; + this._blRadius = jObj.blRadius; + this._brRadius = jObj.brRadius; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterials( jObj.materials ); } this.renderPath = function( inset, ctx ) @@ -836,21 +795,20 @@ function RuntimeOval() this.inheritedFrom = RuntimeGeomObj; this.inheritedFrom(); - this.import = function( importStr ) + this.import = function( jObj ) { - 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._xOffset = jObj.xoff; + this._yOffset = jObj.yoff; + this._width = jObj.width; + this._height = jObj.height; + this._strokeWidth = jObj.strokeWidth; + this._strokeColor = jObj.strokeColor; + this._fillColor = jObj.fillColor; + this._innerRadius = jObj.innerRadius; + this._strokeStyle = jObj.strokeStyle; + var strokeMaterialName = jObj.strokeMat; + var fillMaterialName = jObj.fillMat; + this.importMaterials( jObj.materials ); } this.render = function() @@ -1098,23 +1056,9 @@ function RuntimeMaterial( world ) { } - this.import = function( importStr ) - { - } - - this.getPropertyFromString = function( prop, str ) + this.import = function( jObj ) { - var index = str.indexOf( prop ); - if (index < 0) throw new Error( "property " + prop + " not found in string: " + str); - - var rtnStr = str.substr( index+prop.length ); - index = rtnStr.indexOf( "\n" ); - if (index >= 0) - rtnStr = rtnStr.substr(0, index); - - return rtnStr; } - } function RuntimeFlatMaterial() @@ -1129,14 +1073,11 @@ function RuntimeFlatMaterial() // assign a default color this._color = [1,0,0,1]; - this.import = function( importStr ) + this.import = function( jObj ) { - var colorStr = this.getPropertyFromString( "color: ", importStr ); - if (colorStr) - this._color = eval( "[" + colorStr + "]" ); + this._color = jObj.color; }; - this.init = function( world ) { if (this._shader) @@ -1160,9 +1101,9 @@ function RuntimePulseMaterial() this.isAnimated = function() { return true; } - this.import = function( importStr ) + this.import = function( jObj ) { - this._texMap = this.getPropertyFromString( "texture: ", importStr ); + this._texMap = jObj.texture; } this.init = function( world ) @@ -1254,25 +1195,19 @@ function RuntimeRadialGradientMaterial() } } - this.import = function( importStr ) + this.import = function( jObj ) { - var colorStr; - colorStr = this.getPropertyFromString( "color1: ", importStr ); - this._color1 = eval( "[" + colorStr + "]" ); - colorStr = this.getPropertyFromString( "color2: ", importStr ); - this._color2 = eval( "[" + colorStr + "]" ); - colorStr = this.getPropertyFromString( "color3: ", importStr ); - this._color3 = eval( "[" + colorStr + "]" ); - colorStr = this.getPropertyFromString( "color4: ", importStr ); - this._color4 = eval( "[" + colorStr + "]" ); - - this._colorStop1 = Number( this.getPropertyFromString( "colorStop1: ", importStr ) ); - this._colorStop2 = Number( this.getPropertyFromString( "colorStop2: ", importStr ) ); - this._colorStop3 = Number( this.getPropertyFromString( "colorStop3: ", importStr ) ); - this._colorStop4 = Number( this.getPropertyFromString( "colorStop4: ", importStr ) ); + var color1 = jObj.color1, + color2 = jObj.color2, + color3 = jObj.color3, + color4 = jObj.color4, + colorStop1 = jObj.colorStop1, + colorStop2 = jObj.colorStop2, + colorStop3 = jObj.colorStop3, + colorStop4 = jObj.colorStop4; if (this._angle !== undefined) - this._angle = this.getPropertyFromString( "angle: ", importStr ); + this._angle = jObj.angle; } } @@ -1304,12 +1239,12 @@ function RuntimeBumpMetalMaterial() this._specularTexture = "assets/images/silver.png"; this._normalTexture = "assets/images/normalMap.png"; - this.import = function( importStr ) + this.import = function( jObj ) { - this._lightDiff = eval( "[" + this.getPropertyFromString( "lightDiff: ", importStr ) + "]" ); - this._diffuseTexture = this.getPropertyFromString( "diffuseTexture: ", importStr ); - this._specularTexture = this.getPropertyFromString( "specularTexture: ", importStr ); - this._normalTexture = this.getPropertyFromString( "normalMap: ", importStr ); + this._lightDiff = jObj.lightDiff; + this._diffuseTexture = jObj.diffuseTexture; + this._specularTexture = jObj.specularTexture; + this._normalTexture = jObj.normalMap; } this.init = function( world ) @@ -1445,91 +1380,70 @@ function RuntimeUberMaterial() { } - this.import = function( importStr ) + this.import = function( jObj ) { - // limit the key searches to this material - var endKey = "endMaterial\n"; - var index = importStr.indexOf( endKey ); - index += endKey.length; - importStr = importStr.slice( 0, index ); - - var matProps = getPropertyFromString( "materialProps: ", importStr ); - if (matProps) + if (jObj.materialProps) { - this._ambientColor = eval( "[" + getPropertyFromString("ambientColor: ", importStr) + ']' ); - this._diffuseColor = eval( "[" + getPropertyFromString( "diffuseColor: ", importStr) + ']' ); - this._specularColor = eval( "[" + getPropertyFromString( "specularColor: ", importStr) + ']' ); - this._specularPower = Number( getPropertyFromString( "specularPower: ", importStr) ); + var ambientColor = jObj.materialProps.ambientColor; this.setProperty( "ambientColor", ambientColor ); + var diffuseColor = jObj.materialProps.diffuseColor; this.setProperty( "diffuseColor", diffuseColor ); + var specularColor = jObj.materialProps.specularColor; this.setProperty( "specularColor", specularColor ); + var specularPower = jObj.materialProps.specularPower; this.setProperty( "specularPower", specularPower ); } - var lightProps = getPropertyFromString( "lightProps: ", importStr ); - if (lightProps) + var lightArray = jObj.lights; + if (lightArray) { this._lights = []; - var lightStr; for (var i=0; i0?this.stateTop-1:0;this.stateStack[this.stateTop]&&this.stateStack[this.stateTop].ReInit()};this.PopAll=function(){for(;this.stateStack[this.stateTop]!=null;)this.PopState()};this.tick=function(a){this.stateStack[this.stateTop]!=null&&(this.stateStack[this.stateTop].Update(a),this.stateStack[this.stateTop].Resize(),this.stateStack[this.stateTop].Draw())}};g_enableBenchmarks=!0; function Engine(){this._assetPath="assets/";this.sceneMap=[];this.stateTop=void 0;this.lastWindowWidth=window.innerWidth;this.lastWindowHeight=window.innerHeight;this.lightManager=this.defaultContext=null;clearColor=[0,0,0,0];panelObjectManager=new objectManager;this.initializeComplete=!1;this.RDGECanvas=null;this.canvasToRendererMap={};this.canvasNameToStateStack={};this.canvasCtxList=[];invalidObj=/([()]|function)/;isValidObj=function(a){return invalidObj.test(a)?(window.console.error("invalid object name passed to RDGE, "+ a+" - looks like a function"),!1):!0};contextDef=function(){this.startUpState=this.ctxStateManager=this.renderer=this.id=null;this.sceneGraphMap=[];this.currentScene=null;this.getScene=function(){return this.sceneGraphMap[this.currentScene]};this.debug={frameCounter:0,mat4CallCount:0}};this.ctxMan=contextManager=new objectManager;contextManager.currentCtx=null;contextManager._addObject=contextManager.addObject;contextManager.contextMap={};contextManager.addObject=function(a){this.contextMap[a.id]= -a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}} +a;return this._addObject(a)};contextManager.start=function(){for(var a=this.objects.length,b=0;b=0&&(f=a.substr(b+7),f=this._assetPath+f);return f}} Engine.prototype.init=function(a,b,f){this.GlInit(f);globalParamFuncSet=function(a){this.data=a.data;this.type=a.type;this.set=function(a){for(var b=this.data?this.data.length:0,f=0;f 0) { + p0 = [this._xAdj, this._yAdj]; + p1 = [w - this._xAdj, h - this._yAdj]; + } else { + p0 = [this._xAdj, h - this._yAdj]; + p1 = [w - this._xAdj, this._yAdj]; + } + + // draw the line + ctx.moveTo( p0[0], p0[1] ); + ctx.lineTo( p1[0], p1[1] ); + ctx.stroke(); + } + } +} + /////////////////////////////////////////////////////////////////////// // Class RuntimeOval /////////////////////////////////////////////////////////////////////// -- cgit v1.2.3 From 4cd4d29ae10b87f7b280d537b8980d207a22dd43 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Wed, 21 Mar 2012 16:51:05 -0700 Subject: Synchronized material animation speed for pulse material between Ninja and runtime. --- assets/canvas-runtime.js | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 87aac71f..7f2dc8ab 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -1249,6 +1249,7 @@ function RuntimePulseMaterial() this.import = function( jObj ) { this._texMap = jObj.texture; + if (jObj.dTime) this._dTime = jObj.dTime; } this.init = function( world ) @@ -1603,6 +1604,12 @@ function RuntimePlasmaMaterial() this.update(); } + this.importJSON = function( jObj ) + { + this._speed = jObj.speed; + this._dTime = jObj.dTime; + } + this.update = function( time ) { var material = this._materialNode; -- cgit v1.2.3 From 31e924e1b8b8da8342b3ff2341c8284915486c0b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 22 Mar 2012 15:32:19 -0700 Subject: Added Paris and Raiders materials --- assets/canvas-runtime.js | 1 + assets/descriptor.json | 4 +++ assets/images/paris.png | Bin 0 -> 4108 bytes assets/images/powderblue.png | Bin 0 -> 176 bytes assets/images/raiders.png | Bin 0 -> 5674 bytes assets/shaders/Paris.frag.glsl | 68 +++++++++++++++++++++++++++++++++++++++++ 6 files changed, 73 insertions(+) create mode 100644 assets/images/paris.png create mode 100644 assets/images/powderblue.png create mode 100644 assets/images/raiders.png create mode 100644 assets/shaders/Paris.frag.glsl (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 7f2dc8ab..dd909e26 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -526,6 +526,7 @@ function RuntimeGeomObj() case "deform": case "water": + case "paris": case "tunnel": case "reliefTunnel": case "squareTunnel": diff --git a/assets/descriptor.json b/assets/descriptor.json index af0520dd..85fbc996 100644 --- a/assets/descriptor.json +++ b/assets/descriptor.json @@ -21,6 +21,9 @@ "images/cubelight.png", "images/random_normal.png", "images/white.png", + "images/paris.png", + "images/powderblue.png", + "images/raiders.png", "shaders/Basic.frag.glsl", "shaders/TwistVert.vert.glsl", "shaders/Basic.vert.glsl", @@ -36,6 +39,7 @@ "shaders/Keleidoscope.frag.glsl", "shaders/plasma.frag.glsl", "shaders/Mandel.frag.glsl", + "shaders/Paris.frag.glsl", "shaders/plasma.vert.glsl", "shaders/Pulse.frag.glsl", "shaders/radialBlur.frag.glsl", diff --git a/assets/images/paris.png b/assets/images/paris.png new file mode 100644 index 00000000..b7ef6c7b Binary files /dev/null and b/assets/images/paris.png differ diff --git a/assets/images/powderblue.png b/assets/images/powderblue.png new file mode 100644 index 00000000..a4ef33b4 Binary files /dev/null and b/assets/images/powderblue.png differ diff --git a/assets/images/raiders.png b/assets/images/raiders.png new file mode 100644 index 00000000..64c39c89 Binary files /dev/null and b/assets/images/raiders.png differ diff --git a/assets/shaders/Paris.frag.glsl b/assets/shaders/Paris.frag.glsl new file mode 100644 index 00000000..690b1453 --- /dev/null +++ b/assets/shaders/Paris.frag.glsl @@ -0,0 +1,68 @@ +#ifdef GL_ES +precision highp float; +#endif + +uniform sampler2D u_tex0; +uniform float u_time; +uniform vec2 u_resolution; +const float PI = 3.1415926535897932; + +//speed + +const float speed = 0.1; +const float speed_x = 0.075; +const float speed_y = 0.000; + +// geometry +const float intensity = 1.5; +const int steps = 8; +//const float frequency = 4.0; +const float frequency = 2.0; +const int angle = 7; // better when a prime + +// reflection and emboss +const float delta = 20.; +const float intence = 400.; +const float emboss = 0.3; + +//---------- crystals effect + + float col(vec2 coord) + { + float delta_theta = 2.0 * PI / float(angle); + float col = 0.0; + float theta = 0.0; + for (int i = 0; i < steps; i++) + { + vec2 adjc = coord; + theta = delta_theta*float(i); + adjc.x += cos(theta)*u_time*speed + u_time * speed_x; + adjc.y -= sin(theta)*u_time*speed - u_time * speed_y; + col = col + cos( (adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*intensity; + } + + return cos(col); + } + +//---------- main + +void main(void) +{ +vec2 p = (gl_FragCoord.xy) / u_resolution.xy, c1 = p, c2 = p; +float cc1 = col(c1); + +c2.x += u_resolution.x/delta; +float dx = emboss*(cc1-col(c2))/delta; + +c2.x = p.x; +c2.y += u_resolution.y/delta; +float dy = emboss*(cc1-col(c2))/delta; + +c1.x += dx; +c1.y = -(c1.y+dy); + +float alpha = 1.+dot(dx,dy)*intence; +gl_FragColor = texture2D(u_tex0,c1)*(alpha); +// gl_FragColor = vec4(col(p),0,0,1); + +} -- cgit v1.2.3