From 9fdbfe3ab750e8f6dae2ae80ebb6728a4b6c985d Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 3 Apr 2012 09:40:10 -0700 Subject: updated the rdge compiled version and its runtime, incremented rdge library version number --- assets/canvas-runtime.js | 199 +++++++++++++++++++++++------------------------ 1 file changed, 98 insertions(+), 101 deletions(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index f53a4ef6..b4563ea5 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -19,7 +19,7 @@ function initWebGl (rootElement, directory) { cvsDataMngr = new CanvasDataManager(); //Loading data to canvas(es) cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); -} +}; /////////////////////////////////////////////////////////////////////// // Class ShapeRuntime @@ -59,7 +59,7 @@ function CanvasDataManager() } } } - } + }; this.collectGLData = function( elt, dataArray ) { @@ -78,7 +78,7 @@ function CanvasDataManager() this.collectGLData( child, dataArray ); } } - } + }; this.findCanvasWithID = function( id, elt ) { @@ -95,8 +95,8 @@ function CanvasDataManager() if (foundElt) return foundElt; } } - } -} + }; +}; /////////////////////////////////////////////////////////////////////// // Class GLRuntime @@ -149,16 +149,16 @@ function GLRuntime( canvas, jObj, assetPath ) /////////////////////////////////////////////////////////////////////// // 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.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.get2DContext = function() { return this._context; }; - this.getViewportWidth = function() { return this._canvas.width; } - this.getViewportHeight = function() { return this._canvas.height; } + this.getViewportWidth = function() { return this._canvas.width; }; + this.getViewportHeight = function() { return this._canvas.height; }; /////////////////////////////////////////////////////////////////////// // accessors @@ -188,20 +188,20 @@ function GLRuntime( canvas, jObj, assetPath ) this.importObjects( root ); this.render(); } - } + }; this.init = function() { - var ctx1 = g_Engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle), - ctx2 = g_Engine.getContext(); + var ctx1 = RDGE.globals.engine.ctxMan.handleToObject(this._canvas.rdgeCtxHandle), + ctx2 = RDGE.globals.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(); + var cam = new RDGE.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()); + cam.setLookAt([0, 0, this.getViewDistance()], [0, 0, 0], RDGE.vec3.up()); // make this camera the active camera this.renderer.cameraManager().setActiveCamera(cam); @@ -210,17 +210,17 @@ function GLRuntime( canvas, jObj, assetPath ) this.renderer.setClearColor([1.0, 1.0, 1.0, 0.0]); // create an empty scene graph - this.myScene = new SceneGraph(); + this.myScene = new RDGE.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); + RDGE.globals.engine.AddScene(name, this.myScene); this._initialized = true; - } + }; // main code for handling user interaction and updating the scene this.update = function(dt) @@ -233,7 +233,7 @@ function GLRuntime( canvas, jObj, assetPath ) 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]); + RDGE.rdgeGlobalParameters.u_light0Pos.set( [5*Math.cos(this.elapsed), 5*Math.sin(this.elapsed), 20]); // orbit the light nodes around the boxes if (this.light ) 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)]); @@ -244,7 +244,7 @@ function GLRuntime( canvas, jObj, assetPath ) // now update all the nodes in the scene this.myScene.update(dt); } - } + }; this.updateMaterials = function() { @@ -254,16 +254,16 @@ function GLRuntime( canvas, jObj, assetPath ) var mat = this._materials[i]; mat.update(); } - } + }; // defining the draw function to control how the scene is rendered this.draw = function() { if (this._initialized) { - g_Engine.setContext( this._canvas.rdgeid ); + RDGE.globals.engine.setContext( this._canvas.rdgeid ); - var ctx = g_Engine.getContext(); + var ctx = RDGE.globals.engine.getContext(); var renderer = ctx.renderer; if (renderer.unloadedTextureCount <= 0) { @@ -281,7 +281,7 @@ function GLRuntime( canvas, jObj, assetPath ) } } } - } + }; this.importObjects = function( jObj, parent ) { @@ -298,7 +298,7 @@ function GLRuntime( canvas, jObj, assetPath ) this.importObjects( child, gObj ); } } - } + }; this.importObject = function( jObj, parent ) { @@ -330,7 +330,7 @@ function GLRuntime( canvas, jObj, assetPath ) this.addObject( obj, parent ); return obj; - } + }; this.addObject = function( obj, parent ) { @@ -341,7 +341,7 @@ function GLRuntime( canvas, jObj, assetPath ) this._geomRoot = obj; else parent.addChild( obj ); - } + }; this.linkLights = function() { @@ -351,7 +351,7 @@ function GLRuntime( canvas, jObj, assetPath ) this.light = matNode.lightChannel[1]; this.light2 = matNode.lightChannel[2]; } - } + }; this.linkMaterials = function( obj ) { @@ -372,7 +372,7 @@ function GLRuntime( canvas, jObj, assetPath ) this._materials.push( mat ); } } - } + }; this.initMaterials = function() { @@ -382,7 +382,7 @@ function GLRuntime( canvas, jObj, assetPath ) var mat = this._materials[i]; mat.init( this ); } - } + }; this.remapAssetFolder = function( url ) { @@ -397,7 +397,7 @@ function GLRuntime( canvas, jObj, assetPath ) // return rtnPath; return url; - } + }; this.findMaterialNode = function( nodeName, node ) { @@ -419,7 +419,7 @@ function GLRuntime( canvas, jObj, assetPath ) if (rtnNode) return rtnNode; } } - } + }; this.render = function( obj ) { @@ -436,7 +436,7 @@ function GLRuntime( canvas, jObj, assetPath ) this.render( child ); } } - } + }; // start RDGE or load Canvas 2D objects if (jObj.scenedata) this._useWebGL = true; @@ -444,14 +444,14 @@ function GLRuntime( canvas, jObj, assetPath ) { var id = canvas.getAttribute( "data-RDGE-id" ); canvas.rdgeid = id; - g_Engine.registerCanvas(canvas, this); - RDGEStart( canvas ); + RDGE.globals.engine.registerCanvas(canvas, this); + RDGE.RDGEStart( canvas ); } else { this.loadScene(); } -} +}; /////////////////////////////////////////////////////////////////////// // Class RuntimeGeomObj @@ -485,10 +485,10 @@ function RuntimeGeomObj() // Property accessors /////////////////////////////////////////////////////////////////////// - this.geomType = function() { return this.GEOM_TYPE_UNDEFINED; } + this.geomType = function() { return this.GEOM_TYPE_UNDEFINED; }; - this.setWorld = function(w) { this._world = w; } - this.getWorld = function() { return this._world; } + this.setWorld = function(w) { this._world = w; }; + this.getWorld = function() { return this._world; }; /////////////////////////////////////////////////////////////////////// // Methods @@ -497,11 +497,11 @@ function RuntimeGeomObj() { if (!this._children) this._children = []; this._children.push( child ); - } + }; this.import = function() { - } + }; this.importMaterials = function(jObj) { @@ -553,7 +553,7 @@ function RuntimeGeomObj() this._materials.push( mat ); } } - } + }; //////////////////////////////////////////////////////////////////// // vector function @@ -571,7 +571,7 @@ function RuntimeGeomObj() rtnVec[i] = a[i] + b[i]; return rtnVec; - } + }; this.vecSubtract = function( dimen, a, b ) @@ -587,7 +587,7 @@ function RuntimeGeomObj() rtnVec[i] = a[i] - b[i]; return rtnVec; - } + }; this.vecDot = function( dimen, v0, v1 ) { @@ -601,7 +601,7 @@ function RuntimeGeomObj() sum += v0[i] * v1[i]; return sum; - } + }; this.vecMag = function( dimen, vec ) { @@ -609,7 +609,7 @@ function RuntimeGeomObj() for (var i=0; i 200.0) this._time = 0.0; } } - } -} + }; +}; function RuntimeRadialGradientMaterial() { @@ -1321,7 +1319,7 @@ function RuntimeRadialGradientMaterial() if (material) { var technique = material.shaderProgram.default; - var renderer = g_Engine.getContext().renderer; + var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { if (this._shader && this._shader.default) @@ -1341,7 +1339,7 @@ function RuntimeRadialGradientMaterial() } } } - } + }; this.import = function( jObj ) { @@ -1356,9 +1354,8 @@ function RuntimeRadialGradientMaterial() if (this._angle !== undefined) this._angle = jObj.angle; - } - -} + }; +}; function RuntimeLinearGradientMaterial() { @@ -1371,7 +1368,7 @@ function RuntimeLinearGradientMaterial() // the only difference between linear & radial gradient is the existance of an angle for linear. this._angle = 0.0; -} +}; function RuntimeBumpMetalMaterial() { @@ -1393,7 +1390,7 @@ function RuntimeBumpMetalMaterial() this._diffuseTexture = jObj.diffuseTexture; this._specularTexture = jObj.specularTexture; this._normalTexture = jObj.normalMap; - } + }; this.init = function( world ) { @@ -1401,7 +1398,7 @@ function RuntimeBumpMetalMaterial() if (material) { var technique = material.shaderProgram.default; - var renderer = g_Engine.getContext().renderer; + var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { if (this._shader && this._shader.default) @@ -1431,8 +1428,8 @@ function RuntimeBumpMetalMaterial() } } } - } -} + }; +}; function RuntimeUberMaterial() { @@ -1448,7 +1445,7 @@ function RuntimeUberMaterial() if (material) { var technique = material.shaderProgram.defaultTechnique; - var renderer = g_Engine.getContext().renderer; + var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { if (this._shader && this._shader.defaultTechnique) @@ -1493,7 +1490,7 @@ function RuntimeUberMaterial() var uvTransform = [ 2.0, 0, 0, 0, 0, 2.0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1]; technique.u_uvMatrix.set(uvTransform); - var renderer = g_Engine.getContext().renderer; + var renderer = RDGE.globals.engine.getContext().renderer; if (this._diffuseMap) { var tex = renderer.getTextureByName(this._diffuseMap, 'REPEAT'); @@ -1522,11 +1519,11 @@ function RuntimeUberMaterial() } } } - } + }; this.update = function( time ) { - } + }; this.import = function( jObj ) { @@ -1592,8 +1589,8 @@ function RuntimeUberMaterial() this._environmentMap = jObj['environmentMap']; if (this._environmentMap) this._environmentAmount = jObj['environmentAmount']; - } -} + }; +}; function RuntimePlasmaMaterial() { @@ -1604,13 +1601,13 @@ function RuntimePlasmaMaterial() this.init = function( ) { this.update(); - } + }; this.importJSON = function( jObj ) { this._speed = jObj.speed; this._dTime = jObj.dTime; - } + }; this.update = function( time ) { @@ -1618,7 +1615,7 @@ function RuntimePlasmaMaterial() if (material) { var technique = material.shaderProgram.default; - var renderer = g_Engine.getContext().renderer; + var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { if (this._shader && this._shader.default) @@ -1627,7 +1624,7 @@ function RuntimePlasmaMaterial() if (this._time > 200.0) this._time = 0.0; } } - } -} + }; +}; -- cgit v1.2.3 From fa95b83177dfaa091364edfa1219648d71bf9a85 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Tue, 3 Apr 2012 09:42:11 -0700 Subject: IKNinja-1392 - Unable to view Oval canvas2D with Inner Radius in the Chrome-Preview. Any shapes object are drawn after will not shown in Chrome-Preview. Vector.create should be replaced with [ ] notation. Signed-off-by: Nivesh Rajbhandari --- assets/canvas-runtime.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index f53a4ef6..967b483b 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -1026,7 +1026,7 @@ function RuntimeOval() 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 ); + var bezPts = this.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI ); if (bezPts) { var n = bezPts.length; -- cgit v1.2.3 From d5d4dcac78ebf8ba3163a8c7055d783b6397a435 Mon Sep 17 00:00:00 2001 From: John Mayhew Date: Tue, 3 Apr 2012 12:55:54 -0700 Subject: Namespaced the canvas runtime file and updated all dependencies --- assets/canvas-runtime.js | 186 ++++++++++++++++++++++------------------------- 1 file changed, 88 insertions(+), 98 deletions(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index b4563ea5..6e9d1121 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -4,11 +4,12 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. */ - +// namespace for the Ninja Canvas Runtime +var NinjaCvsRt = NinjaCvsRt || {}; /////////////////////////////////////////////////////////////////////// //Loading webGL/canvas data -function initWebGl (rootElement, directory) { +NinjaCvsRt.initWebGl = function (rootElement, directory) { var cvsDataMngr, ninjaWebGlData = JSON.parse((document.querySelectorAll(['script[data-ninja-webgl]'])[0].innerHTML.replace('(', '')).replace(')', '')); if (ninjaWebGlData && ninjaWebGlData.data) { for (var n=0; ninjaWebGlData.data[n]; n++) { @@ -16,7 +17,7 @@ function initWebGl (rootElement, directory) { } } //Creating data manager - cvsDataMngr = new CanvasDataManager(); + cvsDataMngr = new NinjaCvsRt.CanvasDataManager(); //Loading data to canvas(es) cvsDataMngr.loadGLData(rootElement, ninjaWebGlData.data, directory); }; @@ -25,7 +26,7 @@ function initWebGl (rootElement, directory) { // Class ShapeRuntime // Manages runtime shape display /////////////////////////////////////////////////////////////////////// -function CanvasDataManager() +NinjaCvsRt.CanvasDataManager = function () { this.loadGLData = function(root, valueArray, assetPath ) { @@ -54,32 +55,13 @@ function CanvasDataManager() var canvas = this.findCanvasWithID( id, root ); if (canvas) { - new GLRuntime( canvas, jObj, assetPath ); + new NinjaCvsRt.GLRuntime( canvas, jObj, assetPath ); } } } } }; - 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= 0) -// { -// rtnPath = url.substr( index + searchStr.length ); -// rtnPath = this._assetPath + rtnPath; -// } -// return rtnPath; - - return url; - }; - this.findMaterialNode = function( nodeName, node ) { if (node.transformNode) @@ -1257,7 +1247,6 @@ NinjaCvsRt.RuntimePulseMaterial = function () technique.u_resolution.set( res ); var wrap = 'REPEAT', mips = true; - this._texMap = world.remapAssetFolder( this._texMap ); var tex = renderer.getTextureByName(this._texMap, wrap, mips ); if (tex) technique.u_tex0.set( tex ); @@ -1399,19 +1388,16 @@ NinjaCvsRt.RuntimeBumpMetalMaterial = function () var wrap = 'REPEAT', mips = true; if (this._diffuseTexture) { - this._diffuseTexture = world.remapAssetFolder( this._diffuseTexture ); tex = renderer.getTextureByName(this._diffuseTexture, wrap, mips ); if (tex) technique.u_colMap.set( tex ); } if (this._normalTexture) { - this._normalTexture = world.remapAssetFolder( this._normalTexture ); tex = renderer.getTextureByName(this._normalTexture, wrap, mips ); if (tex) technique.u_normalMap.set( tex ); } if (this._specularTexture) { - this._specularTexture = world.remapAssetFolder( this._specularTexture ); tex = renderer.getTextureByName(this._specularTexture, wrap, mips ); technique.u_glowMap.set( tex ); } -- cgit v1.2.3 From 55f4835aa33546f5cd27e501ed461a0f7eb5038b Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 5 Apr 2012 10:31:45 -0700 Subject: Undoing mistakes from auto-merge. Signed-off-by: Nivesh Rajbhandari --- assets/canvas-runtime.js | 8 -------- 1 file changed, 8 deletions(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 2ca76962..7893786e 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -121,14 +121,6 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) // all "live" materials this._materials = []; - // provide the mapping for the asset directory - if (assetPath) - { - this._assetPath = assetPath.slice(); - if (this._assetPath[this._assetPath.length-1] != '/') - this._assetPath += '/'; - } - if(this._assetPath !== undefined) { RDGE.globals.engine.setAssetPath(this._assetPath); } -- cgit v1.2.3 From efb6c7563d87dcbeb6c34bd0c49ddb61d05e3689 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 5 Apr 2012 10:47:08 -0700 Subject: Changing .default to ["default"] to avoid WebStorm errors. Signed-off-by: Nivesh Rajbhandari --- assets/canvas-runtime.js | 51 +++++++++++++++++++++++++++--------------------- 1 file changed, 29 insertions(+), 22 deletions(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 7893786e..32829351 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -121,6 +121,13 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) // all "live" materials this._materials = []; + // provide the mapping for the asset directory + if (assetPath) { + this._assetPath = assetPath.slice(); + if (this._assetPath[this._assetPath.length - 1] != '/') + this._assetPath += '/'; + } + if(this._assetPath !== undefined) { RDGE.globals.engine.setAssetPath(this._assetPath); } @@ -1229,11 +1236,11 @@ NinjaCvsRt.RuntimePulseMaterial = function () var material = this._materialNode; if (material) { - var technique = material.shaderProgram.default; + var technique = material.shaderProgram["default"]; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - if (this._shader && this._shader.default) + if (this._shader && this._shader["default"]) { var res = [ renderer.vpWidth, renderer.vpHeight ]; technique.u_resolution.set( res ); @@ -1243,7 +1250,7 @@ NinjaCvsRt.RuntimePulseMaterial = function () if (tex) technique.u_tex0.set( tex ); - this._shader.default.u_time.set( [this._time] ); + this._shader["default"].u_time.set( [this._time] ); } } } @@ -1256,12 +1263,12 @@ NinjaCvsRt.RuntimePulseMaterial = function () var material = this._materialNode; if (material) { - var technique = material.shaderProgram.default; + var technique = material.shaderProgram["default"]; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - if (this._shader && this._shader.default) - this._shader.default.u_time.set( [this._time] ); + 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; } @@ -1289,24 +1296,24 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = function () var material = this._materialNode; if (material) { - var technique = material.shaderProgram.default; + var technique = material.shaderProgram["default"]; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - if (this._shader && this._shader.default) + if (this._shader && this._shader["default"]) { - this._shader.default.u_color1.set( this._color1 ); - this._shader.default.u_color2.set( this._color2 ); - this._shader.default.u_color3.set( this._color3 ); - this._shader.default.u_color4.set( this._color4 ); + this._shader["default"].u_color1.set( this._color1 ); + this._shader["default"].u_color2.set( this._color2 ); + this._shader["default"].u_color3.set( this._color3 ); + this._shader["default"].u_color4.set( this._color4 ); - this._shader.default.u_colorStop1.set( [this._colorStop1] ); - this._shader.default.u_colorStop2.set( [this._colorStop2] ); - this._shader.default.u_colorStop3.set( [this._colorStop3] ); - this._shader.default.u_colorStop4.set( [this._colorStop4] ); + this._shader["default"].u_colorStop1.set( [this._colorStop1] ); + this._shader["default"].u_colorStop2.set( [this._colorStop2] ); + this._shader["default"].u_colorStop3.set( [this._colorStop3] ); + this._shader["default"].u_colorStop4.set( [this._colorStop4] ); if (this._angle !== undefined) - this._shader.default.u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); + this._shader["default"].u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); } } } @@ -1368,11 +1375,11 @@ NinjaCvsRt.RuntimeBumpMetalMaterial = function () var material = this._materialNode; if (material) { - var technique = material.shaderProgram.default; + var technique = material.shaderProgram["default"]; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - if (this._shader && this._shader.default) + if (this._shader && this._shader["default"]) { technique.u_light0Diff.set( this._lightDiff ); @@ -1582,12 +1589,12 @@ NinjaCvsRt.RuntimePlasmaMaterial = function () var material = this._materialNode; if (material) { - var technique = material.shaderProgram.default; + var technique = material.shaderProgram["default"]; var renderer = RDGE.globals.engine.getContext().renderer; if (renderer && technique) { - if (this._shader && this._shader.default) - this._shader.default.u_time.set( [this._time] ); + 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 a0f939feceaf3d23a6cd08ed5d7f6b236a5a9bde Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 5 Apr 2012 12:53:17 -0700 Subject: Updated canvas-runtime.js to support gradients for rectangle and oval in canvas2d shape mode. Also fixed some typos. Signed-off-by: Nivesh Rajbhandari --- assets/canvas-runtime.js | 377 +++++++++++++++++++++++++++++------------------ 1 file changed, 231 insertions(+), 146 deletions(-) (limited to 'assets/canvas-runtime.js') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index 32829351..ee9f24a4 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -288,23 +288,23 @@ NinjaCvsRt.GLRuntime = function ( canvas, jObj, assetPath ) this.importObject = function( jObj, parent ) { - var type = jObj.type + var type = jObj.type; var obj; switch (type) { case 1: obj = new NinjaCvsRt.RuntimeRectangle(); - obj.importJSON( jObj, parent ); + obj.importJSON( jObj ); break; case 2: // circle obj = new NinjaCvsRt.RuntimeOval(); - obj.importJSON( jObj, parent ); + obj.importJSON( jObj ); break; case 3: // line obj = new NinjaCvsRt.RuntimeLine(); - obj.importJSON( jObj, parent ); + obj.importJSON( jObj ); break; default: @@ -513,7 +513,7 @@ NinjaCvsRt.RuntimeGeomObj = function () case "pulse": mat = new NinjaCvsRt.RuntimePulseMaterial(); break; default: - console.log( "material type: " + materialType + " is not supported" ); + console.log( "material type: " + shaderName + " is not supported" ); break; } @@ -741,7 +741,7 @@ NinjaCvsRt.RuntimeRectangle = function () ctx.quadraticCurveTo( width-inset, inset, width-inset-rad, inset ); // do the top of the rectangle - pt = [inset, inset] + pt = [inset, inset]; rad = tlRad - inset; if (rad < 0) rad = 0; pt[0] += rad; @@ -770,34 +770,81 @@ NinjaCvsRt.RuntimeRectangle = function () var w = world.getViewportWidth(), h = world.getViewportHeight(); - // render the fill - ctx.beginPath(); - var c = null, inset = 0; - if (this._fillColor) - { - c = "rgba(" + 255*this._fillColor[0] + "," + 255*this._fillColor[1] + "," + 255*this._fillColor[2] + "," + this._fillColor[3] + ")"; - ctx.fillStyle = c; - - ctx.lineWidth = lw; - inset = Math.ceil( lw ) + 0.5; - this.renderPath( inset, ctx ); - ctx.fill(); - ctx.closePath(); - } + var c, + inset, + gradient, + colors, + len, + n, + position, + cs; + // render the fill + ctx.beginPath(); + if (this._fillColor) { + inset = Math.ceil( lw ) + 0.5; + + if(this._fillColor.gradientMode) { + if(this._fillColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); + } else { + gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); + } + colors = this._fillColor.color; - // render the stroke - ctx.beginPath(); - if (this._strokeColor) - { - c = "rgba(" + 255*this._strokeColor[0] + "," + 255*this._strokeColor[1] + "," + 255*this._strokeColor[2] + "," + this._strokeColor[3] + ")"; - ctx.strokeStyle = c; + len = colors.length; - ctx.lineWidth = lw; - inset = Math.ceil( 0.5*lw ) + 0.5; - this.renderPath( inset, ctx ); - ctx.stroke(); - ctx.closePath(); - } + for(n=0; n 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 bezPtsInside = this.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI ); - if (bezPtsInside) - { - n = bezPtsInside.length; - p = this.transformPoint( bezPtsInside[0], mat ); - ctx.moveTo( p[0], p[1] ); - index = 1; - while (index < n) - { - p0 = this.transformPoint( bezPtsInside[index], mat ); - p1 = this.transformPoint( bezPtsInside[index+1], mat ); + } else { + 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; + } - x0 = p0[0]; + 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 bezPtsInside = this.circularArcToBezier( [0,0,0], [1,0,0], -2.0*Math.PI ); + if (bezPtsInside) { + n = bezPtsInside.length; + p = this.transformPoint( bezPtsInside[0], mat ); + ctx.moveTo( p[0], p[1] ); + index = 1; + while (index < n) { + p0 = this.transformPoint( bezPtsInside[index], mat ); + p1 = this.transformPoint( bezPtsInside[index+1], mat ); + + x0 = p0[0]; y0 = p0[1]; - x1 = p1[0]; + x1 = p1[0]; y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; - } - } - } + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } + } - // fill the path - ctx.fill(); - } + // 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; + // 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) { + if(this._strokeColor.gradientMode) { + if(this._strokeColor.gradientMode === "radial") { + gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + xCtr, yCtr, 0.5*Math.max(this._height, this._width)); + } else { + gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); + } + colors = this._strokeColor.color; + + len = colors.length; + + for(j=0; j 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) - { - p0 = this.transformPoint( bezPts[index], mat ); - p1 = this.transformPoint( bezPts[index+1], mat ); + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } - x0 = p0[0]; + if (innerRad > 0.001) { + // 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) { + p0 = this.transformPoint( bezPts[index], mat ); + p1 = this.transformPoint( bezPts[index+1], mat ); + + x0 = p0[0]; y0 = p0[1]; - x1 = p1[0]; + x1 = p1[0]; y1 = p1[1]; - ctx.quadraticCurveTo( x0, y0, x1, y1 ); - index += 2; - } - } + ctx.quadraticCurveTo( x0, y0, x1, y1 ); + index += 2; + } + } - // render the stroke - ctx.stroke(); - } + // render the stroke + ctx.stroke(); + } } }; @@ -1321,13 +1405,13 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = function () this.importJSON = function( jObj ) { - this._color1 = jObj.color1, - this._color2 = jObj.color2, - this._color3 = jObj.color3, - this._color4 = jObj.color4, - this._colorStop1 = jObj.colorStop1, - this._colorStop2 = jObj.colorStop2, - this._colorStop3 = jObj.colorStop3, + this._color1 = jObj.color1; + this._color2 = jObj.color2; + this._color3 = jObj.color3; + this._color4 = jObj.color4; + this._colorStop1 = jObj.colorStop1; + this._colorStop2 = jObj.colorStop2; + this._colorStop3 = jObj.colorStop3; this._colorStop4 = jObj.colorSt