aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/shaders/Water2.frag.glsl30
-rw-r--r--js/lib/rdge/materials/water-material.js172
-rwxr-xr-xjs/panels/Materials/materials-popup.reel/materials-popup.js2
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;
8const float PI = 3.1415926535897932; 8const float PI = 3.1415926535897932;
9 9
10//speed 10//speed
11const float speed = 0.2; 11//const float speed = 0.2;
12const float speed_x = 0.3; 12const float speed_x = 0.3;
13const float speed_y = 0.3; 13const float speed_y = 0.3;
14 14
15// geometry 15// geometry
16const float intensity = 3.; 16//const float intensity = 3.;
17const int steps = 8; 17const int steps = 8;
18const float frequency = 4.0; 18const float frequency = 4.0;
19const int angle = 7; // better when a prime 19const int angle = 7; // better when a prime
20 20
21// reflection and emboss 21// reflection and emboss
22const float delta = 20.; 22//const float delta = 20.;
23const float intence = 400.; 23const float intence = 400.;
24const float emboss = 0.3; 24//const float emboss = 0.3;
25
26// uniforms
27uniform float u_emboss;
28uniform float u_delta;
29//uniform float u_intence;
30uniform float u_intensity;
31uniform 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)
49vec2 p = (gl_FragCoord.xy) / u_resolution.xy, c1 = p, c2 = p; 56vec2 p = (gl_FragCoord.xy) / u_resolution.xy, c1 = p, c2 = p;
50float cc1 = col(c1); 57float cc1 = col(c1);
51 58
52c2.x += u_resolution.x/delta; 59c2.x += u_resolution.x/u_delta;
53float dx = emboss*(cc1-col(c2))/delta; 60float dx = u_emboss*(cc1-col(c2))/u_delta;
54 61
55c2.x = p.x; 62c2.x = p.x;
56c2.y += u_resolution.y/delta; 63c2.y += u_resolution.y/u_delta;
57float dy = emboss*(cc1-col(c2))/delta; 64float dy = u_emboss*(cc1-col(c2))/u_delta;
58 65
59c1.x += dx; 66c1.x += dx;
60c1.y = -(c1.y+dy); 67c1.y = -(c1.y+dy);
61 68
62float alpha = 1.+dot(dx,dy)*intence; 69float alpha = 1.+dot(dx,dy)*intence;
63gl_FragColor = texture2D(u_tex0,c1)*(alpha); 70gl_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
165 var material = this._materialNode;
166 if (material) {