aboutsummaryrefslogtreecommitdiff
path: root/js/lib/rdge/materials
diff options
context:
space:
mode:
authorhwc4872012-05-08 15:53:35 -0700
committerhwc4872012-05-08 15:53:35 -0700
commit91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f (patch)
treed82276e3f18fd627a140ad07c22abd16053a7419 /js/lib/rdge/materials
parent526e423e4a2734c2b139af23911e912452a4443f (diff)
downloadninja-91a9e02bff0397ec9b1f55fdf61cef72eb0d8a0f.tar.gz
Radial gradients to match CSS
Diffstat (limited to 'js/lib/rdge/materials')
-rwxr-xr-xjs/lib/rdge/materials/material.js4
-rwxr-xr-xjs/lib/rdge/materials/radial-gradient-material.js43
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
7var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; 7var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser;
8var Material = require("js/lib/rdge/materials/material").Material; 8var Material = require("js/lib/rdge/materials/material").Material;
9var ShapePrimitive = require("js/lib/geom/shape-primitive").ShapePrimitive;
9 10
10var RadialGradientMaterial = function RadialGradientMaterial() { 11var 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