diff options
Diffstat (limited to 'js/lib/rdge/materials/linear-gradient-material.js')
-rwxr-xr-x | js/lib/rdge/materials/linear-gradient-material.js | 311 |
1 files changed, 191 insertions, 120 deletions
diff --git a/js/lib/rdge/materials/linear-gradient-material.js b/js/lib/rdge/materials/linear-gradient-material.js index 981bf9fd..f8b77a63 100755 --- a/js/lib/rdge/materials/linear-gradient-material.js +++ b/js/lib/rdge/materials/linear-gradient-material.js | |||
@@ -1,24 +1,25 @@ | |||
1 | /* <copyright> | 1 | /* <copyright> |
2 | Copyright (c) 2012, Motorola Mobility, Inc | 2 | Copyright (c) 2012, Motorola Mobility LLC. |
3 | All Rights Reserved. | 3 | All Rights Reserved. |
4 | BSD License. | ||
5 | 4 | ||
6 | Redistribution and use in source and binary forms, with or without | 5 | Redistribution and use in source and binary forms, with or without |
7 | modification, are permitted provided that the following conditions are met: | 6 | modification, are permitted provided that the following conditions are met: |
8 | 7 | ||
9 | - Redistributions of source code must retain the above copyright notice, | 8 | * Redistributions of source code must retain the above copyright notice, |
10 | this list of conditions and the following disclaimer. | 9 | this list of conditions and the following disclaimer. |
11 | - Redistributions in binary form must reproduce the above copyright | 10 | |
12 | notice, this list of conditions and the following disclaimer in the | 11 | * Redistributions in binary form must reproduce the above copyright notice, |
13 | documentation and/or other materials provided with the distribution. | 12 | this list of conditions and the following disclaimer in the documentation |
14 | - Neither the name of Motorola Mobility nor the names of its contributors | 13 | and/or other materials provided with the distribution. |
15 | may be used to endorse or promote products derived from this software | 14 | |
16 | without specific prior written permission. | 15 | * Neither the name of Motorola Mobility LLC nor the names of its |
16 | contributors may be used to endorse or promote products derived from this | ||
17 | software without specific prior written permission. | ||
17 | 18 | ||
18 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" |
19 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE | 20 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE |
20 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE | 21 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE |
21 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE | 22 | ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE |
22 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR | 23 | LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR |
23 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF | 24 | CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF |
24 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS | 25 | SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS |
@@ -47,15 +48,15 @@ var LinearGradientMaterial = function LinearGradientMaterial() { | |||
47 | this._colorStop2 = 0.3; | 48 | this._colorStop2 = 0.3; |
48 | this._colorStop3 = 0.6; | 49 | this._colorStop3 = 0.6; |
49 | this._colorStop4 = 1.0; | 50 | this._colorStop4 = 1.0; |
50 | // this._colorCount = 4; | 51 | // this._colorCount = 4; |
51 | this._angle = 0.0; // the shader takes [cos(a), sin(a)] | 52 | this._angle = 0.0; // the shader takes [cos(a), sin(a)] |
52 | 53 | ||
53 | this._textureTransform = [1,0,0, 0,1,0, 0,0,1]; | 54 | this._textureTransform = [1,0,0, 0,1,0, 0,0,1]; |
54 | 55 | ||
55 | /////////////////////////////////////////////////////////////////////// | 56 | /////////////////////////////////////////////////////////////////////// |
56 | // Property Accessors | 57 | // Property Accessors |
57 | /////////////////////////////////////////////////////////////////////// | 58 | /////////////////////////////////////////////////////////////////////// |
58 | this.getShaderDef = function() { return linearGradientMaterialDef; } | 59 | this.getShaderDef = function() { return linearGradientMaterialDef; } |
59 | 60 | ||
60 | /////////////////////////////////////////////////////////////////////// | 61 | /////////////////////////////////////////////////////////////////////// |
61 | // Material Property Accessors | 62 | // Material Property Accessors |
@@ -95,123 +96,193 @@ var LinearGradientMaterial = function LinearGradientMaterial() { | |||
95 | this._materialNode.setShader(this._shader); | 96 | this._materialNode.setShader(this._shader); |
96 | 97 | ||
97 | 98 | ||
98 | if (this._shader && this._shader['default']) | 99 | if (this._shader && this._shader['default']) |
99 | this._shader['default'].u_texTransform.set( this._textureTransform ); | 100 | this._shader['default'].u_texTransform.set( this._textureTransform ); |
100 | 101 | ||
101 | 102 | ||
102 | // send the current values to the shader | 103 | // send the current values to the shader |
103 | this.setShaderValues(); | 104 | this.setShaderValues(); |
104 | this.update( 0 ); | 105 | this.update( 0 ); |
106 | }; | ||
107 | |||
108 | this.resetToDefault = function() | ||
109 | { | ||
110 | this._propValues[this._propNames[0]] = this._color1.slice(0); | ||
111 | this._propValues[this._propNames[1]] = this._color2.slice(0); | ||
112 | this._propValues[this._propNames[2]] = this._color3.slice(0); | ||
113 | this._propValues[this._propNames[3]] = this._color4.slice(0); | ||
114 | |||
115 | this._propValues[this._propNames[4]] = this._colorStop1; | ||
116 | this._propValues[this._propNames[5]] = this._colorStop2; | ||
117 | this._propValues[this._propNames[6]] = this._colorStop3; | ||
118 | this._propValues[this._propNames[7]] = this._colorStop4; | ||
119 | |||
120 | this._propValues[this._propNames[8]] = [ Math.cos(this._angle), Math.sin(this._angle) ]; | ||
121 | |||
122 | var nProps = this._propNames.length; | ||
123 | for (var i=0; i<nProps; i++) { | ||
124 | this.setProperty( this._propNames[i], this._propValues[this._propNames[i]] ); | ||
125 | } | ||
126 | }; | ||
127 | |||
128 | // Only Linear Gradient and Radial Gradients support gradients; | ||
129 | this.gradientType = "linear"; | ||
130 | |||
131 | this.getGradientData = function() { | ||
132 | var angle = Math.round(this._angle*180/Math.PI), | ||
133 | color, | ||
134 | colorStr, | ||
135 | css = "-webkit-gradient(linear, " + angle + "deg"; | ||
136 | |||
137 | // TODO - Angle is not supported in -webkit-gradient syntax, so just default to across: | ||
138 | css = '-webkit-gradient(linear, left top, right top'; | ||
139 | |||
140 | // TODO - Also, Color Model requires from and to in the gradient string | ||
141 | color = this.getProperty('u_color1'); | ||
142 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
143 | css += ', from(rgba(' + colorStr + '))'; | ||
144 | |||
145 | for (var i=2; i < 4; i++) { | ||
146 | color = this.getProperty('u_color'+i); | ||
147 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
148 | css += ', color-stop(' + this.getProperty('u_colorStop'+i) + ', rgba(' + colorStr + '))'; | ||
149 | } | ||
150 | |||
151 | color = this.getProperty('u_color4'); | ||
152 | colorStr = Math.round(color[0] * 255) + ', ' + Math.round(color[1] * 255) + ', ' + Math.round(color[2] * 255) + ', ' + Math.round(color[3] * 100); | ||
153 | css += ', to(rgba(' + colorStr + '))'; | ||
154 | |||
155 | css += ')'; | ||
156 | |||
157 | return css; | ||
158 | }; | ||
159 | |||
160 | // Only Linear Gradient and Radial Gradient have gradient data. | ||
161 | this.setGradientData = function(colors) { | ||
162 | var len = colors.length; | ||
163 | // TODO - Current shaders only support 4 color stops | ||
164 | if (len > 4) { | ||
165 | len = 4; | ||
166 | } | ||
167 | |||
168 | for (var n = 0; n < len; n++) { | ||
169 | var position = colors[n].position/100; | ||
170 | var cs = colors[n].value; | ||
171 | var stop = [cs.r/255, cs.g/255, cs.b/255, cs.a]; | ||
172 | |||
173 | this.setProperty("u_color" + (n + 1), stop.slice(0)); | ||
174 | this.setProperty("u_colorStop" + (n + 1), position); | ||
175 | } | ||
105 | }; | 176 | }; |
106 | }; | 177 | }; |
107 | 178 | ||
108 | /////////////////////////////////////////////////////////////////////////////////////// | 179 | /////////////////////////////////////////////////////////////////////////////////////// |
109 | // RDGE shader | 180 | // RDGE shader |
110 | 181 | ||
111 | // shader spec (can also be loaded from a .JSON file, or constructed at runtime) | 182 | // shader spec (can also be loaded from a .JSON file, or constructed at runtime) |
112 | var linearGradientMaterialDef = | 183 | var linearGradientMaterialDef = |
113 | {'shaders': | 184 | {'shaders': |
114 | { | 185 | { |
115 | // shader file | 186 | // shader file |
116 | 'defaultVShader':"assets/shaders/linearGradient.vert.glsl", | 187 | 'defaultVShader':"assets/shaders/linearGradient.vert.glsl", |
117 | 'defaultFShader':"assets/shaders/linearGradient.frag.glsl", | 188 | 'defaultFShader':"assets/shaders/linearGradient.frag.glsl", |
118 | 189 | ||
119 | // this shader is inline | 190 | // this shader is inline |
120 | 'dirLightVShader': "\ | 191 | 'dirLightVShader': "\ |
121 | uniform mat4 u_mvMatrix;\ | 192 | uniform mat4 u_mvMatrix;\ |
122 | uniform mat4 u_normalMatrix;\ | 193 | uniform mat4 u_normalMatrix;\ |
123 | uniform mat4 u_projMatrix;\ | 194 | uniform mat4 u_projMatrix;\ |
124 | uniform mat4 u_worldMatrix;\ | 195 | uniform mat4 u_worldMatrix;\ |
125 | attribute vec3 a_pos;\ | 196 | attribute vec3 a_pos;\ |
126 | attribute vec3 a_nrm;\ | 197 | attribute vec3 a_nrm;\ |
127 | varying vec3 vNormal;\ | 198 | varying vec3 vNormal;\ |
128 | varying vec3 vPos;\ | 199 | varying vec3 vPos;\ |
129 | void main() {\ | 200 | void main() {\ |
130 | vNormal.xyz = (u_normalMatrix*vec4(a_nrm, 0.0)).xyz;\ | 201 | vNormal.xyz = (u_normalMatrix*vec4(a_nrm, 0.0)).xyz;\ |
131 | gl_Position = u_projMatrix * u_mvMatrix * vec4(a_pos,1.0);\ | 202 | gl_Position = u_projMatrix * u_mvMatrix * vec4(a_pos,1.0);\ |
132 | vPos = (u_worldMatrix * vec4(a_pos,1.0)).xyz;\ | 203 | vPos = (u_worldMatrix * vec4(a_pos,1.0)).xyz;\ |
133 | }", | 204 | }", |
134 | 'dirLightFShader': "\ | 205 | 'dirLightFShader': "\ |
135 | precision highp float;\ | 206 | precision highp float;\ |
136 | uniform vec4 u_light1Diff;\ | 207 | uniform vec4 u_light1Diff;\ |
137 | uniform vec3 u_light1Pos;\ | 208 | uniform vec3 u_light1Pos;\ |
138 | uniform vec4 u_light2Diff;\ | 209 | uniform vec4 u_light2Diff;\ |
139 | uniform vec3 u_light2Pos;\ | 210 | uniform vec3 u_light2Pos;\ |
140 | varying vec3 vNormal;\ |