diff options
Diffstat (limited to 'js/lib/rdge/materials')
-rwxr-xr-x | js/lib/rdge/materials/linear-gradient-material.js | 14 | ||||
-rwxr-xr-x | js/lib/rdge/materials/material.js | 4 | ||||
-rwxr-xr-x | js/lib/rdge/materials/radial-gradient-material.js | 70 |
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 | ||
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 LinearGradientMaterial = function LinearGradientMaterial() { | 11 | var 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 | ||
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,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; | <