aboutsummaryrefslogtreecommitdiff
path: root/js/lib/rdge/materials/linear-gradient-material.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/lib/rdge/materials/linear-gradient-material.js')
-rwxr-xr-xjs/lib/rdge/materials/linear-gradient-material.js290
1 files changed, 180 insertions, 110 deletions
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js
index 981bf9fd..e1d31a42 100755
--- a/js/lib/rdge/materials/linear-gradient-material.js
+++ b/js/lib/rdge/materials/linear-gradient-material.js
@@ -26,7 +26,7 @@ INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
26CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 26CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
27ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 27ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
28POSSIBILITY OF SUCH DAMAGE. 28POSSIBILITY OF SUCH DAMAGE.
29</copyright> */ 29 </copyright> */
30 30
31var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser; 31var MaterialParser = require("js/lib/rdge/materials/material-parser").MaterialParser;
32var Material = require("js/lib/rdge/materials/material").Material; 32var Material = require("js/lib/rdge/materials/material").Material;
@@ -47,15 +47,15 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
47 this._colorStop2 = 0.3; 47 this._colorStop2 = 0.3;
48 this._colorStop3 = 0.6; 48 this._colorStop3 = 0.6;
49 this._colorStop4 = 1.0; 49 this._colorStop4 = 1.0;
50 // this._colorCount = 4; 50 // this._colorCount = 4;
51 this._angle = 0.0; // the shader takes [cos(a), sin(a)] 51 this._angle = 0.0; // the shader takes [cos(a), sin(a)]
52 52
53 this._textureTransform = [1,0,0, 0,1,0, 0,0,1]; 53 this._textureTransform = [1,0,0, 0,1,0, 0,0,1];
54 54
55 /////////////////////////////////////////////////////////////////////// 55 ///////////////////////////////////////////////////////////////////////
56 // Property Accessors 56 // Property Accessors
57 /////////////////////////////////////////////////////////////////////// 57 ///////////////////////////////////////////////////////////////////////
58 this.getShaderDef = function() { return linearGradientMaterialDef; } 58 this.getShaderDef = function() { return linearGradientMaterialDef; }
59 59
60 /////////////////////////////////////////////////////////////////////// 60 ///////////////////////////////////////////////////////////////////////
61 // Material Property Accessors 61 // Material Property Accessors
@@ -95,123 +95,193 @@ var LinearGradientMaterial = function LinearGradientMaterial() {
95 this._materialNode.setShader(this._shader); 95 this._materialNode.setShader(this._shader);
96 96
97 97
98 if (this._shader && this._shader['default']) 98 if (this._shader && this._shader['default'])
99 this._shader['default'].u_texTransform.set( this._textureTransform ); 99 this._shader['default'].u_texTransform.set( this._textureTransform );
100 100
101 101
102 // send the current values to the shader 102 // send the current values to the shader
103 this.setShaderValues(); 103 this.setShaderValues();
104 this.update( 0 ); 104 this.update( 0 );
105 };
106
107 this.resetToDefault = function()
108 {
109 this._propValues[this._propNames[0]] = this._color1.slice(0);
110 this._propValues[this._propNames[1]] = this._color2.slice(0);
111 this._propValues[this._propNames[2]] = this._color3.slice(0);
112 this._propValues[this._propNames[3]] = this._color4.slice(0);
113
114 this._propValues[this._propNames[4]] = this._colorStop1;
115 this._propValues[this._propNames[5]] = this._colorStop2;
116 this._propValues[this._propNames[6]] = this._colorStop3;
117 this._propValues[this._propNames[7]] = this._colorStop4;
118
119 this._propValues[this._propNames[8]] = [ Math.cos(this._angle), Math.sin(this._angle) ];
120
121 var nProps = this._propNames.length;
122 for (var i=0; i<nProps; i++) {
123 this.setProperty( this._propNames[i], this._propValues[this._propNames[i]] );
124 }
125 };
126
127 // Only Linear Gradient and Radial Gradients support gradients;
128 this.gradientType = "linear";
129
130 this.getGradientData = function() {
131 var angle = Math.round(this._angle*180/Math.PI),
132 color,
133 colorStr,
134 css = "-webkit-gradient(linear, " + angle + "deg";
135
136 // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across:
137 css = '-webkit-gradient(linear, left top, right top';
138
139 // TODO - Also, Color Model requires from and to in the gradient string
140 color = this.getProperty('u_color1');
141 colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
142 css += ', from(rgba(' + colorStr + '))';
143
144 for (var i=2; i < 4; i++) {
145 color = this.getProperty('u_color'+i);
146 colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
147 css += ', color-stop(' + this.getProperty('u_colorStop'+i) + ', rgba(' + colorStr + '))';
148 }
149
150 color = this.getProperty('u_color4');
151 colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100);
152 css += ', to(rgba(' + colorStr + '))';
153
154 css += ')';
155
156 return css;
157 };
158
159 // Only Linear Gradient and Radial Gradient have gradient data.
160 this.setGradientData = function(colors) {
161 var len = colors.length;
162 // TODO - Current shaders only support 4 color stops
163 if (len > 4) {
164 len = 4;
165 }
166
167 for (var n = 0; n < len; n++) {
168 var position = colors[n].position/100;
169 var cs = colors[n].value;
170 var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a];
171
172 this.setProperty("u_color" + (n + 1), stop.slice(0));
173 this.setProperty("u_colorStop" + (n + 1), position);
174 }
105 }; 175 };
106}; 176};
107 177
108/////////////////////////////////////////////////////////////////////////////////////// 178///////////////////////////////////////////////////////////////////////////////////////
109// RDGE shader 179// RDGE shader
110 180
111// shader spec (can also be loaded from a .JSON file, or constructed at runtime) 181// shader spec (can also be loaded from a .JSON file, or constructed at runtime)
112var linearGradientMaterialDef = 182var linearGradientMaterialDef =
113{'shaders': 183{'shaders':
114 { 184 {
115 // shader file 185 // shader file
116 'defaultVShader':"assets/shaders/linearGradient.vert.glsl", 186 'defaultVShader':"assets/shaders/linearGradient.vert.glsl",
117 'defaultFShader':"assets/shaders/linearGradient.frag.glsl", 187 'defaultFShader':"assets/shaders/linearGradient.frag.glsl",
118 188
119 // this shader is inline 189 // this shader is inline
120 'dirLightVShader': "\ 190 'dirLightVShader': "\
121 uniform mat4 u_mvMatrix;\ 191 uniform mat4 u_mvMatrix;\
122 uniform mat4 u_normalMatrix;\ 192 uniform mat4 u_normalMatrix;\
123 uniform mat4 u_projMatrix;\ 193 uniform mat4 u_projMatrix;\
124 uniform mat4 u_worldMatrix;\ 194 uniform mat4 u_worldMatrix;\
125 attribute vec3 a_pos;\ 195 attribute vec3 a_pos;\
126 attribute vec3 a_nrm;\ 196 attribute vec3 a_nrm;\
127 varying vec3 vNormal;\ 197 varying vec3 vNormal;\
128 varying vec3 vPos;\ 198 varying vec3 vPos;\
129 void main() {\ 199 void main() {\
130 vNormal.xyz = (u_normalMatrix*vec4(a_nrm, 0.0)).xyz;\ 200 vNormal.xyz = (u_normalMatrix*vec4(a_nrm, 0.0)).xyz;\
131 gl_Position = u_projMatrix * u_mvMatrix * vec4(a_pos,1.0);\ 201 gl_Position = u_projMatrix * u_mvMatrix * vec4(a_pos,1.0);\
132 vPos = (u_worldMatrix * vec4(a_pos,1.0)).xyz;\ 202 vPos = (u_worldMatrix * vec4(a_pos,1.0)).xyz;\
133 }", 203 }",
134 'dirLightFShader': "\ 204 'dirLightFShader': "\
135 precision highp float;\ 205 precision highp float;\
136 uniform vec4 u_light1Diff;\ 206 uniform vec4 u_light1Diff;\
137 uniform vec3 u_light1Pos;\ 207 uniform vec3 u_light1Pos;\
138 uniform vec4 u_light2Diff;\ 208 uniform vec4 u_light2Diff;\
139 uniform vec3 u_light2Pos;\ 209 uniform vec3 u_light2Pos;\
140 varying vec3 vNormal;\ 210 varying vec3 vNormal;\
141 varying vec3 vPos;\ 211 varying vec3 vPos;\
142 void main() {\ 212 void main() {\
143 vec3 light1 = vec3(u_light1Pos.x - vPos.x, u_light1Pos.y - vPos.y, u_light1Pos.z - vPos.z);\ 213 vec3 light1 = vec3(u_light1Pos.x - vPos.x, u_light1Pos.y - vPos.y, u_light1Pos.z - vPos.z);\
144 vec3 light2 = vec3(u_light2Pos.x - vPos.x, u_light2Pos.y - vPos.y, u_light2Pos.z - vPos.z);\ 214 vec3 light2 = vec3(u_light2Pos.x - vPos.x, u_light2Pos.y - vPos.y, u_light2Pos.z - vPos.z);\
145 float t = 0.75;\ 215 float t = 0.75;\
146 float range = t*t;\ 216 float range = t*t;\
147 float alpha1 = max(0.0, 1.0 - ( (light1.x*light1.x)/range + (light1.y*light1.y)/range + (light1.z*light1.z)/range));\ 217 float alpha1 = max(0.0, 1.0 - ( (light1.x*light1.x)/range + (light1.y*light1.y)/range + (light1.z*light1.z)/range));\
148 float alpha2 = max(0.0, 1.0 - ( (light2.x*light2.x)/range + (light2.y*light2.y)/range + (light2.z*light2.z)/range));\ 218 float alpha2 = max(0.0, 1.0 - ( (light2.x*light2.x)/range + (light2.y*light2.y)/range + (light2.z*light2.z)/range));\
149 gl_FragColor = vec4((u_light2Diff*alpha2 + u_light1Diff*alpha1).rgb, 1.0);\ 219 gl_FragColor = vec4((u_light2Diff*alpha2 + u_light1Diff*alpha1).rgb, 1.0);\
150 }" 220 }"
151 }, 221 },
152 'techniques': 222 'techniques':
153 { 223 {
154 'default': 224 'default':
155 [ 225 [
156 { 226 {