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.js240
1 files changed, 240 insertions, 0 deletions
diff --git a/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js b/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
new file mode 100644
index 00000000..70c0e952
--- /dev/null
+++ b/js/helper-classes/RDGE/Materials/RadialGradientMaterial.js
@@ -0,0 +1,240 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6
7
8///////////////////////////////////////////////////////////////////////
9// Class GLMaterial
10// RDGE representation of a material.
11///////////////////////////////////////////////////////////////////////
12function RadialGradientMaterial()
13{
14 // initialize the inherited members
15 this.inheritedFrom = GLMaterial;
16 this.inheritedFrom();
17
18 ///////////////////////////////////////////////////////////////////////
19 // Instance variables
20 ///////////////////////////////////////////////////////////////////////
21 this._name = "RadialGradientMaterial";
22 this._shaderName = "radialGradient";
23
24 this._startColor = [1, 0, 0, 1];
25 this._stopColor = [0, 1, 0, 1];
26
27 this._mainCircleRadius = 0.5;
28 this._innerCircleRadius = 0.05;
29 this._innerCircleCenter = [0.5, 0.5];
30 this._mainCircleCenter = [0.5, 0.5];
31
32 ///////////////////////////////////////////////////////////////////////
33 // Property Accessors
34 ///////////////////////////////////////////////////////////////////////
35 this.getName = function() { return this._name; }
36 this.getShaderName = function() { return this._shaderName; }
37
38 this.getStartColor = function() { return this._startColor.slice(0); }
39 this.setStartColor = function(c) { this._startColor = c.slice(0); }
40
41 this.getStopColor = function() { return this._stopColor.slice(0); }
42 this.setStopColor = function(c) { this._stopColor = c.slice(0); }
43
44 this.getMainCircleRadius = function() { return this._mainCircleRadius; }
45 this.setMainCircleRadius = function(r) { this._mainCircleRadius = r; }
46
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
56 ///////////////////////////////////////////////////////////////////////
57 // Material Property Accessors
58 ///////////////////////////////////////////////////////////////////////
59 this._propNames = ["startColor", "stopColor", "mainCircleRadius", "innerCircleRadius", "mainCircleCenter", "innerCircleCenter"];
60 this._propLabels = ["Start Color", "Stop Color", "Main Circle Radius", "Inner Circle Radius", "Main Circle Center", "Inner Circle Center"];
61 this._propTypes = ["color", "color", "float", "float", "vector2d", "vector2d"];
62 this._propValues = [];
63
64 this._propValues[ this._propNames[0] ] = this._startColor.slice(0);
65 this._propValues[ this._propNames[1] ] = this._stopColor.slice(0);
66 this._propValues[ this._propNames[2] ] = this.getMainCircleRadius();
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
71 this.setProperty = function( prop, value )
72 {
73 if (prop === "color") prop = "startColor";
74
75 // make sure we have legitimate imput
76 var ok = this.validateProperty( prop, value );
77 if (!ok)
78 console.log( "invalid property in Radial Gradient Material:" + prop + " : " + value );
79
80 switch (prop)
81 {
82 case "startColor": this.setStartColor(value); break;
83 case "stopColor": this.setStopColor(value); break;
84 case "innerCircleRadius": this.setInnerCircleRadius( value ); break;
85 case "mainCircleRadius": this.setMainCircleRadius( value ); break;
86 case "innerCircleCenter": this.setInnerCircleCenter( value ); break;
87 case "mainCircleCenter": this.setMainCircleCenter( value ); break;
88 }
89
90 this.updateValuesInShader();
91 }
92 ///////////////////////////////////////////////////////////////////////
93
94
95 ///////////////////////////////////////////////////////////////////////
96 // Methods
97 ///////////////////////////////////////////////////////////////////////
98 // duplcate method requirde
99 this.dup = function() { return new RadialGradientMaterial(); }
100
101 this.init = function()
102 {
103 // set up the shader
104 this._shader = new jshader();
105 this._shader.def = radialGradientMaterialDef;
106 this._shader.init();
107
108 // set up the material node
109 this._materialNode = createMaterialNode("radialGradientMaterial");
110 this._materialNode.setShader(this._shader);
111
112 // set the shader values in the shader
113 this.updateValuesInShader();
114 }
115
116 this.updateValuesInShader = function()
117 {
118 if (!this._shader || !this._shader.default) return;
119
120 // calculate values
121 var mainCircleRadius = this.getMainCircleRadius();
122 var innerCircleRadius = this.getInnerCircleRadius();
123 var innerCircleCenter = this.getInnerCircleCenter();
124 var mainCircleCenter = this.getMainCircleCenter();
125 var radiusDelta = innerCircleRadius - mainCircleRadius;
126 var innerCircleCenterMinusCenter = VecUtils.vecSubtract( 2, innerCircleCenter, mainCircleCenter );
127 var u_A = VecUtils.vecDot( 2, innerCircleCenterMinusCenter, innerCircleCenterMinusCenter) - (radiusDelta * radiusDelta)
128
129 // set values
130 this._shader.default.u_center.set( innerCircleCenter );
131 this._shader.default.u_startColor.set( this.getStartColor() );
132 this._shader.default.u_stopColor.set( this.getStopColor() );
133 this._shader.default.u_innerCircleCenterMinusCenter.set( innerCircleCenterMinusCenter );
134 this._shader.default.u_radius.set( [mainCircleRadius] );
135 this._shader.default.u_A.set( [ u_A] );
136 this._shader.default.u_radiusDelta.set( [radiusDelta] );
137 }
138
139 this.export = function()
140 {
141 // every material needs the base type and instance name
142 var exportStr = "material: " + this.getShaderName() + "\n";
143 exportStr += "name: " + this.getName() + "\n";
144
145 exportStr += "innerCircleRadius: " + this.getInnerCircleRadius() + "\n";
146 exportStr += "mainCircleRadius: " + this.getMainCircleRadius() + "\n";
147 exportStr += "innerCircleCenter: " + String(this.getInnerCircleCenter()) + "\n";
148 exportStr += "mainCircleCenter: " + String(this.getMainCircleCenter()) + "\n";
149
150 // every material needs to terminate like this
151 exportStr += "endMaterial\n";
152
153 return exportStr;
154 }
155
156 this.import = function( importStr )
157 {
158 var pu = new ParseUtils( importStr );
159 var material = pu.nextValue( "material: " );
160 if (material != this.getShaderName()) throw new Error( "ill-formed material" );
161 this.setName( pu.nextValue( "name: ") );
162
163 var rtnStr;
164 try
165 {
166 var innerCircleRadius = Number( pu.nextValue("innerCircleRadius: ") ),
167 mainCircleRadius = Number( pu.nextValue("mainCircleRadius: ") ),
168 innerCircleCenter = eval( "[" + pu.nextValue( "innerCircleCenter: " ) + "]" );
169 mainCircleCenter = eval( "[" + pu.nextValue( "mainCircleCenter: " ) + "]" );
170
171 this._innerCircleRadius = innerCircleRadius;
172 this._mainCircleRadius = mainCircleRadius;
173 this._innerCircleCenter = innerCircleCenter;
174 this.mainCircleCenter = mainCircleCenter;
175 this.updateValuesInShader();
176
177 var endKey = "endMaterial\n";
178 var index = importStr.indexOf( endKey );
179 index += endKey.length;
180 rtnStr = importStr.substr( index );
181 }
182 catch (e)
183 {
184 throw new Error( "could not import material: " + importStr );
185 }
186
187 return rtnStr;
188 }
189}
190
191///////////////////////////////////////////////////////////////////////////////////////
192// RDGE shader
193
194// shader spec (can also be loaded from a .JSON file, or constructed at runtime)
195var radialGradientMaterialDef =
196{'shaders':
197 {
198 'defaultVShader':"assets/shaders/radialGradient.vert.glsl",
199 'defaultFShader':"assets/shaders/radialGradient.frag.glsl",
200 },
201 'techniques':