diff options
Diffstat (limited to 'js/helper-classes/RDGE/Materials/RadialGradientMaterial.js')
-rw-r--r-- | js/helper-classes/RDGE/Materials/RadialGradientMaterial.js | 188 |
1 files changed, 114 insertions, 74 deletions
diff --git a/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js b/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js index 70c0e952..5f912dec 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,42 +37,79 @@ 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; } |
46 | 48 | this.setColor2 = function(c) { this._color2 = c.slice(); | |
47 | this.getInnerCircleRadius = function() { return this._innerCircleRadius; } | 49 | if (this._shader && this._shader.default) |
48 | this.setInnerCircleRadius = function(r) { this._innerCircleRadius = r; } | 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 true; } | ||
49 | 96 | ||
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", "angle"]; |
60 | this._propLabels = ["Start Color", "Stop Color", "Main Circle Radius", "Inner Circle Radius", "Main Circle Center", "Inner Circle Center"]; | 102 | this._propLabels = ["Start Color", "Stop Color", "Angle"]; |
61 | this._propTypes = ["color", "color", "float", "float", "vector2d", "vector2d"]; | 103 | this._propTypes = ["color", "color", "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._color4.slice(0); |
66 | this._propValues[ this._propNames[2] ] = this.getMainCircleRadius(); | 108 | this._propValues[ this._propNames[2] ] = this._angle; |
67 | this._propValues[ this._propNames[3] ] = this.getInnerCircleRadius(); | ||
68 | this._propValues[ this._propNames[4] ] = this.getMainCircleCenter(); | ||
69 | this._propValues[ this._propNames[5] ] = this.getInnerCircleCenter(); | ||
70 | 109 | ||
71 | this.setProperty = function( prop, value ) | 110 | this.setProperty = function( prop, value ) |
72 | { | 111 | { |
73 | if (prop === "color") prop = "startColor"; | 112 | if (prop === "color") prop = "color1"; |
74 | 113 | ||
75 | // make sure we have legitimate imput | 114 | // make sure we have legitimate imput |
76 | var ok = this.validateProperty( prop, value ); | 115 | var ok = this.validateProperty( prop, value ); |
@@ -79,12 +118,9 @@ function RadialGradientMaterial() | |||
79 | 118 | ||
80 | switch (prop) | 119 | switch (prop) |
81 | { | 120 | { |
82 | case "startColor": this.setStartColor(value); break; | 121 | case "color1": this.setColor1( value ); break; |
83 | case "stopColor": this.setStopColor(value); break; | 122 | case "color2": this.setColor2( value ); break; |
84 | case "innerCircleRadius": this.setInnerCircleRadius( value ); break; | 123 | case "angle": this.setAngle( value ); break; |
85 | case "mainCircleRadius": this.setMainCircleRadius( value ); break; | ||
86 | case "innerCircleCenter": this.setInnerCircleCenter( value ); break; | ||
87 | case "mainCircleCenter": this.setMainCircleCenter( value ); break; | ||
88 | } | 124 | } |
89 | 125 | ||
90 | this.updateValuesInShader(); | 126 | this.updateValuesInShader(); |
@@ -115,25 +151,30 @@ function RadialGradientMaterial() | |||
115 | 151 | ||
116 | this.updateValuesInShader = function() | 152 | this.updateValuesInShader = function() |
117 | { | 153 | { |
118 | if (!this._shader || !this._shader.default) return; | 154 | if (this._shader && this._shader.default) |
119 | 155 | { | |
120 | // calculate values | 156 | //this._shader.default.u_colorCount.set( [4] ); |
121 | var mainCircleRadius = this.getMainCircleRadius(); | 157 | |
122 | var innerCircleRadius = this.getInnerCircleRadius(); | 158 | var c; |
123 | var innerCircleCenter = this.getInnerCircleCenter(); | 159 | c = this.getColor1(); |
124 | var mainCircleCenter = this.getMainCircleCenter(); | 160 | this._shader.default.u_color1.set( c ); |
125 | var radiusDelta = innerCircleRadius - mainCircleRadius; | 161 | c = this.getColor2(); |
126 | var innerCircleCenterMinusCenter = VecUtils.vecSubtract( 2, innerCircleCenter, mainCircleCenter ); | 162 | this._shader.default.u_color2.set( c ); |
127 | var u_A = VecUtils.vecDot( 2, innerCircleCenterMinusCenter, innerCircleCenterMinusCenter) - (radiusDelta * radiusDelta) | 163 | c = this.getColor3(); |
128 | 164 | this._shader.default.u_color3.set( c ); | |
129 | // set values | 165 | c = this.getColor4(); |
130 | this._shader.default.u_center.set( innerCircleCenter ); | 166 | this._shader.default.u_color4.set( c ); |
131 | this._shader.default.u_startColor.set( this.getStartColor() ); | 167 | |
132 | this._shader.default.u_stopColor.set( this.getStopColor() ); | 168 | var s; |
133 | this._shader.default.u_innerCircleCenterMinusCenter.set( innerCircleCenterMinusCenter ); | 169 | s = this.getColorStop1(); |
134 | this._shader.default.u_radius.set( [mainCircleRadius] ); | 170 | this._shader.default.u_colorStop1.set( [s] ); |
135 | this._shader.default.u_A.set( [ u_A] ); | 171 | s = this.getColorStop2(); |
136 | this._shader.default.u_radiusDelta.set( [radiusDelta] ); | 172 | this._shader.default.u_colorStop2.set( [s] ); |
173 | s = this.getColorStop3(); | ||