aboutsummaryrefslogtreecommitdiff
path: root/js/lib/rdge/materials
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/rdge/materials')
-rwxr-xr-xjs/lib/rdge/materials/linear-gradient-material.js14
-rwxr-xr-xjs/lib/rdge/materials/material.js4
-rwxr-xr-xjs/lib/rdge/materials/radial-gradient-material.js70
3 files changed, 72 insertions, 16 deletions
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js
index 51a7430c..79f323db 100755
--- a/js/lib/rdge/materials/linear-gradient-material.js
+++ b/js/lib/rdge/materials/linear-gradient-material.js
@@ -6,6 +6,7 @@
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 LinearGradientMaterial = function LinearGradientMaterial() { 11var LinearGradientMaterial = function LinearGradientMaterial() {
11 /////////////////////////////////////////////////////////////////////// 12 ///////////////////////////////////////////////////////////////////////
@@ -132,12 +133,6 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
132 } 133 }
133 }; 134 };
134 135
135 // this.getColorCount = function() { return this._colorCount; };
136 // this.setColorCount = function(c) { this._colorCount = c;
137 // if (this._shader && this._shader['default'])
138 // this._shader['default'].u_colorCount.set([c]);
139 // };
140
141 this.getAngle = function () { 136 this.getAngle = function () {
142 return this._angle; 137 return this._angle;
143 }; 138 };
@@ -245,7 +240,9 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
245 this._shader['default'].u_colorStop4.set([s]); 240 this._shader['default'].u_colorStop4.set([s]);
246 241
247 this.setAngle(this.getAngle()); 242 this.setAngle(this.getAngle());
248 } 243
244 this._shader['default'].u_texTransform.set( [1,0,0, 0,1,0, 0,0,1] );
245 }
249 }; 246 };
250 247
251 this.exportJSON = function () { 248 this.exportJSON = function () {
@@ -367,7 +364,8 @@ var linearGradientMaterialDef =
367 'u_colorStop2': { 'type' : 'float' }, 364 'u_colorStop2': { 'type' : 'float' },
368 'u_colorStop3': { 'type' : 'float' }, 365 'u_colorStop3': { 'type' : 'float' },
369 'u_colorStop4': { 'type' : 'float' }, 366 'u_colorStop4': { 'type' : 'float' },
370 'u_cos_sin_angle' : { 'type' : 'vec2' } 367 'u_cos_sin_angle': { 'type' : 'vec2' },
368 'u_texTransform': { 'type' : 'mat3' }
371 //'u_colorCount': {'type' : 'int' } 369 //'u_colorCount': {'type' : 'int' }
372 370
373 }, 371 },
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..b0b63cee 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,8 @@ 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 this._textureTransform = [1,0,0, 0,1,0, 0,0,1];
29
27 /////////////////////////////////////////////////////////////////////// 30 ///////////////////////////////////////////////////////////////////////
28 // Property Accessors 31 // Property Accessors
29 /////////////////////////////////////////////////////////////////////// 32 ///////////////////////////////////////////////////////////////////////
@@ -143,9 +146,9 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
143 /////////////////////////////////////////////////////////////////////// 146 ///////////////////////////////////////////////////////////////////////
144 // Material Property Accessors 147 // Material Property Accessors
145 /////////////////////////////////////////////////////////////////////// 148 ///////////////////////////////////////////////////////////////////////
146 this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4", "angle"]; 149 this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4" ];
147 this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4", "Angle"]; 150 this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4" ];
148 this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float", "float"]; 151 this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float" ];
149 this._propValues = []; 152 this._propValues = [];
150 153
151 this._propValues[this._propNames[0]] = this._color1.slice(0); 154 this._propValues[this._propNames[0]] = this._color1.slice(0);
@@ -188,9 +191,21 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
188 // Methods 191 // Methods
189 /////////////////////////////////////////////////////////////////////// 192 ///////////////////////////////////////////////////////////////////////
190 // duplcate method requirde 193 // duplcate method requirde
191 this.dup = function () { 194 this.dup = function () {
192 return new RadialGradientMaterial(); 195 // allocate a new material
193 }; 196 var newMat = new RadialGradientMaterial();
197
198 // copy over the current values;
199 var propNames = [], propValues = [], propTypes = [], propLabels = [];
200 this.getAllProperties( propNames, propValues, propTypes, propLabels);
201 var n = propNames.length;
202 for (var i=0; i<n; i++) {
203 newMat.setProperty( propNames[i], propValues[i] );
204 }
205 newMat._textureTransform = this._textureTransform.slice();
206
207 return newMat;
208 };
194 209
195 this.init = function (world) { 210 this.init = function (world) {
196 this.setWorld(world); 211 this.setWorld(world);
@@ -231,9 +246,45 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
231 this._shader['default'].u_colorStop3.set([s]); 246 this._shader['default'].u_colorStop3.set([s]);
232 s = this.getColorStop4(); 247 s = this.getColorStop4();
233 this._shader['default'].u_colorStop4.set([s]); 248 this._shader['default'].u_colorStop4.set([s]);
249
250 this._shader['default'].u_texTransform.set( this._textureTransform );
234 } 251 }
235 }; 252 };
236 253
254 this.fitToPrimitive = function( prim )
255 {
256 var bounds = ShapePrimitive.getBounds( prim );
257 if (bounds)
258 {
259 var dx = Math.abs( bounds[3] - bounds[0] ),
260 dy = Math.abs( bounds[4] - bounds[1] );
261 if (dy == 0) dy = 1.0;
262 if (dx == 0) dx = 1.0;
263 var xScale = 2.0, yScale = 2.0;
264 if (dx > dy)
265 yScale *= dy/dx;
266 else
267 xScale *= dx/dy;
268
269 // build the matrix - the translation to the origin, the scale,
270 // and the translation back to the center (hard coded at (0.5, 0.5) for now).
271 // the matrix is build directly instead of with matrix multiplications
272 // for efficiency, not to mention that the multiplication function does
273 // not exist for mat3's.
274 // the matrix as laid out below looks transposed - order is columnwise.
275 var xCtr = 0.5, yCtr = 0.5;
276 this._textureTransform = [
277 xScale, 0.0, 0.0,
278 0.0, yScale, 0.0,
279 xCtr*(1-xScale), yCtr*(1 - yScale), 1.0
280 ];
281
282 if (this._shader && this._shader['default'])
283 this._shader['default'].u_texTransform.set( this._textureTransform );
284
285 }
286 };
287
237 this.exportJSON = function () { 288 this.exportJSON = function () {
238 var jObj = 289 var jObj =
239 { 290 {
@@ -247,7 +298,8 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
247 'colorStop1': this.getColorStop1(), 298 'colorStop1': this.getColorStop1(),
248 'colorStop2': this.getColorStop2(), 299 'colorStop2': this.getColorStop2(),
249 'colorStop3': this.getColorStop3(), 300 'colorStop3': this.getColorStop3(),
250 'colorStop4': this.getColorStop4() 301 'colorStop4': this.getColorStop4(),
302 'textureTransform': this._textureTransform
251 }; 303 };
252 304
253 return jObj; 305 return jObj;
@@ -266,6 +318,7 @@ var RadialGradientMaterial = function RadialGradientMaterial() {
266 colorStop2 = jObj.colorStop2, 318 colorStop2 = jObj.colorStop2,
267 colorStop3 = jObj.colorStop3, 319 colorStop3 = jObj.colorStop3,
268 colorStop4 = jObj.colorStop4; 320 colorStop4 = jObj.colorStop4;