diff options
-rw-r--r-- | assets/shaders/Water2.frag.glsl | 30 | ||||
-rw-r--r-- | js/lib/rdge/materials/water-material.js | 172 | ||||
-rwxr-xr-x | js/panels/Materials/materials-popup.reel/materials-popup.js | 2 |
3 files changed, 169 insertions, 35 deletions
diff --git a/assets/shaders/Water2.frag.glsl b/assets/shaders/Water2.frag.glsl index 39b6aa55..49b2b647 100644 --- a/assets/shaders/Water2.frag.glsl +++ b/assets/shaders/Water2.frag.glsl | |||
@@ -8,20 +8,27 @@ uniform vec2 u_resolution; | |||
8 | const float PI = 3.1415926535897932; | 8 | const float PI = 3.1415926535897932; |
9 | 9 | ||
10 | //speed | 10 | //speed |
11 | const float speed = 0.2; | 11 | //const float speed = 0.2; |
12 | const float speed_x = 0.3; | 12 | const float speed_x = 0.3; |
13 | const float speed_y = 0.3; | 13 | const float speed_y = 0.3; |
14 | 14 | ||
15 | // geometry | 15 | // geometry |
16 | const float intensity = 3.; | 16 | //const float intensity = 3.; |
17 | const int steps = 8; | 17 | const int steps = 8; |
18 | const float frequency = 4.0; | 18 | const float frequency = 4.0; |
19 | const int angle = 7; // better when a prime | 19 | const int angle = 7; // better when a prime |
20 | 20 | ||
21 | // reflection and emboss | 21 | // reflection and emboss |
22 | const float delta = 20.; | 22 | //const float delta = 20.; |
23 | const float intence = 400.; | 23 | const float intence = 400.; |
24 | const float emboss = 0.3; | 24 | //const float emboss = 0.3; |
25 | |||
26 | // uniforms | ||
27 | uniform float u_emboss; | ||
28 | uniform float u_delta; | ||
29 | //uniform float u_intence; | ||
30 | uniform float u_intensity; | ||
31 | uniform float u_speed; | ||
25 | 32 | ||
26 | //---------- crystals effect | 33 | //---------- crystals effect |
27 | 34 | ||
@@ -34,9 +41,9 @@ const float emboss = 0.3; | |||
34 | { | 41 | { |
35 | vec2 adjc = coord; | 42 | vec2 adjc = coord; |
36 | theta = delta_theta*float(i); | 43 | theta = delta_theta*float(i); |
37 | adjc.x += cos(theta)*u_time*speed + u_time * speed_x; | 44 | adjc.x += cos(theta)*u_time*u_speed + u_time * speed_x; |
38 | adjc.y -= sin(theta)*u_time*speed - u_time * speed_y; | 45 | adjc.y -= sin(theta)*u_time*u_speed - u_time * speed_y; |
39 | col = col + cos( (adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*intensity; | 46 | col = col + cos( (adjc.x*cos(theta) - adjc.y*sin(theta))*frequency)*u_intensity; |
40 | } | 47 | } |
41 | 48 | ||
42 | return cos(col); | 49 | return cos(col); |
@@ -49,18 +56,17 @@ void main(void) | |||
49 | vec2 p = (gl_FragCoord.xy) / u_resolution.xy, c1 = p, c2 = p; | 56 | vec2 p = (gl_FragCoord.xy) / u_resolution.xy, c1 = p, c2 = p; |
50 | float cc1 = col(c1); | 57 | float cc1 = col(c1); |
51 | 58 | ||
52 | c2.x += u_resolution.x/delta; | 59 | c2.x += u_resolution.x/u_delta; |
53 | float dx = emboss*(cc1-col(c2))/delta; | 60 | float dx = u_emboss*(cc1-col(c2))/u_delta; |
54 | 61 | ||
55 | c2.x = p.x; | 62 | c2.x = p.x; |
56 | c2.y += u_resolution.y/delta; | 63 | c2.y += u_resolution.y/u_delta; |
57 | float dy = emboss*(cc1-col(c2))/delta; | 64 | float dy = u_emboss*(cc1-col(c2))/u_delta; |
58 | 65 | ||
59 | c1.x += dx; | 66 | c1.x += dx; |
60 | c1.y = -(c1.y+dy); | 67 | c1.y = -(c1.y+dy); |
61 | 68 | ||
62 | float alpha = 1.+dot(dx,dy)*intence; | 69 | float alpha = 1.+dot(dx,dy)*intence; |
63 | gl_FragColor = texture2D(u_tex0,c1)*(alpha); | 70 | gl_FragColor = texture2D(u_tex0,c1)*(alpha); |
64 | // gl_FragColor = vec4(col(p),0,0,1); | ||
65 | 71 | ||
66 | } | 72 | } |
diff --git a/js/lib/rdge/materials/water-material.js b/js/lib/rdge/materials/water-material.js index 18a73915..1f0aa46e 100644 --- a/js/lib/rdge/materials/water-material.js +++ b/js/lib/rdge/materials/water-material.js | |||
@@ -23,14 +23,29 @@ var WaterMaterial = function WaterMaterial() { | |||
23 | 23 | ||
24 | this._time = 0.0; | 24 | this._time = 0.0; |
25 | this._dTime = 0.01; | 25 | this._dTime = 0.01; |
26 | this._emboss = 0.3; | ||
27 | this._delta = 20.0; | ||
28 | this._intensity = 3.0; | ||
29 | |||
30 | this._speed = 0.2; | ||
26 | 31 | ||
27 | /////////////////////////////////////////////////////////////////////// | 32 | /////////////////////////////////////////////////////////////////////// |
28 | // Properties | 33 | // Properties |
29 | /////////////////////////////////////////////////////////////////////// | 34 | /////////////////////////////////////////////////////////////////////// |
30 | // all defined in parent PulseMaterial.js | 35 | // all defined in parent PulseMaterial.js |
31 | // load the local default value | 36 | // load the local default value |
32 | this._propValues = []; | 37 | //this._propValues = []; |
33 | this._propValues[this._propNames[0]] = this._texMap.slice(0); | 38 | //this._propValues[this._propNames[0]] = this._texMap.slice(0); |
39 | this._propNames = ["texmap", "emboss", "delta", "intensity", "speed"]; | ||
40 | this._propLabels = ["Texture map", "Emboss", "Delta", "Intensity", "Speed"]; | ||
41 | this._propTypes = ["file", "float", "float", "float", "float"]; | ||
42 | |||
43 | this._propValues = []; | ||
44 | this._propValues[ this._propNames[0] ] = this._texMap.slice(0); | ||
45 | this._propValues[ this._propNames[1] ] = this._emboss; | ||
46 | this._propValues[ this._propNames[2] ] = this._delta; | ||
47 | this._propValues[ this._propNames[3] ] = this._intensity; | ||
48 | this._propValues[ this._propNames[4] ] = this._speed; | ||
34 | 49 | ||
35 | /////////////////////////////////////////////////////////////////////// | 50 | /////////////////////////////////////////////////////////////////////// |
36 | // Methods | 51 | // Methods |
@@ -52,32 +67,141 @@ var WaterMaterial = function WaterMaterial() { | |||
52 | return newMat; | 67 | return newMat; |
53 | }; | 68 | }; |
54 | 69 | ||
70 | this.setProperty = function( prop, value ) { | ||
71 | // make sure we have legitimate imput | ||
72 | var ok = this.validateProperty( prop, value ); | ||
73 | if (!ok) { | ||
74 | console.log( "invalid property in Water Material:" + prop + " : " + value ); | ||
75 | } | ||
76 | |||
77 | switch (prop) | ||
78 | { | ||
79 | case "texmap": | ||
80 | this.setTextureMap(value); | ||
81 | break; | ||
82 | |||
83 | case "emboss": | ||
84 | this.setEmboss( value ); | ||
85 | break; | ||
86 | |||
87 | case "delta": | ||
88 | this.setDelta( value ); | ||
89 | break; | ||
90 | |||
91 | case "intensity": | ||
92 | this.setIntensity( value ); | ||
93 | break; | ||
94 | |||
95 | case "speed": | ||
96 | this.setSpeed( value ); | ||
97 | break; | ||
98 | |||
99 | case "color": | ||
100 | break; | ||
101 | } | ||
102 | }; | ||
103 | |||
55 | this.init = function (world) { | 104 | this.init = function (world) { |
56 | // save the world | 105 | // save the world |
57 | if (world) this.setWorld(world); | 106 | if (world) this.setWorld(world); |
107 | |||
108 | // set up the shader | ||
109 | this._shader = new RDGE.jshader(); | ||
110 | this._shader.def = waterMaterialDef; | ||
111 | this._shader.init(); | ||
112 | |||
113 | // set up the material node | ||
114 | this._materialNode = RDGE.createMaterialNode("waterMaterial" + "_" + world.generateUniqueNodeID()); | ||
115 | this._materialNode.setShader(this._shader); | ||
116 | |||
117 | this._time = 0; | ||
118 | if (this._shader && this._shader['default']) { | ||
119 | this._shader['default'].u_time.set([this._time]); | ||
120 | |||
121 | this._shader['default'].u_emboss.set( [this._emboss] ); | ||
122 | this._shader['default'].u_delta.set( [this._delta] ); | ||
123 | this._shader['default'].u_intensity.set( [this._intensity] ); | ||
124 | this._shader['default'].u_speed.set( [this._speed] ); | ||
125 | } | ||
126 | |||
127 | var texMapName = this._propValues[this._propNames[0]]; | ||
128 | this._glTex = new Texture( world, texMapName ); | ||
129 | |||
130 | // set the shader values in the shader | ||
131 | this.updateTexture(); | ||
132 | this.setResolution([world.getViewportWidth(), world.getViewportHeight()]); | ||
133 | this.update(0); | ||
134 | }; | ||
135 | |||
136 | this.setTextureMap = function( texMapName ) | ||
137 | { | ||
138 | this._texMap = texMapName.slice(); | ||
139 | this._propValues[ this._propNames[0] ] = this._texMap.slice(0); | ||
58 | 140 | ||
59 | // set up the shader | 141 | this._glTex = new Texture( this.getWorld(), texMapName ); |
60 | this._shader = new RDGE.jshader(); | 142 | this.updateTexture(); |
61 | this._shader.def = waterMaterialDef; | 143 | } |
62 | this._shader.init(); | ||
63 | 144 | ||
64 | // set up the material node | 145 | this.setEmboss = function( value ) |
65 | this._materialNode = RDGE.createMaterialNode("waterMaterial" + "_" + world.generateUniqueNodeID()); | 146 | { |
66 | this._materialNode.setShader(this._shader); | 147 | this._emboss = value; |
148 | this._propValues[ "emboss" ] = value; | ||
149 | |||
150 | var material = this._materialNode; | ||
151 | if (material) { | ||
152 | var technique = material.shaderProgram['default']; | ||
153 | var renderer = RDGE.globals.engine.getContext().renderer; | ||
154 | if (renderer && technique) { | ||
155 | technique.u_emboss.set( [value] ); | ||
156 | } | ||
157 | } | ||
158 | } | ||
67 | 159 | ||
68 | this._time = 0; | 160 | this.setIntensity = function( value ) |
69 | if (this._shader && this._shader['default']) { | 161 | { |
70 | this._shader['default'].u_time.set([this._time]); | 162 | this._intensity = value; |
71 | } | 163 | this._propValues[ "intensity" ] = value; |
164 | |||