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 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.colorStop4; if (this._angle !== undefined) @@ -1443,6 +1527,7 @@ NinjaCvsRt.RuntimeUberMaterial = function () } else if(light.type == 'spot') { + var deg2Rad = Math.PI / 180; technique['u_light'+i+'Atten'].set(light.attenuation || [ 1,0,0 ]); technique['u_light'+i+'Pos'].set(light.position || [ 0, 0, 0 ]); technique['u_light'+i+'Spot'].set([ Math.cos( ( light.spotInnerCutoff || 45.0 ) * deg2Rad ), -- cgit v1.2.3