aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--assets/shaders/Cloud.frag.glsl4
-rw-r--r--assets/shaders/Cloud.vert.glsl5
-rw-r--r--js/lib/rdge/materials/cloud-material.js74
3 files changed, 61 insertions, 22 deletions
diff --git a/assets/shaders/Cloud.frag.glsl b/assets/shaders/Cloud.frag.glsl
index c21dcf97..3d466a24 100644
--- a/assets/shaders/Cloud.frag.glsl
+++ b/assets/shaders/Cloud.frag.glsl
@@ -18,7 +18,7 @@ varying vec2 v_texCoord0;
18void main() 18void main()
19{ 19{
20 vec4 c = texture2D(u_tex0, v_texCoord0); 20 vec4 c = texture2D(u_tex0, v_texCoord0);
21 //c.a *= u_surfaceAlpha; 21 c.a *= u_surfaceAlpha;
22 gl_FragColor = c; 22 gl_FragColor = c;
23} 23}
24 \ No newline at end of file 24 \ No newline at end of file
diff --git a/assets/shaders/Cloud.vert.glsl b/assets/shaders/Cloud.vert.glsl
index c8ca9f3f..acd581fc 100644
--- a/assets/shaders/Cloud.vert.glsl
+++ b/assets/shaders/Cloud.vert.glsl
@@ -22,19 +22,19 @@ uniform float u_surfaceAlpha;
22// matrix uniforms 22// matrix uniforms
23uniform mat4 u_mvMatrix; 23uniform mat4 u_mvMatrix;
24uniform mat4 u_projMatrix; 24uniform mat4 u_projMatrix;
25uniform mat4 u_worldMatrix;
26 25
27// varying 26// varying
28varying vec2 v_texCoord0; 27varying vec2 v_texCoord0;
29 28
30// constants 29// constants
31const float zSpeed = 2.0; 30const float zSpeed = 10.0;
32 31
33 32
34void main() 33void main()
35{ 34{
36 // Transform position 35 // Transform position
37 vec4 pos = vec4(a_pos,1); 36 vec4 pos = vec4(a_pos,1);
37
38 float dz = u_time*zSpeed; 38 float dz = u_time*zSpeed;
39 float n = floor( dz/(u_zmax-u_zmin) ); 39 float n = floor( dz/(u_zmax-u_zmin) );
40 dz -= n*(u_zmax - u_zmin); 40 dz -= n*(u_zmax - u_zmin);
@@ -44,6 +44,7 @@ void main()
44 z = u_zmin + (z - u_zmax); 44 z = u_zmin + (z - u_zmax);
45 } 45 }
46 pos.z = z; 46 pos.z = z;
47
47 gl_Position = u_projMatrix * u_mvMatrix * pos; 48 gl_Position = u_projMatrix * u_mvMatrix * pos;
48 49
49 v_texCoord0 = texcoord; 50 v_texCoord0 = texcoord;
diff --git a/js/lib/rdge/materials/cloud-material.js b/js/lib/rdge/materials/cloud-material.js
index 2b40b84c..28796c42 100644
--- a/js/lib/rdge/materials/cloud-material.js
+++ b/js/lib/rdge/materials/cloud-material.js
@@ -22,8 +22,8 @@ var CloudMaterial = function CloudMaterial() {
22 this._name = "CloudMaterial"; 22 this._name = "CloudMaterial";
23 this._shaderName = "cloud"; 23 this._shaderName = "cloud";
24 24
25 //this._texMap = 'assets/images/cloud10.png'; 25 this._texMap = 'assets/images/cloud10.png';
26 this._texMap = 'assets/images/us_flag.png'; 26 //this._texMap = 'assets/images/us_flag.png';
27 //this._texMap = 'assets/images/cubelight.png'; 27 //this._texMap = 'assets/images/cubelight.png';
28 this._diffuseColor = [0.5, 0.5, 0.5, 0.5]; 28 this._diffuseColor = [0.5, 0.5, 0.5, 0.5];
29 29
@@ -36,8 +36,15 @@ var CloudMaterial = function CloudMaterial() {
36 // parameter initial values 36 // parameter initial values
37 this._time = 0.0; 37 this._time = 0.0;
38 this._surfaceAlpha = 0.5; 38 this._surfaceAlpha = 0.5;
39 this._zmin = 6.0; 39 this._zmin = 2.0;
40 this._zmax = 10; 40 this._zmax = 5.0;
41
42 // the adjusted zMin and zMax values are
43 // what get sent to the shader. They are initialized
44 // in buildGeometry
45 this._adjustedZMin = this._zmin;
46 this._adjustedZMax = this._zmax;
47
41 48
42 49
43 /////////////////////////////////////////////////////////////////////// 50 ///////////////////////////////////////////////////////////////////////
@@ -129,9 +136,9 @@ var CloudMaterial = function CloudMaterial() {
129 136
130 ////////////////////////////////////////////////////////////////////////////////// 137 //////////////////////////////////////////////////////////////////////////////////
131 // IS THIS NECESSARY?? 138 // IS THIS NECESSARY??
132 var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height, 139// var elementModel = TagTool.makeElement(~~srcCanvas.width, ~~srcCanvas.height,
133 Matrix.I(4), [0,0,0], srcCanvas); 140// Matrix.I(4), [0,0,0], srcCanvas);
134 ElementMediator.addElement(srcCanvas, elementModel.data, true); 141// ElementMediator.addElement(srcCanvas, elementModel.data, true);
135 ////////////////////////////////////////////////////////////////////////////////// 142 //////////////////////////////////////////////////////////////////////////////////
136 143
137 // build the source. 144 // build the source.
@@ -202,6 +209,13 @@ var CloudMaterial = function CloudMaterial() {
202 209
203 this.update = function( time ) 210 this.update = function( time )
204 { 211 {
212 if (this._srcWorld)
213 {
214 this._srcWorld.update();
215 this._srcWorld.draw();
216 g_Engine.setContext( this.getWorld()._canvas.rdgeid );
217 }
218
205 var technique, renderer, tex; 219 var technique, renderer, tex;
206 220
207 // update the cloud map material 221 // update the cloud map material
@@ -275,8 +289,8 @@ var CloudMaterial = function CloudMaterial() {
275 { 289 {
276 t.u_time.set( [this._time] ); 290 t.u_time.set( [this._time] );
277 t.u_surfaceAlpha.set( [this._surfaceAlpha] ); 291 t.u_surfaceAlpha.set( [this._surfaceAlpha] );
278 t.u_zmin.set( [this._zmin] ); 292 t.u_zmin.set( [this._adjustedZMin] );
279 t.u_zmax.set( [this._zmax] ); 293 t.u_zmax.set( [this._adjustedZMax] );
280 294
281 var wrap = 'REPEAT', mips = true; 295 var wrap = 'REPEAT', mips = true;
282 var texMapName = this._propValues[this._propNames[0]]; 296 var texMapName = this._propValues[this._propNames[0]];
@@ -331,30 +345,49 @@ var CloudMaterial = function CloudMaterial() {
331 //this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial); 345 //this.createFill([x,y], 2*xFill, 2*yFill, tlRadius, blRadius, brRadius, trRadius, fillMaterial);
332 var ctr = [x,y], width = 2*hWidth, height = 2*hHeight; 346 var ctr = [x,y], width = 2*hWidth, height = 2*hHeight;
333 var cloudSize = width > height ? 0.25*width : 0.25*height; 347 var cloudSize = width > height ? 0.25*width : 0.25*height;
348 var left = x - hHeight,
349 top = y - hHeight;
334 350
335 // calculate the range of z's in GL space from 351 // get the GL projection matrix so wecan calculate the z values from the user input z values
336 // the user specified range
337 var zNear = world.getZNear(), zFar = world.getZFar(); 352 var zNear = world.getZNear(), zFar = world.getZFar();
338 var zMin = (-(this._zmin - world.getViewDistance())*(zFar - zNear) + 2.0*zFar*zNear)/(zFar + zNear), 353 var viewDist = world.getViewDistance();
339 zMax = (-(this._zmax - world.getViewDistance())*(zFar - zNear) + 2.0*zFar*zNear)/(zFar + zNear); 354 var projMat = Matrix.makePerspective( world.getFOV(), world.getAspect(), world.getZNear(), world.getZFar());
340 if (zMin > zMax) { var t = zMin; zMin = zMax; zMax = t; } 355 var camMat = world.getCameraMat();
341 var dz = zMax - zMin; 356 var camMatInv = glmat4.inverse( camMat, [] );
357 var glCompleteMat = glmat4.multiply( projMat, camMatInv, [] );
358 var zw1_c = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -zNear + viewDist], glCompleteMat )[2],
359 zw2_c = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -zFar + viewDist], glCompleteMat )[2];
360 var glCompleteMatInv = glmat4.inverse( glCompleteMat, [] );
361 var zMin = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -this._zmin + viewDist], glCompleteMat )[2],
362 zMax = MathUtils.transformAndDivideHomogeneousPoint( [0,0, -this._zmax + viewDist], glCompleteMat )[2];
363
364 zMax = -this._zmin + viewDist;
365 zMin = -this._zmax + viewDist;
366 dz = zMax - zMin;
367
368 // the adjusted values are what get sent to the shader
369 this._adjustedZMin = zMin;
370 this._adjustedZMax = zMax;
342 371
372
373 // build the polygons
343 var verts = [], 374 var verts = [],
344 normals = [ [0,0,1], [0,0,1], [0,0,1], [0,0,1] ], 375 normals = [ [0,0,1], [0,0,1], [0,0,1], [0,0,1] ],
345 uvs = [ [0,0], [1,0], [1,1], [0,1] ]; 376 uvs = [ [0,0], [1,0], [1,1], [0,1] ];
346 377
347 for ( i = 0; i < 20; i++ ) 378 for ( i = 0; i < 20; i++ )
348 { 379 {
349 var x = hWidth*2*(Math.random() - 0.5), 380// var x = hWidth*2*(Math.random() - 0.5),
350 //y = hHeight*2.0*(Math.random() * Math.random() - 0.5), 381// y = hHeight*2.0*(Math.random() - 0.5),
351 y = hHeight*2.0*(Math.random() - 0.5), 382 var x = left + Math.random()*width,
383 y = top + Math.random()*height,
352 z = zMin + Math.random()*dz; 384 z = zMin + Math.random()*dz;
353 zRot = (Math.random() - 0.5) * Math.PI, 385 zRot = (Math.random() - 0.5) * Math.PI,
354 sz = cloudSize * Math.random(); 386 sz = cloudSize * Math.random();
355 387
356 //x = 0.0; y = 0.0; z = 0.0; 388 //x = 0.0; y = 0.0; z = 0.0;
357 //zRot = 0.0; 389 //zRot = 0.0;
390 //z = 0;
358 391
359 verts[0] = [-sz, -sz, 0]; 392 verts[0] = [-sz, -sz, 0];
360 verts[1] = [-sz, sz, 0]; 393 verts[1] = [-sz, sz, 0];
@@ -370,6 +403,11 @@ var CloudMaterial = function CloudMaterial() {
370 glmat4.multiplyVec3( mat, verts[2] ); 403 glmat4.multiplyVec3( mat, verts[2] );
371 glmat4.multiplyVec3( mat, verts[3] ); 404 glmat4.multiplyVec3( mat, verts[3] );
372 405
406 var tmp0 = MathUtils.transformAndDivideHomogeneousPoint( verts[0], glCompleteMat ),
407 tmp1 = MathUtils.transformAndDivideHomogeneousPoint( verts[1], glCompleteMat ),
408 tmp2 = MathUtils.transformAndDivideHomogeneousPoint( verts[2], glCompleteMat ),
409 tmp3 = MathUtils.transformAndDivideHomogeneousPoint( verts[3], glCompleteMat );
410
373 RectangleGeometry.addQuad( verts, normals, uvs ); 411 RectangleGeometry.addQuad( verts, normals, uvs );
374 } 412 }
375 413