diff options
author | Nivesh Rajbhandari | 2012-07-09 11:43:36 -0700 |
---|---|---|
committer | Nivesh Rajbhandari | 2012-07-09 11:43:36 -0700 |
commit | ac27d538af33ca8d67d3d88729f49c05793afda7 (patch) | |
tree | 4be9251ff087e93a37b1f463ae9eaaaf779caeeb /js/lib/rdge | |
parent | eff1851b2189bea8b89065980d02541cecea5ddf (diff) | |
download | ninja-ac27d538af33ca8d67d3d88729f49c05793afda7.tar.gz |
PI, drawing and editing fixes for shapes and materials.
IKNinja-1841 - Cannot change webgl shape with LinearGradient and RadialGradient to solid color.
IKNINJA-1851 - Cannot draw webgl shapes with Linear/RadialGradient material.
IKNINJA-1864 - PI doesn't update the color of shape if WebGL material switches to Flat.
IKNINJA-1886 - Gradient edits not applied to WebGL Stage object.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
Diffstat (limited to 'js/lib/rdge')
-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 7e53db84..d26143de 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js | |||
@@ -79,6 +79,56 @@ var LinearGradientMaterial = function LinearGradientMaterial() { | |||
79 | this.setShaderValues(); | 79 | this.setShaderValues(); |
80 | this.update( 0 ); | 80 | this.update( 0 ); |
81 | }; | 81 | }; |
82 | |||
83 | // Only Linear Gradient and Radial Gradients support gradients; | ||
84 | this.gradientType = "linear"; | ||
85 | |||
86 | this.getGradientData = function() { | ||
87 | var angle = Math.round(this._angle*180/Math.PI), | ||
88 | color, | ||
89 | colorStr, | ||
90 | css = "-webkit-gradient(linear, " + angle + "deg"; | ||
91 | |||
92 | // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across: | ||
93 | css = '-webkit-gradient(linear, left top, right top'; | ||
94 | |||
95 | // TODO - Also, Color Model requires from and to in the gradient string | ||
96 | color = this.getProperty('u_color1'); | ||
97 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
98 | css += ', from(rgba(' + colorStr + '))'; | ||
99 | |||
100 | for (var i=2; i < 4; i++) { | ||
101 | color = this.getProperty('u_color'+i); | ||
102 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
103 | css += ', color-stop(' + this.getProperty('u_colorStop'+i) + ', rgba(' + colorStr + '))'; | ||
104 | } | ||
105 | |||
106 | color = this.getProperty('u_color4'); | ||
107 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
108 | css += ', to(rgba(' + colorStr + '))'; | ||
109 | |||
110 | css += ')'; | ||
111 | |||
112 | return css; | ||
113 | }; | ||
114 | |||
115 | // Only Linear Gradient and Radial Gradient have gradient data. | ||
116 | this.setGradientData = function(colors) { | ||
117 | var len = colors.length; | ||
118 | // TODO - Current shaders only support 4 color stops | ||
119 | if (len > 4) { | ||
120 | len = 4; | ||
121 | } | ||
122 | |||
123 | for (var n = 0; n < len; n++) { | ||
124 | var position = colors[n].position/100; | ||
125 | var cs = colors[n].value; | ||
126 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
127 | |||
128 | this.setProperty("u_color" + (n + 1), stop.slice(0)); | ||
129 | this.setProperty("u_colorStop" + (n + 1), position); | ||
130 | } | ||
131 | }; | ||
82 | }; | 132 | }; |
83 | 133 | ||
84 | /////////////////////////////////////////////////////////////////////////////////////// | 134 | /////////////////////////////////////////////////////////////////////////////////////// |
diff --git a/js/lib/rdge/materials/material.js b/js/lib/rdge/materials/material.js index 65448c0c..1864b84e 100755 --- a/js/lib/rdge/materials/material.js +++ b/js/lib/rdge/materials/material.js | |||
@@ -177,6 +177,8 @@ var Material = function GLMaterial( world ) { | |||
177 | }; | 177 | }; |
178 | 178 | ||
179 | this.validateProperty = function( prop, value ) { | 179 | this.validateProperty = function( prop, value ) { |
180 | if(prop === "gradient") return true; | ||
181 | |||
180 | var rtnVal = false; | 182 | var rtnVal = false; |
181 | try | 183 | try |
182 | { | 184 | { |
@@ -240,33 +242,37 @@ var Material = function GLMaterial( world ) { | |||
240 | var material = this._materialNode; | 242 | var material = this._materialNode; |
241 | if (material) technique = material.shaderProgram[this.getTechniqueName()]; | 243 | if (material) technique = material.shaderProgram[this.getTechniqueName()]; |
242 | 244 | ||
243 | switch (this.getPropertyType(prop)) | 245 | if(prop === "gradient") { |
244 | { | 246 | this.setGradientData(value); |
245 | case "angle": | 247 | } else { |
246 | case "float": | 248 | switch (this.getPropertyType(prop)) |
247 | this._propValues[prop] = value; | 249 | { |
248 | if (technique) technique[prop].set( [value] ); | 250 | case "angle": |
249 | break; | 251 | case "float": |
250 | 252 | this._propValues[prop] = value; | |
251 | case "file": | 253 | if (technique) technique[prop].set( [value] ); |
252 | this._propValues[prop] = value.slice(); | 254 | break; |
253 | if (technique) | 255 | |
254 | { | 256 | case "file": |
255 | var glTex = new Texture( this.getWorld(), value ); | 257 | this._propValues[prop] = value.slice(); |
256 | this._glTextures[prop] = glTex; | 258 | if (technique) |
257 | glTex.render(); | 259 | { |
258 | var tex = glTex.getTexture(); | 260 | var glTex = new Texture( this.getWorld(), value ); |
259 | if (tex) technique[prop].set( tex ); | 261 | this._glTextures[prop] = glTex; |
260 | } | 262 | glTex.render(); |
261 | break; | 263 | var tex = glTex.getTexture(); |
262 | 264 | if (tex) technique[prop].set( tex ); | |
263 | case "color": | 265 | } |
264 | case "vector2d": | 266 | break; |
265 | case "vector3d": | 267 | |
266 | this._propValues[prop] = value.slice(); | 268 | case "color": |
267 | if (technique) technique[prop].set( value ); | 269 | case "vector2d": |
268 | break; | 270 | case "vector3d": |
269 | } | 271 | this._propValues[prop] = value.slice(); |
272 | if (technique) technique[prop].set( value ); | ||
273 | break; | ||
274 | } | ||
275 | } | ||
270 | }; | 276 | }; |
271 | 277 | ||
272 | this.setShaderValues = function() | 278 | this.setShaderValues = function() |
@@ -398,6 +404,15 @@ var Material = function GLMaterial( world ) { | |||
398 | return tex; | 404 | return tex; |
399 | }; | 405 | }; |
400 | 406 | ||
407 | this.gradientType = null; | ||
408 | |||
409 | this.getGradientData = function() { | ||
410 | return null; | ||
411 | }; | ||
412 | |||
413 | this.setGradientData = function() { | ||
414 | // override in linear-gradient-material and radial-gradient-material | ||
415 | }; | ||
401 | }; | 416 | }; |
402 | 417 | ||
403 | if (typeof exports === "object") { | 418 | 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 c9c2536f..c68cad43 100755 --- a/js/lib/rdge/materials/radial-gradient-material.js +++ b/js/lib/rdge/materials/radial-gradient-material.js | |||
@@ -113,7 +113,48 @@ var RadialGradientMaterial = function RadialGradientMaterial() { | |||
113 | { | 113 | { |
114 | jObj.u_texTransform = this._textureTransform.slice(); | 114 | jObj.u_texTransform = this._textureTransform.slice(); |
115 | return jObj; | 115 | return jObj; |
116 | } | 116 | }; |
117 | |||
118 | // Only Linear Gradient and Radial Gradient have gradient data. | ||
119 | this.gradientType = "radial"; | ||
120 | |||
121 | this.getGradientData = function() { | ||
122 | var angle = Math.round(this._angle*180/Math.PI), | ||
123 | color, | ||
124 | colorStr, | ||
125 | css = "-webkit-gradient(linear, " + angle + "deg"; | ||
126 | |||
127 | // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across: | ||
128 | css = '-webkit-radial-gradient(50% 50%, ellipse cover'; | ||
129 | |||
130 | // TODO - Also, Color Model requires from and to in the gradient string | ||
131 | for (var i=1; i < 5; i++) { | ||
132 | color = this.getProperty('u_color'+i); | ||
133 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
134 | css += ', rgba(' + colorStr + ') ' + Math.round(this.getProperty('u_colorStop'+i)*100) + '%'; | ||
135 | } | ||
136 | |||
137 | css += ')'; | ||
138 | |||
139 | return css; | ||
140 | }; | ||
141 | |||
142 | this.setGradientData = function(colors) { | ||
143 | var len = colors.length; | ||
144 | // TODO - Current shaders only support 4 color stops | ||
145 | if (len > 4) { | ||
146 | len = 4; | ||
147 | } | ||
148 | |||
149 | for (var n = 0; n < len; n++) { | ||
150 | var position = colors[n].position/100; | ||
151 | var cs = colors[n].value; | ||
152 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
153 | |||
154 | this.setProperty("u_color" + (n + 1), stop.slice(0)); | ||
155 | this.setProperty("u_colorStop" + (n + 1), position); | ||
156 | } | ||
157 | }; | ||
117 | }; | 158 | }; |
118 | 159 | ||
119 | /////////////////////////////////////////////////////////////////////////////////////// | 160 | /////////////////////////////////////////////////////////////////////////////////////// |