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 --- js/lib/rdge/materials/material.js | 4 +++ js/lib/rdge/materials/radial-gradient-material.js | 43 ++++++++++++++++++++++- 2 files changed, 46 insertions(+), 1 deletion(-) (limited to 'js/lib/rdge/materials') diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 276c7687..b96768b3 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js @@ -228,6 +228,10 @@ var Material = function GLMaterial( world ) { // animated materials should implement the update method }; + this.fitToPrimitive = function( prim ) { + // some materials need to preserve an aspect ratio - or someting else. + }; + this.registerTexture = function( texture ) { // the world needs to know about the texture map var world = this.getWorld(); diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index dd40d31d..a671ee42 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js @@ -6,6 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var RadialGradientMaterial = function RadialGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -24,6 +25,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._colorStop4 = 1.0; // this._colorCount = 4; + var s = Math.sqrt( 2.0 ); + this._textureTransform = [s,0,0, 0,s,0, 0,0,1]; + /////////////////////////////////////////////////////////////////////// // Property Accessors /////////////////////////////////////////////////////////////////////// @@ -231,9 +235,45 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._shader['default'].u_colorStop3.set([s]); s = this.getColorStop4(); this._shader['default'].u_colorStop4.set([s]); + + this._shader['default'].u_texTransform.set( this._textureTransform ); } }; + this.fitToPrimitive = function( prim ) + { + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + xCtr*(1-xScale), yCtr*(1 - yScale), 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + + } + }; + this.exportJSON = function () { var jObj = { @@ -316,7 +356,8 @@ var radialGradientMaterialDef = 'u_colorStop1': { 'type': 'float' }, 'u_colorStop2': { 'type': 'float' }, 'u_colorStop3': { 'type': 'float' }, - 'u_colorStop4': { 'type': 'float' } + 'u_colorStop4': { 'type': 'float' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- 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 --- js/lib/rdge/materials/linear-gradient-material.js | 43 +++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'js/lib/rdge/materials') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 51a7430c..0df9511e 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -6,6 +6,7 @@ var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; var Material = require("js/lib/rdge/materials/material").Material; +var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; var LinearGradientMaterial = function LinearGradientMaterial() { /////////////////////////////////////////////////////////////////////// @@ -245,9 +246,46 @@ var LinearGradientMaterial = function LinearGradientMaterial() { this._shader['default'].u_colorStop4.set([s]); this.setAngle(this.getAngle()); - } + + this._shader['default'].u_texTransform.set( [1,0,0, 0,1,0, 0,0,1] ); + } }; + this.fitToPrimitive = function( prim ) + { + /* + var bounds = ShapePrimitive.getBounds( prim ); + if (bounds) + { + var dx = Math.abs( bounds[3] - bounds[0] ), + dy = Math.abs( bounds[4] - bounds[1] ); + if (dy == 0) dy = 1.0; + if (dx == 0) dx = 1.0; + var xScale = 2.0, yScale = 2.0; + if (dx > dy) + yScale *= dy/dx; + else + xScale *= dx/dy; + + // build the matrix - the translation to the origin, the scale, + // and the translation back to the center (hard coded at (0.5, 0.5) for now). + // the matrix is build directly instead of with matrix multiplications + // for efficiency, not to mention that the multiplication function does + // not exist for mat3's. + // the matrix as laid out below looks transposed - order is columnwise. + var xCtr = 0.5, yCtr = 0.5; + this._textureTransform = [ + xScale, 0.0, 0.0, + 0.0, yScale, 0.0, + 0.0, 0.0, 1.0 + ]; + + if (this._shader && this._shader['default']) + this._shader['default'].u_texTransform.set( this._textureTransform ); + } + */ + }; + this.exportJSON = function () { var jObj = { @@ -367,7 +405,8 @@ var linearGradientMaterialDef = 'u_colorStop2': { 'type' : 'float' }, 'u_colorStop3': { 'type' : 'float' }, 'u_colorStop4': { 'type' : 'float' }, - 'u_cos_sin_angle' : { 'type' : 'vec2' } + 'u_cos_sin_angle': { 'type' : 'vec2' }, + 'u_texTransform': { 'type' : 'mat3' } //'u_colorCount': {'type' : 'int' } }, -- cgit v1.2.3 From 3e82beb51fe3f596147e9d7f1c405d9a8c4df63b Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 8 May 2012 16:15:49 -0700 Subject: code cleanup for linear gradients. --- js/lib/rdge/materials/linear-gradient-material.js | 41 ----------------------- 1 file changed, 41 deletions(-) (limited to 'js/lib/rdge/materials') diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 0df9511e..79f323db 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js @@ -133,12 +133,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - // this.getColorCount = function() { return this._colorCount; }; - // this.setColorCount = function(c) { this._colorCount = c; - // if (this._shader && this._shader['default']) - // this._shader['default'].u_colorCount.set([c]); - // }; - this.getAngle = function () { return this._angle; }; @@ -251,41 +245,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() { } }; - this.fitToPrimitive = function( prim ) - { - /* - var bounds = ShapePrimitive.getBounds( prim ); - if (bounds) - { - var dx = Math.abs( bounds[3] - bounds[0] ), - dy = Math.abs( bounds[4] - bounds[1] ); - if (dy == 0) dy = 1.0; - if (dx == 0) dx = 1.0; - var xScale = 2.0, yScale = 2.0; - if (dx > dy) - yScale *= dy/dx; - else - xScale *= dx/dy; - - // build the matrix - the translation to the origin, the scale, - // and the translation back to the center (hard coded at (0.5, 0.5) for now). - // the matrix is build directly instead of with matrix multiplications - // for efficiency, not to mention that the multiplication function does - // not exist for mat3's. - // the matrix as laid out below looks transposed - order is columnwise. - var xCtr = 0.5, yCtr = 0.5; - this._textureTransform = [ - xScale, 0.0, 0.0, - 0.0, yScale, 0.0, - 0.0, 0.0, 1.0 - ]; - - if (this._shader && this._shader['default']) - this._shader['default'].u_texTransform.set( this._textureTransform ); - } - */ - }; - this.exportJSON = function () { var jObj = { -- cgit v1.2.3 From cb37bee07085690d72e69a82e76cae9166e5f0f1 Mon Sep 17 00:00:00 2001 From: hwc487 Date: Tue, 15 May 2012 16:02:27 -0700 Subject: Gradient matching between WebGL and Canvas2D --- js/lib/rdge/materials/radial-gradient-material.js | 31 ++++++++++++++++------- 1 file changed, 22 insertions(+), 9 deletions(-) (limited to 'js/lib/rdge/materials') diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index a671ee42..b0b63cee 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js @@ -25,8 +25,7 @@ var RadialGradientMaterial = function RadialGradientMaterial() { this._colorStop4 = 1.0; // this._colorCount = 4; - var s = Math.sqrt( 2.0 ); - this._textureTransform = [s,0,0, 0,s,0, 0,0,1]; + this._textureTransform = [1,0,0, 0,1,0, 0,0,1]; /////////////////////////////////////////////////////////////////////// // Property Accessors @@ -147,9 +146,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() { /////////////////////////////////////////////////////////////////////// // Material Property Accessors /////////////////////////////////////////////////////////////////////// - this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4", "angle"]; - this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4", "Angle"]; - this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float", "float"]; + this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4" ]; + this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4" ]; + this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float" ]; this._propValues = []; this._propValues[this._propNames[0]] = this._color1.slice(0); @@ -192,9 +191,21 @@ var RadialGradientMaterial = function RadialGradientMaterial() { // Methods /////////////////////////////////////////////////////////////////////// // duplcate method requirde - this.dup = function () { - return new RadialGradientMaterial(); - }; + this.dup = function () { + // allocate a new material + var newMat = new RadialGradientMaterial(); + + // copy over the current values; + var propNames = [], propValues = [], propTypes = [], propLabels = []; + this.getAllProperties( propNames, propValues, propTypes, propLabels); + var n = propNames.length; + for (var i=0; i