diff options
author | hwc487 | 2012-05-08 15:53:35 -0700 |
---|---|---|
committer | hwc487 | 2012-05-08 15:53:35 -0700 |
commit | 91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f (patch) | |
tree | d82276e3f18fd627a140ad07c22abd16053a7419 /js/lib/rdge | |
parent | 526e423e4a2734c2b139af23911e912452a4443f (diff) | |
download | ninja-91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f.tar.gz |
Radial gradients to match CSS
Diffstat (limited to 'js/lib/rdge')
-rwxr-xr-x | js/lib/rdge/materials/material.js | 4 | ||||
-rwxr-xr-x | js/lib/rdge/materials/radial-gradient-material.js | 43 |
2 files changed, 46 insertions, 1 deletions
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 ) { | |||
228 | // animated materials should implement the update method | 228 | // animated materials should implement the update method |
229 | }; | 229 | }; |
230 | 230 | ||
231 | this.fitToPrimitive = function( prim ) { | ||
232 | // some materials need to preserve an aspect ratio - or someting else. | ||
233 | }; | ||
234 | |||
231 | this.registerTexture = function( texture ) { | 235 | this.registerTexture = function( texture ) { |
232 | // the world needs to know about the texture map | 236 | // the world needs to know about the texture map |
233 | var world = this.getWorld(); | 237 | 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 | |||
6 | 6 | ||
7 | var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; | 7 | var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; |
8 | var Material = require("js/lib/rdge/materials/material").Material; | 8 | var Material = require("js/lib/rdge/materials/material").Material; |
9 | var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive; | ||
9 | 10 | ||
10 | var RadialGradientMaterial = function RadialGradientMaterial() { | 11 | var RadialGradientMaterial = function RadialGradientMaterial() { |
11 | /////////////////////////////////////////////////////////////////////// | 12 | /////////////////////////////////////////////////////////////////////// |
@@ -24,6 +25,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() { | |||
24 | this._colorStop4 = 1.0; | 25 | this._colorStop4 = 1.0; |
25 | // this._colorCount = 4; | 26 | // this._colorCount = 4; |
26 | 27 | ||
28 | var s = Math.sqrt( 2.0 ); | ||
29 | this._textureTransform = [s,0,0, 0,s,0, 0,0,1]; | ||
30 | |||
27 | /////////////////////////////////////////////////////////////////////// | 31 | /////////////////////////////////////////////////////////////////////// |
28 | // Property Accessors | 32 | // Property Accessors |
29 | /////////////////////////////////////////////////////////////////////// | 33 | /////////////////////////////////////////////////////////////////////// |
@@ -231,9 +235,45 @@ var RadialGradientMaterial = function RadialGradientMaterial() { | |||
231 | this._shader['default'].u_colorStop3.set([s]); | 235 | this._shader['default'].u_colorStop3.set([s]); |
232 | s = this.getColorStop4(); | 236 | s = this.getColorStop4(); |
233 | this._shader['default'].u_colorStop4.set([s]); | 237 | this._shader['default'].u_colorStop4.set([s]); |
238 | |||
239 | this._shader['default'].u_texTransform.set( this._textureTransform ); | ||
234 | } | 240 | } |
235 | }; | 241 | }; |
236 | 242 | ||
243 | this.fitToPrimitive = function( prim ) | ||
244 | { | ||
245 | var bounds = ShapePrimitive.getBounds( prim ); | ||
246 | if (bounds) | ||
247 | { | ||
248 | var dx = Math.abs( bounds[3] - bounds[0] ), | ||
249 | dy = Math.abs( bounds[4] - bounds[1] ); | ||
250 | if (dy == 0) dy = 1.0; | ||
251 | if (dx == 0) dx = 1.0; | ||
252 | var xScale = 2.0, yScale = 2.0; | ||
253 | if (dx > dy) | ||
254 | yScale *= dy/dx; | ||
255 | else | ||
256 | xScale *= dx/dy; | ||
257 | |||
258 | // build the matrix - the translation to the origin, the scale, | ||
259 | // and the translation back to the center (hard coded at (0.5, 0.5) for now). | ||
260 | // the matrix is build directly instead of with matrix multiplications | ||
261 | // for efficiency, not to mention that the multiplication function does | ||
262 | // not exist for mat3's. | ||
263 | // the matrix as laid out below looks transposed - order is columnwise. | ||
264 | var xCtr = 0.5, yCtr = 0.5; | ||
265 | this._textureTransform = [ | ||
266 | xScale, 0.0, 0.0, | ||
267 | 0.0, yScale, 0.0, | ||
268 | xCtr*(1-xScale), yCtr*(1 - yScale), 1.0 | ||
269 | ]; | ||
270 | |||
271 | if (this._shader && this._shader['default']) | ||
272 | this._shader['default'].u_texTransform.set( this._textureTransform ); | ||
273 | |||
274 | } | ||
275 | }; | ||
276 | |||
237 | this.exportJSON = function () { | 277 | this.exportJSON = function () { |
238 | var jObj = | 278 | var jObj = |
239 | { | 279 | { |
@@ -316,7 +356,8 @@ var radialGradientMaterialDef = | |||
316 | 'u_colorStop1': { 'type': 'float' }, | 356 | 'u_colorStop1': { 'type': 'float' }, |
317 | 'u_colorStop2': { 'type': 'float' }, | 357 | 'u_colorStop2': { 'type': 'float' }, |
318 | 'u_colorStop3': { 'type': 'float' }, | 358 | 'u_colorStop3': { 'type': 'float' }, |
319 | 'u_colorStop4': { 'type': 'float' } | 359 | 'u_colorStop4': { 'type': 'float' }, |
360 | 'u_texTransform': { 'type' : 'mat3' } | ||
320 | //'u_colorCount': {'type' : 'int' } | 361 | //'u_colorCount': {'type' : 'int' } |
321 | }, | 362 | }, |
322 | 363 | ||