diff options
author | Valerio Virgillito | 2012-07-09 12:15:26 -0700 |
---|---|---|
committer | Valerio Virgillito | 2012-07-09 12:15:26 -0700 |
commit | 1839f24e8dcbad38d1381bbcd65c17a9caa45987 (patch) | |
tree | 516a29ca99d4aae0d5228223fff438c1a3c4e0d3 /js/lib/rdge/materials | |
parent | aedd14b18695d031f695d27dfbd94df5614495bb (diff) | |
parent | febfdb18042d1c73ac58ee4e35c5f176428dee00 (diff) | |
download | ninja-1839f24e8dcbad38d1381bbcd65c17a9caa45987.tar.gz |
Merge pull request #346 from mqg734/MaterialsUI
UI support for preview, edit, duplicate and delete of WebGL Materials.
Diffstat (limited to 'js/lib/rdge/materials')
-rwxr-xr-x | js/lib/rdge/materials/linear-gradient-material.js | 50 | ||||
-rwxr-xr-x | js/lib/rdge/materials/material.js | 69 | ||||
-rwxr-xr-x | js/lib/rdge/materials/radial-gradient-material.js | 43 |
3 files changed, 134 insertions, 28 deletions
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 981bf9fd..50ef56f0 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js | |||
@@ -103,6 +103,56 @@ var LinearGradientMaterial = function LinearGradientMaterial() { | |||
103 | this.setShaderValues(); | 103 | this.setShaderValues(); |
104 | this.update( 0 ); | 104 | this.update( 0 ); |
105 | }; | 105 | }; |
106 | |||
107 | // Only Linear Gradient and Radial Gradients support gradients; | ||
108 | this.gradientType = "linear"; | ||
109 | |||
110 | this.getGradientData = function() { | ||
111 | var angle = Math.round(this._angle*180/Math.PI), | ||
112 | color, | ||
113 | colorStr, | ||
114 | css = "-webkit-gradient(linear, " + angle + "deg"; | ||
115 | |||
116 | // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across: | ||
117 | css = '-webkit-gradient(linear, left top, right top'; | ||
118 | |||
119 | // TODO - Also, Color Model requires from and to in the gradient string | ||
120 | color = this.getProperty('u_color1'); | ||
121 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
122 | css += ', from(rgba(' + colorStr + '))'; | ||
123 | |||
124 | for (var i=2; i < 4; i++) { | ||
125 | color = this.getProperty('u_color'+i); | ||
126 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
127 | css += ', color-stop(' + this.getProperty('u_colorStop'+i) + ', rgba(' + colorStr + '))'; | ||
128 | } | ||
129 | |||
130 | color = this.getProperty('u_color4'); | ||
131 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
132 | css += ', to(rgba(' + colorStr + '))'; | ||
133 | |||
134 | css += ')'; | ||
135 | |||
136 | return css; | ||
137 | }; | ||
138 | |||
139 | // Only Linear Gradient and Radial Gradient have gradient data. | ||
140 | this.setGradientData = function(colors) { | ||
141 | var len = colors.length; | ||
142 | // TODO - Current shaders only support 4 color stops | ||
143 | if (len > 4) { | ||
144 | len = 4; | ||
145 | } | ||
146 | |||
147 | for (var n = 0; n < len; n++) { | ||
148 | var position = colors[n].position/100; | ||
149 | var cs = colors[n].value; | ||
150 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
151 | |||
152 | this.setProperty("u_color" + (n + 1), stop.slice(0)); | ||
153 | this.setProperty("u_colorStop" + (n + 1), position); | ||
154 | } | ||
155 | }; | ||
106 | }; | 156 | }; |
107 | 157 | ||
108 | /////////////////////////////////////////////////////////////////////////////////////// | 158 | /////////////////////////////////////////////////////////////////////////////////////// |
diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 34d3aa1f..e1d17aa8 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js | |||
@@ -201,6 +201,8 @@ var Material = function GLMaterial( world ) { | |||
201 | }; | 201 | }; |
202 | 202 | ||
203 | this.validateProperty = function( prop, value ) { | 203 | this.validateProperty = function( prop, value ) { |
204 | if(prop === "gradient") return true; | ||
205 | |||
204 | var rtnVal = false; | 206 | var rtnVal = false; |
205 | try | 207 | try |
206 | { | 208 | { |
@@ -264,33 +266,37 @@ var Material = function GLMaterial( world ) { | |||
264 | var material = this._materialNode; | 266 | var material = this._materialNode; |
265 | if (material) technique = material.shaderProgram[this.getTechniqueName()]; | 267 | if (material) technique = material.shaderProgram[this.getTechniqueName()]; |
266 | 268 | ||
267 | switch (this.getPropertyType(prop)) | 269 | if(prop === "gradient") { |
268 | { | 270 | this.setGradientData(value); |
269 | case "angle": | 271 | } else { |
270 | case "float": | 272 | switch (this.getPropertyType(prop)) |
271 | this._propValues[prop] = value; | 273 | { |
272 | if (technique) technique[prop].set( [value] ); | 274 | case "angle": |
273 | break; | 275 | case "float": |
274 | 276 | this._propValues[prop] = value; | |
275 | case "file": | 277 | if (technique) technique[prop].set( [value] ); |
276 | this._propValues[prop] = value.slice(); | 278 | break; |
277 | if (technique) | 279 | |
278 | { | 280 | case "file": |
279 | var glTex = new Texture( this.getWorld(), value ); | 281 | this._propValues[prop] = value.slice(); |
280 | this._glTextures[prop] = glTex; | 282 | if (technique) |
281 | glTex.render(); | 283 | { |
282 | var tex = glTex.getTexture(); | 284 | var glTex = new Texture( this.getWorld(), value ); |
283 | if (tex) technique[prop].set( tex ); | 285 | this._glTextures[prop] = glTex; |
284 | } | 286 | glTex.render(); |
285 | break; | 287 | var tex = glTex.getTexture(); |
286 | 288 | if (tex) technique[prop].set( tex ); | |
287 | case "color": | 289 | } |
288 | case "vector2d": | 290 | break; |
289 | case "vector3d": | 291 | |
290 | this._propValues[prop] = value.slice(); | 292 | case "color": |
291 | if (technique) technique[prop].set( value ); | 293 | case "vector2d": |
292 | break; | 294 | case "vector3d": |
293 | } | 295 | this._propValues[prop] = value.slice(); |
296 | if (technique) technique[prop].set( value ); | ||
297 | break; | ||
298 | } | ||
299 | } | ||
294 | }; | 300 | }; |
295 | 301 | ||
296 | this.setShaderValues = function() | 302 | this.setShaderValues = function() |
@@ -422,6 +428,15 @@ var Material = function GLMaterial( world ) { | |||
422 | return tex; | 428 | return tex; |
423 | }; | 429 | }; |
424 | 430 | ||
431 | this.gradientType = null; | ||
432 | |||
433 | this.getGradientData = function() { | ||
434 | return null; | ||
435 | }; | ||
436 | |||
437 | this.setGradientData = function() { | ||
438 | // override in linear-gradient-material and radial-gradient-material | ||
439 | }; | ||
425 | }; | 440 | }; |
426 | 441 | ||
427 | if (typeof exports === "object") { | 442 | if (typeof exports === "object") { |
diff --git a/js/lib/rdge/materials/radial-gradient-material.js b/js/lib/rdge/materials/radial-gradient-material.js index 6a5a9e9a..ffca1686 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js | |||
@@ -137,7 +137,48 @@ var RadialGradientMaterial = function RadialGradientMaterial() { | |||
137 | { | 137 | { |
138 | jObj.u_texTransform = this._textureTransform.slice(); | 138 | jObj.u_texTransform = this._textureTransform.slice(); |
139 | return jObj; | 139 | return jObj; |
140 | } | 140 | }; |
141 | |||
142 | // Only Linear Gradient and Radial Gradient have gradient data. | ||
143 | this.gradientType = "radial"; | ||
144 | |||
145 | this.getGradientData = function() { | ||
146 | var angle = Math.round(this._angle*180/Math.PI), | ||
147 | color, | ||
148 | colorStr, | ||
149 | css = "-webkit-gradient(linear, " + angle + "deg"; | ||
150 | |||
151 | // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across: | ||
152 | css = '-webkit-radial-gradient(50% 50%, ellipse cover'; | ||
153 | |||
154 | // TODO - Also, Color Model requires from and to in the gradient string | ||
155 | for (var i=1; i < 5; i++) { | ||
156 | color = this.getProperty('u_color'+i); | ||
157 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
158 | css += ', rgba(' + colorStr + ') ' + Math.round(this.getProperty('u_colorStop'+i)*100) + '%'; | ||
159 | } | ||
160 | |||
161 | css += ')'; | ||
162 | |||
163 | return css; | ||
164 | }; | ||
165 | |||
166 | this.setGradientData = function(colors) { | ||
167 | var len = colors.length; | ||
168 | // TODO - Current shaders only support 4 color stops | ||
169 | if (len > 4) { | ||
170 | len = 4; | ||
171 | } | ||
172 | |||
173 | for (var n = 0; n < len; n++) { | ||
174 | var position = colors[n].position/100; | ||
175 | var cs = colors[n].value; | ||
176 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
177 | |||
178 | this.setProperty("u_color" + (n + 1), stop.slice(0)); | ||
179 | this.setProperty("u_colorStop" + (n + 1), position); | ||
180 | } | ||
181 | }; | ||
141 | }; | 182 | }; |
142 | 183 | ||
143 | /////////////////////////////////////////////////////////////////////////////////////// | 184 | /////////////////////////////////////////////////////////////////////////////////////// |