aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib')
-rwxr-xr-xjs/lib/drawing/world.js1
-rwxr-xr-xjs/lib/geom/circle.js20
-rwxr-xr-xjs/lib/geom/geom-obj.js25
-rwxr-xr-xjs/lib/geom/line.js13
-rwxr-xr-xjs/lib/geom/rectangle.js17
-rwxr-xr-xjs/lib/rdge/materials/linear-gradient-material.js50
-rwxr-xr-xjs/lib/rdge/materials/material.js69
-rwxr-xr-xjs/lib/rdge/materials/radial-gradient-material.js43
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;