From 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 15:53:35 -0700 Subject: Radial gradients to match CSS --- assets/shaders/radialGradient.vert.glsl | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'assets') diff --git a/assets/shaders/radialGradient.vert.glsl b/assets/shaders/radialGradient.vert.glsl index c3e1b50a..7994ac12 100644 --- a/assets/shaders/radialGradient.vert.glsl +++ b/assets/shaders/radialGradient.vert.glsl @@ -18,11 +18,13 @@ attribute vec2 texcoord; // matrix uniforms uniform mat4 u_mvMatrix; uniform mat4 u_projMatrix; +uniform mat3 u_texTransform; varying vec2 v_uv; void main(void) { gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; - v_uv = texcoord; + vec3 tmp = u_texTransform * vec3( texcoord, 1.0); + v_uv = tmp.xy; } \ No newline at end of file -- cgit v1.2.3 From 24417212f9fad7e992697e9370047fcf2f037913 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:14:28 -0700 Subject: WebGL linear gradients to match CSS --- assets/shaders/linearGradient.vert.glsl | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'assets') diff --git a/assets/shaders/linearGradient.vert.glsl b/assets/shaders/linearGradient.vert.glsl index aac9cbee..f0800812 100755 --- a/assets/shaders/linearGradient.vert.glsl +++ b/assets/shaders/linearGradient.vert.glsl @@ -37,6 +37,7 @@ uniform float u_colorStop3; uniform float u_colorStop4; uniform vec2 u_cos_sin_angle; //uniform int u_colorCount; // currently using 4 +uniform mat3 u_texTransform; varying vec2 v_uv; @@ -44,5 +45,7 @@ varying vec2 v_uv; void main(void) { gl_Position = u_projMatrix * u_mvMatrix * vec4(vert,1.0) ; - v_uv = texcoord; + //v_uv = texcoord; + vec3 tmp = u_texTransform * vec3( texcoord, 1.0); + v_uv = tmp.xy; } -- cgit v1.2.3 From 9321b1d7ab2d23e165ac90e9eea3287f72463948 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Thu, 17 May 2012 09:51:11 -0700 Subject: Linear & radial gradients for runtime fixes --- assets/canvas-runtime.js | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index eeafaab6..b6682493 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -1456,6 +1456,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater _colorStop3: { value: 0.6, writable: true }, _colorStop4: { value: 1.0, writable: true }, + _textureTransform: { value: [1,0,0, 0,1,0, 0,0,1], writable: true }, + init: { value: function(world) { var material = this._materialNode; @@ -1477,6 +1479,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater this._shader["default"].u_colorStop3.set( [this._colorStop3] ); this._shader["default"].u_colorStop4.set( [this._colorStop4] ); + this._shader["default"].u_texTransform.set( this._textureTransform ); + if (this._angle !== undefined) this._shader["default"].u_cos_sin_angle.set([Math.cos(this._angle), Math.sin(this._angle)]); } @@ -1496,6 +1500,8 @@ NinjaCvsRt.RuntimeRadialGradientMaterial = Object.create(NinjaCvsRt.RuntimeMater this._colorStop3 = jObj.colorStop3; this._colorStop4 = jObj.colorStop4; + this._textureTransform = jObj.textureTransform; + if (this._angle !== undefined) this._angle = jObj.angle; } -- cgit v1.2.3 From 6b03f357f45d76733ae7bf5ff52ffe2fb2a84fda Mon Sep 17 00:00:00 2001 From: hwc487 Date: Fri, 18 May 2012 12:35:58 -0700 Subject: Updates for WebGL/Canvas 2D authortime and runtime gradients. --- assets/canvas-runtime.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) (limited to 'assets') diff --git a/assets/canvas-runtime.js b/assets/canvas-runtime.js index b6682493..67d53963 100644 --- a/assets/canvas-runtime.js +++ b/assets/canvas-runtime.js @@ -878,11 +878,12 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { 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, h)/2); - } else { - gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2); - } + if(this._fillColor.gradientMode === "radial") { + var ww = w - 2*lw, hh = h - 2*lw; + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(ww, hh)/2); + } else { + gradient = ctx.createLinearGradient(inset, h/2, w-inset, h/2); + } colors = this._fillColor.color; len = colors.length; @@ -912,11 +913,10 @@ NinjaCvsRt.RuntimeRectangle = Object.create(NinjaCvsRt.RuntimeGeomObj, { inset = Math.ceil( 0.5*lw ) - 0.5; if(this._strokeColor.gradientMode) { - if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2); - } else { - gradient = ctx.createLinearGradient(0, h/2, w, h/2); - } + if(this._strokeColor.gradientMode === "radial") + gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(h, w)/2); + else + gradient = ctx.createLinearGradient(0, h/2, w, h/2); colors = this._strokeColor.color; len = colors.length; @@ -1116,9 +1116,9 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { if(this._fillColor.gradientMode) { if(this._fillColor.gradientMode === "radial") { gradient = ctx.createRadialGradient(xCtr, yCtr, 0, - xCtr, yCtr, Math.max(this._width, this._height)/2); + xCtr, yCtr, Math.max(this._width, this._height)/2 - lineWidth); } else { - gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2); + gradient = ctx.createLinearGradient(lineWidth, this._height/2, this._width-lineWidth, this._height/2); } colors = this._fillColor.color; @@ -1194,7 +1194,7 @@ NinjaCvsRt.RuntimeOval = Object.create(NinjaCvsRt.RuntimeGeomObj, { if (this._strokeColor) { if(this._strokeColor.gradientMode) { if(this._strokeColor.gradientMode === "radial") { - gradient = ctx.createRadialGradient(xCtr, yCtr, Math.min(xScale, yScale), + gradient = ctx.createRadialGradient(xCtr, yCtr, 0, xCtr, yCtr, 0.5*Math.max(this._height, this._width)); } else { gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); -- cgit v1.2.3