diff options
Diffstat (limited to 'js/lib')
-rwxr-xr-x | js/lib/drawing/world.js | 1 | ||||
-rwxr-xr-x | js/lib/geom/circle.js | 20 | ||||
-rwxr-xr-x | js/lib/geom/geom-obj.js | 25 | ||||
-rwxr-xr-x | js/lib/geom/line.js | 13 | ||||
-rwxr-xr-x | js/lib/geom/rectangle.js | 17 | ||||
-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 |
8 files changed, 182 insertions, 56 deletions
diff --git a/js/lib/drawing/world.js b/js/lib/drawing/world.js index fb70d18c..26f33a64 100755 --- a/js/lib/drawing/world.js +++ b/js/lib/drawing/world.js | |||
@@ -647,6 +647,7 @@ World.prototype.clearTree = function() | |||
647 | 647 | ||
648 | if (this._useWebGL) | 648 | if (this._useWebGL) |
649 | { | 649 | { |
650 | this.stop(); | ||
650 | var root = this._rootNode; | 651 | var root = this._rootNode; |
651 | root.children = new Array(); | 652 | root.children = new Array(); |
652 | RDGE.globals.engine.unregisterCanvas( this._canvas.rdgeid ); | 653 | RDGE.globals.engine.unregisterCanvas( this._canvas.rdgeid ); |
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js index 39cde514..12781ab8 100755 --- a/js/lib/geom/circle.js +++ b/js/lib/geom/circle.js | |||
@@ -85,14 +85,28 @@ exports.Circle = Object.create(GeomObj, { | |||
85 | } else { | 85 | } else { |
86 | this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); | 86 | this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); |
87 | } | 87 | } |
88 | if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); | 88 | |
89 | if(strokeColor) { | ||
90 | if(this._strokeMaterial.hasProperty("color")) { | ||
91 | this._strokeMaterial.setProperty( "color", this._strokeColor ); | ||
92 | } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) { | ||
93 | this._strokeMaterial.setGradientData(this._strokeColor.color); | ||
94 | } | ||
95 | } | ||
89 | 96 | ||
90 | if(fillMaterial) { | 97 | if(fillMaterial) { |
91 | this._fillMaterial = fillMaterial.dup(); | 98 | this._fillMaterial = fillMaterial.dup(); |
92 | } else { | 99 | } else { |
93 | this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); | 100 | this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); |
101 | } | ||
102 | |||
103 | if(fillColor) { | ||
104 | if(this._fillMaterial.hasProperty("color")) { | ||
105 | this._fillMaterial.setProperty( "color", this._fillColor ); | ||
106 | } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) { | ||
107 | this._fillMaterial.setGradientData(this._fillColor.color); | ||
108 | } | ||
94 | } | 109 | } |
95 | if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); | ||
96 | } | 110 | } |
97 | }, | 111 | }, |
98 | 112 | ||
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js index 4b8e1c69..5373c78a 100755 --- a/js/lib/geom/geom-obj.js +++ b/js/lib/geom/geom-obj.js | |||
@@ -215,27 +215,10 @@ exports.GeomObj = Object.create(Object.prototype, { | |||
215 | nMats = this._materialArray.length; | 215 | nMats = this._materialArray.length; |
216 | } | 216 | } |
217 | 217 | ||
218 | var stops = [], | 218 | if (nMats === this._materialTypeArray.length) { |
219 | colors = c.color; | 219 | for (i = 0; i < nMats; i++) { |
220 | 220 | if (this._materialTypeArray[i] == type) { | |
221 | var len = colors.length; | 221 | this._materialArray[i].setGradientData(c.color); |
222 | // TODO - Current shaders only support 4 color stops | ||
223 | if (len > 4) { | ||
224 | len = 4; | ||
225 | } | ||
226 | |||
227 | for (var n = 0; n < len; n++) { | ||
228 | var position = colors[n].position / 100; | ||
229 | var cs = colors[n].value; | ||
230 | var stop = [cs.r / 255, cs.g / 255, cs.b / 255, cs.a]; | ||
231 | stops.push(stop); | ||
232 | |||
233 | if (nMats === this._materialTypeArray.length) { | ||
234 | for (i = 0; i < nMats; i++) { | ||
235 | if (this._materialTypeArray[i] == type) { | ||
236 | this._materialArray[i].setProperty("color" + (n + 1), stop.slice(0)); | ||
237 | this._materialArray[i].setProperty("colorStop" + (n + 1), position); | ||
238 | } | ||
239 | } | 222 | } |
240 | } | 223 | } |
241 | } | 224 | } |
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js index a44026eb..16c40623 100755 --- a/js/lib/geom/line.js +++ b/js/lib/geom/line.js | |||
@@ -87,8 +87,17 @@ exports.Line = Object.create(GeomObj, { | |||
87 | this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; | 87 | this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; |
88 | 88 | ||
89 | if(strokeMaterial) { | 89 | if(strokeMaterial) { |
90 | this._strokeMaterial = strokeMaterial; | 90 | this._strokeMaterial = strokeMaterial.dup(); |
91 | if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); | 91 | } else { |
92 | this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); | ||
93 | } | ||
94 | |||
95 | if(strokeColor) { | ||
96 | if(this._strokeMaterial.hasProperty("color")) { | ||
97 | this._strokeMaterial.setProperty( "color", this._strokeColor ); | ||
98 | } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) { | ||
99 | this._strokeMaterial.setGradientData(this._strokeColor.color); | ||
100 | } | ||
92 | } | 101 | } |
93 | } | 102 | } |
94 | }, | 103 | }, |
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js index 0d302d50..6a6ede4d 100755 --- a/js/lib/geom/rectangle.js +++ b/js/lib/geom/rectangle.js | |||
@@ -101,15 +101,28 @@ exports.Rectangle = Object.create(GeomObj, { | |||
101 | } else { | 101 | } else { |
102 | this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); | 102 | this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); |
103 | } | 103 | } |
104 | if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); | ||
105 | 104 | ||
105 | if(strokeColor) { | ||
106 | if(this._strokeMaterial.hasProperty("color")) { | ||
107 | this._strokeMaterial.setProperty( "color", this._strokeColor ); | ||
108 | } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) { | ||
109 | this._strokeMaterial.setGradientData(this._strokeColor.color); | ||
110 | } | ||
111 | } | ||
106 | 112 | ||
107 | if(fillMaterial) { | 113 | if(fillMaterial) { |
108 | this._fillMaterial = fillMaterial.dup(); | 114 | this._fillMaterial = fillMaterial.dup(); |
109 | } else { | 115 | } else { |
110 | this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); | 116 | this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); |
111 | } | 117 | } |
112 | if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); | 118 | |
119 | if(fillColor) { | ||
120 | if(this._fillMaterial.hasProperty("color")) { | ||
121 | this._fillMaterial.setProperty( "color", this._fillColor ); | ||
122 | } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) { | ||
123 | this._fillMaterial.setGradientData(this._fillColor.color); | ||
124 | } | ||
125 | } | ||
113 | } | 126 | } |
114 | }, | 127 | }, |
115 | 128 | ||
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; | ||