aboutsummaryrefslogtreecommitdiff
path: root/js/lib
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib')
-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
7 files changed, 181 insertions, 56 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 086c1058..848ae10d 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -61,14 +61,28 @@ exports.Circle = Object.create(GeomObj, {
61 } else { 61 } else {
62 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 62 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
63 } 63 }
64 if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); 64
65 if(strokeColor) {
66 if(this._strokeMaterial.hasProperty("color")) {
67 this._strokeMaterial.setProperty( "color", this._strokeColor );
68 } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
69 this._strokeMaterial.setGradientData(this._strokeColor.color);
70 }
71 }
65 72
66 if(fillMaterial) { 73 if(fillMaterial) {
67 this._fillMaterial = fillMaterial.dup(); 74 this._fillMaterial = fillMaterial.dup();
68 } else { 75 } else {
69 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 76 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
77 }
78
79 if(fillColor) {
80 if(this._fillMaterial.hasProperty("color")) {
81 this._fillMaterial.setProperty( "color", this._fillColor );
82 } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
83 this._fillMaterial.setGradientData(this._fillColor.color);
84 }
70 } 85 }
71 if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor );
72 } 86 }
73 }, 87 },
74 88
diff --git a/js/lib/geom/geom-obj.js b/js/lib/geom/geom-obj.js
index 3a7a5619..66f557dd 100755
--- a/js/lib/geom/geom-obj.js
+++ b/js/lib/geom/geom-obj.js
@@ -191,27 +191,10 @@ exports.GeomObj = Object.create(Object.prototype, {
191 nMats = this._materialArray.length; 191 nMats = this._materialArray.length;
192 } 192 }
193 193
194 var stops = [], 194 if (nMats === this._materialTypeArray.length) {
195 colors = c.color; 195 for (i = 0; i < nMats; i++) {
196 196 if (this._materialTypeArray[i] == type) {
197 var len = colors.length; 197 this._materialArray[i].setGradientData(c.color);
198 // TODO - Current shaders only support 4 color stops
199 if (len > 4) {
200 len = 4;
201 }
202
203 for (var n = 0; n < len; n++) {
204 var position = colors[n].position / 100;
205 var cs = colors[n].value;
206 var stop = [cs.r / 255, cs.g / 255, cs.b / 255, cs.a];
207 stops.push(stop);
208
209 if (nMats === this._materialTypeArray.length) {
210 for (i = 0; i < nMats; i++) {
211 if (this._materialTypeArray[i] == type) {
212 this._materialArray[i].setProperty("color" + (n + 1), stop.slice(0));
213 this._materialArray[i].setProperty("colorStop" + (n + 1), position);
214 }
215 } 198 }
216 } 199 }
217 } 200 }
diff --git a/js/lib/geom/line.js b/js/lib/geom/line.js
index a016d7a3..f782f2a8 100755
--- a/js/lib/geom/line.js
+++ b/js/lib/geom/line.js
@@ -63,8 +63,17 @@ exports.Line = Object.create(GeomObj, {
63 this._materialSpecular = [0.4, 0.4, 0.4, 1.0]; 63 this._materialSpecular = [0.4, 0.4, 0.4, 1.0];
64 64
65 if(strokeMaterial) { 65 if(strokeMaterial) {
66 this._strokeMaterial = strokeMaterial; 66 this._strokeMaterial = strokeMaterial.dup();
67 if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor ); 67 } else {
68 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
69 }
70
71 if(strokeColor) {
72 if(this._strokeMaterial.hasProperty("color")) {
73 this._strokeMaterial.setProperty( "color", this._strokeColor );
74 } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
75 this._strokeMaterial.setGradientData(this._strokeColor.color);
76 }
68 } 77 }
69 } 78 }
70 }, 79 },
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 81a8556d..3e4c469a 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -77,15 +77,28 @@ exports.Rectangle = Object.create(GeomObj, {
77 } else { 77 } else {
78 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 78 this._strokeMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
79 } 79 }
80 if (strokeColor && this._strokeMaterial.hasProperty( "color" )) this._strokeMaterial.setProperty( "color", this._strokeColor );
81 80
81 if(strokeColor) {
82 if(this._strokeMaterial.hasProperty("color")) {
83 this._strokeMaterial.setProperty( "color", this._strokeColor );
84 } else if (this._strokeMaterial && (this._strokeMaterial.gradientType === this._strokeColor.gradientMode)) {
85 this._strokeMaterial.setGradientData(this._strokeColor.color);
86 }
87 }
82 88
83 if(fillMaterial) { 89 if(fillMaterial) {
84 this._fillMaterial = fillMaterial.dup(); 90 this._fillMaterial = fillMaterial.dup();
85 } else { 91 } else {
86 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup(); 92 this._fillMaterial = MaterialsModel.getMaterial( MaterialsModel.getDefaultMaterialName() ).dup();
87 } 93 }
88 if (fillColor && this._fillMaterial.hasProperty( "color" )) this._fillMaterial.setProperty( "color", this._fillColor ); 94
95 if(fillColor) {
96 if(this._fillMaterial.hasProperty("color")) {
97 this._fillMaterial.setProperty( "color", this._fillColor );
98 } else if (this._fillMaterial && (this._fillMaterial.gradientType === this._fillColor.gradientMode)) {
99 this._fillMaterial.setGradientData(this._fillColor.color);
100 }
101 }
89 } 102 }
90 }, 103 },
91 104
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":