aboutsummaryrefslogtreecommitdiff
path: root/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/helper-classes/RDGE/Materials/RadialGradientMaterial.js')
-rw-r--r--js/helper-classes/RDGE/Materials/RadialGradientMaterial.js253
1 files changed, 158 insertions, 95 deletions
diff --git a/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js b/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
index 70c0e952..12842798 100644
--- a/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
+++ b/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
@@ -21,13 +21,15 @@ function RadialGradientMaterial()
21 this._name = "RadialGradientMaterial"; 21 this._name = "RadialGradientMaterial";
22 this._shaderName = "radialGradient"; 22 this._shaderName = "radialGradient";
23 23
24 this._startColor = [1, 0, 0, 1]; 24 this._color1 = [1,0,0,1];
25 this._stopColor = [0, 1, 0, 1]; 25 this._color2 = [0,1,0,1];
26 26 this._color3 = [0,0,1,1];
27 this._mainCircleRadius = 0.5; 27 this._color4 = [0,1,1,1];
28 this._innerCircleRadius = 0.05; 28 this._colorStop1 = 0.0;
29 this._innerCircleCenter = [0.5, 0.5]; 29 this._colorStop2 = 0.3;
30 this._mainCircleCenter = [0.5, 0.5]; 30 this._colorStop3 = 0.6;
31 this._colorStop4 = 1.0;
32// this._colorCount = 4;
31 33
32 /////////////////////////////////////////////////////////////////////// 34 ///////////////////////////////////////////////////////////////////////
33 // Property Accessors 35 // Property Accessors
@@ -35,59 +37,105 @@ function RadialGradientMaterial()
35 this.getName = function() { return this._name; } 37 this.getName = function() { return this._name; }
36 this.getShaderName = function() { return this._shaderName; } 38 this.getShaderName = function() { return this._shaderName; }
37 39
38 this.getStartColor = function() { return this._startColor.slice(0); } 40
39 this.setStartColor = function(c) { this._startColor = c.slice(0); } 41 this.getColor1 = function() { return this._color1; }
40 42 this.setColor1 = function(c) { this._color1 = c.slice();
41 this.getStopColor = function() { return this._stopColor.slice(0); } 43 if (this._shader && this._shader.default)
42 this.setStopColor = function(c) { this._stopColor = c.slice(0); } 44 this._shader.default.u_color1.set(c);
43 45 }
44 this.getMainCircleRadius = function() { return this._mainCircleRadius; } 46
45 this.setMainCircleRadius = function(r) { this._mainCircleRadius = r; } 47 this.getColor2 = function() { return this._color2; }
48 this.setColor2 = function(c) { this._color2 = c.slice();
49 if (this._shader && this._shader.default)
50 this._shader.default.u_color2.set(c);
51 }
52
53 this.getColor3 = function() { return this._color3; }
54 this.setColor3 = function(c) { this._color3 = c.slice();
55 if (this._shader && this._shader.default)
56 this._shader.default.u_color3.set(c);
57 }
58
59 this.getColor4 = function() { return this._color4; }
60 this.setColor4 = function(c) { this._color4 = c.slice();
61 if (this._shader && this._shader.default)
62 this._shader.default.u_color4.set(c);
63 }
64
65 this.getColorStop1 = function() { return this._colorStop1; }
66 this.setColorStop1 = function(s) { this._colorStop1 = s;
67 if (this._shader && this._shader.default)
68 this._shader.default.u_colorStop1.set([s]);
69 }
70
71 this.getColorStop2 = function() { return this._colorStop2; }
72 this.setColorStop2 = function(s) { this._colorStop2 = s;
73 if (this._shader && this._shader.default)
74 this._shader.default.u_colorStop2.set([s]);
75 }
76
77 this.getColorStop3 = function() { return this._colorStop3; }
78 this.setColorStop3 = function(s) { this._colorStop3 = s;
79 if (this._shader && this._shader.default)
80 this._shader.default.u_colorStop3.set([s]);
81 }
82
83 this.getColorStop4 = function() { return this._colorStop4; }
84 this.setColorStop4 = function(s) { this._colorStop4 = s;
85 if (this._shader && this._shader.default)
86 this._shader.default.u_colorStop4.set([s]);
87 }
88
89 this.getColorCount = function() { return this._colorCount; }
90 this.setColorCount = function(c) { this._colorCount = c;
91 if (this._shader && this._shader.default)
92 this._shader.default.u_colorCount.set([c]);
93 }
94
95 this.isAnimated = function() { return false; }
46 96
47 this.getInnerCircleRadius = function() { return this._innerCircleRadius; }
48 this.setInnerCircleRadius = function(r) { this._innerCircleRadius = r; }
49
50 this.getInnerCircleCenter = function() { return this._innerCircleCenter; }
51 this.setInnerCircleCenter = function(c) { this._innerCircleCenter = c; }
52
53 this.getMainCircleCenter = function() { return this._mainCircleCenter; }
54 this.setMainCircleCenter = function(c) { this._mainCircleCenter = c; }
55 97
56 /////////////////////////////////////////////////////////////////////// 98 ///////////////////////////////////////////////////////////////////////
57 // Material Property Accessors 99 // Material Property Accessors
58 /////////////////////////////////////////////////////////////////////// 100 ///////////////////////////////////////////////////////////////////////
59 this._propNames = ["startColor", "stopColor", "mainCircleRadius", "innerCircleRadius", "mainCircleCenter", "innerCircleCenter"]; 101 this._propNames = ["color1", "color2", "color3", "color4", "colorStop1", "colorStop2", "colorStop3", "colorStop4", "angle"];
60 this._propLabels = ["Start Color", "Stop Color", "Main Circle Radius", "Inner Circle Radius", "Main Circle Center", "Inner Circle Center"]; 102 this._propLabels = ["Color 1", "Color 2", "Color 3", "Color 4", "Color Stop 1", "Color Stop 2", "Color Stop 3", "Color Stop 4", "Angle"];
61 this._propTypes = ["color", "color", "float", "float", "vector2d", "vector2d"]; 103 this._propTypes = ["color", "color", "color", "color", "float", "float", "float", "float", "float"];
62 this._propValues = []; 104 this._propValues = [];
63 105
64 this._propValues[ this._propNames[0] ] = this._startColor.slice(0); 106 this._propValues[ this._propNames[0] ] = this._color1.slice(0);
65 this._propValues[ this._propNames[1] ] = this._stopColor.slice(0); 107 this._propValues[ this._propNames[1] ] = this._color2.slice(0);
66 this._propValues[ this._propNames[2] ] = this.getMainCircleRadius(); 108 this._propValues[ this._propNames[2] ] = this._color3.slice(0);
67 this._propValues[ this._propNames[3] ] = this.getInnerCircleRadius(); 109 this._propValues[ this._propNames[3] ] = this._color4.slice(0);
68 this._propValues[ this._propNames[4] ] = this.getMainCircleCenter(); 110
69 this._propValues[ this._propNames[5] ] = this.getInnerCircleCenter(); 111 this._propValues[ this._propNames[4] ] = this._colorStop1;
112 this._propValues[ this._propNames[5] ] = this._colorStop2;
113 this._propValues[ this._propNames[6] ] = this._colorStop3;
114 this._propValues[ this._propNames[7] ] = this._colorStop4;
70 115
71 this.setProperty = function( prop, value ) 116 this.setProperty = function( prop, value )
72 { 117 {
73 if (prop === "color") prop = "startColor"; 118 if (prop === "color") prop = "color1";
74 119
75 // make sure we have legitimate imput 120 // make sure we have legitimate imput
76 var ok = this.validateProperty( prop, value ); 121 var ok = this.validateProperty( prop, value );
77 if (!ok) 122 if (!ok)
78 console.log( "invalid property in Radial Gradient Material:" + prop + " : " + value ); 123 console.log( "invalid property in Radial Gradient Material:" + prop + " : " + value );
79 124
80 switch (prop) 125 switch (prop)
81 { 126 {
82 case "startColor": this.setStartColor(value); break; 127 case "color1": this.setColor1( value ); break;
83 case "stopColor": this.setStopColor(value); break; 128 case "color2": this.setColor2( value ); break;
84 case "innerCircleRadius": this.setInnerCircleRadius( value ); break; 129 case "color3": this.setColor3( value ); break;
85 case "mainCircleRadius": this.setMainCircleRadius( value ); break; 130 case "color4": this.setColor4( value ); break;
86 case "innerCircleCenter": this.setInnerCircleCenter( value ); break; 131 case "colorStop1": this.setColorStop1( value ); break;
87 case "mainCircleCenter": this.setMainCircleCenter( value ); break; 132 case "colorStop2": this.setColorStop2( value ); break;
88 } 133 case "colorStop3": this.setColorStop3( value ); break;
89 134 case "colorStop4": this.setColorStop4( value ); break;
90 this.updateValuesInShader(); 135 case "angle": this.setAngle( value ); break;
136 }
137
138 //this.updateValuesInShader();
91 } 139 }
92 /////////////////////////////////////////////////////////////////////// 140 ///////////////////////////////////////////////////////////////////////
93 141
@@ -115,25 +163,30 @@ function RadialGradientMaterial()
115 163
116 this.updateValuesInShader = function() 164 this.updateValuesInShader = function()
117 { 165 {
118 if (!this._shader || !this._shader.default) return; 166 if (this._shader && this._shader.default)
119 167 {
120 // calculate values 168 //this._shader.default.u_colorCount.set( [4] );
121 var mainCircleRadius = this.getMainCircleRadius(); 169
122 var innerCircleRadius = this.getInnerCircleRadius(); 170 var c;
123 var innerCircleCenter = this.getInnerCircleCenter(); 171 c = this.getColor1();
124 var mainCircleCenter = this.getMainCircleCenter(); 172 this._shader.default.u_color1.set( c );
125 var radiusDelta = innerCircleRadius - mainCircleRadius; 173 c = this.getColor2();
126 var innerCircleCenterMinusCenter = VecUtils.vecSubtract( 2, innerCircleCenter, mainCircleCenter ); 174 this._shader.default.u_color2.set( c );
127 var u_A = VecUtils.vecDot( 2, innerCircleCenterMinusCenter, innerCircleCenterMinusCenter) - (radiusDelta * radiusDelta)